/* ------------------------------------------------------------------
   THE POST OFFICE MOSS VALE, home page, ROUND 3

   THE TOP OF THE PAGE IS NOT REDRAWN. Every piece of lettering, every
   rule, the postmark, the stamp, the postcard and the paper are the
   approved mock's own pixels, lifted at 2x by _build/cut_assets.py.

   The hero is the mock's 1161 x 1355 canvas at 1440, so every position
   in that block is a mock coordinate times 1.24031, less the 136 px the
   header now occupies above it. Inside the two groups the children are
   placed in PER CENT of the group, which is what lets the same assets
   reflow on a phone without being redrawn.

   MILESTONE 1 added, below the postcard row, one postal object per
   section. The mock shows only the top of the page, so there are no
   pixels to cut for these: they are built from the same materials the
   mock uses, on the mock's own paper, in the locked palette, at the
   mock's own perforation gauge. Nothing here invents a new colour, a
   new face or a new mark.

   Ours: the photographs, the crest, and the five nav links. Everything
   else at the top is the mock.
   ------------------------------------------------------------------ */

/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/Wnz6HAc5bAfYB2Q7azYYiAzcPDKo.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/Wnz6HAc5bAfYB2Q7YjYYiAzcPDKo.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/Wnz6HAc5bAfYB2Q7aDYYiAzcPDKo.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/Wnz6HAc5bAfYB2Q7ZjYYiAzcPA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/u-450q2lgwslOqpF_6gQ8kELaw9pWs39pvnRPA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/u-450q2lgwslOqpF_6gQ8kELawFpWs39pvk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/u-4k0q2lgwslOqpF_6gQ8kELY7pMT-7fq9PrNX2-Ag.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/u-4k0q2lgwslOqpF_6gQ8kELY7pMT-Dfq9PrNX0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Rye';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/r05XGLJT86YzH57tfumh4gok.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rye';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/r05XGLJT86YzEZ7tfumh4g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Berkshire Swash';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ptRRTi-cavZOGqCvnNJDl5m5XmN_pM4zT305QaYc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Berkshire Swash';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ptRRTi-cavZOGqCvnNJDl5m5XmN_qs4zT305QQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Elsie Swash Caps';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/845DNN8xGZyVX5MVo_upKf7KnjK0TePfKUevQo6JtA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Elsie Swash Caps';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/845DNN8xGZyVX5MVo_upKf7KnjK0Te3fKUevQo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Elsie Swash Caps';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/845ENN8xGZyVX5MVo_upKf7KnjK0RW74PGSNT6SzvdRzvQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Elsie Swash Caps';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/845ENN8xGZyVX5MVo_upKf7KnjK0RW74PGqNT6SzvdQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/OpNJno4ck8vc-xYpwWWxliBVWzfAw0blNQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/OpNJno4ck8vc-xYpwWWxlilVWzfAw0blNQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/OpNJno4ck8vc-xYpwWWxliJVWzfAw0blNQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/OpNJno4ck8vc-xYpwWWxliNVWzfAw0blNQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/OpNJno4ck8vc-xYpwWWxli1VWzfAw0Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tinos, ital,wght@0,400;0,700;1,400 */
@font-face {
  font-family: 'Tinos';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/buE2poGnedXvwjX-TmhJ9QA98NRyYw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Tinos';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/buE2poGnedXvwjX-TmZJ9QA98NQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/buE4poGnedXvwjX1fmRD8iI_wNU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/buE4poGnedXvwjX7fmRD8iI_.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/buE1poGnedXvwj1AW3Fg0C8V-txKWiw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/buE1poGnedXvwj1AW3Fu0C8V-txK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Generated by _build/make_perf_mask.py. Do not hand edit.
   The perforated silhouette of the small stamps, at the mock's own
   gauge: 6 x 7 teeth, 33 px pitch, 27 px scallop.
   It is a data URI because a file:// mask-image is blocked by the
   browser's origin rules and a blocked mask hides the element. */
.perf {
  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYwAAAHOCAQAAAAhoPamAAAIjUlEQVR42u3dwbarKBBAUeH//zlv+AZ6E0BIsGrvYQ96Edc9KTqiXY6feb2u/mkp1mANv1rDf/UAhAHCAGGAMCBmGNe/Qfz9z63BGkwMsJUCYTQMyG8NT2uwBhMDhAGPDOPTcPzG8LQGazAxYP8wWvpf/R1hDdawWRitH3HlpbAGa7CVgv3D6Ol+1XeENVjDZmH0frQVl8IarGGzMEY+1uxLYQ3WsFkYox9p5qWwBmvYLIw7H2fWpbAGa9gsjLsfZcalsAZr6FF2j2LGi1SswRo2mxh2xtaw2xp+PjHWLLzve8IarGGjMNbvAT9fDmuwhh+E8XpdL+W7dyetwRpa1jCSTdn7RzP4zTRxiBCEAcIAYYAwQBggDBAGCAOEASnDcCCEpxj7WzUxQBiwMAwbKaJvpkwMEAYsC8NGivibKRMDZoRhXpBhZlRZIA1bKZgfhnlBlplRZYE0boQhCzKlUWWBNAbDkAXZ0qiyQBpH77trRcGR8q22VRaYGx0TQxRknhtFEnDOo0gCznkUMYBDhCAMEAYIA4QBwgBhgDBAGCAMiMZZKbg6K3U4XQvvT9fKA0k0PNoqDrI+3FpHn4mFyM98F28JQRRDP9eaG2TLovE+hjTIlUXzDT5pkCmLjjvf0iBPFl1HQqRBliw6z0pJgxxZOEQIM8IwM8gwLwYmhjSIn4WtFMwKw8wg+rwwMUAYsDQMmylib6RMDBAGLA7DZorIGykTA4QBwgBhgDBAGCAMEAYIA4QBScPwPlueYuxv1cQAYcDCMGykiL6ZMjFAGLAsDBsp4m+mTAyYEYZ5QYaZUWWBNGylYH4Y5gVZZkaVBdK4EYYsyJRGlQXSGAxDFmRLo8oCaZwVUXB4q23fxJAFWedGEQXmRlMYkkAeRRJwzqOIARwiBGGAMEAYIAwQBggDhAHCAGFANM5KwdVZqcPpWnh/ulYeSKLh0VZxkPXh1jr6TCxEfua7eEsIohj6udbcIFsWjfcxpEGuLJpv8EmDTFl03PmWBnmy6DoSIg2yZNF5Vkoa5MjCIUKYEYaZQYZ5MTAxpEH8LGylYFYYZgbR54WJAcKApWHYTBF7I2VigDBgcRg2U0TeSJkYIAwQBggDhAHCAGGAMEAYIAxIGob32fIUY3+rJgYIAxaGYSNF9M2UiQHCgGVh2EgRfzNlYsCMMMwLMsyMKgukYSsF88MwL8gyM6oskMaNMGRBpjSqLJDGYBiyIFsaVRZI46yIgsNbbfsmhizIOjeKKDA3msKQBPIokoBzHkUM4BAhCAOEAcIAYYAwQBggDBAGCAOicVYKrs5KHU7XwvvTtfJAEg2PtoqDrA+31tFnYiHyM9/FW0IQxdDPteYG2bJovI8hDXJl0XyDTxpkyqLjzrc0yJNF15EQaZAli86zUtIgRxYOEcKMMMwMMsyLgYkhDeJnYSsFs8IwM4g+L0wMEAYsDcNmitgbKRMDhAGLw7CZIvJGysQAYYAwQBggDBAGCAOEAcIAYUDSMLzPlqcY+1s1MUAYsDAMGymib6ZMDBAGLAvDRor4mykTA2aEYV6QYWZUWSANWymYH4Z5QZaZUWWBNG6EIQsypVFlgTQGw5AF2dKoskAaZ0UUHN5q2zcxZEHWuVFEgbnRFIYkkEeRBJzzKGIAhwhBGCAMEAYIA4QBwgBhgDBAGBCNs1JwdVbqcLoW3p+ulQeSaHi0VRxkfbi1jj4TC5Gf+S7eEoIohn6uNTfIlkXjfQxpkCuL5ht80iBTFh13vqVBniy6joRIgyxZdJ6VkgY5snCIEGaEYWaQYV4MTAxpED8LWymYFYaZQfR5YWKAMGBpGDZTxN5ImRggDFgchs0UkTdSJgYIA4QBwgBhgDBAGCAMEAYIA5KG4X22PMXY36qJAcKAhWHYSBF9M2VigDBgWRg2UsTfTJkYMCMM84IMM6PKAmnYSsH8MMwLssyMKgukcSMMWZApjSoLpDEYhizIlkaVBdI4K6Lg8FbbvokhC7LOjSIKzI2mMCSBPIok4JxHEQM4RAjCAGGAMEAYIAwQBggDhAHCgGiclYKrs1KH07Xw/nStPJBEw6Ot4iDrw6119JlYiPzMd/GWEEQx9HOtuUG2LBrvY0iDXFk03+CTBpmy6LjzLQ3yZNF1JEQaZMmi86yUNMiRhUOEMCMMM4MM82JgYkiD+FnYSsGsMMwMos8LEwOEAUvDsJki9kbKxABhwOIwbKaIvJEyMUAYIAwQBggDhAHCAGGAMEAYkDQM77PlKcb+Vk0MEAYsDMNGiuibKRMDhAHLwrCRIv5mysSAGWGYF2SYGVUWSMNWCuaHYV6QZWZUWSCNG2HIgkxpVFkgjcEwZEG2NKoskMZZEQWHt9r2TQxZkHVuFFFgbjSFIQnkUSQB5zyKGMAhQhAGCAOEAcIAYYAwQBggDBAGROOsFFydlTqcroX3p2vlgSQaHm0VB1kfbq2jz8RC5Ge+i7eEIIqhn2vNDbJl0XgfQxrkyqL5Bp80yJRFx51vaZAni64jIdIgSxadZ6WkQY4sHCKEGWGYGWSYFwMTQxrEz8JWCmaFYWYQfV6YGCAMWBqGzRSxN1ImBggDFodhM0XkjZSJAcIAYYAwQBggDBAGCAOEAcKAI9L/OKbd63V9o/2777m1BmtoWcPIoZAlZ57WX47PH9UarOEHE+N3efRdAmuwhu3CmH8xxi6CNVjDdv/xPXPpo/8ua7CG7SbGrO+J+xfBGqxhu59r736MGZfBGqxhw/sYdz7KrMtgDdaw4Q0+O2Nr2G0Nm9z5HrrNUqzBGn7xroG682PpKy6DNVjDhmelej7asls31mANDhHCI8Jo7X7l94M1WMOGE6PlI66+DNZgDbZS8IwwPvX/je8Ha7AGEwOEAY8N491w/NbgtAZrMDFAGPDYMP4akN8cnNZgDSYGCAOEAcKAb/gHs9n5aMqw88wAAAAASUVORK5CYII=");
  mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYwAAAHOCAQAAAAhoPamAAAIjUlEQVR42u3dwbarKBBAUeH//zlv+AZ6E0BIsGrvYQ96Edc9KTqiXY6feb2u/mkp1mANv1rDf/UAhAHCAGGAMCBmGNe/Qfz9z63BGkwMsJUCYTQMyG8NT2uwBhMDhAGPDOPTcPzG8LQGazAxYP8wWvpf/R1hDdawWRitH3HlpbAGa7CVgv3D6Ol+1XeENVjDZmH0frQVl8IarGGzMEY+1uxLYQ3WsFkYox9p5qWwBmvYLIw7H2fWpbAGa9gsjLsfZcalsAZr6FF2j2LGi1SswRo2mxh2xtaw2xp+PjHWLLzve8IarGGjMNbvAT9fDmuwhh+E8XpdL+W7dyetwRpa1jCSTdn7RzP4zTRxiBCEAcIAYYAwQBggDBAGCAOEASnDcCCEpxj7WzUxQBiwMAwbKaJvpkwMEAYsC8NGivibKRMDZoRhXpBhZlRZIA1bKZgfhnlBlplRZYE0boQhCzKlUWWBNAbDkAXZ0qiyQBpH77trRcGR8q22VRaYGx0TQxRknhtFEnDOo0gCznkUMYBDhCAMEAYIA4QBwgBhgDBAGCAMiMZZKbg6K3U4XQvvT9fKA0k0PNoqDrI+3FpHn4mFyM98F28JQRRDP9eaG2TLovE+hjTIlUXzDT5pkCmLjjvf0iBPFl1HQqRBliw6z0pJgxxZOEQIM8IwM8gwLwYmhjSIn4WtFMwKw8wg+rwwMUAYsDQMmylib6RMDBAGLA7DZorIGykTA4QBwgBhgDBAGCAMEAYIA4QBScPwPlueYuxv1cQAYcDCMGykiL6ZMjFAGLAsDBsp4m+mTAyYEYZ5QYaZUWWBNGylYH4Y5gVZZkaVBdK4EYYsyJRGlQXSGAxDFmRLo8oCaZwVUXB4q23fxJAFWedGEQXmRlMYkkAeRRJwzqOIARwiBGGAMEAYIAwQBggDhAHCAGFANM5KwdVZqcPpWnh/ulYeSKLh0VZxkPXh1jr6TCxEfua7eEsIohj6udbcIFsWjfcxpEGuLJpv8EmDTFl03PmWBnmy6DoSIg2yZNF5Vkoa5MjCIUKYEYaZQYZ5MTAxpEH8LGylYFYYZgbR54WJAcKApWHYTBF7I2VigDBgcRg2U0TeSJkYIAwQBggDhAHCAGGAMEAYIAxIGob32fIUY3+rJgYIAxaGYSNF9M2UiQHCgGVh2EgRfzNlYsCMMMwLMsyMKgukYSsF88MwL8gyM6oskMaNMGRBpjSqLJDGYBiyIFsaVRZI46yIgsNbbfsmhizIOjeKKDA3msKQBPIokoBzHkUM4BAhCAOEAcIAYYAwQBggDBAGCAOicVYKrs5KHU7XwvvTtfJAEg2PtoqDrA+31tFnYiHyM9/FW0IQxdDPteYG2bJovI8hDXJl0XyDTxpkyqLjzrc0yJNF15EQaZAli86zUtIgRxYOEcKMMMwMMsyLgYkhDeJnYSsFs8IwM4g+L0wMEAYsDcNmitgbKRMDhAGLw7CZIvJGysQAYYAwQBggDBAGCAOEAcIAYUDSMLzPlqcY+1s1MUAYsDAMGymib6ZMDBAGLAvDRor4mykTA2aEYV6QYWZUWSANWymYH4Z5QZaZUWWBNG6EIQsypVFlgTQGw5AF2dKoskAaZ0UUHN5q2zcxZEHWuVFEgbnRFIYkkEeRBJzzKGIAhwhBGCAMEAYIA4QBwgBhgDBAGBCNs1JwdVbqcLoW3p+ulQeSaHi0VRxkfbi1jj4TC5Gf+S7eEoIohn6uNTfIlkXjfQxpkCuL5ht80iBTFh13vqVBniy6joRIgyxZdJ6VkgY5snCIEGaEYWaQYV4MTAxpED8LWymYFYaZQfR5YWKAMGBpGDZTxN5ImRggDFgchs0UkTdSJgYIA4QBwgBhgDBAGCAMEAYIA5KG4X22PMXY36qJAcKAhWHYSBF9M2VigDBgWRg2UsTfTJkYMCMM84IMM6PKAmnYSsH8MMwLssyMKgukcSMMWZApjSoLpDEYhizIlkaVBdI4K6Lg8FbbvokhC7LOjSIKzI2mMCSBPIok4JxHEQM4RAjCAGGAMEAYIAwQBggDhAHCgGiclYKrs1KH07Xw/nStPJBEw6Ot4iDrw6119JlYiPzMd/GWEEQx9HOtuUG2LBrvY0iDXFk03+CTBpmy6LjzLQ3yZNF1JEQaZMmi86yUNMiRhUOEMCMMM4MM82JgYkiD+FnYSsGsMMwMos8LEwOEAUvDsJki9kbKxABhwOIwbKaIvJEyMUAYIAwQBggDhAHCAGGAMEAYkDQM77PlKcb+Vk0MEAYsDMNGiuibKRMDhAHLwrCRIv5mysSAGWGYF2SYGVUWSMNWCuaHYV6QZWZUWSCNG2HIgkxpVFkgjcEwZEG2NKoskMZZEQWHt9r2TQxZkHVuFFFgbjSFIQnkUSQB5zyKGMAhQhAGCAOEAcIAYYAwQBggDBAGROOsFFydlTqcroX3p2vlgSQaHm0VB1kfbq2jz8RC5Ge+i7eEIIqhn2vNDbJl0XgfQxrkyqL5Bp80yJRFx51vaZAni64jIdIgSxadZ6WkQY4sHCKEGWGYGWSYFwMTQxrEz8JWCmaFYWYQfV6YGCAMWBqGzRSxN1ImBggDFodhM0XkjZSJAcIAYYAwQBggDBAGCAOEAcKAI9L/OKbd63V9o/2777m1BmtoWcPIoZAlZ57WX47PH9UarOEHE+N3efRdAmuwhu3CmH8xxi6CNVjDdv/xPXPpo/8ua7CG7SbGrO+J+xfBGqxhu59r736MGZfBGqxhw/sYdz7KrMtgDdaw4Q0+O2Nr2G0Nm9z5HrrNUqzBGn7xroG682PpKy6DNVjDhmelej7asls31mANDhHCI8Jo7X7l94M1WMOGE6PlI66+DNZgDbZS8IwwPvX/je8Ha7AGEwOEAY8N491w/NbgtAZrMDFAGPDYMP4akN8cnNZgDSYGCAOEAcKAb/gHs9n5aMqw88wAAAAASUVORK5CYII=");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
   /* the stamp perforation mask, generated */

:root {
  --stage-w: 1440px;
  /* --stage-h was declared here and never read: both stages take their
     proportions from aspect-ratio. A constant that describes a layout and is
     not wired to it is the bug this project already recorded this week. */
  --head-h: 128px;          /* the mock's navy bar, 103 mock px */
  --rule-h: 8px;            /* the mock rows 103 to 110 at 1.24031, and the
                               number that keeps the header at exactly 136,
                               so everything below lands on the mock grid */

  --navy: #1F314E;          /* sampled from the mock's own nav bar */
  --gold: #B8893C;
  --gold-light: #F4D088;    /* the highlight in the mock's own gilt rule */
  --brown: #6B4F3A;
  --red: #C8102E;
  --card: #F9F3E5;
  --ground: #F4EFE5;        /* the mock's paper, behind the tile */
  --navy-deep: #16243C;     /* the one pressed navy. #1A2842 was a second one */
  --gilt: #D8B87E;          /* the light gold that CARRIES TEXT on navy, 6.89:1.
                               Distinct from --gold-light, which is a highlight
                               in the mock's own rule and never sets type */

  /* Ink on navy. Seven near-whites had accreted one at a time (#F2EDE1,
     #F6F1E6, #EFE9DC, #F4EFE3, #F0EADD, #E7E0D0, #B9B0A0) and no eye can tell
     the first five apart. These three are the ones whose contrast was already
     measured and passed, so nothing needed re-proving, only naming. */
  --on-navy: #F2EDE1;       /* primary, 11.18:1 */
  --on-navy-2: #E7E0D0;     /* secondary, the footer's facts */
  --on-navy-muted: #B9B0A0; /* small print, 6.08:1 */

  /* Motion. One curve and two durations for the whole page, so nothing has to
     invent its own. The curve is a decelerating ease-out: things arrive with
     weight and settle, which is how paper behaves. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 160ms;
  --t-slow: 520ms;

  /* Depth. A single 26px blur thrown 14px down is Material elevation, and this
     page is about printed paper. Paper on paper casts a tight dark contact
     shadow at its edge and a much wider, fainter one beyond it, so that is two
     shadows, not one. Same total darkness. */
  --shadow-card: 0 1px 2px rgba(43, 33, 24, 0.22), 0 12px 24px rgba(43, 33, 24, 0.11);
  --shadow-stamp: drop-shadow(0 1px 1px rgba(43, 33, 24, 0.26)) drop-shadow(0 6px 10px rgba(43, 33, 24, 0.14));

  --rule-gold: rgba(184, 137, 60, 0.55);
  --rule-brown: rgba(107, 79, 58, 0.34);

  --roman: "Tinos", "Times New Roman", Times, serif;
  --type: "Courier Prime", "Courier New", monospace;

  --pad: 48px;              /* the mock's own left margin, 38 mock px */
  --bl: 8px;                /* baseline */
  --section: 104px;         /* 13 baselines between objects */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background-color: var(--ground);
}

body {
  font-family: var(--type);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  /* One continuous sheet of the mock's own paper, under the whole page.
     THE TILE IS MIRRORED. The 600 px crop is a crop, not a tile: its right edge
     has no reason to continue into its left, and measured on the file the jump
     across that wrap is SEVEN TIMES a normal step between neighbouring columns,
     which drew a visible ruled line every 372 px down the whole page.
     `_build/make_paper_tile.py` lays the crop beside its own mirror image, so
     both joints are a column against itself and the seam measures 0.00. Not one
     pixel of the mock's paper is altered; every pixel is the original's, once
     forwards and once backwards. The tile is twice as wide, so the size is too,
     and the grain is at exactly the scale it was. */
  background-image: url("https://static.wixstatic.com/media/37bf5c_ea396aea8faa408dab50fa6ceb094415~mv2.png");
  background-size: 744px 74px;
  background-repeat: repeat;
}

/* height: auto is LOAD BEARING, not tidiness. Round 4 put real width and height
   attributes on every image for CLS, and an attribute height plus max-width and
   no CSS height means the browser honours BOTH: the width is capped and the
   height is not, so the picture is squashed. It cost the hero's fourth line,
   "Post Office.", which was crushed out of its own box until this was added.
   Every element that needs a real height sets one on a more specific selector,
   so this only ever governs the images that had no height of their own. */
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.head :focus-visible, .env :focus-visible { outline-color: var(--gold-light); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--navy); color: var(--ground); padding: 12px 16px;
  font: 400 13px/1 var(--roman); letter-spacing: 0.14em;
}
.skip:focus { left: 0; }

/* Present for a screen reader, absent on the page. The reviews section is a
   single struck mark and a visible heading over it would be clutter, but
   [hidden] would take the heading out of the outline altogether. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.wrap { width: min(100%, var(--stage-w)); margin: 0 auto; padding: 0 var(--pad); }

/* ================================================================ NAV

   The wordmark is still the mock's own pixels, cut at x 600 of the strip
   by _build/cut_nav.py. The mock's three links are dropped: a bar made of
   pixels has no anchors, no hover, no keyboard focus, no crawlable href
   and no way to show a current page across seven pages. They are replaced
   by live text in Tinos, which is the face measured against the mock's
   own lettering in _build/_navfont/.
   ================================================================= */

.head { position: relative; z-index: 20; }

.head__bar {
  position: relative;
  height: var(--head-h);
  background: var(--navy);
}

/* The mock carries a gilt rule under the bar, mock rows 103 to 110, which
   round 3 had dropped. It is the mock's own pixels, not a CSS gradient: a
   hand-mixed gradient measured 60 of 255 against the mock's own and the cut
   measures under 3. The rule does not vary along its length, so stretching
   it across any width costs nothing. */
.head__rule {
  height: var(--rule-h);
  background-image: url("https://static.wixstatic.com/media/37bf5c_9c28807dac84487486ce50b61d7c762f~mv2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.head__inner {
  position: relative;
  width: min(100%, var(--stage-w));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* At 1440 the crest and the wordmark are placed at the mock's own pixel
   positions, so the wrapper must not introduce a box of its own. */
.head__brand { display: contents; }

/* the crest is the Home link, at the mock's own position and size */
.head__home {
  position: absolute; left: 44px; top: 3px;
  width: 122px; height: 122px;
  display: block;
}
/* colour: these two anchors hold nothing but an image and a clipped label, so
   no ink of theirs can render. Set anyway, so "no link on this page is the
   browser's default blue" is a check that can simply be true. */
.head__home, .postcard__enquire { color: inherit; text-decoration: none; }
.head__home img { width: 100%; height: 100%; object-fit: contain; }

.head__word {
  position: absolute; left: 243px; top: 0;
  width: 371.8px; height: var(--head-h);
}

.head__links {
  margin-left: auto;
  margin-right: var(--pad);
  display: flex;
  align-items: center;
  gap: 32px;
}

.head__links a {
  font-family: var(--roman);
  font-size: 19px;
  line-height: 24px;
  color: var(--on-navy);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 8px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.head__links a:hover, .head__links a:focus-visible { border-bottom-color: var(--gold-light); }
.head__links a[aria-current="page"] { border-bottom-color: var(--gold); }

/* `.head__links a.head__cta`, NOT `.head__cta`. The Enquire button IS a link
   inside `.head__links`, so `.head__links a` above matched it too and, at
   (0,2,0) against (0,1,0), beat every property this rule and that one both set:
   the button was drawn at 19 px not 18, with 8 px of bottom padding instead of
   12, and with `border-bottom: 1px solid transparent` over its gold border, so
   the box on the navy bar was missing its bottom edge. Visible in the round 9
   proofs once it was pointed at. Codex, 2026-09-21. The class is now qualified
   by the element and the row it sits in, which puts it above the row's rule
   without an `!important` anywhere. */
.head__links a.head__cta {
  font-family: var(--roman);
  font-size: 18px;
  line-height: 24px;
  color: var(--on-navy);
  text-decoration: none;
  white-space: nowrap;
  padding: 12px 24px;
  border: 1px solid var(--gold);
  background: rgba(216, 184, 126, 0.15);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.head__links a.head__cta:hover,
.head__links a.head__cta:focus-visible { background: var(--gold); color: var(--navy-deep); }

.head__burger { display: none; }

/* =============================================================== HERO

   The mock's canvas, in TWO parts. Brief v3 moves the 1891 square up out of
   the lower page and sets it between the TELEGRAM strip and the postcard row,
   so the canvas is cut at the mock's own row 828, halfway down the band of
   plain paper the mock leaves there. Nothing is redrawn and nothing is
   re-cut; the two halves keep the mock's coordinates, each divided by its own
   height rather than by one.

   Each part caps at the mock's own 1440 and SHRINKS with the window rather
   than being clipped by it, which is why every child is placed as a per cent.
   The pixel version was wrong between 901 and 1439: the canvas stayed 1440
   wide while the document clipped the overflow, so at 1024 most of the
   headline and much of the postcard were not on the screen. Found by Codex.
   ================================================================ */

.stage {
  position: relative;
  width: min(100%, var(--stage-w));
  margin: 0 auto;
  overflow: hidden;
}

/* the mock's rows 110 to 820: the stamp, the headline and the strip */
.stage--a { aspect-ratio: 1440 / 881; }

/* the mock's rows 836 to its foot: the print mount and the postcard */
.stage--b { aspect-ratio: 1440 / 644; }

.stage img { display: block; }
.at { position: absolute; }
.grp { position: absolute; }
.grp__el { position: absolute; }

/* group box: the mock's (38,126) to (810,712) */
.grp--stamp { left: 3.2639%; top: 2.2701%; width: 66.4583%; height: 82.5199%; }

.stamp-frame { left: 0; top: 0; width: 87.31%; height: 100%; }

/* Our photograph sits UNDER the frame and simply fills the stamp's area; the
   frame's own outline decides what shows. No clipping, no pasted edge, and the
   caption, the 1891 and the cancel are all part of the frame above it. */
.stamp-photo {
  left: 1.5%; top: 4%; width: 84%; height: 92%;
  object-fit: cover; object-position: 50% 52%;
}

/* the cancel goes back on top: the frame's copy of its ink sat over the mock's
   photograph and was cut away with it, so the struck mark is this layer */
.stamp-postmark { left: 60.49%; top: 0.34%; width: 25.52%; height: 29.69%; }
.stamp-waves    { left: 83.94%; top: 1.71%; width: 15.80%; height: 15.70%; }

.headline { left: 61.3194%; top: 13.5074%; width: 36.1806%; height: 63.6776%; }
.flourish { left: 73.4028%; top: 74.3474%; width: 14.3056%; height: 5.9024%; }

.telegram { left: 1.5278%; top: 87.6277%; width: 96.8750%; height: 11.5777%; }

/* group box: the mock's (36,846) to (512,1300) */
.grp--print { left: 3.1250%; top: 1.8634%; width: 40.9722%; height: 87.4224%; }

.print-frame { left: 0; top: 0; width: 100%; height: 100%; }
.print-photo {
  left: 1%; top: 1.5%; width: 98%; height: 90%;
  object-fit: cover; object-position: 50% 50%;
}

/* The regenerated back is 2336 x 1744 against the cut panel's 1200 x 876, so the
   box keeps its width and takes the new ratio rather than squashing the card. */
.postcard { left: 47.3611%; top: 0; width: 51.6667%; height: 86.1801%; }
.postcard img { width: 100%; height: 100%; }

/* The Enquire button is part of the generated panel, so the link is laid over
   its measured box rather than drawn again. The label is carried by a .vh span
   for a screen reader, because the panel already prints it on the page.

   The first version shrank the label to 1px and made it transparent, which is
   the wrong way to hide text: it leaves real 1px type in the document. The
   clip-path pattern in .vh is the one that hides it properly. */
.postcard__enquire {
  position: absolute;
  left: 11.04%; top: 79.82%; width: 28.90%; height: 12.39%;
  display: block;
  border-radius: 3px;
}
.postcard__enquire:focus-visible { outline-offset: 2px; }

/* ====================================================== POSTAL OBJECTS

   One object per section, on the same paper, with the same marks.
   ===================================================================== */

.leaf { padding-top: var(--section); }
.leaf--tight { padding-top: 32px; padding-bottom: 32px; }

/* the small letterspaced caps the mock uses for POST CARD and TELEGRAM */
.mark {
  font-family: var(--roman);
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brown);
}

.card {
  background: var(--card);
  box-shadow: var(--shadow-card);
  outline: 1px solid rgba(184, 137, 60, 0.42);
  outline-offset: -1px;
}

 /* A LINK AND A DECORATIVE RULE WERE THE SAME INK. Gold at 1px draws the rule
    after every section heading, the rule across the menu card's head and the
    rule across the stamp sheet, AND the underline under every link, so a
    visitor could not tell one from the other until they hovered. nintendo-2001's
    rule, and it is the right one: warm colour has to mean "act here".

    So a link's underline is now 2px where a decorative rule is 1px. Same gold,
    same place, twice the weight: the only thing on the page wearing a heavy
    gold underline is something you can click. */
.link {
  display: inline-block;
  font-family: var(--roman);
  font-size: 19px;
  line-height: 24px;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding: 8px 0 8px;          /* 44px tall, the touch-target floor */
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.link:hover, .link:focus-visible { color: var(--red); border-bottom-color: var(--red); }

/* --------------------------------------------- the menu, a big postcard */

.menucard {
  display: grid;
  grid-template-columns: 560px 1fr;
  min-height: 496px;
}

.menucard__front { position: relative; overflow: hidden; margin: 16px 0 16px 16px; }
.menucard__front img { width: 100%; height: 100%; object-fit: cover; }

.menucard__back { padding: 40px; display: flex; flex-direction: column; }

.menucard__head { display: flex; align-items: baseline; gap: 24px; }
.menucard__head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--gold); }

.menucard h2 {
  font-family: var(--roman);
  font-size: 27px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--navy);
}

.course { margin-top: 32px; }
.course__name {
  font-family: var(--type);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
}

.dish {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--type);
  font-size: 16px;
  line-height: 32px;
  color: var(--navy);
}
.dish::before {
  content: "";
  order: 2;
  flex: 1 1 auto;
  margin-bottom: 5px;
  border-bottom: 1px dotted rgba(107, 79, 58, 0.55);
}
.dish b { order: 3; font-weight: 400; font-variant-numeric: tabular-nums; }

/* brief v3 puts "See the full menu" under each list rather than one button
   at the foot of the card */
.course__link { margin-top: 16px; }
.course + .course { margin-top: 32px; }

/* ------------------------------------- 1891, one row under the strip */

/* Brief v3 moved this up from below the menu and asked for it smaller. One
   row, so the postmark, the line and the link all read at a glance rather
   than filling a card of their own. */
.square {
  display: grid;
  grid-template-columns: 116px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 24px 32px;
}

.square__postmark { width: 116px; height: auto; opacity: 0.92; transform: rotate(-5deg); }

.square .square__date {
  font-family: var(--type);
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown);
}

.square__body {
  margin-top: 4px;
  font-family: var(--roman);
  font-size: 23px;
  line-height: 32px;
  color: var(--navy);
}

.square__link { white-space: nowrap; }

/* ------------------------------------------- bread, the co-brand postcard

   Rebuilt 2026-09-16 out of our own printed A6 card. The lockup, the words,
   the four loaves, the wheat and the order lines are the card's; only the
   ground, the rules and the gilt are the website's.

   ONE COLOUR ON THIS PAGE IS NOT FROM THE LOCKED PALETTE: the chip's red,
   #A9403A, which is the partner's mark as it is already printed. Repainting
   someone else's wordmark in our red would be redrawing their mark, so it
   stays as printed and is called out in the README.
   ------------------------------------------------------------------------ */

.bread { padding: 32px 40px 40px; }

.bread__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule-gold);
}

.bread__crest { width: 96px; height: 96px; object-fit: contain; }

.bread__collab {
  font-family: var(--roman);
  font-style: italic;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--brown);
}

/* the partner's chip, reproduced from the printed card */
.bbchip {
  display: inline-block;
  background: #A9403A;
  border-radius: 6px;
  padding: 11px 26px 10px;
  text-align: center;
  line-height: 1;
}
/* The chip is a grotesque, not the page's serif, because that is what the
   partner's mark is. The stack is the printed card's own, from
   build_flyer_breadmenu.py, with a universal fallback added. */
.bbchip span {
  display: block;
  font-family: "Liberation Sans", Arial, "DejaVu Sans", sans-serif;
  font-weight: 700;
}
.bbchip__top { font-size: 11px; letter-spacing: 0.36em; color: #D9B77C; text-transform: uppercase; }
.bbchip__name { margin-top: 8px; font-size: 27px; letter-spacing: 0.06em; color: #F7F2E7; text-transform: uppercase; }
.bbchip__sub { margin-top: 3px; font-size: 17px; letter-spacing: 0.5em; padding-left: 0.5em; color: #F7F2E7; text-transform: uppercase; }
.bbchip__since { margin-top: 8px; font-size: 11px; letter-spacing: 0.4em; color: #D9B77C; text-transform: uppercase; }

.bread__body {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* the empty frame for the photograph David is sending. It says what it is
   rather than standing something else in. */
.bread__slot {
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--gold);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgba(184, 137, 60, 0.05);
}

.bread__slot-mark {
  display: block;
  font-family: var(--roman);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brown);
}
.bread__slot-note {
  display: block;
  margin-top: 16px;
  font-family: var(--type);
  font-size: 13px;
  line-height: 24px;
  color: var(--brown);
}

/* ----------------------------------------------------- THE GILT LETTERING

   Every headline on this site is the mock's own engraved gilt, generated line
   by line against it and knocked off its paper. NOT typeset: eighteen faces
   were rendered against that lettering on 2026-09-15 and none matched, because
   it was drawn by an image model rather than cut as a font.

   Each file is normalised by `_build/make_gilt.py` so ONE LINE of ink is the
   same height in every file. That is what lets a single `height` here give
   every headline the same lettering size whatever the words say.

   Sources and the generation ID of every line:
   `_references vintage postal 2026-09-15 (do not bin)/lettering/`.
   ------------------------------------------------------------------------ */

.gilt-h { margin: 0; font-size: 0; line-height: 0; }

/* A <picture> is an INLINE element and the image inside it is a block, which is
   an anonymous-box arrangement rather than a plain one. Making the picture a
   block puts the image back in ordinary flow, so `margin: 0 auto` centres it
   and the h2's own box is the image's box. Added in round 6, when the bread
   headline gained a phone-only source; on a desktop it changes nothing, because
   the image inside was already `display: block` and the h2 already had
   `font-size: 0`. Proved by a pixel diff of the card at 1440. */
.gilt-h picture { display: block; }

 /* object-fit: contain is the guard for a FIXED-HEIGHT image whose width can
    be capped. When max-width bites, the box narrows and the height does not, so
    without this the lettering is squashed. "Six views" was 6 per cent narrow at
    390 px, where the sheet's head puts the gilt, the MOSS VALE mark and a rule
    on one line. With contain it letterboxes instead, and the letterbox is
    invisible because the lettering arrives with its paper already knocked out. */
.gilt-line { height: 60px; width: auto; max-width: 100%; object-fit: contain; }
.gilt-line--two { height: 128px; }      /* two lines of ink, so twice the box */

.gilt-h.panel__title { margin-bottom: 24px; }
.gilt-h.panel__title .gilt-line { height: 54px; }
.gilt-h.panel__title::after {
  content: "";
  display: block;
  width: 84px;
  height: 1px;
  margin-top: 24px;
  background: var(--gold);
}

.menucard__head .gilt-line { height: 46px; }
.room__title .gilt-line { height: 40px; }
.sheet__head .gilt-line { height: 40px; }

.bread__sub {
  margin-top: 24px;
  max-width: 52ch;
  font-family: var(--type);
  font-size: 16px;
  line-height: 32px;
  color: var(--navy);
}

.bread__loaves {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--type);
  font-size: 17px;
  line-height: 28px;
  color: var(--navy);
}
.bread__loaves .dot { color: var(--gold); }
.bread__more { color: var(--brown); }
.wheat { flex: none; width: 22px; height: 33px; }

.bread__order { margin-top: 24px; }
.bread__order-1 {
  display: block;
  font-family: var(--roman);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #A9403A;
}
.bread__order-2 {
  display: block;
  margin-top: 8px;
  font-family: var(--type);
  font-size: 15px;
  line-height: 24px;
  color: var(--navy);
}
.bread__order-2 a { color: inherit; border-bottom: 2px solid var(--gold); padding: 6px 0;
  display: inline-block; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.bread__order-2 a:hover, .bread__order-2 a:focus-visible { color: var(--red); border-bottom-color: var(--red); }

/* ----------------------------------------- bread, pastries, cold cabinet */

.panel { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); align-items: stretch; }
.panel--flip .panel__pic { order: 2; margin: 16px 16px 16px 0; }
.panel--flip .panel__text { order: 1; }

.panel__pic { margin: 16px 0 16px 16px; overflow: hidden; }
.panel__pic img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }

.panel__text {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel__body {
  margin-top: 24px;
  max-width: 46ch;
  font-family: var(--type);
  font-size: 16px;
  line-height: 32px;
  color: var(--navy);
}

/* --------------------------------------------- the room at the back */

.room { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: stretch; }

.room__pic { margin: 16px 0 16px 16px; overflow: hidden; }
.room__pic img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }

.room__form { padding: 32px 40px; }

.room__form h2 { padding-bottom: 16px; border-bottom: 3px double var(--gold); }

.room__lines { margin-top: 8px; }

.room__lines li {
  font-family: var(--type);
 /* SENTENCE CASE, David's call 2026-09-16. These four lines were capitals at
    63 to 77 characters each and were the design checker's only four findings:
    we read words by their ascenders and descenders, and capitals remove them.
    The rules, the typewriter face and the ruled-form look all stay, so it is
    still a telegram form. */
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 0.04em;
  color: var(--navy);
  padding: 8px 2px;
  border-bottom: 1px solid var(--rule-brown);
}

.room__foot {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

/* ------------------------------------------- the sheet of six stamps */

.sheet__head { display: flex; align-items: center; gap: 24px; }
.sheet__head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule-gold); }

 /* The columns flex rather than sitting at a fixed 198. Six fixed columns
    plus five gaps plus the wrap's padding need 1404 px, so between 1341 and
    1403 the sixth stamp ran off the page and the document clipped it. Found
    by Codex, milestone 1. The stamp keeps its proportions from the
    aspect-ratio instead. */
.sheet {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

/* The silhouette comes from .perf in the generated perf.css, cut at the
   mock's own gauge: 33 px pitch, 27 px scallop. A mask cannot carry its own
   shadow, so the shadow is thrown by the wrapper around it. */
.stamp6 {
  width: 100%;
  max-width: 198px;
  aspect-ratio: 198 / 231;
  background: var(--card);
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
}

.stamp6__drop { filter: var(--shadow-stamp); }

.stamp6 img { width: 100%; height: auto; aspect-ratio: 180 / 162; object-fit: cover; }

.stamp6 figcaption {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown);
}

/* ------------------------------------------- the reviews, a franked mark */

.franked { display: flex; justify-content: center; }
.franked svg { width: 780px; height: auto; transform: rotate(-1.6deg); }

/* =============================================================== FOOTER

   The franked envelope: the navy band, the gilt rule the mock puts under
   its nav repeated at the top edge, the crest, and where to find us.
   ================================================================= */

.env { margin-top: var(--section); }

.env__body { background: var(--navy); color: var(--on-navy); padding: 48px 0 40px; }

.env__grid {
  display: grid;
  grid-template-columns: 122px 1fr auto;
  gap: 40px;
  align-items: start;
}

.env__crest { width: 122px; height: 122px; object-fit: contain; }

.env__name {
  font-family: var(--roman);
  font-size: 25px;
  line-height: 32px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-navy);
}
.env__name small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.42em;
  color: var(--gilt);
}

.env__label {
  margin-top: 24px;
  font-family: var(--roman);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gilt);
}

.env__facts { margin-top: 16px; }

/* THE PHONE AND THE EMAIL IN THE FOOTER. Round 3 carried an inline
   style="color:inherit" on the phone and left the email as plain text. Round 4
   took the inline style out, made the email a real mailto, and gave both a
   class. THE RULE WAS THEN NEVER WRITTEN, so both rendered in the browser's
   default #0000EE, underlined, on a navy ground. Caught by the playwright pass,
   not by eye. They now read as the footer's own ink with the gilt underline the
   rest of the page uses for a link. */
.env__contact {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--gilt);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.env__contact:hover, .env__contact:focus-visible { color: var(--gilt); }
/* THE WEAREONE DESIGN LINK (Brief 36, David 2026-10-27): its tap area is 44 px tall on a phone without anything
   on the page moving. The link stays an inline line of text; an empty layer centred on it takes the tap. Only the
   one link that carries .env__credit has it. */
.env__credit { position: relative; }
.env__credit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.env__facts li {
  font-family: var(--type);
  font-size: 15px;
  line-height: 32px;
  color: var(--on-navy-2);
}

.env__links { display: grid; gap: 8px; justify-items: end; }
.env__links a {
  font-family: var(--roman);
  font-size: 18px;
  line-height: 28px;
  color: var(--on-navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 8px 0;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.env__links a:hover, .env__links a:focus-visible { border-bottom-color: var(--gilt); }

.env__small {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(216, 184, 126, 0.28);
  font-family: var(--type);
  font-size: 13px;
  line-height: 24px;
  color: var(--on-navy-muted);
}

/* ================================================================ 900

   The stage stops being a fixed canvas and becomes a column. Every asset
   at the top is the same file, scaled; nothing is redrawn and nothing is
   re-cut.
   ================================================================= */

/* ============================================================== 1439

   The nav is the first thing to run out of room, well before the layout
   does: the wordmark is a fixed width of the mock's own pixels and six
   items have to sit beside it. So it tightens at 1439 and collapses behind
   a burger at 1599, while the layout itself holds its shape down to 900.
   ================================================================= */

@media (max-width: 1439px) and (min-width: 1600px) {
  .head__home { left: 24px; top: 8px; width: 112px; height: 112px; }
 /* THE HEIGHT HAS TO COME DOWN WITH THE WIDTH. This block narrowed the
     wordmark to 330 px and left the base rule's height at var(--head-h), so
     between 1600 and 1439 the mock's own lettering was drawn 11 per cent
     narrow. It has been wrong since milestone 1 and no eye caught it; the
     aspect probe in _measure/aspect_r4.py did. 330 / 2.905 = 114, and 7 px of
     top centres it in the 128 px bar. */
  .head__word { left: 152px; top: 7px; width: 330px; height: 114px; }
  .head__links { gap: 24px; margin-right: 24px; }
  .head__links a { font-size: 17px; }
  .head__cta { font-size: 16px; padding: 12px 24px; }
}

@media (max-width: 1599px) {
  /* Below 1600 the header is a flex row, not a box with things placed on top
     of it. Absolute placement is right at 1440, where the wordmark sits at the
     mock's own x, and wrong here: at 320 the burger landed across the wordmark,
     and with no script the links stacked underneath the crest. As a row the
     wordmark shrinks into whatever is left, the burger always has its own
     space, and the links take a row of their own. Found by Codex, milestone 1. */
  .head__bar { height: auto; min-height: var(--head-h); }

  .head__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: var(--head-h);
    padding: 0 var(--pad);
  }

  /* The brand row must never wrap. A flex line breaks BEFORE its items shrink,
     so with everything in one wrapping row the burger dropped to a second line
     at 320 and the bar grew to 110 px. Its own nowrap row makes the wordmark
     shrink instead, which is what it is there to do. */
  .head__brand {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-height: var(--head-h);
  }

  .head__home {
    position: static;
    flex: none;
    width: calc(var(--head-h) - 14px);
    height: calc(var(--head-h) - 14px);
  }

  /* width auto plus a shrinkable flex item, so the wordmark scales down
     rather than being cropped or squashed */
  .head__word {
    position: static;
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    height: calc(var(--head-h) - 26px);
    object-fit: contain;
    object-position: left center;
  }

  /* the links collapse behind a burger. The script sets html.js, so with
     no script at all they simply stay on the page and wrap. */
  .js .head__links {
    display: none;
    position: absolute; left: 0; right: 0; top: var(--head-h);
    z-index: 30;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    border-top: 1px solid rgba(216, 184, 126, 0.3);
    padding: 8px var(--pad) 16px;
  }
  .js .head[data-open] .head__links { display: flex; }
  .js .head__links a { padding: 12px 0; border-bottom: 1px solid rgba(216, 184, 126, 0.18); }
  /* AND THE CURRENT PAGE KEEPS ITS GOLD RULE. The line above turns every link
     in the drawer into a row with a faint divider under it, and at (0,2,1) it
     ties `.head__links a[aria-current="page"]` and wins on source order, so on
     a phone the marker that says which page you are on was simply gone. The
     desktop bar had it and the drawer did not, which is the kind of difference
     nobody sees because nobody opens the drawer on the page they are already
     on. Codex, 2026-09-21. */
  .js .head__links a[aria-current="page"] { border-bottom-color: var(--gold); }
  .js .head__links a.head__cta { margin-top: 16px; text-align: center; }

  .js .head__burger {
    display: block;
    flex: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--gold);
    color: #F2EDE1;
    font-family: var(--roman);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.1em;
    padding: 12px 16px;
  }

  /* with no script the links take a full row of their own under the brand,
     and the bar grows to hold it */
  .head__links { flex: 1 0 100%; flex-wrap: wrap; gap: 8px 16px; padding: 0 0 16px; margin: 0; }
  .head__links a { font-size: 16px; }
  .head__cta { font-size: 16px; padding: 12px 16px; }
}

@media (max-width: 1240px) and (min-width: 901px) {
  /* The photo column is a fixed width up at 1440 and has to give way below it,
     or the text column is squeezed past its own padding and runs off the card.
     Found by Codex at 901. */
  .menucard { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .panel { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  .bread__body { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 32px; }
  .gilt-line { height: 50px; }
  .gilt-line--two { height: 108px; }
  .gilt-h.panel__title .gilt-line { height: 44px; }
  .room { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .panel__text { padding: 32px; }
  .room__form { padding: 24px 32px 32px; }
  .sheet { grid-template-columns: repeat(3, 1fr); }
  .stamp6 { max-width: none; }
}

/* =============================================================== 900

   The stage stops being a canvas and becomes a column. Every asset at the
   top is the same file, scaled; nothing is redrawn and nothing is re-cut.
   ================================================================= */

@media (max-width: 900px) {
  :root { --pad: 20px; --section: 64px; --head-h: 72px; }

  /* the header's own sizes come from --head-h in the 1599 block above, so
     there is nothing to set here. A width: 209px override used to live here
     and it beat the flex rule's width: auto, which is how the wordmark ended
     up under the burger at 320. */

  .stage {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .stage--a { padding-bottom: 4px; }
  .stage--b { padding-bottom: 20px; }

  /* NOTE: the groups must stay positioned, or their children would place
     themselves against the stage instead and fly to its corners. */
  .grp { position: relative; left: auto; top: auto; width: 100%; height: auto; }
  .grp--stamp { aspect-ratio: 957 / 727; margin-top: 10px; }
  .grp--print { aspect-ratio: 590 / 563; }

  .at { position: relative; left: auto; top: auto; display: block; height: auto; }
  .headline { width: 74%; margin: 4px auto 0; }
  .flourish { width: 42%; margin: 2px auto 0; }
  .telegram { width: 96%; margin: 6px auto; }
  .postcard { width: 96%; margin: 0 auto; }

  .menucard { grid-template-columns: 1fr; min-height: 0; }
  .menucard__front { margin: 16px 16px 0; aspect-ratio: 4 / 3; }
  .menucard__back { padding: 32px 24px; }
  .menucard h2 { font-size: 22px; letter-spacing: 0.26em; }
  .dish { font-size: 14px; line-height: 28px; }

  .square { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .square__postmark { width: 92px; }
  .square__body { font-size: 20px; line-height: 32px; }

  .bread { padding: 24px 24px 32px; }
  /* The lockup stacks rather than shrinking. Squeezing it into one row on a
     phone had pushed the chip's own lines to 8px and the collaboration line to
     10px, which is below the legibility floor: a logotype is exempt from the
     CONTRAST rule, never from being readable. Found by the design checker. */
  .bread__lockup { flex-direction: column; gap: 16px; padding-bottom: 24px; }
  .bread__crest { width: 76px; height: 76px; }
  .bread__collab { font-size: 11px; line-height: 16px; }
  .bbchip { padding: 9px 18px 8px; }
  .bbchip__top { font-size: 11px; letter-spacing: 0.22em; }
  .bbchip__name { font-size: 22px; margin-top: 7px; }
  .bbchip__sub { font-size: 14px; letter-spacing: 0.44em; padding-left: 0.44em; }
  .bbchip__since { font-size: 11px; letter-spacing: 0.26em; margin-top: 7px; }
  .bread__body { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .gilt-line { height: 40px; }
  .gilt-line--two { height: 86px; }
  .gilt-h.panel__title .gilt-line { height: 36px; }
  .menucard__head .gilt-line { height: 32px; }
  .room__title .gilt-line { height: 27px; }
  .sheet__head .gilt-line { height: 28px; }
  .bread__sub { font-size: 15px; line-height: 28px; max-width: none; }
  .bread__loaves { font-size: 14px; line-height: 24px; gap: 8px; flex-wrap: nowrap; }
  .wheat { width: 16px; height: 24px; }

  .panel, .panel--flip, .room { grid-template-columns: 1fr; }
  .panel__pic, .room__pic { margin: 16px 16px 0; aspect-ratio: 4 / 3; }
  .panel--flip .panel__pic { order: 0; margin: 16px 16px 0; }
  .panel--flip .panel__text { order: 0; }
  .panel__pic img, .room__pic img { min-height: 0; }
  .panel__text { padding: 24px 24px 32px; }
  .panel__body { font-size: 15px; line-height: 28px; max-width: none; }

  .room__form { padding: 24px 24px 32px; }
  .room__lines li { font-size: 14px; line-height: 24px; letter-spacing: 0.03em; }
  .room__foot { flex-direction: column; align-items: flex-start; gap: 16px; }

  .sheet { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stamp6 { max-width: none; }

  .franked svg { width: 100%; }

  .env__grid { grid-template-columns: 1fr; gap: 24px; }
  .env__links { justify-items: start; }
}

/* the paper tile is cut at 2x of the mock, so it is shown at half size on a
   phone for the same grain a visitor sees on a desktop */
@media (max-width: 600px) {
  body { background-size: 496px 49px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==================================================================== ROUND 4

   Everything below is new in round 4 (brief v4). Nothing above the mock's
   canvas changed, and nothing here draws on it.
   ===================================================================== */

/* ------------------------------------------- THE ERRAND ROW, under the strip

   David's call, 2026-09-16. The audit's first finding: there was no call to
   action anywhere in the first viewport, while the content pack asks for three.
   The approved mock has none and is not to be drawn on, so this is the TELEGRAM
   strip one row lower and made actionable: the same gold hairlines top and
   bottom, the same three cells divided by vertical rules, the same letterspaced
   caps. A visitor reads it as the next line of the same form.
   --------------------------------------------------------------------- */

.errand { margin-top: 24px; }

.errand__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-gold);
  border-bottom: 1px solid var(--rule-gold);
}

.errand__row li + li { border-left: 1px solid var(--rule-gold); }

.errand__row a {
  display: block;
  padding: 24px 8px;                /* 72px tall, well over the touch floor */
  text-align: center;
  font-family: var(--roman);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.32em;              /* the tracking is trailing, so re-centre */
  text-transform: uppercase;
  color: var(--brown);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}

.errand__row a:hover,
.errand__row a:focus-visible {
  color: var(--navy);
  background: rgba(184, 137, 60, 0.09);
}

/* --------------------------------------------- the menu card, flipped

   Cakes, the menu and the room all put their photograph on the left, which is
   three sections running with the picture on the same side. Flipping this one
   restores the alternation: right, left, right, left. Nothing else about the
   card changed. Same pattern as .panel--flip, which already existed.
   --------------------------------------------------------------------- */

.menucard--flip { grid-template-columns: minmax(0, 1fr) 560px; }
.menucard--flip .menucard__front { order: 2; margin: 16px 16px 16px 0; }
.menucard--flip .menucard__back { order: 1; }

/* ------------------------------------------------------------ MOTION

   Three moments and no more, each with a reason that fits in a sentence.
   frontend-design's warning is the governing one here: extra animation is
   itself a tell, so the page gets feedback, arrival, and nothing else.

   1. FEEDBACK. 160ms on every hover and focus. An interface that does not
      acknowledge the pointer feels broken, and the audit found the page had
      literally zero transitions.
   2. ARRIVAL. The postal objects fade up 16px as they enter. They are separate
      pieces of paper laid on a desk; arriving together as a wall is the thing
      that reads as a web page rather than a desk.
   3. THE POSTCARD. The same arrival plus three quarters of a degree of
      rotation, because a card dropped on a desk lands very slightly off square
      and settles. It is the only element with a rotation and it is the only one
      that is a loose card rather than a page element.

   RULES THESE OBEY. transform and opacity only, never a layout property. No
   scroll listener: IntersectionObserver, in site.js. And the hidden state is
   scoped to `.js`, so with no script every object is simply visible rather
   than invisible forever.
   --------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}

.js .reveal--card { transform: translateY(16px) rotate(-0.75deg); }

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ------------------------------------------- THE COUNTER BAR, phone only

   David's call, 2026-09-16. Airbnb's documented mobile pattern: on a phone the
   booking card becomes a bar fixed to the bottom carrying only the one action.
   For a cafe the two actions are ringing up and enquiring, and a phone is the
   device somebody standing in Argyle Street is holding.

   Hidden above 900, where the nav's own Enquire button is always in view.
   --------------------------------------------------------------------- */

 /* The bar is hidden above 900, but its links keep their colours OUTSIDE the
    media query. Inside it they were the browser's default #0000EE at every
    width where the bar does not show, which is harmless today and is exactly
    the trap that the footer's phone and email fell into an hour earlier: a
    colour that only exists in one branch is a colour waiting to leak. */
.counter { display: none; }
.counter__call { color: var(--on-navy); text-decoration: none; }
.counter__cta { color: var(--navy-deep); text-decoration: none; }

@media (max-width: 900px) {
  .counter {
    display: grid;
    grid-template-columns: 1fr auto;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--navy);
    border-top: 1px solid rgba(216, 184, 126, 0.35);
    /* the home indicator on an iPhone sits under this bar */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .counter a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-family: var(--roman);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
  }

  .counter__call { color: var(--on-navy); padding: 16px; }
  .counter__call:hover, .counter__call:focus-visible { background: var(--navy-deep); }

  .counter__cta {
    padding: 16px 24px;
    background: var(--gold);
    color: var(--navy-deep);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .counter__cta:hover, .counter__cta:focus-visible { background: var(--gold-light); }

  /* the bar must not sit over the last line of the footer */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* the errand row stacks: three cells across a 390 px screen would put four
     letterspaced words on two lines each */
  .errand__row { grid-template-columns: 1fr; }
  .errand__row li + li { border-left: 0; border-top: 1px solid var(--rule-gold); }
  .errand__row a { padding: 20px 8px; font-size: 15px; letter-spacing: 0.24em; text-indent: 0.24em; }

  /* the flipped menu card stacks photograph first, exactly as .panel--flip does */
  .menucard--flip { grid-template-columns: 1fr; }
  .menucard--flip .menucard__front { order: 0; margin: 16px 16px 0; }
  .menucard--flip .menucard__back { order: 0; }
}

@media (max-width: 1240px) and (min-width: 901px) {
  .menucard--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
}

/* Reduced motion, restated for round 4's additions. The blanket rule earlier in
   this file kills the transitions; this one has to also put the reveal's
   START state back, or a visitor who asks for no motion gets a blank page. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal--card {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* ================================================================== PRINT

   FOUND BY CODEX, round 4. The arrival animation holds every postal object at
   opacity 0 until an IntersectionObserver reveals it, and OPENING A PRINT
   PREVIEW IS NOT SCROLLING. A visitor who loads the page and prints it straight
   away would have got the hero and then blank paper where the bread, the menu
   and the room should be. On a cafe's page, where somebody prints the menu to
   put on a fridge, that is not a small fault.

   Print is a medium, not an afterthought, so this does three things: it puts
   every object back, it takes away the furniture that means nothing on paper,
   and it drops the shadows that a printer renders as grey smears.
   ===================================================================== */

@media print {
  .js .reveal,
  .js .reveal--card { opacity: 1 !important; transform: none !important; }

  .skip,
  .counter,
  .head__burger { display: none !important; }

  body { padding-bottom: 0; }

  .card { box-shadow: none; }
  .stamp6__drop { filter: none; }

  /* Each postal object is one thing, so it should not be torn across two
     sheets. The errand row was splitting with SEE THE MENU and ENQUIRE on one
     page and FIND US on the next. */
  .card, .errand__row, .sheet, .franked, .stamp6__drop { break-inside: avoid; }
}

/* ================================ ROUND 6, M1a: THE PHONE CENTRES THE POSTCARDS

   David's phone review, 2026-09-16, carried into brief 5 addendum 1 and run at
   last in round 6: "on the phone it's better if it's in the middle... we put
   Fresh Bread, Baked Daily just under the line, the gold line where you have our
   logo and the Brasserie Bread logo, in one line and centre it... the photo and
   what we are saying... in the centre, and even all of these should be centred.
   We have to do this across all the postcards: cakes and sandwiches, fresh
   pastries, the menu, and the room at the back."

   PHONE ONLY, and that is his own decision through the question tool: the
   desktop postcards stay as they are. Every rule below therefore lives inside
   the 900 px query, and nothing above it is touched. The desktop page is byte
   for byte what he accepted.

   WHAT IS CENTRED: the gilt headline and the hairline under it, the running
   copy, the loaves line, the section names, and the action at the foot of each
   card.

   WHAT IS NOT, and it is written up for David rather than decided quietly: a
   PRICE ROW. The menu teaser's dishes are a name, a dotted leader and a figure,
   and the leader IS the alignment. Centre the row and the dots stop joining the
   dish to its price, which is the one thing that row exists to do. The four big
   postcards on menu.html carry the same idiom and are left alone for the same
   reason.

   THE ONE REORDER IS BREAD'S, and it is the one David actually described. Its
   headline sat UNDER a 4:3 photograph frame, so on a phone the card opened with
   an empty dashed box and did not name itself until four hundred pixels later.
   The headline moves up under the co-brand rule, where he asked for it. No other
   card has a logo rule, and every one of them already names itself directly
   under its own photograph, so their order is unchanged.
   ===================================================================== */

@media (max-width: 900px) {

  /* ---------------------------------------------------------- bread

     `display: contents` on the text column, so its four children and the
     photograph frame become ONE flex column and the headline can be ordered
     above the frame. The element it removes carries no background, no border,
     no padding and no label, so there is nothing to lose with the box. The
     alternative was moving the h2 in the markup, which would have changed the
     desktop grid, and the desktop is not to move. */
  .bread__body { display: flex; flex-direction: column; gap: 0; }
  .bread__text { display: contents; }

  .bread__text > .gilt-h { order: 1; text-align: center; }
  /* THE PHONE TAKES GILT LINE 17, which is the same words on ONE line of ink,
     so the `--two` height that reserves two lines has to come off. 40 px is the
     height every other single-line headline takes at this width, so the lead
     card's headline is now the same size as the rest of them rather than twice
     it. The <picture> in the markup is what swaps the file; this swaps the box
     that holds it. */
  .bread__text > .gilt-h .gilt-line { height: 40px; margin: 0 auto; }
  .bread__slot  { order: 2; margin-top: 24px; }
  .bread__sub   { order: 3; text-align: center; }
  .bread__loaves { order: 4; justify-content: center; text-align: center; }
  .bread__order { order: 5; text-align: center; }

  /* ------------------------------------- fresh pastries, cakes and sandwiches */

  .panel__text { align-items: center; text-align: center; }
  .gilt-h.panel__title { text-align: center; }
  .gilt-h.panel__title .gilt-line { margin: 0 auto; }
  .gilt-h.panel__title::after { margin-left: auto; margin-right: auto; }

  /* ------------------------------------------------------ the menu teaser

     The head is a baseline row at 1440: gilt, then a hairline running to the
     right edge. Stacked and centred, that hairline has to stop growing or a
     `flex: 1 1 auto` in a COLUMN grows it down the card instead of across it.
     It becomes the same 84 px centred rule the panel titles already use. */
  .menucard__head { flex-direction: column; align-items: center; gap: 16px; }
  .menucard__head::after { flex: none; width: 84px; }
  .menucard__head .gilt-line { margin: 0 auto; }
  .course__name { text-align: center; }
  .course__link { text-align: center; }

  /* -------------------------------------------------- the room at the back */

  .room__form h2 { text-align: center; }
  .room__form h2 .gilt-line { margin: 0 auto; }
  .room__lines li { text-align: center; }
  .room__foot { align-items: center; text-align: center; }
}

/* THE WHEAT EARS COME OFF ONLY WHERE THEY NO LONGER EARN THEIR PLACE, which is
   what the addendum asks: "kept if they fit on one line, dropped if not".

   Measured, not guessed. The loaves line is 55 characters at 14 px in Courier
   Prime, which is 0.6 em a character: 55 x 8.4 = 462 px of type. The two ears
   and their gaps add 48. The card's inner width is the viewport less 40 px of
   page padding and 48 px of card padding. So the line holds one row with the
   ears above 558 px and without them above 510, and below that it wraps
   whatever we do. 600 is the breakpoint this stylesheet already uses for the
   paper, it sits above both numbers, and a wrapped line with an ear stranded at
   each end is the thing to avoid. */
@media (max-width: 600px) {
  .bread__loaves .wheat { display: none; }
}

/* ============================ ROUND 6, M1b: VARIANT A. DAVID'S PICK, 2026-09-17

   He saw a grey line crossing SEE THE MENU on his phone. It is not a rule and it
   is not the errand row's own border: it is THE PAPER. The mock's 600 x 120 crop
   carries a dark band across its first eighteen rows, a 21-of-255 swing in row
   mean against a flat 238 for the rest, and tiled at 49 px on a 390 px screen
   that band prints a soft grey rule across the page every 49 px. One of them ran
   through ENQUIRE and FIND US.

   He was shown both ways out, side by side at 390, in
   `_proofs/round6/00_errand-row_A-vs-B.png`, and picked A: the row gets its own
   cream card and the paper stays exactly as the mock has it. The paper's line then
   runs BEHIND the card instead of through the words.

   Variant B, the band cut out of the paper itself, is built and is one line away:
   `_build/make_paper_tile_plain.py` and the tile it emits,
   `assets/gpt/paper-tile-plain.png`, are kept. Nothing points at them.

   THE TWO GOLD HAIRLINES COME OFF. They are the telegram strip's, repeated one row
   lower so the errand row reads as the next line of the same form. A card carries
   its own edge, and a card edge plus a hairline at the same place is two rules
   drawn a pixel apart.
   ===================================================================== */

.errand__row {
  background: var(--card);
  box-shadow: var(--shadow-card);
  outline: 1px solid rgba(184, 137, 60, 0.42);
  outline-offset: -1px;
  border-top: 0;
  border-bottom: 0;
}

/* The head of the stamp sheet is the home page's other run of text sitting
   straight on the paper, and the addendum says "any other text that sits
   straight on the ruled paper" gets the same card. The six stamps under it
   already have card grounds of their own; their head did not. */
.sheet__head {
  background: var(--card);
  box-shadow: var(--shadow-card);
  outline: 1px solid rgba(184, 137, 60, 0.42);
  outline-offset: -1px;
  padding: 20px 24px;
}

@media (max-width: 900px) {
  .sheet__head { padding: 16px 20px; }
}

/* Print: a card's shadow renders as a grey smear, exactly as round 4 found for
   the postal objects, and neither of these may be torn across two sheets. */
@media print {
  .errand__row, .sheet__head { box-shadow: none; }
  .sheet__head { break-inside: avoid; }
}

/* ------------------------------------------------------------------
   THE POST OFFICE MOSS VALE, the six other pages. ROUND 5, milestone 2.

   LOADED AFTER round3.css AND ONLY BY THESE SIX. The home page is the
   round 4 page David accepted and does not link this file, so nothing
   here can reach it. Every token, every mark, the nav, the footer, the
   counter bar, the paper and the motion all come from round3.css: this
   file adds the five postal objects milestone 2 needs and nothing else.

   NO NEW COLOURS. Every colour below is a variable declared in
   round3.css's :root, or one of those same locked values at an alpha
   (`rgb(184 137 60 / 0.42)` is --gold, softened; CSS cannot take an
   alpha of a variable without a colour-mix, and this is the plainer of
   the two). A HEX in this file is a bug: there is exactly one place a
   hex may appear, and that is inside a comment quoting a measurement.

   THE BASELINE IS 8 px and the RULE PITCH IS 32 px, four baselines. The
   ruled backs are drawn as a repeating gradient on the panel rather than
   as a border under every row, which is both what a postcard's writing
   side actually is and the way round the "hairline under every row of a
   long list" pattern that design-taste-frontend bans. Everything that
   sits on a ruled back is therefore a multiple of 32 px tall, or the
   ruling drifts out of register under it. `_measure/register_r5.py`
   proves it rather than trusting it.
   ------------------------------------------------------------------ */

/* ================================================ [hidden] MEANS HIDDEN

   FOUND BY CODEX, round 5, P3. `[hidden]` is a user-agent rule, so any class
   with a `display` in it beats it on specificity. `.link { display:
   inline-block }` did exactly that, and the menu's print control, which ships
   `hidden` precisely so a visitor with no script never sees a button that
   cannot work, was visible to every one of them.

   The guard belongs here rather than on that one control, because the next
   element given both a display class and a hidden attribute would have the
   same fault and nothing would say so. The enquiry card's thank-you state
   relies on the same attribute.
   ================================================================= */

[hidden] { display: none !important; }

:root {
  --rule-pitch: 32px;                      /* four baselines */
  --rule-ink: rgb(107 79 58 / 0.22);       /* the writing lines: --brown, at alpha */
  --measure: 66ch;                         /* the reading measure */
}

/* ================================================== THE GROUND, CORRECTED

   Round 4 mirrored the mock's paper crop on ONE axis and closed the ruled
   line that printed every 372 px across the page. The other axis was
   cleared on a measurement whose denominator was a column step; measured
   row against row it is a 5.3x seam, the same size as the one that was
   fixed, and the crop also carries a 21-point light-to-dark gradient down
   its own height. Repeated every 74 px that is a striped page, which is
   what these six show because they leave far more bare paper on screen
   than the home page does.

   `_build/make_paper_tile_x4.py` stacks round 4's tile on its own vertical
   mirror. Both wraps now measure 0.00 and not one pixel of the mock's paper
   is altered.

   THE HOME PAGE IS NOT CHANGED. Rule 5: it is not touched beyond wiring its
   links, so `paper-tile-x2.png` is left byte for byte as David accepted it
   and this override applies only to the six pages that load this file. The
   one line that would bring the home page across is in README-round5.md,
   for David's call.
   ================================================================= */

body {
  background-image: url("https://static.wixstatic.com/media/37bf5c_4d001890540942ef8634394d49fe25db~mv2.png");
  background-size: 744px 148px;      /* the same grain, twice the tile on Y */
}

@media (max-width: 600px) {
  body { background-size: 496px 99px; }
}

/* ================================================== THE PAGE HEAD

   Every one of the six opens the same way: the gilt line for the page,
   a hairline, and the practical lines that page needs. It is the only
   thing all six share beyond the shell, so it is written once.
   ================================================================= */

/* ROUND 6: THE HEAD IS A CARD, David's pick of 2026-09-17. Variant A of brief 5
   addendum 1 puts the cream card on the errand row "and any other text that sits
   straight on the ruled paper... on every page". A page head is that: a gilt
   title, a rule and a few facts standing on the bare ground. The mock's paper
   prints a soft grey band every 49 px on a phone, and whether one of them lands
   across a gilt title depends only on how far down the page that head happens to
   sit, which is luck and not design.

   The card is on `.pagehead__sheet`, an inner element, and it has to be:
   `.pagehead` is also `.wrap`, so its own box runs the full 1440 INCLUDING the
   page's 48 px side padding, and a card painted on it would stand 48 px proud of
   every other card on the page. */
.pagehead {
  padding-top: 56px;
  padding-bottom: 0;
}

.pagehead__sheet { padding: 32px 40px; }

.pagehead__title { margin: 0; font-size: 0; line-height: 0; }
.pagehead__title .gilt-line { height: 84px; }

.pagehead__rule {
  height: 3px;
  margin-top: 24px;
  border-top: 1px solid var(--rule-gold);
  border-bottom: 1px solid var(--rule-gold);
}

/* the practical lines under a page head: hours, the surcharge, BYO */
.pagehead__facts {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
}

/* SENTENCE CASE, not caps, and this is David's own round 4 call applied
   consistently. The site's letterspaced caps are for MARKS: POST CARD,
   TELEGRAM, MOSS VALE N.S.W., three or four words that a reader takes in as a
   shape. These are facts, and the longest of them runs to sixty-seven
   characters. We read words by their ascenders and descenders and capitals
   remove them, which is exactly why the room panel's four lines came out of
   caps on 2026-09-16. Same rule, same reason. The small print at the foot of
   the menu is already set this way. */
.pagehead__facts li {
  font-family: var(--type);
  font-size: 14px;
  line-height: 32px;
  letter-spacing: 0.03em;
  color: var(--brown);
}

.pagehead__lede {
  margin-top: 16px;
  max-width: var(--measure);
  font-family: var(--roman);
  font-size: 21px;
  line-height: 32px;
  color: var(--navy);
}

/* ============================================ THE RULED WRITING SIDE

   A postcard's back is a sheet of evenly ruled writing lines, not a
   table. So the ruling is one repeating gradient on the panel and the
   type sits ON the lines, exactly as handwriting would.
   ================================================================= */

.ruled {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule-pitch) - 1px),
    var(--rule-ink) calc(var(--rule-pitch) - 1px),
    var(--rule-ink) var(--rule-pitch));
  background-position: left top;
}

/* ============================================ THE MENU SECTION, ROUND 7

   ROUND 5 AND 6 DREW THIS AS A POSTCARD: a 512 px picture column on the
   left, the list on ruled writing lines on the right, a "Post card" mark
   and a cancel along the foot. David, 2026-09-17, looking at it:

     "now you put them on the wrong side... you can't see the image
      properly. We need to find the hero food... this is the food page,
      not the cafe."
     "It says postcard on each menu. I don't understand why."
     "Remove those lines, they serve no purpose."

   All three are answered here. The photograph is a band across the whole
   top of the section, the mark and its box are gone, and the ruling is
   gone. What is kept is what he called perfect the same day: the gilt
   lettering, the typewriter face and the paper.

   THE BAND IS 12 / 5. Wide enough to read as a photograph of a dish across
   a 1344 px card rather than a strip, shallow enough that the section name
   and the first price are still on the first screen of a 1440 x 900 page.
   ===================================================================== */

.bigcard { display: block; }

/* ---- the hero band ---- */

.bigcard__hero { margin: 0; background: var(--ground); }

/* `aspect-ratio` ON THE IMAGE, not on the figure. The figure would need a
   height for object-fit to have anything to fit into, and a height in px is
   the thing that stops being right the moment the card is a different width. */
.bigcard__hero img {
  display: block;
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

/* ---- the head under the band ---- */

/* THREE COLUMNS SO THE NAME IS CENTRED ON THE CARD, not on what is left over
   after the cancel. An empty 1fr on the left balances the 1fr the postmark sits
   in on the right, so the gilt line is on the card's true centre line at every
   width. Centring by `margin: auto` inside a two column row would put it half a
   postmark off, which is exactly the kind of near-miss that reads as sloppy
   without anyone being able to say why. */
.bigcard__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
  padding: 24px 32px 0;
}

/* ROUND 9: THE CREST IS ON THE SCREEN HEAD TOO. David, 2026-09-17, on the
   Version 5 preview: "For each menu, the stamp 'Moss Vale 15 December' should be
   on the right-hand side, and on the left-hand side, we still should have the
   postman logo." Round 7 drew it on the printed sheet only, because the
   photograph was the head of the screen card. Both are now true: the photograph
   is the band above, and under it the head carries the same three marks the
   sheet carries, in the same order.

   IT SITS IN THE EMPTY 1fr THE GRID ALREADY HELD OPEN. That column existed to
   balance the postmark's so the gilt name lands on the card's true centre line,
   so the crest costs the layout nothing and the name does not move.

   THE HEIGHT IS SET, NOT THE WIDTH. Little One's carries the boy postman here
   instead of the adult crest, and the two files are different shapes. Two
   images given the same WIDTH come out at different heights and the two heads
   stop matching down the page; given the same height they read as one set.
   `_build/make_boy_postman.py` puts the boy on the crest's own 800 x 1000 box
   for the same reason. */
.bigcard__crest {
  display: block;
  grid-column: 1;
  justify-self: start;
  width: auto;
  height: 76px;
}

.bigcard__name {
  grid-column: 2;
  margin: 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.bigcard__name .gilt-line { height: 52px; margin: 0 auto; }

.bigcard__stamp {
  grid-column: 3;
  justify-self: end;
  width: 84px;
  height: auto;
  opacity: 0.72;
  transform: rotate(-6deg);
}

.bigcard__when {
  grid-column: 1 / -1;
  margin-top: 16px;
  text-align: center;
  font-family: var(--type);
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
}

/* ---- the list ---- */

.bigcard__back { padding: 24px 32px 32px; }

/* ============================================ ROUND 9, THE SPECIALS CARDS

   David, 2026-09-17: "Breakfast special: it's not on the same page... You have
   the A5 size for the specials, because now the breakfast special is hidden and
   mixed with the menu, which doesn't make any sense anymore." So the two
   specials are cards of their own, in the same shell as the four, and they
   print as their own A5 sheets.

   TWO THINGS ARE DIFFERENT AND BOTH ARE DELIBERATE.

   NO HERO BAND. There is no photograph of a special in the vault and none is
   borrowed: a frame from another section would be a picture of a different
   dish. The head is therefore the first thing on the card, so it takes the
   padding the band used to sit above.

   ONE COLUMN, NOT TWO. Three dishes and four dishes. Two columns over three
   items puts two in one and one in the other with a rule down the middle of
   nothing, which is the uneven fill ad-design-rules refuses. The printed A5
   sheets at `Menus/New/To be printed/` set them in one column for the same
   reason, and this page is meant to be that sheet.
   ===================================================================== */

.bigcard--nohero .bigcard__head { padding-top: 32px; }

/* `.menusec--specials .bigcard__cols`, NOT `.bigcard__cols--one`. The one
   class version sat above `.bigcard__cols { columns: 2 }` in this file, and at
   equal specificity the later rule won: the specials card came out in two
   columns with three dishes in the right one, a gold rule down the middle of an
   empty left one, and nothing warned. Asking the SECTION makes it (0,2,0)
   against (0,1,0) and the source order stops mattering. */
.menusec--specials .bigcard__cols { columns: 1; column-rule: 0; }

/* AND THE ONE COLUMN IS HELD TO A MEASURE. A single column across a 1300 px
   card gives a dotted leader a metre long and a description that stops at its
   44 character measure with half the card empty beside it: the leader then
   reads as a rule rather than as a link between a dish and its price.
   `ad-design-rules` and the grid discipline both put the price list on a
   measure, and the cafe's own A5 specials sheet is 420 pt wide, so 720 px is
   that sheet's proportion on a screen. Centred, because the head above it is. */
.menusec--specials .bigcard__cols { max-width: 720px; margin: 0 auto; }

/* A DISH IS ONE THING. The name, its description and its extras line are three
   sibling paragraphs, and a column break or a page break between any two of them
   leaves a price with no dish or a dish with no price. This wrapper is the only
   reason the A4 proof has no orphan.

   IT IS NOT CALLED `.dish`, AND THAT COST A ROUND. `.dish` is already taken:
   round3.css line 414 uses it for the home page's menu teaser rows, where it is
   a FLEX row with a dotted leader. A wrapper of that name here inherited the
   flex and laid every dish name beside its own description in two ragged
   sub-columns. Nothing failed, nothing warned; the page simply came out wrong.
   Both stylesheets load on every page, so the class namespace is shared and a
   new name has to be checked against the other file, not just against this
   one. */
.dishblk { break-inside: avoid; margin-bottom: 10px; }
.dishblk:last-child { margin-bottom: 0; }

.bigcard__cols {
  columns: 2;
  column-gap: 40px;
  column-rule: 1px solid rgb(184 137 60 / 0.3);
}

/* ROUND 7: A COURSE MAY NOW FLOW ACROSS THE FOLD, and that is a fix, not a
   loosening. Round 5 held every course whole, which was right when a course was
   four dishes on a ruled panel. Breakfast is fourteen, and holding it whole
   pushed the whole block into column one and left column two half empty from
   Truffle Eggs to the foot of the card: exactly the dead space ad-design-rules
   calls out in its fill test. The dish is the thing that must not tear, and
   `.dishblk` holds that; a course heading is kept with the dish under it by
   `break-after: avoid`. In PRINT the course is whole again, because a sheet is
   a fixed height and a course split across two sheets is a different problem. */
.course-blk { margin: 0 0 32px; }
.course-blk:last-child { margin-bottom: 0; }

/* TWO PARTS, and that is what stops it being a sentence in capitals. The
   printed cards set a course as a short name and a time: "BREAKFAST, served
   7.00am until 11.30am". Putting the whole string in caps makes a 38-character
   run of it. The <b> is the label and keeps the letterspaced caps; the <span>
   is the qualifier and stays in sentence case, which is how the card itself
   reads. */
.course-blk__name {
  break-after: avoid;
  font-family: var(--type);
  font-size: 14px;
  line-height: 30px;
  color: var(--brown);
  /* An INSET SHADOW, not a border. A 1 px border-bottom adds 1 px to the
     block's height, and one pixel per course is all it takes to walk the
     whole sheet off its own writing lines. The shadow draws the same
     hairline and occupies no space. */
  box-shadow: inset 0 -1px 0 var(--rule-gold);
}
/* GOLD AND BOLD, David 2026-09-17. The qualifier after it stays brown and
   sentence case, so the gold is the SECTION and not the whole line. */
.course-blk__name b {
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-right: 0.18em;
  color: var(--gold);
}
.course-blk__name span { letter-spacing: 0.02em; }

/* a button is a control, and .link is how this site draws one that is not a
   box. Everything the user agent puts on a <button> has to come off first. */
button.link {
  background: none;
  border: 0;
  border-bottom: 2px solid var(--gold);
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  font-family: var(--roman);
  font-size: 19px;
  line-height: 24px;
}

/* one dish: the name, the dotted leader, the price. Same idiom as the
   home page's .dish, on the ruled sheet's own 32 px line. */
/* FLEX-END, NOT BASELINE, and it is the difference between a menu and a
   mess. `align-items: baseline` puts the leader and the price on the FIRST
   line of the dish name, so a name that wraps in a 370 px column leaves the
   price stranded halfway up with the rest of the name underneath it and no
   dots joining them. Aligning to the end puts the leader and the price
   beside the LAST line, which is where a printed menu puts them. */
.item {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--type);
  font-size: 15px;
  line-height: 28px;
  color: var(--navy);
}
.item__name { min-width: 0; font-weight: 700; }
/* the dots sit on the baseline of that last line, not on the box's floor */
.item::before {
  content: "";
  order: 2;
  flex: 1 1 24px;
  min-width: 16px;
  margin-bottom: 10px;
  border-bottom: 1px dotted rgb(107 79 58 / 0.5);
}
/* a code never breaks away from the words it qualifies */
.code { white-space: nowrap; }
/* THE DIRECT CHILD ONLY. `.item b` also matched `b.code` inside the dish name,
   and at (0,1,1) it beat `.code` at (0,1,0), so every dietary code on the page
   was drawn at weight 400 while the rule two blocks down said 700 and the
   comment beside it said the cards print them bold. A price is a child of the
   row; a code is a grandchild. */
.item > b { order: 3; font-weight: 700; font-variant-numeric: tabular-nums; }
.item__name { order: 1; }

/* the dietary and chilli codes, BOLD as the brief asks and as the cards
   print them */
.code {
  font-weight: 700;
  color: var(--red);
}
.code--hot { color: var(--red); }

.item__desc {
  margin: 0;
  max-width: 44ch;
  font-family: var(--type);
  font-size: 13px;
  /* ROUND 7: 22, NOT 32. The 32 px leading existed to keep every line on the
     postcard's printed writing lines, and David had the writing lines taken out
     the same day ("Remove those lines, they serve no purpose"). Leading set to
     a rule that is no longer drawn is just a very loose paragraph: a two line
     description held 64 px of air under a 13 px face, and four sections of it
     added about a page and a half to the printed menu. */
  line-height: 22px;
  color: var(--brown);
}

/* the "add", "or", "without" lines the cards give under an item.

   GOLD AND BOLD, DAVID'S CALL, 2026-09-17: "Anything with bacon $3, cheese
   $2.50, this should be in gold." It is also how the printed lunch card sets
   them, in gold italic.

   THE CONTRAST NUMBER, ON THE RECORD RATHER THAN BURIED. #B8893C on the card's
   #F9F3E5 measures 2.84:1, which is under AA's 4.5 for text this size, and
   round 4 adopted the rule that gold means "act here". Both are reasons to ask
   the question, not reasons to overrule him: he has seen the printed card and
   asked for the same thing on screen. It is reported in README-round7.md and in
   the log with the one line that would fix it (a darker gold token at 4.6:1) so
   the decision stays his.

   INDENTED AND HANGING. The line sits 18 px in under its dish and the triangle
   hangs back out into that indent, so the extras read as a branch of the dish
   above rather than as another dish. No dotted leader: an extras line is not a
   price row. */
.item__extra {
  margin: 0;
  padding-left: 18px;
  font-family: var(--type);
  font-size: 13px;
  line-height: 22px;
  font-weight: 700;
  color: var(--gold);
}

/* the burger counter's standing line is a note on the course, not on a dish, so
   it does not hang and it is not gold */
.item__extra--head {
  padding-left: 0;
  font-weight: 400;
  color: var(--brown);
}
/* ---------------------------------------------- GOLD MEANS ACT HERE

   The extras marker, the separators between run-on items and the line
   numbers on the telegram were all set in --gold. Two things were wrong
   with that, and the rendered-page contrast sweep found the first:

   1. #B8893C on the card's #F9F3E5 measures 2.84:1. At 13 to 15 px that
      is under AA's 4.5, and the WCAG "incidental decoration" exemption is
      an argument, not a pass. --brown measures 6.0:1 on the same ground.

   2. Round 4 adopted the rule that warm colour has to mean "act here",
      and gave a link a 2 px gold underline against a decorative rule's
      1 px so the two could be told apart. A gold bullet and a gold
      separator spend that signal on ornament.

   So the ornaments are the site's secondary ink and gold is left to the
   things a visitor can click. THE HOME PAGE STILL CARRIES THREE GOLD
   SEPARATORS in its bread panel, at the same 2.84:1. Rule 5 says it is
   not touched, so they are reported in README-round5.md with the one
   line that fixes them, for David's call. */
.item__extra .lead { color: var(--gold); margin-left: -18px; padding-right: 6px; }

/* ===================================================== THE CHILLI GLYPH

   David, 2026-09-17: "Two chillies means nothing... put the sign." The words
   are out of the markup and the mark is the thing itself, in the same red as
   the dietary codes and at the same weight, so a dish's codes and its heat read
   as one group.

   SIZED IN CSS, NOT ON THE ELEMENT. The <svg> carries no width or height
   attribute, so these two lines are the only place the glyph's size is set and
   the print block can make it bigger without fighting an attribute.

   THE MEANING IS ON THE WRAPPER. `.hot` carries role="img" and the label
   ("Medium, two chillies"); each glyph inside is aria-hidden. A screen reader
   that read two chillies as "chilli chilli" would be describing the drawing
   rather than the dish. */
.hot {
  display: inline-flex;
  gap: 2px;
  vertical-align: -2px;
  color: var(--red);
}
.chilli { display: block; width: 9px; height: 14px; }

/* the key at the foot of the page sets the glyph beside its word */
.chillikey .hot { margin-right: 2px; }

/* a run of extras printed as one paragraph, the way the card gives it */
.runon {
  margin: 0;
  font-family: var(--type);
  font-size: 14px;
  line-height: 26px;
  color: var(--navy);
}
.runon .dot { color: var(--brown); }

/* ---------------------------------------------- the menu's own footer

   Verbatim from the printed cards. It is small print, so it is never
   gilt and never a heading.
   ------------------------------------------------------------------ */

.smallprint { padding: 24px 32px; }

.smallprint p {
  max-width: 88ch;
  font-family: var(--type);
  font-size: 13px;
  line-height: 24px;
  color: var(--brown);
}
.smallprint p + p { margin-top: 8px; }
/* THE SAME SENTENCE IN THE SAME COLOUR. The dietary line is now red under all
   six cards, and this block at the foot of the page repeats it; `.smallprint p`
   is (0,1,1) and beat the (0,1,0) colour on the class, so one copy of one
   sentence was red and the other brown, which reads as a mistake rather than as
   a decision. Whether the foot should go on repeating a line that is now under
   every card is a question for David, in README-round9.md. */
.smallprint p.printnote__diet { color: var(--red); }

/* the print control and the three cards, side by side under the facts */
.pagehead__do { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; }

/* ------------------------------------------- THE PRINT CONTROL'S OWN LINE

   ROUND 7. The three PDF download links that stood here are gone, David's call
   of 2026-09-17: "The menu on the website needs to be the exact same menu that
   we have printed... whenever I change the menu, we change it straight away on
   the website as well." Two menus cannot both be current, so there is one, and
   the button beside this line prints it.

   The line says what comes out, because a print control that does not is a
   control nobody dares press. */
.pagehead__note {
  flex: 1 1 22ch;
  margin-top: 4px;
  font-family: var(--type);
  font-size: 13px;
  line-height: 24px;
  color: var(--brown);
}

/* ==================================================== THE LETTER

   our-story.html. A sheet of the same paper under the 1891 postmark,
   with the two restyled exteriors franked into the right margin.
   ===================================================================== */

.letter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 246px;
  grid-template-rows: auto 1fr;
  gap: 24px 48px;
  padding: 40px 48px;
}

/* The head runs the whole width of the sheet, so the cancel is struck at the
   TOP RIGHT CORNER of the letter, where a franking mark goes. Held inside the
   text column it landed in the middle of the card with paper either side of
   it, which read as an orphan rather than as a postmark. */
.letter__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.letter__place {
  font-family: var(--type);
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
}

.letter__body { max-width: var(--measure); }

.letter__body p {
  font-family: var(--roman);
  font-size: 20px;
  line-height: 32px;
  color: var(--navy);
}
/* Paragraphs of a letter are indented and not spaced, which is how a
   letter is set and what keeps the block reading as one page of writing
   rather than as a stack of web paragraphs. The first is flush. */
.letter__body p + p { text-indent: 3ch; }

.letter__margin { display: grid; gap: 32px; align-content: start; justify-items: center; }

.letter__stamp { width: 100%; max-width: 198px; }
.letter__stamp figcaption {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown);
}

.letter__cancel { width: 132px; height: auto; opacity: 0.9; transform: rotate(-7deg); }

/* ------------------------------------------- THE SIDE-BY-SIDE POSTCARD

   A photograph on the left, its back on the right across the fold. The
   plaque on our-story.html uses it for a quotation, the room on
   functions.html for one action. It is ONE object with two fills rather
   than two near-identical objects, because the second copy is the one
   that drifts. */

.sidecard {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  align-items: stretch;
}

.sidecard__pic { margin: 16px 0 16px 16px; overflow: hidden; }
.sidecard__pic img { width: 100%; height: 100%; object-fit: cover; }

.sidecard__back {
  border-left: 1px solid var(--rule-gold);
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sidecard__label {
  font-family: var(--roman);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brown);
}

/* the plaque's own words, quoted, so the page carries the source as well
   as the retelling */
.sidecard blockquote {
  margin: 24px 0 0;
  padding-left: 24px;
  border-left: 3px double var(--gold);
  font-family: var(--type);
  font-size: 15px;
  line-height: 32px;
  color: var(--navy);
}
.sidecard__do { margin-top: 24px; }

.sidecard cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--brown);
}

/* ==================================================== THE CIRCULAR

   what-we-are-here-for.html. A printed circular: heavy rules top and
   bottom, a narrow measure, the claim of each paragraph run in at its
   head, and one photograph franked into the margin.
   ===================================================================== */

.circular { padding: 40px 48px 48px; }

.circular__rule { height: 6px; border-top: 3px double var(--gold); }

/* THE STAMP SITS IN THE MARGIN, NOT IN THE MEASURE. Floated inside the
   62ch column it cut the first paragraph to about 30 characters a line
   while the other three ran full width, which reads as a broken column
   rather than as a franked circular. A grid row puts the reading measure
   on the left and the stamp in its own margin on the right, and every
   paragraph gets the same measure. */
.circular__mid {
  display: grid;
  /* The measure and its stamp are ONE centred block on the sheet, which is
     how a circular is set. A 1fr first column would have stretched to the
     card's full width and left the stamp marooned four hundred pixels off
     the end of the text it belongs to. */
  grid-template-columns: minmax(0, 62ch) 240px;
  gap: 56px;
  justify-content: center;
  align-items: start;
  padding-top: 32px;
}

.circular__body p {
  font-family: var(--roman);
  font-size: 20px;
  line-height: 32px;
  color: var(--navy);
}
.circular__body p + p { margin-top: 32px; }

/* the first sentence of each paragraph is its claim, so it is run in as
   the head of its own paragraph. The words are the content pack's and
   are not changed: only their weight is. */
.claim {
  font-family: var(--roman);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy-deep);
}

.circular__stamp { width: 240px; margin: 0; }
.circular__stamp figcaption {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown);
}

.circular__foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-gold);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
}

/* ==================================================== THE TELEGRAM

   functions.html. The home page's room panel is a telegram form already;
   this is the whole form, with its head, its ruled body and its office
   line at the foot.
   ===================================================================== */

.telegram-form { padding: 0; }

.telegram-form__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 24px 40px;
  border-bottom: 3px double var(--gold);
}

.telegram-form__body {
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 448px;
  gap: 48px;
  padding: 32px 40px 40px;
}

.telegram-form__col { display: flex; flex-direction: column; }

.telegram-form__copy {
  max-width: var(--measure);
  font-family: var(--roman);
  font-size: 20px;
  line-height: 32px;
  color: var(--navy);
}

.telegram-form__lines { margin-top: 32px; }

/* the practical lines, one per ruled line of the form */
.telegram-form__lines li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--type);
  font-size: 15px;
  line-height: 32px;
  letter-spacing: 0.03em;
  color: var(--navy);
  border-bottom: 1px solid var(--rule-brown);
  padding: 8px 2px;
}
.telegram-form__lines .n {
  flex: none;
  width: 3ch;
  color: var(--brown);
  font-variant-numeric: tabular-nums;
}

/* The copy column is much shorter than the six numbered lines beside it, so
   its foot carries the form's own cancel rather than a third of a metre of
   bare paper. Same device as the picture side of the menu cards and the head
   of the letter: the object's own furniture, not a new one. */
.telegram-form__foot { margin-top: auto; padding-top: 32px; }
.telegram-form__foot img {
  width: 132px; height: auto; opacity: 0.85; transform: rotate(-7deg);
}

.telegram-form__do {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
}

/* ==================================================== THE NOTICE

   careers.html. A positions-vacant notice: the heavy frame, the caps
   line, the roles ruled off one from another.
   ===================================================================== */

.notice { padding: 0; }

.notice__frame { padding: 32px 40px 40px; border: 6px double var(--gold); margin: 12px; }

.notice__label {
  text-align: center;
  font-family: var(--roman);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--red);
}

.notice__title { margin-top: 24px; text-align: center; font-size: 0; line-height: 0; }
.notice__title .gilt-line { height: 64px; margin: 0 auto; }

/* ROUND 6: THE COUNTER, IN THE NOTICE'S OWN MARGIN.

   David, 2026-09-17: "Careers gets the counter photo no. 49." Same idiom as
   the circular's stamp, deliberately: a run of copy in its measure with a
   franked stamp in the margin beside it, both held as ONE centred block so
   the stamp stays with the text it belongs to instead of drifting to the far
   edge of the card. A `1fr` first column would have done exactly that. */
.notice__mid {
  margin-top: 32px;
  display: grid;
  /* THREE COLUMNS, AND THE FIRST IS EMPTY ON PURPOSE. Everything else on this
     notice is centred on the card: the POSITIONS VACANT line, the gilt title,
     the apply line. With copy-then-stamp the copy's own centre sits about three
     hundred pixels left of all of them, which reads as a misalignment rather
     than as a composition. A matching empty column on the left puts the copy
     back on the card's axis and leaves the stamp franked in the right margin,
     where a stamp goes. */
  grid-template-columns: 198px minmax(0, 58ch) 198px;
  gap: 40px;
  justify-content: center;
  align-items: center;
}

.notice__copy { grid-column: 2; }
.notice__stamp { grid-column: 3; }

.notice__copy {
  margin: 0;
  max-width: 58ch;
  text-align: center;
  font-family: var(--roman);
  font-size: 20px;
  line-height: 32px;
  color: var(--navy);
}

.notice__stamp { width: 198px; margin: 0; }
.notice__stamp figcaption {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--type);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown);
}

.notice__roles {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}

.notice__role { padding: 24px 0; border-top: 1px solid var(--rule-gold); }
.notice__role h2 {
  font-family: var(--roman);
  font-size: 25px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.notice__role p {
  margin-top: 8px;
  font-family: var(--type);
  font-size: 15px;
  line-height: 32px;
  color: var(--navy);
}

.notice__apply {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 3px double var(--gold);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 16px 32px;
  text-align: center;
}

.notice__apply p {
  font-family: var(--type);
  font-size: 15px;
  line-height: 32px;
  color: var(--navy);
}

/* ==================================================== THE STAMP ROW

   enquire.html, round 6. The three photographs the content pack names, as a
   torn strip of three stamps across the head of the enquiry card.

   IT IS THE SAME PERFORATED STAMP the rest of the site uses, at the same
   gauge, in the same drop shadow wrapper, because a mask cannot carry its own
   shadow. Three columns, not six: three stamps stretched across a 1440 page
   would each be 450 px wide, which is a photograph, not a stamp. They sit at
   the sheet's own 198 px and the row is centred under the page head. */

.stamprow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

/* .stamp6 and its caption are round3.css's, unchanged: the same perforation
   gauge, the same cream tab, the same drop shadow wrapper. All this adds is the
   row that holds three of them. */
.stamprow .stamp6 { width: 198px; }

/* ================================================ THE FILL-IN POSTCARD

   enquire.html. The visitor writes on the ruled back: the message on the
   left of the fold, the particulars on the right where an address would
   go, the stamp box in the corner, and the wax seal as the send.
   ===================================================================== */

.fillcard { padding: 0; }

.fillcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 24px 40px;
  border-bottom: 1px solid var(--rule-gold);
}

.fillcard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 448px;
}

/* The message side is as tall as the particulars side, so the writing area
   has to grow into it. Without this the textarea stopped at its min-height
   and left a third of the card as bare paper. */
.fillcard__msg { padding: 32px 40px 40px; display: flex; flex-direction: column; }
.fillcard__msg .field { flex: 1 1 auto; display: flex; flex-direction: column; }
.fillcard__msg .field textarea { flex: 1 1 auto; }
.fillcard__addr {
  border-left: 1px solid var(--rule-gold);      /* the fold */
  padding: 32px 40px 40px;
}

.field { display: block; }
.field + .field { margin-top: 24px; }

.field > label {
  display: block;
  font-family: var(--type);
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown);
}

/* An input on a postcard is a ruled line you write on, so that is what
   it is: no box, no radius, one rule under the writing, and the same
   typewriter face as the rest of the card. The focus ring is the page's
   own and is NOT removed. */
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 4px;
  min-height: 44px;                 /* the touch-target floor */
  /* background-COLOR, not the background shorthand: the shorthand resets
     background-image too, and the message area's own writing lines are a
     background image. The shorthand wiped them and the ruling simply did
     not appear. */
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--brown);
  border-radius: 0;
  font-family: var(--type);
  font-size: 16px;                  /* 16 px, or iOS zooms the page on focus */
  line-height: 24px;
  color: var(--navy);
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { min-height: 192px; resize: vertical; line-height: 32px; padding-top: 0; }
/* THE SELECT KEEPS AN ARROW. `appearance: none` was removing the native one
   and nothing was put back, so on a field that already has no box and no fill,
   "Table booking" read as a word somebody had typed and the other three
   choices, Function, Catering and Something else, were invisible. Codex,
   2026-09-21. The chevron is an inline SVG in the page's own brown, drawn in
   the background so it needs no extra element and no script, and the right
   padding is opened up to keep the longest option clear of it.

   `background-repeat: no-repeat` IS LOAD-BEARING on a select: without it the
   chevron tiles the whole field. */
.field select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B4F3A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px 8px;
}

.field input:hover, .field select:hover, .field textarea:hover,
.field input:focus, .field select:focus, .field textarea:focus {
  border-bottom-color: var(--red);
}

/* THE RING IS ON :focus, NOT ONLY ON :focus-visible, AND ONLY FOR THESE.

   The page's global ring is `:focus-visible`, which is right for links and
   buttons: it keeps a mouse click from painting an outline nobody asked for.
   It is NOT enough for `<input type="date">`. That control has its own inner
   day, month and year segments, and while one of them holds focus the host
   input does not match :focus-visible, so tabbing through the date field
   showed no ring at all. The playwright pass found it; no eye would have,
   because the segment itself is highlighted and the field looks focused.

   A form field is also the one place where showing the ring to a mouse user
   is a help rather than noise, so the trade this rule makes is the right way
   round. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* THE DATE FIELD HAS A FOURTH TAB STOP, INSIDE ITS OWN SHADOW DOM. Chrome's
   `<input type="date">` is four stops: day, month, year, and the little
   calendar button. On that fourth stop `document.activeElement` is still the
   input, but the HOST no longer matches :focus, so the page's ring disappears
   and Chrome paints its OWN default blue box on the button instead. Screenshot
   at `_proofs/round5/00_date-field-shadow-focus-ring.png` shows it.

   The control is therefore never unmarked, but it is marked in a colour that
   belongs to no part of this site. The button is a shadow part and this is the
   one selector that reaches it. */
.field input[type="date"]::-webkit-calendar-picker-indicator:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

.field__hint {
  display: block;
  margin-top: 4px;
  font-family: var(--type);
  font-size: 12px;
  line-height: 24px;
  color: var(--brown);
}

/* the stamp box in the corner of the card */
.fillcard__stampbox {
  width: 108px;
  height: 132px;
  margin-left: auto;
  border: 2px dashed var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.fillcard__stampbox img { width: 100%; height: auto; opacity: 0.8; }

/* the send: the wax seal, as a real button */
.seal {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 8px 24px 8px 8px;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--roman);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.seal img { width: 56px; height: 56px; }
.seal:hover, .seal:focus-visible { background: rgb(184 137 60 / 0.14); }
.seal:active { transform: translateY(1px); }

/* FOUND BY CODEX, round 5, P2, and it is the serious one. The card ships with
   its send DISABLED and `assets/js/pages.js` enables it. With no script the
   button was live, the form has no action, and a form with no action GETs the
   current URL: the visitor's name, email, phone and message would have gone
   into the address bar and into any server log, from a card whose own
   confirmation says nothing has left the page. A noscript notice does not
   prevent a submission, it only explains one.

   So the control cannot be operated until the only thing that can handle it is
   actually running, and it says so rather than looking broken. */
.seal[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  border-style: dashed;
}
.seal[disabled]:hover { background: transparent; }

/* the thank-you state. It replaces the form in place rather than moving
   the visitor to another page, and it takes focus so a screen reader is
   told the send happened. */
.sent {
  padding: 48px 40px;
  text-align: center;
}
.sent__mark {
  font-family: var(--roman);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--red);
}
.sent__body {
  margin-top: 24px;
  font-family: var(--roman);
  font-size: 25px;
  line-height: 32px;
  color: var(--navy);
}
.sent__note {
  margin-top: 16px;
  font-family: var(--type);
  font-size: 14px;
  line-height: 24px;
  color: var(--brown);
}
.sent img { width: 72px; height: 72px; margin: 0 auto 8px; }

/* ---- where we are, under the card ---- */

.findus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }

.findus__facts { padding: 32px 40px 40px; }
.findus__facts dt {
  font-family: var(--type);
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown);
}
.findus__facts dd {
  margin: 0 0 24px;
  font-family: var(--roman);
  font-size: 19px;
  line-height: 32px;
  color: var(--navy);
  /* info@thepostofficemossvale.com.au is 33 unbreakable characters and it is
     wider than a 390 px phone's column. Without this it sets the column's
     min-content width, the grid track grows to hold it, and the whole card
     runs off the right of the screen. */
  overflow-wrap: anywhere;
}
.findus__facts dd:last-child { margin-bottom: 0; }
.findus__facts a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.findus__facts a:hover, .findus__facts a:focus-visible {
  color: var(--red); border-bottom-color: var(--red);
}

/* THE MAP IS A PLACEHOLDER AND SAYS SO. A 16:9 box with the address in
   the middle of it, as the brief asks. It is not an embed: a third party
   map frame on a page that is not published yet would be a live request
   to a third party from a sample, and the platform decision is still
   David's. */
.findus__map {
  margin: 16px 16px 16px 0;
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--gold);
  background: rgb(184 137 60 / 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
}
.findus__map .mark { color: var(--brown); }
.findus__map address {
  font-style: normal;
  font-family: var(--roman);
  font-size: 21px;
  line-height: 32px;
  color: var(--navy);
}
.findus__map small {
  font-family: var(--type);
  font-size: 12px;
  line-height: 24px;
  color: var(--brown);
}


/* ============================================== THE MEMBERSHIP PAGE

   membership.html, round 6, brief 6 M3. The eighth page, and the only one
   whose object is not stationery we drew: it is the card the cafe actually
   hands over, rendered from `Membership Cards/*.pdf` by
   `_build/make_membership_cards.py`.

   THREE OBJECTS, three different shapes, which is the rule the six other
   pages already follow: the pair of cards, the three ways in, and the fine
   print. The ways are NOT set as the telegram's numbered ruled lines, even
   though functions.html has exactly that component sitting there. Two pages
   with the same object is how a site starts reading as a template, and three
   alternatives are not six particulars of a form.
   ===================================================================== */

/* A LINK INSIDE A PARAGRAPH. `.link` is an inline-block with 8 px of padding
   top and bottom, which is right for a standalone action and wrong inside a
   sentence: it inherits none of the paragraph's type and it pushes the line
   it sits on. This variant keeps the gold 2 px underline that means "act
   here" and gives everything else back to the text around it. */
.link--inline {
  display: inline;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ---------------------------------------------------- the pair of cards */

.cardpair { padding: 0; }

.cardpair__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 24px 40px;
  border-bottom: 1px solid var(--rule-gold);
}

/* THE CARDS ARE DRAWN AT THE SIZE THEY WERE MADE FOR, 420 px, and the columns
   come down to meet them. Two 1fr columns on a 1440 page made each card 608 px
   wide, and two things were wrong with that at once.

   1. IT WAS BELOW THE SITE'S OWN SHARPNESS FLOOR. `make_membership_cards.py`
      renders each front at 840 px because the page draws it at 420, which is the
      2x rule `optimise_assets.py` enforces on every other image here. Drawn at
      608 it was 1.38x and softer than anything else on the site.

   2. IT FLOODED THE FOLD WITH NAVY. `_measure/blue_r5.py` put this page at
      28.99 per cent of a screenful against the project's 15 per cent cap, and it
      was right: two 608 px navy rectangles side by side is a third of the
      window. At 420 it measures inside the cap.

   And a membership card is 90 mm wide. Drawn as a billboard it stops reading as
   the object in your wallet, which is the one thing this page is about. */
.cardpair__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
  gap: 48px;
  padding: 40px;
}

/* The card is a real card lying on the cream, so it casts the page's own
   paper-on-paper shadow: a tight contact edge and a wider, fainter one
   beyond it. No rotation. The postcard on the home page is the one element
   on this site that sits off square, and it earns it by being a loose card
   dropped on a desk; two of them would be a mannerism. */
.tier__card {
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-card);
  border-radius: 2px;
}

.tier__name {
  margin-top: 32px;
  font-family: var(--roman);
  font-size: 25px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}

.tier__who {
  margin-top: 8px;
  font-family: var(--type);
  font-size: 13px;
  line-height: 24px;
  color: var(--brown);
}

.tier__body {
  margin-top: 16px;
  font-family: var(--roman);
  font-size: 19px;
  line-height: 32px;
  color: var(--navy);
}

.cardpair__both {
  margin: 0;
  padding: 24px 40px 32px;
  border-top: 1px solid var(--rule-gold);
  font-family: var(--roman);
  font-size: 19px;
  line-height: 32px;
  color: var(--navy);
}

/* ------------------------------------------------------ how to join */

.joincard { padding: 0; }

.joincard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 24px 40px;
  border-bottom: 3px double var(--gold);
}

.joincard__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding: 32px 40px 40px;
}

.joincard__ways { margin: 0; padding: 0; list-style: none; }

.joincard__ways li {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--roman);
  font-size: 19px;
  line-height: 32px;
  color: var(--navy);
}
.joincard__ways li + li { margin-top: 24px; }

/* the numeral set large, which is the one Swiss move this project's grid
   skill actually asks for, and it is real: these are three alternatives and
   the order is the source's */
.joincard__ways .n {
  flex: none;
  width: 2ch;
  font-family: var(--type);
  font-size: 24px;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
  color: var(--brown);
}

.joincard__note p {
  font-family: var(--type);
  font-size: 15px;
  line-height: 32px;
  color: var(--navy);
}
.joincard__do { margin-top: 24px; }

/* ------------------------------------------------------- the fine print */

.smallprint--terms .mark { display: block; margin-bottom: 16px; }
.smallprint--terms p + p { margin-top: 16px; }
.smallprint--terms a { font-size: inherit; line-height: inherit; padding: 0; display: inline; }

/* ================================================================ 1240

   The same band round3.css uses for the home page's cards. The fixed
   picture columns give way before the text columns are squeezed past
   their own padding.
   ================================================================= */

@media (max-width: 1240px) and (min-width: 901px) {
  .pagehead__title .gilt-line { height: 68px; }
  .pagehead__sheet { padding: 24px 32px; }
  .bigcard__name .gilt-line { height: 44px; }
  .bigcard__head { padding: 20px 24px 0; }
  .bigcard__back { padding: 24px; }
  .bigcard__cols { column-gap: 32px; }
  .letter { grid-template-columns: minmax(0, 1fr) 198px; gap: 24px 32px; padding: 32px; }
  .circular__mid { grid-template-columns: minmax(0, 56ch) 198px; gap: 32px; }
  .circular__stamp { width: 198px; }
  .notice__mid { grid-template-columns: 198px minmax(0, 52ch) 198px; gap: 32px; }
  .sidecard { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .sidecard__back { padding: 24px 32px; }
  .telegram-form__body { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: 32px; }
  .fillcard__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
  .notice__title .gilt-line { height: 52px; }
  .cardpair__grid { gap: 32px; padding: 32px; }
  .joincard__body { gap: 32px; padding: 24px 32px 32px; }
}

/* =============================================================== 900

   Every object becomes one column, exactly as the home page's do. No
   asset is redrawn and no photograph is re-cut: the same files scale.
   ================================================================= */

@media (max-width: 900px) {
  .pagehead { padding-top: 32px; }
  .pagehead__sheet { padding: 24px; }
  .pagehead__title .gilt-line { height: 46px; }
  .pagehead__lede { font-size: 18px; }
  .pagehead__facts { gap: 0 24px; }
  .pagehead__facts li { font-size: 12px; line-height: 24px; }

  /* ROUND 9: THE HEAD NO LONGER STACKS ON A PHONE. David, 2026-09-17: "For each
     menu, the stamp 'Moss Vale 15 December' should be on the right-hand side,
     and on the left-hand side, we still should have the postman logo." He said
     "for each menu", not "on a desktop", so the arrangement is the same at 390
     as at 1440: crest left, name between, cancel right.

     ROUND 7 STACKED IT, following brief 5 addendum 1's rule that a postcard
     panel centres on a phone, and with no crest on the screen at all that gave
     a name with the cancel under it. Three marks in a row is a different object
     from one mark under another, and it is the one the printed sheet uses.

     IT FITS, AND THAT IS MEASURED, NOT ASSUMED. The card is 342 px wide inside
     a 390 px screen. The crest is 44 px tall, so 35 px wide; the cancel is 44 px;
     two gaps are 24 px. The widest gilt line of the six is Breakfast Specials at
     1429 x 274, which at a 34 px height is 177 px. 35 + 44 + 24 + 177 = 280 of
     the 342 available, so the name is never crowded and never clipped. The
     eleven-width sweep is what proves it at every width in between, and 900 px
     is where this query starts, where there is far more room still. */
  /* `minmax(0, 1fr)`, NOT `1fr`, AND `max-width` ON THE LETTERING. Codex, round
     9: a 1fr track cannot shrink below its own min-content, and the middle
     track's min-content is the gilt line's rendered width. At 320 px, which is
     narrower than the 390 the sweep starts at but is a real phone, the crest,
     the cancel, two gaps and the widest line come to about 280 px inside 232 px
     of card, and the track's floor would have pushed the cancel off the card
     rather than let anything give. A zero floor plus a max-width means the
     lettering letterboxes inside its own box instead, which is why the
     `object-fit` is there: without it a constrained width and a fixed height
     squash the letters. The query below takes all three marks down before it
     ever gets that far. */
  .bigcard__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 8px;
    column-gap: 12px;
    padding: 20px 20px 0;
  }
  .bigcard__name { min-width: 0; }
  .bigcard__name .gilt-line { max-width: 100%; object-fit: contain; }
  .bigcard__crest { grid-column: 1; height: 44px; }
  .bigcard__name { grid-column: 2; }
  .bigcard__name .gilt-line { height: 34px; }
  .bigcard__stamp { grid-column: 3; justify-self: end; width: 44px; }
  .bigcard__when { grid-column: 1 / -1; margin-top: 4px; }
  /* `.bigcard .printnote`, NOT `.printnote`. The plain class ties the screen
     rule declared later in this file and loses on source order, so between
     361 px and 900 px the note kept the desktop's 32 px side margins inside a
     card whose own padding had already come down to 24. Only the 360 px query
     at the foot of the file ever took effect. Codex, 2026-09-21. */
  .bigcard .printnote { margin: 0 24px 24px; }
  .bigcard__hero img { aspect-ratio: 4 / 3; }
  .bigcard__back { padding: 24px; }
  /* ONE COLUMN AT 390, which the brief asks for by name. Two columns of
     a dotted-leader price list on a 390 px screen puts four words on
     three lines and the leader disappears altogether. */
  .bigcard__cols { columns: 1; column-rule: 0; }
  .item { font-size: 14px; }
  .item__desc, .item__extra { max-width: none; font-size: 12px; line-height: 24px; }
  .runon { font-size: 13px; line-height: 24px; }
  .smallprint { padding: 24px; }

  .letter { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 24px; padding: 24px 24px 32px; }
  .letter__cancel { width: 96px; }
  .letter__body p { font-size: 17px; line-height: 32px; }
  .letter__margin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
  }
  .sidecard { grid-template-columns: 1fr; }
  .sidecard__pic { margin: 16px 16px 0; aspect-ratio: 3 / 4; }
  .sidecard__back { border-left: 0; border-top: 1px solid var(--rule-gold); padding: 24px; }

  .circular { padding: 24px 24px 32px; }
  .circular__body { font-size: 17px; padding-top: 24px; }
  .circular__body p { font-size: 17px; }
  .circular__mid { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .circular__stamp { width: 100%; max-width: 240px; margin: 0 auto; }
  .telegram-form__foot { padding-top: 24px; }
  .telegram-form__foot img { width: 96px; }

  .telegram-form__head { padding: 16px 24px; }
  .telegram-form__body { grid-template-columns: 1fr; gap: 32px; padding: 24px; }
  .telegram-form__copy { font-size: 17px; }
  .telegram-form__lines li { font-size: 14px; line-height: 24px; }

  .notice__frame { padding: 24px 20px 32px; margin: 8px; border-width: 4px; }
  .notice__label { font-size: 13px; letter-spacing: 0.3em; text-indent: 0.3em; }
  .notice__title .gilt-line { height: 40px; }
  .notice__copy { font-size: 17px; }
  /* the stamp goes UNDER the copy, centred, rather than shrinking beside it */
  .notice__mid { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .notice__copy, .notice__stamp { grid-column: 1; }
  .notice__copy { max-width: none; }
  .stamprow { gap: 20px; }
  .notice__roles { grid-template-columns: 1fr; gap: 0; }
  .notice__role h2 { font-size: 21px; }

  .fillcard__head { padding: 16px 24px; }
  .fillcard__grid { grid-template-columns: 1fr; }
  .fillcard__msg { padding: 24px 24px 8px; }
  .fillcard__addr { border-left: 0; border-top: 1px solid var(--rule-gold); padding: 24px; }
  .field textarea { min-height: 160px; }

  /* minmax(0, 1fr), not 1fr. A bare 1fr is minmax(AUTO, 1fr), so the track
     can never be narrower than its own min-content, and one long email
     address pushes the card past the viewport. This is the same trap the
     cards at 1240 fell into in round 4. */
  .findus { grid-template-columns: minmax(0, 1fr); }
  .findus__facts { padding: 24px; }
  .findus__map { margin: 0 16px 16px; }
  .findus__map address { font-size: 18px; }

  /* THE TWO CARDS STACK. Side by side at 390 each card is 155 px wide, which is
     40 per cent of the real thing and puts the rate, the tier and the scope all
     under six pixels tall. One above the other they are 350 px, which is 97 per
     cent of a 90 mm card at this screen's density: near enough to the object in
     the hand. */
  .cardpair__head { padding: 16px 24px; }
  .cardpair__grid { grid-template-columns: 1fr; gap: 40px; padding: 24px; }
  /* M1a, applied to the page that did not exist when David asked for it. A tier
     is a picture, a name and two lines of copy, which is the postcard panel's
     own shape, so it centres on a phone with the rest of them. The three things
     on this page that are NOT postcards keep their flush left edge, exactly as
     the letter, the circular, the telegram, the notice and the fill-in card do
     on the other pages: the both-cards line, the numbered ways in (a number in
     a column is an alignment, not decoration) and the fine print. */
  .tier { text-align: center; }
  .tier__name { margin-top: 24px; font-size: 21px; }
  .tier__body { font-size: 17px; }
  .cardpair__both { padding: 24px; font-size: 17px; }

  .joincard__head { padding: 16px 24px; }
  .joincard__body { grid-template-columns: 1fr; gap: 32px; padding: 24px; }
  .joincard__ways li { font-size: 17px; gap: 16px; }
  .joincard__ways .n { font-size: 21px; }
  .joincard__note p { font-size: 14px; line-height: 24px; }
}

/* THE STAMPS GO TWO UP ON A PHONE, and the number is measured. Three 198 px
   stamps and two 20 px gaps need 634 px of row; a 390 px screen gives the row
   350. Left at 198 they stack one per line and put seven hundred and fifty
   pixels of scroll between the page head and the form, which is the one thing
   this page exists for. At half the row less the gap they are 165 px each, and
   the longest caption, THE FRONT DOOR, sets 14 characters at 13 px with 0.12 em
   of tracking, which is 122 px inside a 149 px tab. Two up, then one under: a
   torn strip of three, which is what it is. */
@media (max-width: 600px) {
  .stamprow { gap: 16px; }
  .stamprow > .stamp6__drop { width: calc(50% - 8px); }
  .stamprow .stamp6 { width: 100%; }
}

/* ======================================== ROUND 9, THE DIETARY NOTE IS RED

   David, 2026-09-17: "When we put 'can be made vegetarian, gluten-free,
   dairy-free on request', the colour is wrong. This should be in red... and it
   should be on each menu. Remember, those are A4-sized menus, so it needs to be
   the same as what we did."

   THE WHOLE LINE, NOT JUST ITS ASTERISK. `.code` already drew the `*` red; the
   words after it were brown like every other note. The red is the page's one
   code red, `--red`, the same value the dietary codes and the chilli glyphs
   use. No new colour: brief 9 rule 5.

   IT IS ON EVERY MENU ON THE SCREEN TOO, not only on the sheet. Round 7 kept
   the whole notes block for print and left the screen with one small-print
   panel at the foot of the page, so a reader looking at the Lunch card had to
   scroll past three more cards to learn that a dish can be made gluten free.
   Now each card carries the dietary line under its own list.

   ONLY THAT LINE ON THE SCREEN. The surcharge line and the chilli key stay once,
   at the foot of the page, where they were: repeating all three under all six
   cards would set the same nine lines six times over. On the SHEET all three
   print on every sheet, because every sheet leaves the building on its own.

   THE BLOCK IS DECLARED BEFORE THE PRINT BLOCK ON PURPOSE: `display: none`
   written after `@media print`'s `display: block` has the same specificity and
   wins on source order, which is how the first A4 proof came out with no notes
   on any sheet. */
.printnote {
  display: block;
  margin: 0 32px 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-gold);
}
.printnote p { display: none; }
.printnote .printnote__diet { display: block; }

.printnote__diet {
  margin: 0;
  font-family: var(--type);
  font-size: 13px;
  line-height: 22px;
  color: var(--red);
}

/* ======================================= THE PRINT MASTER, ROUND 7

   THIS IS THE CAFE'S PRINTED MENU. Not a web page with its furniture hidden:
   the sheet that comes out of the printer is the thing that goes on the tables.
   David, 2026-09-17:

     "The menu on the website needs to be the exact same menu that we have
      printed... it's a PDF print, so everybody can print it from the website,
      even us... A4... whenever I change the menu, we change it straight away on
      the website as well."

   So the three Claude Design PDFs are retired and this block is what replaces
   them. One A4 portrait sheet per section, 12 mm margins, the crest with the
   postman at the head, the gilt section name, the postmark, the time line, the
   items in two columns and the notes at the foot of every sheet.

   A NAMED PAGE, NOT A GLOBAL ONE. `@page { margin: 12mm }` would set the margin
   on every printed page of the whole site, including the home page brief 7 rule
   3 says is not touched. `@page menu` plus `page: menu` on the four sections
   scopes it to the four sheets this block is about. Chrome has supported the
   `page` property since 131.

   THE SHEET IS THE SECTION, so the page break is `break-before` on the section
   and not a stray element with a `page-break-after`. The first one is `auto`
   because a break before the first sheet is a blank sheet.
   ===================================================================== */

@page menu {
  size: A4 portrait;
  margin: 12mm;
}

/* ROUND 9: THE SPECIALS ARE A5, because that is what the cafe already prints.
   `Menus/New/To be printed/POMV_Breakfast_Specials_A5.pdf` and
   `POMV_Lunch_Specials_A5.pdf` are both 420 x 595 pt, and David, 2026-09-17:
   "You have the A5 size for the specials, because now the breakfast special is
   hidden and mixed with the menu, which doesn't make any sense anymore." Same
   12 mm margin as the A4 sheets, so the two sizes read as one set. */
@page specials {
  size: A5 portrait;
  margin: 12mm;
}

@media print {
  /* the reveal animation never runs in a print context, so without this the
     sheets come out blank */
  .js .reveal,
  .js .reveal--card { opacity: 1 !important; transform: none !important; }

  /* THE FURNITURE, AND ONLY ON THE MENU PAGE.
     Everything a reader cannot hold in their hand comes off the sheet. But
     pages.css is loaded by all seven generated pages, so an unscoped
     `.pagehead { display: none }` here would strip the title and the lede off
     every printed page on the site: print membership.html and it would come out
     with no heading and no terms. Codex, round 7. `body.page-menu` is written
     by the build and is on menu.html and nothing else, so the other six print
     exactly as they did in round 6. `body:has(.menusec)` was tried first and
     Chrome's print pass left the page head on the sheet, which cost one A4
     proof. */
  .page-menu .skip,
  .page-menu .head,
  .page-menu .env,           /* the footer is <footer class="env">, not .foot */
  .page-menu .counter,
  .page-menu .pagehead,
  .pagehead__do,             /* a control is never printed, on any page */
  .fillcard__stampbox,
  .seal,
  .findus__map { display: none !important; }

  /* the standalone small print at the foot of the page: it is printed on every
     sheet by `.printnote` instead, because every sheet leaves the building on
     its own */
  /* `:not(.menusec)` IS LOAD-BEARING. The four sections are themselves `.leaf`,
     so `.menusec ~ .leaf` matched sections two, three and four as well and the
     printed menu came out as a single sheet of Breakfast. */
  .menusec ~ .leaf:not(.menusec) { display: none !important; }

  .ruled { background-image: none; }

  /* ---- the sheet ---- */

  /* THE NAMED PAGE GOES ON `main` AS WELL AS ON THE SECTIONS, and that is the
     cure for a blank sheet that had been coming out of one print run in six.

     A document starts in the UNNAMED page context. `main` has a box of its own
     before the first section, so that unnamed page was opened, and the first
     `.menusec`, which asks for `page: menu`, then forced a break onto a named
     page and left the unnamed one behind: a blank sheet, at Chrome's default US
     Letter rather than A4, in front of the menu. It was intermittent, three
     runs in nine on 2026-09-17, because what occupies the unnamed context
     depends on whether the page's own script has added its classes before the
     print pass, which is a race.

     Round 7 met the same blank sheet, found `.menusec:first-of-type` matching
     nothing, fixed that, and reasonably believed it was done. The
     `:first-of-type` bug was real; it was not the only cause. Naming the page
     on the container means there is no unnamed context to leave behind, and the
     margin and padding are zeroed so nothing of `main`'s own is drawn on the
     sheet.

     MEASURED: 20 consecutive runs after this rule, 6 sheets every time. The
     count is in README-round9.md. */
  .page-menu main {
    page: menu;
    margin: 0;
    padding: 0;
  }

  /* THE PRINT ORDER IS NOT THE SCREEN ORDER, and David set both. On screen the
     specials follow the menu they belong to, so the page reads Breakfast,
     Breakfast Specials, Lunch, Lunch Specials, Little One's, Drinks. On paper
     the four A4 sheets come out first and the two A5 sheets after them, because
     they are two different pieces of stationery and the cafe prints them as two
     runs of one job.

     TWO RULES, NOT SIX. `main` becomes a flex column for print only, every menu
     section takes order 1, and the two specials take order 2. Flex keeps the
     document order inside each order group, so the four stay in their order and
     the two specials stay in theirs, and nothing has to be renumbered when a
     section is added. */
  .page-menu main { display: flex; flex-direction: column; }
  .menusec { order: 1; }
  .menusec--specials { order: 2; }

  .menusec {
    page: menu;
    margin: 0;
    padding: 0;
    max-width: none;
  }
  .menusec--specials { page: specials; }
  /* THE BREAK GOES ON A SECTION THAT FOLLOWS ANOTHER, not on every section with
     the first one excused by `:first-of-type`. `:first-of-type` means the first
     SECTION of its parent, and the first section inside <main> is the page head,
     not a menu section, so it matched nothing: Breakfast carried a page break
     before it and Chrome sometimes honoured it, emitting a blank US Letter sheet
     of bare paper in front of the menu. It was intermittent, one run in three,
     which is the worst kind of wrong. `.menusec + .menusec` asks a question about
     the actual neighbours and cannot be fooled by what else is in the box. */
  .menusec + .menusec { break-before: page; }

  .menusec .card {
    box-shadow: none;
    outline: 0;
    background: none;
    break-inside: auto;
  }

  /* ---- the head of the sheet ---- */
  .bigcard__hero { display: none; }

  /* AN A4 SHEET IS 795 px WIDE, so every rule in the 900 px phone query above
     is live in print and has to be undone here by hand. The first A4 proof came
     out with the postmark stacked under the section name and the time line in
     the middle of the sheet, which is the phone layout, correctly applied to a
     piece of paper. */
  .bigcard__head {
    grid-template-columns: 1fr auto 1fr;
    row-gap: 0;
    padding: 0 0 3mm;
    column-gap: 6mm;
    align-items: center;
  }
  .bigcard__name { grid-column: 2; }
  .bigcard__stamp { grid-column: 3; justify-self: end; }
  .bigcard__when { grid-column: 1 / -1; }
  .bigcard__crest {
    display: block;
    grid-column: 1;
    justify-self: start;
    width: 18mm;
    height: auto;
  }
  .bigcard__name .gilt-line { height: 12mm; }
  /* THE CANCEL IS TILTED SIX DEGREES, so its PAINTED box is wider than its
     layout box and it was landing 11.0 mm from the right edge of the sheet
     against a 12 mm margin. Found by the margin check once that check was made
     to measure images as well as text (Codex, round 7). Two millimetres of
     margin puts the whole stamp, rotation and all, back inside the frame; the
     section name stays centred because it sits in its own grid column between
     two equal ones. */
  .bigcard__stamp { width: 16mm; margin-right: 2mm; opacity: 0.85; }
  .bigcard__when { margin-top: 1.5mm; font-size: 8.3pt; line-height: 11pt; }

  /* ---- the list ---- */
  .bigcard__back { padding: 0; }
  /* THE SHEET IS SIZED TO ITS LONGEST SECTION, NOT TO A GUESS. Breakfast is
     nineteen dishes plus twelve extras plus the notes, and it is the section
     that sets every number below. `column-fill: balance` was tried first and
     does nothing here: the spec forces `auto` in a fragmented flow, so Chrome
     fills column one to the foot of the sheet and starts column two, and the
     only thing that brings a section onto one page is making it shorter. */
  .bigcard__cols {
    columns: 2;
    column-gap: 7mm;
    column-rule: 0;
  }
  /* AN A5 SHEET IS 420 pt WIDE, half an A4's area. Three dishes and four
     dishes, set in one column, exactly as the cafe's own printed A5 specials
     set them. Two columns on a page this narrow would give two dishes in one
     and one in the other. */
  .menusec--specials .bigcard__cols { columns: 1; }
  /* the screen card holds the head off the top of the paper because it has no
     photograph band above it; on a sheet the margin is the @page's 12 mm and
     all six heads have to start on the same line */
  .bigcard--nohero .bigcard__head { padding-top: 0; }
  /* the head is the same three marks on a page two thirds the width, so all
     three come down in proportion rather than crowding the lettering */
  .menusec--specials .bigcard__crest { width: 14mm; }
  .menusec--specials .bigcard__name .gilt-line { height: 9mm; }
  .menusec--specials .bigcard__stamp { width: 13mm; }
  .course-blk { margin-bottom: 3.5mm; }
  .dishblk { margin-bottom: 1.6mm; }
  .course-blk__name { font-size: 9.5pt; line-height: 14pt; }
  .item { font-size: 9.5pt; line-height: 13pt; }
  .item__desc,
  .item__extra { font-size: 8.2pt; line-height: 11.4pt; max-width: none; }
  .item__extra { padding-left: 4mm; }
  .item__extra .lead { margin-left: -4mm; }
  /* the course's own standing line does not hang, in print as on screen */
  .item__extra--head { padding-left: 0; }
  .runon { font-size: 8.2pt; line-height: 11.4pt; }
  .chilli { width: 7pt; height: 11pt; }

  /* NOTHING IS TORN. A course, and inside it a dish, and inside that the row
     itself: three nested guards, because a break at any one of the three levels
     leaves a price without its dish. */
  .course-blk,
  .dishblk,
  .item { break-inside: avoid; }

  /* ---- the notes at the foot of every sheet ---- */
  .printnote {
    display: block;
    margin-top: 3.5mm;
    padding-top: 2.5mm;
    border-top: 1px solid var(--rule-gold);
    break-inside: avoid;
  }
  /* ON THE SHEET ALL THREE LINES PRINT. The screen shows only the dietary line
     under each card and keeps the surcharge line and the chilli key once at the
     foot of the page; a sheet leaves the building on its own and has to carry
     all three. */
  .printnote { margin: 3.5mm 0 0; padding-top: 2.5mm; }
  .printnote p { display: block; }
  .printnote p {
    margin: 0;
    font-family: var(--type);
    /* 8.3, NOT 8. cafe-menus-design sets an 8 pt floor and the proof measures
       the PDF's own spans: at 8 pt Chrome wrote 7.99 and the guard fired, which
       is the guard working. */
    font-size: 8.3pt;
    line-height: 11.4pt;
    color: var(--brown);
  }
  .printnote p + p { margin-top: 1mm; }
  /* THE DIETARY LINE IS RED ON THE SHEET TOO, and it needs this rule to be.
     Codex, round 9: `.printnote p` is (0,1,1) and sets `color: var(--brown)`,
     so it beat the (0,1,0) `.printnote__diet` and all six sheets printed the
     sentence brown while the screen showed it red. David's correction 3 is
     about the printed A4s in his own words: "it should be on each menu.
     Remember, those are A4-sized menus". Measured on the PDF by
     `print_menu_r9.py`, which now asks the sheet what colour it drew. */
  .printnote p.printnote__diet { color: var(--red); }
  /* THE KEY GOES ON THE PAPER, Codex round 7. A sheet that prints a chilli
     beside four dishes and leaves the key on a web page nobody is holding has
     told the reader nothing. */
  .printnote .chilli { width: 6.5pt; height: 10pt; }
  .printnote .hot { margin-right: 1pt; }

  /* the other pages keep the round 4 and 5 behaviour */
  .card, .letter, .circular, .notice, .fillcard { break-inside: avoid; }
  .cardpair, .joincard { break-inside: avoid; }
  .tier__card { box-shadow: none; }
}


/* ================================ ROUND 6, M1a: THE PHONE CENTRES THE POSTCARDS

   round3.css carries the rule and the reasoning for the home page's five. These
   are the postcards that live only on the six: the side-by-side card, which is
   the plaque on our-story.html and the room on functions.html.

   THE FOUR BIG MENU POSTCARDS ARE ALREADY CENTRED on their picture side, which
   is the side this is about: `.bigcard__name` and `.bigcard__when` have been
   centred since round 5, and `.bigcard__foot` is the card's two corners, a mark
   at one and a cancel at the other, which is where a postcard puts them. Their
   written side is a price list and is left alone, exactly as the menu teaser's
   is on the home page.

   THE QUOTED PLAQUE IS LEFT FLUSH. It is the only block on either card that is
   somebody else's words, it is marked as a quotation by a double rule down its
   left edge, and centred type inside a left rule reads as a mistake. Written up
   for David rather than decided quietly.
   ===================================================================== */

@media (max-width: 900px) {
  .sidecard__back { align-items: center; text-align: center; }
  .sidecard__do { text-align: center; }
  .sidecard blockquote { text-align: left; }
}

/* ========================================= ROUND 9, THE NARROWEST PHONES

   The width sweep starts at 390 because that is the narrowest phone in the
   brief, and everything above it has room. 320 px is still a real screen (an
   iPhone SE held in a case of its own age) and the three mark head is the first
   thing on this site that is tight enough to care: at 320 the card is 272 px
   and its padding leaves 232 for a head that wants about 280.

   So the three marks come down together, which keeps the head the same object
   rather than dropping one of them. Measured at 320: 26 + 34 + 24 + 135 = 219
   of the 232 available, with the widest line of the six.
   ===================================================================== */

@media (max-width: 360px) {
  .bigcard__head { column-gap: 10px; padding: 16px 16px 0; }
  .bigcard__crest { height: 34px; }
  .bigcard__stamp { width: 34px; }
  .bigcard__name .gilt-line { height: 26px; }
  .bigcard .printnote { margin: 0 16px 16px; }
}

@media screen{
/* Separate preview only. No source layout, type, content or navigation changes.
   A fixed, single image has no tiled boundaries or mirrored copies.
   Cover maintains the photograph-derived texture's aspect ratio. */
html { background: #e5dac8; }
body { background: transparent; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #e5dac8;
  background-image: linear-gradient(rgba(249,243,229,.28), rgba(249,243,229,.28)), url("https://static.wixstatic.com/media/37bf5c_fdcca154da26466282e6113ceb53866c~mv2.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Ink printed directly on the ground gets its own cream surface.
   Existing card surfaces remain opaque. These rules do not alter dimensions. */
.headline, .flourish, .telegram { background-color: rgba(249,243,229,.88); }
.franked { background-color: rgba(249,243,229,.94); }
@media print {
  body::before { display: none; }
  body { background: #f4efe5; }
}

/* The original hero contains cream raster mattes. A light continuous surface
   quietens the wall here and keeps those existing images visually cohesive. */
.stage--a { background-color: rgba(249,243,229,.40); }

/* Postal refinement, David's review: fixed wall, separate postal objects. */
.postal-label { font: 700 14px/1.4 var(--roman); letter-spacing: .32em; text-transform: uppercase; color: var(--navy); text-align: center; }
.postal-hero.stage--a { background: none; aspect-ratio: auto; display: grid; grid-template-columns: 1.45fr 1fr; gap: 48px 36px; align-items: center; padding: 64px 48px 16px; overflow: visible; }
.hero-stamp-wrap { position: relative; filter: var(--shadow-stamp); transform: rotate(-2deg); }
.hero-stamp { background: var(--card); padding: 22px 22px 12px; }
.hero-stamp img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border: 3px double var(--navy); }
.hero-stamp figcaption { display: flex; justify-content: space-between; padding: 16px 10px 14px; font: 20px/1.4 var(--type); color: var(--navy); }
.hero-cancel { position: absolute; width: 26%; right: -5%; top: -5%; z-index: 2; }
.hero-postcard { padding: 22px 22px 18px; background: var(--card); border: 4px double var(--gold); outline: 1px solid var(--navy); outline-offset: 5px; box-shadow: var(--shadow-card); transform: rotate(1deg); }
.hero-postcard .postal-label { border-bottom: 1px solid var(--rule-gold); padding-bottom: 12px; margin-bottom: 14px; }
.postal-hero .headline { position: static; width: 100%; height: auto; margin: 0; background: none; }
.postal-hero .headline img { width: 100%; }
.postcard-flourish { width: 38%; margin: 12px auto 0; }
.postal-hero .telegram { position: relative; inset: auto; width: 100%; height: auto; margin: 0; grid-column: 1 / -1; }
.telegram-paper { background: var(--card); border: 4px double var(--gold); outline: 1px solid var(--navy); outline-offset: 4px; padding: 18px 24px 22px; box-shadow: var(--shadow-card); }
.telegram-paper .postal-label { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; }
.telegram-paper .postal-label::before, .telegram-paper .postal-label::after { content: ''; height: 4px; border-block: 1px solid var(--gold); flex: 1; }
.telegram-facts { display: grid; grid-template-columns: 1fr 1fr 1.3fr; }
.telegram-facts p { text-align: center; padding: 2px 16px; font: 15px/1.6 var(--type); }
.telegram-facts p+p { border-left: 1px solid var(--rule-gold); }
/* Postcards carry a fine outer navy line and inset double gold rule. */
.card, .sheet__head, .errand__row { outline: 1px solid var(--navy); outline-offset: 0; box-shadow: inset 0 0 0 7px var(--card), inset 0 0 0 8px var(--gold), inset 0 0 0 11px var(--card), inset 0 0 0 12px var(--rule-gold), var(--shadow-card); }
.postcard-kicker { margin-bottom: 26px; padding-bottom: 12px; border-bottom: 3px double var(--rule-gold); width: 100%; }
.bread-postcard-label { margin: 0 0 24px; padding-bottom: 16px; border-bottom: 3px double var(--gold); }
.photo-stamp { background: var(--card); padding: 18px; align-self: center; aspect-ratio: 4 / 3; }
.photo-stamp img { min-height: 0; height: 100%; border: 3px double var(--navy); object-fit: cover; }
.panel__pic.photo-stamp, .room__pic.photo-stamp, .menucard__front.photo-stamp { margin: 26px 12px 26px 26px; }
.panel--flip .panel__pic.photo-stamp, .menucard--flip .menucard__front.photo-stamp { margin: 26px 26px 26px 12px; }
.bread__slot { border: 3px double var(--navy); border-radius: 0; }
.stage--b { overflow: visible; }
.interior-postcard { background: var(--card); padding: 16px 16px 12px; border: 1px solid var(--navy); box-shadow: var(--shadow-card); height: auto; transform: rotate(-1deg); }
.interior-postcard img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--gold); }
.interior-postcard figcaption { padding: 18px 0 8px; font-size: 12px; }
.postcard { height: auto; box-shadow: var(--shadow-card); border: 1px solid var(--navy); transform: rotate(1deg); }
.postcard img { height: auto; }
.stamp6 { padding: 14px 14px 6px; }
.stamp6 img { border: 3px double var(--navy); }
.stamp6 figcaption { color: var(--navy); font-size: 12px; letter-spacing: .08em; }
.review-telegram { display: block; max-width: 1000px; margin: 0 auto; padding: 24px 32px; border: 5px double var(--navy); outline: 1px solid var(--gold); outline-offset: 5px; background: var(--card); box-shadow: var(--shadow-card); }
.review-telegram__head, .review-telegram__foot { display: flex; justify-content: space-between; gap: 20px; font: 12px/1.6 var(--type); letter-spacing: .12em; text-transform: uppercase; }
.review-telegram__head { padding-bottom: 16px; border-bottom: 3px double var(--gold); }
.review-telegram__title { font: 400 36px/1.2 var(--roman); color: var(--navy); text-align: center; margin: 28px 0; }
.review-telegram__body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
.review-route { font: 16px/2.2 var(--type); }
.review-route span { display: inline-block; width: 56px; color: var(--brown); font-size: 12px; letter-spacing: .12em; }
.review-rating { border: 4px double var(--red); padding: 10px 22px; color: var(--red); transform: rotate(-3deg); text-align: center; font: 14px/1.6 var(--type); }
.review-rating__score { display: block; font: 700 44px/1.2 var(--roman); }
.review-rating__score small { font-size: 24px; }
.review-telegram__foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--gold); font-size: 10px; letter-spacing: .06em; }
@media (max-width:900px) {
 .postal-hero.stage--a { display: flex; padding: 40px 24px 16px; gap: 36px; }
 .hero-stamp-wrap { width: 100%; }
 .hero-stamp { padding: 14px 14px 8px; }
 .hero-stamp figcaption { font-size: 13px; padding: 12px 4px; }
 .hero-postcard { width: min(88%,440px); padding: 16px; }
 .postal-label { font-size: 12px; }
 .postal-hero .telegram { width: 100%; }
 .telegram-paper { padding: 16px; }
 .telegram-facts { grid-template-columns: 1fr; }
 .telegram-facts p { font-size: 13px; padding: 12px 0; }
 .telegram-facts p+p { border-left: 0; border-top: 1px solid var(--rule-gold); }
 .stage--b { padding: 12px 24px 24px; gap: 32px; }
 .grp--print.interior-postcard { width: 100%; aspect-ratio: auto; }
 .postcard { width: 100%; }
 .panel__pic.photo-stamp, .panel--flip .panel__pic.photo-stamp, .room__pic.photo-stamp, .menucard__front.photo-stamp, .menucard--flip .menucard__front.photo-stamp { margin: 22px 22px 0; padding: 12px; }
 .postcard-kicker { margin: 8px 0 24px; }
 .review-telegram { padding: 20px; }
 .review-telegram__head, .review-telegram__foot { flex-direction: column; gap: 6px; text-align: center; }
 .review-telegram__title { font-size: 28px; margin: 24px 0; }
 .review-telegram__body { grid-template-columns: 1fr; gap: 24px; }
 .review-route { font-size: 13px; }
 .review-route span { width: 42px; }
 .review-rating { justify-self: center; }
}

/* Fine perforations: scaled for full-size stamps, rather than stretching the six-tooth thumbnail mask. */
.hero-stamp, .photo-stamp, .interior-postcard, .stamp6 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H1200V1000H0Z%20M8%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M8%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H1200V1000H0Z%20M8%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M8%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%22/%3E%3C/svg%3E"); }
.hero-stamp figcaption { padding-inline: 16px; }
/* Navy perforations distinguish the photograph stamp from its cream postcard. */
.photo-stamp { background: var(--navy); padding: 10px; }
.photo-stamp img { border: 6px solid var(--card); }
.stamp6 { background: var(--navy); }
.stamp6 img { border: 3px solid var(--card); }
.stamp6 figcaption { color: var(--card); }
.postal-hero .headline img { clip-path: inset(3% 0 0); }
@media (max-width:900px) {
 .panel__pic.photo-stamp, .panel--flip .panel__pic.photo-stamp, .room__pic.photo-stamp, .menucard__front.photo-stamp, .menucard--flip .menucard__front.photo-stamp { padding: 8px; }
}

/* David approved the hero stamp: use its cream paper and fine navy rule throughout. */
.photo-stamp, .interior-postcard, .stamp6 { background: var(--card); border: 0; outline: 0; }
.photo-stamp { aspect-ratio: auto; padding: 22px 22px 12px; transform: rotate(-1deg); }
.photo-stamp img { width: 100%; height: auto; aspect-ratio: 1.29; object-fit: cover; border: 3px double var(--navy); }
.stamp-caption, .interior-postcard figcaption { color: var(--navy); font: 14px/1.4 var(--type); text-transform: none; letter-spacing: .03em; padding: 16px 6px 14px; text-align: left; }
.interior-postcard { padding: 22px 22px 12px; box-shadow: none; }
.interior-postcard img { aspect-ratio: 1.29; border: 3px double var(--navy); }
.stamp6 { padding: 12px 12px 6px; }
.stamp6 img { border: 3px double var(--navy); }
.stamp6 figcaption { color: var(--navy); text-transform: none; letter-spacing: .03em; }
/* The supplied mailer image contains a sliver of a second card on its left.
   Clip to the real postcard edge, including the overlay link in the same box.
   Image pixels and Enquire coordinates are unchanged. */
.postcard { border: 0; box-shadow: none; clip-path: inset(5.2% 2.2% 1.3% 6.5%); }
@media(max-width:900px) {
 .panel__pic.photo-stamp, .panel--flip .panel__pic.photo-stamp, .room__pic.photo-stamp, .menucard__front.photo-stamp, .menucard--flip .menucard__front.photo-stamp { padding: 14px 14px 8px; }
 .interior-postcard { padding: 14px 14px 8px; }
 .stamp-caption, .interior-postcard figcaption { font-size: 12px; padding: 12px 4px; }
}

/* The wrapper casts the same contact shadow as the hero, outside the mask,
   so cream perforations remain legible on cream postcards. */
.stamp-shadow { overflow: visible; align-self: center; filter: var(--shadow-stamp); }
.panel__pic.stamp-shadow, .room__pic.stamp-shadow, .menucard__front.stamp-shadow { margin: 26px 12px 26px 26px; }
.panel--flip .panel__pic.stamp-shadow, .menucard--flip .menucard__front.stamp-shadow { margin: 26px 26px 26px 12px; }
.stamp-shadow .photo-stamp { margin: 0; }
@media(max-width:900px) {
 .panel__pic.stamp-shadow, .panel--flip .panel__pic.stamp-shadow, .room__pic.stamp-shadow, .menucard__front.stamp-shadow, .menucard--flip .menucard__front.stamp-shadow { margin: 22px 22px 0; aspect-ratio: auto; }
 .stamp-shadow .photo-stamp { padding: 14px 14px 8px; }
}

/* Review: one outlined postcard, larger crest and clear menu headings. */
.postcard { clip-path: none; border: 4px double var(--gold); outline: 1px solid var(--navy); outline-offset: 4px; background: var(--card); box-shadow: var(--shadow-card); }
.mailer-art { position: relative; width: 100%; aspect-ratio: 1358.544 / 1038.785; overflow: hidden; }
.postcard .mailer-art img { position: absolute; max-width: none; width: 109.529%; height: auto; left: -7.119%; top: -5.561%; }
.postcard__enquire { left: 4.973%; top: 79.807%; width: 31.654%; height: 13.251%; }
.bread__crest { width: 160px; height: 160px; }
.course__name { font-size: 28px; line-height: 1.45; font-weight: 700; letter-spacing: .08em; }
.menucard .menu-title { display: block; font: 700 46px/1.1 var(--roman); text-transform: none; letter-spacing: 0; color: #8b6224; }
@media(max-width:900px) {
 .bread__crest { width: 144px; height: 144px; }
 .menucard .menu-title { font-size: 40px; }
 .course__name { font-size: 28px; }
}

/* Opaque paper extends through the space between the gold rule and blue outline. */
.postcard, .hero-postcard {
  box-shadow: 0 0 0 5px var(--card), var(--shadow-card);
}
.telegram-paper {
  box-shadow: 0 0 0 5px var(--card), var(--shadow-card);
}
.review-telegram {
  box-shadow: 0 0 0 6px var(--card), var(--shadow-card);
}

/* Give the pre-order notice the same size as the daily availability line. */
.bread__preorder { font-size:17px; font-weight:700; }

/* Date cancellation marks use the exact Google rating red; preserve original ink shape. */
.postmark-ink {
 display:block;
 aspect-ratio:394 / 348;
 height:auto;
 background-color:var(--red);
 -webkit-mask:url("https://static.wixstatic.com/media/37bf5c_78d8ba82672e42e3b9e9b449763393ea~mv2.webp") center / contain no-repeat;
 mask:url("https://static.wixstatic.com/media/37bf5c_78d8ba82672e42e3b9e9b449763393ea~mv2.webp") center / contain no-repeat;
 opacity:1;
}

/* Persistent navigation: original height at the top, compact only while scrolled. */
@media screen {
 .head { position:sticky; top:0; z-index:100; }
 .head.is-compact { --head-h:68px; }
 html { scroll-padding-top:90px; }
 /* On a computer the header stays full size (136 px), so anchors clear it plus the 22 px margin. */
 @media(min-width:901px) { html { scroll-padding-top:158px; } }
 .head__links { max-height:calc(100dvh - 74px); overflow-y:auto; }
 @media(min-width:1600px) {
  .head__links { gap:16px; margin-right:24px; }
  .head__links a { font-size:17px; }
  .head__links a.head__cta { padding:10px 16px; }
  .head.is-compact .head__inner { padding:0 24px; gap:24px; }
  .head.is-compact .head__brand { display:flex; align-items:center; gap:12px; flex:none; }
  .head.is-compact .head__home { position:static; width:56px; height:56px; }
  .head.is-compact .head__word { position:static; width:190px; height:auto; object-fit:contain; }
  .head.is-compact .head__links { margin-right:0; }
 }
 @media(min-width:1600px) and (max-width:1439px) {
  .head:not(.is-compact) .head__word { width:300px; height:103px; top:12px; left:145px; }
 }
 @media(max-width:1599px) {
  .head.is-compact { --head-h:60px; }
  .js .head__burger { padding:10px 14px; }
 }
}

/* Readability refinement: larger gold titles, quieter course labels and larger dishes. */
#bread-h .gilt-line { height:160px; }
.gilt-h.panel__title .gilt-line { height:72px; }
.menucard__head .gilt-line { height:70px; }
.course__name { font-size:24px; }
.dish { font-size:18px; line-height:1.7; }
.dish > span { min-width:0; }
.dish > b { flex-shrink:0; }
.review-telegram__intro { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:32px; align-items:start; padding-top:24px; }
.review-telegram__title { text-align:left; margin:12px 0 24px; }
.review-rating { position:relative; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; min-height:210px; padding:26px 20px; border:0; background:var(--red); color:var(--card); text-decoration:none; transform:rotate(4deg); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H1200V1000H0Z%20M8%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M8%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H1200V1000H0Z%20M8%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M8%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%22/%3E%3C/svg%3E"); }
.review-rating::before { content:""; position:absolute; inset:12px; border:3px double var(--card); pointer-events:none; }
.review-rating__label { font:700 12px/1.4 var(--type); text-transform:uppercase; letter-spacing:.12em; }
.review-rating__score { font-size:48px; }
.review-rating__stars { font-size:20px; letter-spacing:.1em; }
.review-rating__view { font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.review-rating:focus-visible { outline:0; background:var(--navy); }
@media(max-width:900px) {
 .bread__text > #bread-h.gilt-h .gilt-line { height:120px; }
 .gilt-h.panel__title .gilt-line { height:48px; }
 .menucard__head .gilt-line { height:52px; }
 .course__name { font-size:24px; }
 .dish { font-size:16px; }
 .review-telegram__intro { grid-template-columns:minmax(0,1fr) 140px; gap:14px; }
 .review-telegram__title { font-size:25px; }
 .review-route { font-size:13px; }
 .review-rating { min-height:175px; padding:22px 14px; }
 .review-rating__score { font-size:36px; }
 .review-rating__label { font-size:10px; }
 .review-rating__view { font-size:10px; }
}
@media(max-width:550px) {
 .review-telegram__intro { grid-template-columns:1fr; }
 .review-rating { grid-row:1; justify-self:end; width:150px; }
 .review-telegram__title { margin-top:8px; }
}

/* David's wording correction: retain pastry/cake titles and step menu type down. */
.course__name { font-size:22px; }
.menucard__head .gilt-line { height:64px; }
@media(max-width:900px) {
 .course__name { font-size:22px; }
 .menucard__head .gilt-line { height:48px; }
}

/* Restore the menu card proportions in David's 24 September reference. */
.menucard__head .gilt-line { height:46px; }
.menucard .course__name { font-size:28px; line-height:1.45; }
.menucard .dish { font-size:16px; line-height:32px; }
@media(max-width:900px) {
 .menucard__head .gilt-line { height:32px; }
 .menucard .course__name { font-size:22px; }
 .menucard .dish { font-size:14px; line-height:28px; }
}

/* Original title artwork; the plural s uses the matching existing pastry lettering. */
.menu-original-lettering { --menu-ink-height:46px; display:flex; align-items:flex-start; height:var(--menu-ink-height); }
.menucard__head .menu-original-lettering .gilt-line { height:var(--menu-ink-height); width:auto; max-width:none; }
.menu-original-lettering__s { display:block; width:calc(var(--menu-ink-height) * .3); height:var(--menu-ink-height); margin-left:calc(var(--menu-ink-height) * -.025); background:url('https://static.wixstatic.com/media/37bf5c_96ad8f02becd4580889c3ab3b7115542~mv2.webp') no-repeat; background-size:calc(var(--menu-ink-height) * 4.20) calc(var(--menu-ink-height) * 1.094); background-position:calc(var(--menu-ink-height) * -3.848) calc(var(--menu-ink-height) * -.022); }
@media(max-width:900px) { .menu-original-lettering { --menu-ink-height:32px; } }

/* Keep the entire guest photograph visible inside the existing stamp. */
.room__pic .photo-stamp img.room-guests-photo {width:100%;height:auto;min-height:0;aspect-ratio:4/3;object-fit:contain}

/* Book-club caption and consistent original gold heading scale. */
.room-book-club-caption {padding:16px 6px 8px;text-align:center;font:16px/1.5 var(--type);color:var(--navy)}
#room-h .gilt-line, #cold-h .gilt-line {height:72px;width:auto;max-width:100%;object-fit:contain}
@media(max-width:900px) {
 #room-h .gilt-line, #cold-h .gilt-line {height:48px}
 .room-book-club-caption {font-size:14px;padding:12px 4px 6px}
}

/* Leave room for the membership link in the full navigation. */
@media(min-width:1440px){.head:not(.is-compact) .head__word{left:170px;width:330px;}}

/* Full offers label needs a wider header; smaller screens use the menu. */
@media(min-width:1600px){.head__inner{width:100%;max-width:1800px}.head__links{gap:14px}.head__links a{font-size:16px}}
}
@media screen{
/* Reference-colour trial: caramel mortar, terracotta and deep brown.
   CSS-only grading of the existing texture; no new or enlarged image detail. */
body::before {
 background-image: linear-gradient(rgba(138,100,70,.26),rgba(138,100,70,.26)), url("https://static.wixstatic.com/media/37bf5c_fdcca154da26466282e6113ceb53866c~mv2.webp");
 background-blend-mode: multiply;
 filter: contrast(2.0) brightness(.64) saturate(.75);
}
}
@media screen{
/* Shared screen treatment for the seven interior pages. Print rules stay in pages.css. */
.card { background-color:var(--card); }
.site-photo {
 background:var(--card); padding:22px 22px 14px;
 -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H1200V1000H0Z%20M8%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M8%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%22/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H1200V1000H0Z%20M8%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%200a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M8%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M44%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M80%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M116%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M152%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M188%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M224%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M260%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M296%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M332%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M368%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M404%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M440%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M476%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M512%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M548%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M584%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M620%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M656%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M692%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M728%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M764%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M800%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M836%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M872%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M908%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M944%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M980%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1016%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1052%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1088%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1124%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1160%201000a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M-10%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2018a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2054a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%2090a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20126a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20162a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20198a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20234a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20270a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20306a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20342a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20378a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20414a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20450a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20486a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20522a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20558a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20594a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20630a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20666a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20702a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20738a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20774a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20810a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20846a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20882a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20918a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20954a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%20M1190%20990a10%2010%200%201%200%2020%200a10%2010%200%201%200%20-20%200Z%22/%3E%3C/svg%3E");
}
.site-photo img { display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; border:3px double var(--navy); }
.bigcard__hero { margin:24px 24px 0; background:transparent; filter:var(--shadow-stamp); }
.sidecard__pic { margin:24px; overflow:visible; align-self:center; aspect-ratio:auto; filter:var(--shadow-stamp); }
.sidecard__back { border-left:0; }
.page-cancel { width:132px; transform:rotate(-7deg); }
.postmark-ink { opacity:1; }
.stamp6 { max-width:100%; }
@media(max-width:900px) {
 .site-photo { padding:14px 14px 10px; }
 .bigcard__hero { margin:18px 18px 0; }
 .sidecard__pic { margin:20px; }
 .page-cancel { width:96px; }
}
}
@media screen{
/* Find us and the approved homepage simplification, 25 September 2026. */
.story-telegram__heading { grid-column:1/-1; display:flex; align-items:center; gap:24px; margin:0; }
.story-telegram__heading::before, .story-telegram__heading::after { content:""; flex:1; height:5px; border-block:1px solid var(--gold); }
@media(min-width:1180px) { .head__links { gap:20px; } .head__links a { font-size:17px; } }
.visit { padding-top:56px; }
.visit__hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:56px; }
.visit__card { padding:36px; }
.visit__eyebrow { color:var(--brown); font:14px/1.5 var(--type); letter-spacing:.12em; text-transform:uppercase; }
.visit h1 { margin:20px 0 16px; font:400 clamp(48px,6vw,80px)/1 var(--roman); color:#84602c; text-shadow:0 1px #fff6d5; }
.visit__address { font:400 24px/1.4 var(--roman); font-style:normal; margin-bottom:20px; }
.visit__hours { font:15px/1.7 var(--type); padding-block:16px; border-block:1px solid var(--rule-gold); }
.visit__directions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.visit__button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 17px; border:1px solid var(--navy); background:var(--card); color:var(--navy); text-decoration:none; font:18px/1.3 var(--roman); cursor:pointer; }
.visit__button--primary { background:var(--navy); color:var(--on-navy); border:3px double var(--gold); }
.visit__button:hover { background:#e9dcc3; }
.visit__button--primary:hover { background:var(--navy-deep); }
.visit__photo { filter:var(--shadow-stamp); transform:rotate(-2deg); }
.visit__photo figure { margin:0; }
.visit__photo img { aspect-ratio:4/3; object-fit:contain; }
.visit__photo figcaption { padding:16px 4px 10px; font:14px/1.4 var(--type); display:flex; justify-content:space-between; }
.visit__section { margin-top:64px; padding:36px; }
.visit__section h2 { font:400 36px/1.2 var(--roman); margin:0 0 12px; }
.visit__section p { font:16px/1.7 var(--type); }
.visit__map-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; }
.visit__map-actions { display:flex; flex-wrap:wrap; gap:8px; }
.visit__map { height:480px; width:100%; border:3px double var(--navy); z-index:0; background:#e6e0cf; }
.visit__map:focus-visible { outline-offset:4px; }
.visit__map .leaflet-control-attribution { font:11px/1.5 Arial,sans-serif; color:#444; background:#fffdf5; padding:2px 5px; }
.visit__map .leaflet-control-attribution a { color:#444; font:inherit; padding:0; min-height:0; text-decoration:underline; }
.visit__map .leaflet-control-zoom a { width:44px; height:44px; line-height:44px; }
.visit__map .leaflet-tooltip { font:14px/1.3 var(--roman); border:1px solid var(--gold); background:var(--card); color:var(--navy); }
.visit__map .visit__pin { display:flex; box-sizing:border-box; text-align:center; padding:0; align-items:center; justify-content:center; border:3px double var(--card); border-radius:50%; background:var(--red); color:white; box-shadow:0 2px 5px #0005; font:bold 18px/1 var(--roman); }
.visit__map .visit__pin > span { display:block; line-height:1; margin:0; padding:0; }
.visit__map .visit__pin--station { background:var(--navy); }
.visit__map-note { margin-top:14px; }
.visit__map-status { color:var(--brown); margin-top:10px; }
.visit__train { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; }
.visit__train-copy p+p { margin-top:14px; }
.visit__train-links { display:flex; flex-direction:column; align-items:start; gap:16px; margin-top:24px; }
.visit__planner { border-left:1px solid var(--rule-gold); padding-left:36px; }
.visit__planner label { display:block; font:20px/1.4 var(--roman); margin-bottom:10px; }
.visit__planner input { width:100%; min-width:0; padding:14px; min-height:48px; border:1px solid var(--navy); background:#fffcf5; color:var(--navy); font:16px/1.4 var(--type); border-radius:0; }
.visit__planner .visit__button { margin-top:16px; width:100%; }
.visit__planner small { display:block; margin-top:14px; font:14px/1.6 var(--type); }
.visit [hidden] { display:none; }
@media(max-width:900px) {
 .visit { padding-top:32px; }
 .visit__hero { grid-template-columns:1fr; gap:32px; }
 .visit__card { padding:28px; }
 .visit__photo { width:min(100%,560px); justify-self:center; }
 .visit__section { padding:28px; margin-top:40px; }
 .visit__map-head { flex-direction:column; align-items:start; }
 .visit__map { height:400px; }
 .visit__train { grid-template-columns:1fr; gap:28px; }
 .visit__planner { border-left:0; border-top:1px solid var(--rule-gold); padding:24px 0 0; }
 .visit__section h2 { font-size:30px; }
 .visit__section p { font-size:14px; }
}
@media(max-width:420px) {
 .visit__card, .visit__section { padding:24px; }
 .visit__directions { display:grid; grid-template-columns:1fr; }
 .visit__address { font-size:22px; }
 .visit__map-actions { width:100%; }
 .visit__map-actions .visit__button { flex:1; padding:10px; font-size:16px; }
}
}
/* One dated photographic sequence. All historical photos are shown uncropped. */
.letter--archive { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.letter--archive .letter__margin { display: block; align-self: start; min-width: 0; }
.story-evolution { min-width: 0; scroll-margin-top: 100px; }
.story-evolution h2 { color: var(--navy); font: normal 32px/1.2 var(--roman); text-align: center; margin: 0; }
.story-evolution__intro { text-align: center; color: var(--brown); font: 13px/1.7 var(--type); margin: 8px 0 20px; }
.story-evolution__slides { touch-action: pan-y; }
.story-era { margin: 0; }
.story-era[hidden] { display: none; }
.story-era__image { padding: 12px; border: 3px double var(--rule-gold, #b58b45); background: var(--paper, #faf5e7); box-shadow: 0 3px 8px #39281520; }
.story-era__image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border: 3px double var(--navy, #1e304c); background: #f9f5ec; }
.story-era figcaption { text-align: center; color: var(--navy); margin: 16px 0 0; }
.story-era figcaption strong { display: block; font: normal 27px/1.2 var(--roman); }
.story-era figcaption span { display: block; font: 13px/1.6 var(--type); margin-top: 5px; min-height: 42px; }
.story-era__credit { text-align: center; font: 11px/1.6 var(--roman); color: var(--brown); min-height: 36px; margin: 8px 0 16px; }
.story-era__credit a { color: inherit; text-underline-offset: 3px; }
.story-evolution__dates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule-gold); }
.story-evolution button { min-width: 0; min-height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--navy); font: 12px/1.4 var(--type); padding: 8px 5px; cursor: pointer; }
.story-evolution__dates button + button { border-left: 1px solid var(--rule-gold); }
.story-evolution__dates button[aria-pressed="true"] { background: var(--navy); color: #faf5e7; }
.story-evolution button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.story-evolution__playback { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.story-evolution__playback button { min-width: 44px; }
@media (max-width: 760px) {
  .letter--archive { grid-template-columns: minmax(0, 1fr); }
  .story-evolution { max-width: 520px; margin-inline: auto; }
  .story-evolution h2 { font-size: 28px; }
  .story-era__image { padding: 8px; }
  .story-evolution__dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-evolution__dates button:nth-child(3) { border-left: 0; }
  .story-evolution__dates button:nth-child(n+3) { border-top: 1px solid var(--rule-gold); }
}
@media print { .story-era[hidden] { display: block; } .story-evolution__controls { display: none; } }
.story-evolution [data-history-status] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Postcards through time: paper treatment only; source photographs stay intact. */
.letter--archive { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.story-evolution { padding-inline: 10px; }
.story-evolution__slides { position: relative; display: grid; isolation: isolate; perspective: 1200px; margin: 28px 0 8px; }
.story-evolution__slides::before, .story-evolution__slides::after { content: ''; position: absolute; z-index: -1; inset: 3px 4px 98px; border: 1px solid #c5ae83; background: #e9dcc0; box-shadow: 0 5px 14px #36271820; transform: rotate(-3deg); }
.story-evolution__slides::after { transform: rotate(2.2deg); background: #f1e8d4; }
.story-era { grid-area: 1 / 1; min-width: 0; align-self: start; transform-origin: 50% 85%; }
.story-era.is-leaving { pointer-events: none; z-index: 2; }
.story-postcard { --card-paper: #e8d3a8; position: relative; padding: clamp(12px, 2vw, 22px); color: #624827; border: 1px solid #c5ad81; background: var(--card-paper); box-shadow: inset 0 0 24px #82501a36, 0 12px 22px #30251525, 0 2px 3px #30251525; isolation: isolate; }
.story-postcard::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .2; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.story-postcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at 0 0, #915d2447, transparent 37%), radial-gradient(ellipse at 100% 100%, #80521c35, transparent 38%), linear-gradient(105deg, transparent 48%, #fff5cd26 49%, #79532712 49.4%, transparent 50%); box-shadow: inset 0 0 2px 2px #b4915640; }
.story-postcard__heading { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 13px; font: 10px/1.4 var(--type); letter-spacing: .14em; color: #755733; }
.story-postcard__heading span:first-child { letter-spacing: .25em; }
.story-era__image { padding: 0; border: 1px solid #81654380; background: transparent; box-shadow: none; }
.story-era__image img { border: 0; background: #e6d7b9; filter: sepia(.64) contrast(.93) saturate(.72); mix-blend-mode: multiply; }
.story-postcard__caption { min-height: 90px; padding: 17px 95px 0 1px; }
.story-postcard__caption strong { display: block; font: normal clamp(24px, 2.8vw, 34px)/1.1 var(--roman); letter-spacing: .02em; }
.story-postcard__caption > span { display: block; font: 12px/1.55 var(--type); margin-top: 6px; }
.story-postcard__postmark { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; height: 76px; border: 3px double currentColor; border-radius: 50%; transform: rotate(-14deg); font: 9px/1.55 var(--type); letter-spacing: .08em; opacity: .62; }
.story-postcard__postmark span { border-block: 1px solid currentColor; width: 90%; text-align: center; font-size: 13px; margin-block: 3px; }
.story-era .story-era__credit { color: var(--brown); margin: 17px 3px 8px; min-height: 64px; font: 11px/1.6 var(--roman); text-align: center; }
.story-era[data-era="vintage"] .story-postcard { --card-paper: #f1e8d6; box-shadow: inset 0 0 14px #82501a17, 0 12px 22px #30251525; }
.story-era[data-era="vintage"] .story-postcard::after { opacity: .35; }
.story-era[data-era="vintage"] img { filter: sepia(.15) contrast(1.02); background: #f1e8d6; }
.story-era[data-era="modern"] .story-postcard { --card-paper: #fffaf0; color: var(--navy); border-color: #d2c5aa; box-shadow: 0 12px 22px #30251525; }
.story-era[data-era="modern"] .story-postcard::before, .story-era[data-era="modern"] .story-postcard::after { display: none; }
.story-era[data-era="modern"] img { filter: none; mix-blend-mode: normal; background: #fffaf0; }
.story-era[data-era="modern"] .story-postcard__heading { color: var(--navy); }
.story-evolution__dates { border: 0; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story-evolution__dates button, .story-evolution__dates button + button { border: 1px solid #b58b4580; background: #f8f1e3; transition: background-color 180ms, color 180ms, transform 150ms; }
.story-evolution__dates button[aria-pressed="true"] { background: var(--navy); color: #faf5e7; box-shadow: 0 3px 7px #1e304c25; }
.story-evolution button:active { transform: scale(.96); }
.story-evolution__playback { margin-top: 4px; }
@media (max-width: 760px) {
 .letter--archive { grid-template-columns: minmax(0, 1fr); }
 .story-evolution { width: 100%; max-width: 540px; padding-inline: 7px; box-sizing: border-box; }
 .story-postcard__heading { font-size: 8px; letter-spacing: .07em; }
 .story-postcard__caption { padding-right: 74px; min-height: 90px; }
 .story-postcard__caption > span { font-size: 11px; }
 .story-postcard__postmark { width: 62px; height: 62px; right: 12px; bottom: 20px; font-size: 8px; }
 .story-postcard__postmark span { font-size: 11px; }
 .story-evolution__dates button:nth-child(n) { border: 1px solid #b58b4580; }
}
@media (prefers-reduced-motion: reduce) { .story-evolution button { transition: none; } }
@media print { .story-evolution__slides { display: block; } .story-evolution__slides::before, .story-evolution__slides::after { display: none; } .story-era { break-inside: avoid; } }

@media screen{
/* Shared navigation: familiar icon and quick access to menus, calls and location. */
.head__burger-icon {
  display: grid;
  gap: 5px;
  width: 24px;
}
.head__burger-icon > span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
@media (max-width: 1599px) {
  .js .head__burger {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 10px;
    border: 3px double var(--gold);
    cursor: pointer;
  }
  .head__burger:focus-visible {
    outline: 2px solid #faf6ee;
    outline-offset: 3px;
  }
}
@media (max-width: 900px) {
  .counter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #faf6ee;
    border-top: 3px double var(--gold);
  }
  .counter a {
    padding: 12px 8px;
    min-height: 56px;
    color: var(--quick-text);
    background: var(--quick-bg);
    font: 600 14px/1.3 var(--type);
    letter-spacing: .03em;
    text-transform: none;
  }
  .counter__menus { --quick-bg: #1b2a4e; --quick-text: #faf6ee; }
  .counter__call { --quick-bg: #faf6ee; --quick-text: #1b2a4e; }
  .counter__cta { --quick-bg: #6b4f3a; --quick-text: #faf6ee; }
  .counter a + a { border-left: 1px solid var(--gold); }
  .counter a:hover,
  .counter a:focus-visible,
  .counter a:active {
    background: var(--quick-bg);
    color: var(--quick-text);
    filter: brightness(.94);
  }
  .counter a:focus-visible { outline: 2px solid var(--quick-text); outline-offset: -4px; }
  body { padding-bottom: calc(59px + env(safe-area-inset-bottom, 0px)); }
}
}
/* Brief 26. Temporary movement; all resting geometry belongs to the original. */
:root{--postal-ease:cubic-bezier(.22,1,.36,1);--postal-fast:180ms}
.js .reveal,.js .reveal.reveal--card{opacity:1;transform:none;transition:none;will-change:auto}
@media(prefers-reduced-motion:no-preference){
 ::view-transition-group(*){animation:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 ::view-transition-old(postal-paper){animation:postal-out 160ms ease-out both}
 ::view-transition-new(postal-paper){animation:postal-in 180ms var(--postal-ease) both}
 ::view-transition-old(postal-masthead){animation:none}
 ::view-transition-new(postal-masthead){animation:none}
 .stamp-hero .arch-fan__card{transition-property:transform,opacity;transition-duration:600ms,200ms;transition-timing-function:var(--postal-ease)}
 .special-details{transition-property:opacity}
 dialog[open]{animation:postal-dialog 260ms var(--postal-ease)}
 dialog::backdrop{animation:postal-in 180ms ease-out}
}
@keyframes postal-in{from{opacity:.55}to{opacity:1}}
@keyframes postal-out{from{opacity:1}to{opacity:0}}
@keyframes postal-dialog{from{opacity:.75;transform:translateY(8px) rotate(-.35deg) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Reserve the approved carousel geometry before its external script arrives.
   The class is only set when JS runs; the original no-JS layout is retained. */
.postal-js .menu-carousel:not(.is-ready) .menu-carousel__viewport{display:grid;isolation:isolate;padding:36px 18px 28px;perspective:1200px}
.postal-js .menu-carousel:not(.is-ready) .menu-carousel__slide{grid-area:1/1;min-width:0;transform-origin:center;pointer-events:none;margin-top:0}
.postal-js .menu-carousel:not(.is-ready) .menu-carousel__slide:nth-child(1){transform:translate(5%,5%) rotate(3deg) scale(.92);z-index:3}
.postal-js .menu-carousel:not(.is-ready) .menu-carousel__slide:nth-child(2){transform:translate(-4%,0) rotate(-4deg) scale(.94);z-index:2}
.postal-js .menu-carousel:not(.is-ready) .menu-carousel__slide:nth-child(3){transform:translate(1%,-5%) rotate(1deg) scale(.94);z-index:1}
.postal-js .menu-carousel:not(.is-ready) .photo-stamp{transform:none}
.postal-js .menu-carousel:not(.is-ready) .photo-stamp figcaption{min-height:74px;display:flex;align-items:center;justify-content:center}
.postal-js .menu-carousel:not(.is-ready)::after{content:"";display:block;height:150px}
.postal-js .room-carousel:not(.is-ready) .photo-stamp figcaption{min-height:96px}
@media(max-width:640px){.postal-js .room-carousel:not(.is-ready) .photo-stamp figcaption{min-height:104px}}
@media(max-width:500px){
 .postal-js .menu-carousel:not(.is-ready) .menu-carousel__viewport{margin:0;padding:26px 8px 22px}
 .postal-js .menu-carousel:not(.is-ready):not(.room-carousel) .photo-stamp figcaption{min-height:68px}
}

.postal-js .cabinet-carousel:not(.is-ready)::after{height:124px}
.postal-js .cabinet-carousel:not(.is-ready):not(.room-carousel) .photo-stamp figcaption{min-height:58px}
@media(max-width:900px){
 .postal-js .cabinet-carousel:not(.is-ready) .menu-carousel__viewport{padding-top:24px;padding-bottom:18px}
 .postal-js .cabinet-carousel:not(.is-ready):not(.room-carousel) .photo-stamp figcaption{min-height:52px}
}
@media screen{.postal-js .arch-fan__controls[hidden]{display:flex;visibility:hidden}}

/* Signature motion, version 3. Rest geometry comes from the approved site. */
.arch-fan__stage,.menu-carousel__viewport{touch-action:pan-y;transform-origin:50% 55%}
.stamp-hero .arch-fan__card{transition:none!important}
.v3-gold-reflection{position:fixed;z-index:80;pointer-events:none;object-fit:fill;filter:brightness(1.8) saturate(.65);mix-blend-mode:screen}
.v3-order-mark{position:fixed;z-index:100;display:grid;place-items:center;width:34px;height:34px;background:#f9f2e3;color:#20304e;border:2px dotted #a78042;font:bold 13px monospace;box-shadow:0 5px 16px #20304e33;pointer-events:none}
.dish-photo[open]{animation:none!important;transform-origin:center}
.dish-photo::backdrop{animation:v3-backdrop 400ms ease-out}
@keyframes v3-backdrop{from{background:rgb(20 27 40 / 0)}to{background:rgb(20 27 40 / .76)}}
@media(prefers-reduced-motion:no-preference){
 ::view-transition-old(postal-paper){animation:v3-paper-out 300ms cubic-bezier(.4,0,1,1) both;transform-origin:50% 15%}
 ::view-transition-new(postal-paper){animation:v3-paper-in 580ms cubic-bezier(.16,1,.3,1) both;transform-origin:50% 15%}
 @keyframes v3-paper-out{to{transform:perspective(1400px) translateY(-32px) rotateX(3deg) scale(.97);opacity:0}}
 @keyframes v3-paper-in{from{transform:perspective(1400px) translateY(65px) rotateX(-5deg) scale(.97);opacity:0}to{transform:none;opacity:1}}
}
@media(prefers-reduced-motion:reduce){.v3-gold-reflection,.v3-order-mark{display:none}.arch-fan__stage,.menu-carousel__viewport{transform:none!important;transition:none!important}.dish-photo::backdrop{animation:none}}
@media print{.v3-gold-reflection,.v3-order-mark{display:none!important}}

.language-control{display:flex;align-items:center;gap:4px;margin-left:auto;color:#f9f0d7;font:13px Georgia,serif;flex-shrink:0}
.language-control select{font:inherit;color:inherit;background:#20324d;border:1px solid #b79b61;border-radius:0;min-height:44px;padding:5px;max-width:112px;cursor:pointer}
.language-control select:focus-visible{outline:2px solid #fff;outline-offset:3px}
.translated-heading{display:none;font-family:Georgia,'Noto Serif',serif;color:var(--gold,#95763e);font-size:clamp(28px,4vw,52px);font-weight:400;line-height:1.2;letter-spacing:.015em}
html:not([data-language=en]) [data-language-heading]{display:none!important}
html:not([data-language=en]) .translated-heading{display:block}
html[data-language=ja] .write-word,html[data-language=zh] .write-word{display:inline;white-space:normal}
html[data-language=ja] .postcard-handwriting,html[data-language=zh] .postcard-handwriting{font-family:'Hiragino Mincho ProN','Songti SC','Noto Serif CJK JP',serif!important;font-size:62px}
html:not([data-language=en]) .head__links a{white-space:normal}
html:not([data-language=en]) .chapter-route-labels{font-size:8px;letter-spacing:0}
html:not([data-language=en]) .bo-jump-nav a{white-space:normal}
@media(max-width:900px){.language-control{gap:2px;margin-right:8px}.language-control select{max-width:90px;font-size:12px}.head__brand{gap:8px}.head__word{max-width:calc(100vw - 224px)!important}.head__burger{margin-left:0!important}}
@media(min-width:901px){.language-control{margin-left:20px}}
@media print{.language-control{display:none}}

@media(max-width:760px){html:not([data-language=en]) .menu-jumps{width:calc(100% - 24px)}html:not([data-language=en]) .menu-jumps a{font-size:10px;white-space:normal;overflow-wrap:anywhere;text-align:center;padding:4px 6px;min-width:0}html[data-language=ja] .chapter-copy h1,html[data-language=zh] .chapter-copy h1{font-size:38px}html[data-language=ja] .chapter-copy h2,html[data-language=zh] .chapter-copy h2{font-size:38px}}
html:not([data-language=en]) .postcard__enquire{display:flex;align-items:center;justify-content:center;background:#20364b;box-shadow:inset 0 0 0 2px #9ea89e;z-index:4}
html:not([data-language=en]) .postcard__enquire .vh{position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important;white-space:normal!important;color:#fbf3dd;font:clamp(11px,2vw,20px)/1.15 Georgia,serif;text-align:center;padding:3px}
html:not([data-language=en]) .bread__collab{line-height:1.3}

.pagehead__title .translated-heading{text-align:center;width:100%}
@media(max-width:900px){.head__brand{min-width:0;width:100%}.head__word{flex:1 1 0;max-width:none!important}.language-control{margin-left:auto;margin-right:0}.language-control>span{display:none}.language-control select{width:86px}.head__home{width:44px;height:44px}}
@media(max-width:360px){.head__brand{gap:6px}.language-control select{width:78px}.head__word{height:32px}}

/* Korean uses readable Hangul lettering rather than a Latin handwriting font. */
html[data-language=ko] .postcard-handwriting{font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif!important;font-size:60px}
html[data-language=ko] .write-word{display:inline;white-space:normal}
@media(max-width:760px){html[data-language=ko] .chapter-copy h1,html[data-language=ko] .chapter-copy h2{font-size:38px}html:not([data-language=en]) .chapter-menu-tabs button{min-width:0;white-space:normal;overflow-wrap:anywhere}html:not([data-language=en]) .chapter-menu-open{white-space:normal;font-size:12px}}