/* ==========================================================================
   Summerhill Farm
   THE PRIZE BEAST

   The world is an Irish agricultural show card: chalk stock, black wood type
   set enormous, one rosette blue, and the animal reproduced at full size with
   no apology. A farm that had a hand in spreading the Hereford across Ireland
   spent six generations earning the right to be loud about it.

   It uses the show card's grammar and none of its claims. There is no prize
   here, no show, no founding date, because none of those have been verified.

   Locks: every corner square. One accent. One authored moment of motion, in
   the hero, and nothing else enters on scroll.
   ========================================================================== */

@font-face{
  font-family:'Anton';
  src:url('fonts/anton-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  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:'Archivo';
  src:url('fonts/archivo-normal-latin.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
  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;
}

/* ---------- tokens ---------- */
:root{
  --chalk:#F7F6F2;
  --chalk-2:#EDEBE4;
  --chalk-3:#E2DFD6;
  --ink:#0E0E0C;
  --ink-2:#45433D;
  --ink-3:#57544C;
  --rosette:#1C3F7A;
  --rosette-hi:#2A56A0;
  --on-rosette:#F7F6F2;
  --rule:rgba(14,14,12,.18);
  --rule-2:rgba(14,14,12,.4);
  --input-bg:#F7F6F2; --input-ink:#0E0E0C;
  --block:#1C3F7A; --on-block:#F7F6F2;

  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --gut:clamp(1.25rem,4.5vw,4rem);
  --band:clamp(4.25rem,8.5vw,8rem);
  --measure:68ch;
  --ease:cubic-bezier(.16,1,.3,1);

  --ink-blend:multiply;
  --ink-filter:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --chalk:#101114; --chalk-2:#171A1F; --chalk-3:#1E222A;
    --ink:#EDECE6; --ink-2:#A8A79F; --ink-3:#8A8880;
    --rosette:#7FA6E8; --rosette-hi:#9DBCF0; --on-rosette:#101114;
    --rule:rgba(237,236,230,.18); --rule-2:rgba(237,236,230,.42);
    --input-bg:#0A0B0D; --input-ink:#EDECE6;
    --block:#173563; --on-block:#EDECE6;
    --ink-blend:screen; --ink-filter:invert(1);
  }
}
:root[data-theme="dark"]{
  --chalk:#101114; --chalk-2:#171A1F; --chalk-3:#1E222A;
  --ink:#EDECE6; --ink-2:#A8A79F; --ink-3:#8A8880;
  --rosette:#7FA6E8; --rosette-hi:#9DBCF0; --on-rosette:#101114;
  --rule:rgba(237,236,230,.18); --rule-2:rgba(237,236,230,.42);
  --input-bg:#0A0B0D; --input-ink:#EDECE6;
  --block:#173563; --on-block:#EDECE6;
  --ink-blend:screen; --ink-filter:invert(1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--chalk);color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.32vw + .93rem,1.0625rem);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'liga' 1;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.05em;max-width:var(--measure)}
p:last-child{margin-bottom:0}

/* Browser surfaces are part of the card. None of these ship with a default
   that belongs to this world. */
::selection{background:var(--rosette);color:var(--on-rosette)}
:focus-visible{outline:2px solid var(--rosette);outline-offset:3px}
input,textarea{caret-color:var(--rosette)}
html{scrollbar-color:var(--rule-2) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--chalk-2)}
::-webkit-scrollbar-thumb{background:var(--rule-2);border:3px solid var(--chalk-2)}
::-webkit-scrollbar-thumb:hover{background:var(--rosette)}
a[href^="http"]{text-underline-offset:.18em;text-decoration-thickness:1px}

.wrap{max-width:1400px;margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{
  position:fixed;top:-140px;left:var(--gut);z-index:200;
  background:var(--rosette);color:var(--on-rosette);
  font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 22px;transition:top .2s var(--ease);
}
.skip:focus{top:14px}
section[id]{scroll-margin-top:92px}

/* ---------- the sheet ----------
   Chalk stock, not flat colour. Fixed and inert so it rasterises once. */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.14;mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::after{opacity:.2;mix-blend-mode:screen}
}
:root[data-theme="dark"] body::after{opacity:.2;mix-blend-mode:screen}

/* ---------- type ---------- */
.wood{
  font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:-.012em;line-height:.86;
  margin:0;
}
h1.wood{font-size:clamp(3.25rem,11.5vw,9rem)}
h2.wood{font-size:clamp(1.875rem,4.2vw,3.25rem)}
h3{
  font-family:var(--sans);font-weight:600;font-size:1.0625rem;
  text-transform:uppercase;letter-spacing:.13em;margin:0;
}
.lede{font-size:clamp(1.0625rem,.7vw + .9rem,1.25rem);line-height:1.55;color:var(--ink-2);max-width:46ch}
h1 + .lede,h2 + .lede,.rule + .lede{margin-top:clamp(1.1rem,1.6vw,1.5rem)}
.label{
  font-family:var(--sans);font-weight:600;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ink-2);
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ---------- rules ---------- */
.rule{height:1px;background:var(--rule);border:0;margin:0}
.rule.heavy{height:2px;background:var(--ink)}
.rule.blue{height:6px;background:var(--rosette)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.16em;
  padding:1rem 1.8rem;white-space:nowrap;border:2px solid var(--rosette);
  transition:background .2s var(--ease),color .2s var(--ease),transform .1s var(--ease);
  cursor:pointer;
}
.btn.solid{background:var(--rosette);color:var(--on-rosette)}
.btn.solid:hover{background:var(--rosette-hi);border-color:var(--rosette-hi)}
.btn.line{background:transparent;color:var(--rosette)}
.btn.line:hover{background:var(--rosette);color:var(--on-rosette)}
.btn:active{transform:translateY(1px)}
.btns{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- engravings ----------
   Grayscale artwork on pure white, multiplied onto the stock so the sheet
   shows through the animal. Re-export them and the ground must stay pure
   white, or a grey box appears around the drawing. */
.ink{mix-blend-mode:var(--ink-blend);filter:var(--ink-filter)}

/* ---------- the one authored moment ----------
   The wordmark lifts off its rule while the beast is drawn in beside it, once,
   on load. Nothing else on this page enters on scroll.

   Both are CSS animations with fill-mode forwards, deliberately: the cover
   starts at opacity zero, so waiting on a script to reveal it meant a slow or
   failed load showed a blank first screen. */
@keyframes lift{to{opacity:1;transform:none}}
.lift{opacity:0;transform:translateY(.16em);animation:lift .75s var(--ease) forwards}
.lift.d1{animation-delay:.1s}
.lift.d2{animation-delay:.2s}
.lift.d3{animation-delay:.3s}

@keyframes drawin{to{-webkit-mask-position:0 0;mask-position:0 0}}
/* The cover animal is NOT wiped in. A 1.9s draw meant the subject of the page
   was hidden or half hidden on every load, which is exactly what it looked
   like: a cropped bull. A printed cover does not animate its subject. */
.draw{
  -webkit-mask-image:linear-gradient(100deg,#000 0 34%,rgba(0,0,0,.3) 50%,transparent 66%);
          mask-image:linear-gradient(100deg,#000 0 34%,rgba(0,0,0,.3) 50%,transparent 66%);
  -webkit-mask-size:290% 100%;mask-size:290% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  display:block;
}
/* the breed plate is redrawn on demand, so it stays script driven, and starts
   already drawn, which is also its no-script state */
.draw.in{
  -webkit-mask-position:0 0;mask-position:0 0;
  transition:-webkit-mask-position 1.9s var(--ease),mask-position 1.9s var(--ease);
}

/* ---------- the cover ----------
   One full frame, measured off the approved comp rather than guessed:
   the wordmark's cap height is 26% of the frame, its width 35%, and the
   animal fills 97% of the frame height. Those three numbers are the design.
   ---------------------------------------------------------------------- */
.cover{min-height:100svh;display:flex;flex-direction:column}

/* masthead: contents left, the seal centred, the farm named right, one
   hairline holding the width. Part of the sheet, so it does not stick. */
.mast{padding-top:clamp(1rem,1.8vw,1.4rem);flex:0 0 auto}
.mast .wrap{
  display:grid;align-items:center;gap:1rem;grid-template-columns:1fr auto 1fr;
  padding-bottom:clamp(.6rem,1.1vw,.9rem);border-bottom:1px solid var(--ink);
}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,2rem);white-space:nowrap;flex-wrap:wrap}
.nav a{
  font-family:var(--sans);font-weight:600;font-size:.625rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink);
  position:relative;padding-block:.2rem;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rosette);
  transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
/* the one round thing on the page: a seal is round, that is what a seal is */
.seal{
  display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
  border:1.5px solid var(--ink);font-family:var(--display);font-size:1.0625rem;
  line-height:1;padding-top:.1em;
}
.descriptor{
  margin:0;justify-self:end;max-width:none;
  font-family:var(--sans);font-weight:600;font-size:.625rem;
  text-transform:uppercase;letter-spacing:.18em;white-space:nowrap;
}

.cover-grid{
  /* width:100% is load bearing: .wrap carries margin-inline:auto, and an auto
     margin on a flex item in a column container shrink wraps it instead of
     stretching, which collapsed this whole grid to its content width. */
  flex:1 1 auto;min-height:0;width:100%;
  display:grid;gap:clamp(1.25rem,3vw,3rem);align-items:stretch;
  grid-template-columns:minmax(0,.6fr) minmax(0,1fr);
}
.cover-copy{
  position:relative;z-index:1;min-width:0;overflow:hidden;
  container-type:inline-size;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(1rem,2vw,2rem);
}
/* Anton compressed to 0.43. Its stems are heavy enough that squeezing this
   hard still reads as fat wood type; a timid squeeze reads as squashed sans.
   The squeeze sits on an inner span because the entry animation owns
   `transform` on the heading and the two would cancel each other. */
.cover h1{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  /* Measured off the comp: cap height 26% of the frame, wordmark width 35%.
     Anton is 0.558 wide per character with a 0.865em cap, so reaching the
     comp's 0.237 needs a 0.386 squeeze. Its stems are heavy enough to survive
     that; a timid squeeze just reads as a squashed sans.
     The span is inline-block so its box hugs the text rather than taking the
     column width, and the squeeze sits on the span because the entry
     animation owns `transform` on the heading itself. */
  font-size:min(30vh,53cqw);line-height:.92;letter-spacing:0;
  margin:0 0 .06em;white-space:nowrap;
}
.cover h1 .squeeze{
  display:inline-block;transform:scaleX(.386);transform-origin:left center;
  /* Ink bite. The comp's letters are printed, not vector, so a sparse noise
     mask eats a little of the black. The mask is squeezed along with the type,
     so its width is pre-compensated by the inverse of the squeeze to keep the
     grain round rather than smeared. */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0 0 0 0.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0 0 0 0.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-size:620px 240px;mask-size:620px 240px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
}
.cover .place{
  margin:0;max-width:none;text-align:center;
  font-family:var(--sans);font-weight:600;
  font-size:clamp(.625rem,1.5cqw,.9375rem);text-transform:uppercase;letter-spacing:.22em;
  padding-block:.45rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.cover .bar{height:.8rem;background:var(--rosette);border:0;margin:.45rem 0 0}
.doc{
  font-family:var(--sans);font-weight:600;font-size:clamp(.875rem,1.9cqw,1.1875rem);
  text-transform:uppercase;letter-spacing:.05em;margin:clamp(.9rem,2vw,1.4rem) 0 .15rem;
}
.doc-sub{
  margin:0;max-width:none;font-family:var(--sans);font-weight:600;
  font-size:.5625rem;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-2);
}
.idx{margin-top:clamp(.8rem,1.8vw,1.2rem)}
.idx ul{list-style:none;margin:0;padding:0}
.idx a{
  display:flex;align-items:baseline;gap:.5rem;padding:.34rem 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-weight:600;font-size:.625rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink);
}
.idx li:last-child a{border-bottom:0}
.idx .what{display:inline-block;transition:transform .28s var(--ease)}
.idx .fill{flex:1 1 auto;height:1px;background:var(--rule);transform:translateY(-.2em)}
.idx .go{flex:0 0 auto;color:var(--ink-3);transition:color .28s var(--ease)}
.idx a:hover .what,.idx a:focus-visible .what{transform:translateX(.35rem)}
.idx a:hover .go,.idx a:focus-visible .go{color:var(--rosette)}
.triad{
  margin:clamp(.9rem,2vw,1.4rem) 0 0;max-width:none;
  padding-top:.6rem;border-top:1px solid var(--ink);
  font-family:var(--sans);font-weight:600;font-size:clamp(.625rem,1.4cqw,.8125rem);
  text-transform:uppercase;letter-spacing:.14em;
}
.flank{margin:.45rem 0 0;max-width:none;display:flex;align-items:center;gap:.6rem}
.flank span{
  font-family:var(--sans);font-size:.5rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--ink-3);white-space:nowrap;
}
.flank::before,.flank::after{content:"";height:1px;background:var(--rule);flex:1 1 auto}
.flank::after{flex-grow:6}

/* the beast takes the rest of the frame, top to bottom, and runs off it */
.cover-plate{
  position:relative;overflow:hidden;min-width:0;margin:0;
  margin-right:calc(-1 * (var(--gut) + max(0px,(100vw - 1400px) / 2)));
}
/* The animal is NOT cropped. object-fit:cover fills a box by cutting whatever
   does not fit, which is why the head, back and legs kept being sliced off.
   In the comp the whole beast is there at full frame height, and only its
   hindquarters run off the right edge. So: natural aspect, height pinned to
   the frame, anchored left, and whatever exceeds the column bleeds right. */
.cover-plate img{
  position:absolute;top:0;left:0;
  height:100%;width:auto;max-width:none;
}

/* the masthead must stay on one line: drop the secondary entries early,
   the cover's own index carries them anyway */
@media (max-width:1150px){.nav .opt{display:none}}

@media (max-width:900px){
  .cover{min-height:0}
  .cover-grid{grid-template-columns:1fr;gap:1rem}
  .cover-copy{padding-block:1.25rem 2rem}
  .cover h1{font-size:42cqw}
  .cover-plate{order:-1;margin-right:calc(-1 * var(--gut));height:auto}
  /* On a phone the beast is sized to the width and the frame takes whatever
     height that needs. The draw wrapper has to come out of absolute
     positioning too, or the plate collapses to nothing and takes the animal
     with it. */
  .cover-plate img{position:static;height:auto;width:100%}
}
@media (max-width:640px){
  .mast .wrap{grid-template-columns:1fr auto}
  .descriptor{display:none}
  .nav a{font-size:.5625rem;letter-spacing:.13em}
  .nav .opt{display:none}
}

/* ---------- the land ---------- */
.land{
  background:var(--chalk-2);padding-block:var(--band);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.land h2{max-width:14ch}

@property --r{syntax:'<length-percentage>';inherits:true;initial-value:0px}
.plate{
  position:relative;margin-top:clamp(2rem,5vw,3.5rem);background:var(--chalk-3);
  --r:150%;--mx:50%;--my:50%;transition:--r 1.4s var(--ease);
}
.plate img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* The photograph is the ground. A sheet carrying the drawing lies over it with
   one radial hole punched through: the hole opens as the section arrives, and
   reopens under the cursor so the field can be drawn back over by hand. --r is
   registered, which is the only reason the hole can be animated at all. */
.plate .sheet{
  position:absolute;inset:0;display:block;background:var(--chalk-2);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 55%,transparent 100%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 55%,transparent 100%);
}
.plate .drawn{position:absolute;inset:0;filter:var(--ink-filter)}
.plate.in{--r:0px}
@media (hover:hover) and (pointer:fine){
  .plate.lit{--r:230px;transition:--r .45s var(--ease)}
}
.caption{
  font-family:var(--sans);font-size:.6875rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-3);margin:0;padding-top:.7rem;border-top:1px solid var(--rule);
  display:inline-block;
}

/* ---------- the herd ---------- */
.breeds{padding-block:var(--band)}
.breeds h2{max-width:12ch}
.breed-ui{
  display:grid;align-items:start;
  gap:clamp(1.5rem,3vw,2.5rem) clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  grid-template-areas:"pick fig" "copy fig";
  margin-top:clamp(2rem,5vw,3.5rem);
}
.picker{grid-area:pick;display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.picker button{
  position:relative;appearance:none;background:none;border:0;
  border-bottom:1px solid var(--rule);
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.05;letter-spacing:.005em;
  color:var(--ink-3);text-align:left;padding:.95rem 0 .95rem 1rem;cursor:pointer;
  background-image:linear-gradient(color-mix(in srgb,var(--rosette) 9%,transparent) 0 100%);
  background-repeat:no-repeat;background-size:0% 100%;
  transition:color .28s var(--ease),background-size .45s var(--ease);
}
.picker .nm,.picker .sub{display:block;transition:transform .28s var(--ease)}
.picker button:hover,.picker button:focus-visible{background-size:100% 100%;color:var(--ink-2)}
.picker button:hover .nm,.picker button:hover .sub,
.picker button:focus-visible .nm,.picker button:focus-visible .sub{transform:translateX(.4rem)}
.picker button::before{
  content:"";position:absolute;left:0;top:50%;width:4px;height:64%;
  background:var(--rosette);transform:translateY(-50%) scaleY(0);
  transition:transform .3s var(--ease);
}
.picker button[aria-pressed="true"]{color:var(--ink)}
.picker button[aria-pressed="true"]::before{transform:translateY(-50%) scaleY(1)}
.picker button::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease);
}
.picker button[aria-pressed="true"]::after{transform:scaleX(1)}
.picker .sub{
  display:block;font-family:var(--sans);font-weight:600;font-size:.625rem;
  letter-spacing:.2em;color:var(--ink-3);margin-top:.4rem;
}
.breed-fig{grid-area:fig;align-self:center;margin:0;
  margin-right:calc(-1 * (var(--gut) * .5 + max(0px,(100vw - 1400px) / 2)))}
.breed-fig img{width:100%;max-width:none;height:auto}
.breed-copy{grid-area:copy;max-width:50ch}
.breed-copy h3{margin-bottom:.7rem;color:var(--rosette)}
.swap{transition:opacity .28s var(--ease)}
.swap.out{opacity:0}
.breed-fig .draw{transition:-webkit-mask-position .3s var(--ease),mask-position .3s var(--ease)}
.breed-fig .draw.in{transition:-webkit-mask-position .95s var(--ease),mask-position .95s var(--ease)}
@media (max-width:860px){
  .breed-ui{grid-template-columns:1fr;grid-template-areas:"pick" "fig" "copy"}
  .breed-fig{margin-right:0}
  .breed-fig img{max-width:380px;margin-inline:auto}
}

/* ---------- the family ---------- */
.farmer{
  background:var(--chalk-2);padding-block:var(--band);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.farmer .cols{
  display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start;
  grid-template-columns:minmax(0,.68fr) minmax(0,1fr);
}
.portrait{margin:0}
.portrait img{width:100%;height:auto}

/* A ruled row out of the record: divided, tight, tabular. The one dense
   moment on a page that is otherwise all air. */
.facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
}
.fact{padding:clamp(1.1rem,2.2vw,1.75rem) clamp(.85rem,1.7vw,1.5rem);border-left:1px solid var(--rule)}
.fact:first-child{border-left:0;padding-left:0}
.fact .n{
  display:block;font-family:var(--display);font-size:clamp(2.75rem,6vw,4.75rem);
  line-height:.85;color:var(--rosette);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
}
.fact .l{
  display:block;font-family:var(--sans);font-weight:600;font-size:.625rem;
  text-transform:uppercase;letter-spacing:.11em;line-height:1.5;
  color:var(--ink-2);margin-top:.8rem;max-width:22ch;
}
@media (max-width:860px){
  .farmer .cols{grid-template-columns:1fr}
  .portrait{max-width:420px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){border-left:0;padding-left:0}
}

/* ---------- where it goes ---------- */
.goes{padding-block:var(--band);text-align:center}
.goes h2{max-width:16ch;margin-inline:auto}
.goes .lede{margin-inline:auto;max-width:52ch}
.houses{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:2rem;border-top:2px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:1rem clamp(2rem,5vw,4rem);justify-content:center;align-items:baseline;
}
.house{margin:0;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.1}
.house a{position:relative}
.house a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--rosette);
  transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease);
}
.house a:hover::after,.house a:focus-visible::after{transform:scaleX(1)}
.house .where{
  display:block;font-family:var(--sans);font-weight:600;font-size:.625rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3);margin-top:.5rem;
}

/* ---------- enquiries ----------
   The rosette taken all the way to the edges. One block, once, at the only
   point where a chef is asked to do something. */
.enq{
  background:var(--block);color:var(--on-block);padding-block:var(--band);
  --ink:var(--on-block);
  --ink-2:color-mix(in srgb,var(--on-block) 84%,transparent);
  --ink-3:color-mix(in srgb,var(--on-block) 72%,transparent);
  --rule:color-mix(in srgb,var(--on-block) 30%,transparent);
  --rule-2:color-mix(in srgb,var(--on-block) 50%,transparent);
}
.enq :focus-visible{outline-color:var(--on-block)}
.enq .cols{
  display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
}
.enq h2{max-width:11ch}
.enq .rule.heavy{margin-top:1.1rem;background:var(--on-block)}
form{display:grid;gap:1.4rem}
.field label{
  display:block;font-family:var(--sans);font-weight:600;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink);margin-bottom:.5rem;
}
.field .help{display:block;font-family:var(--sans);font-size:.75rem;color:var(--ink-3);margin-bottom:.5rem}
.field input,.field textarea{
  width:100%;font-family:var(--sans);font-size:1rem;line-height:1.5;
  color:var(--input-ink);background:var(--input-bg);
  border:1px solid transparent;padding:.85rem 1rem;
  transition:box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-height:8rem}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1}
.field input:focus,.field textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--rosette)}
.enq .field input:focus,.enq .field textarea:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.field .err{
  display:none;font-family:var(--sans);font-weight:600;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--ink);margin-top:.5rem;
}
.field[data-invalid] input,.field[data-invalid] textarea{box-shadow:inset 0 0 0 2px var(--ink)}
.field[data-invalid] .err{display:block}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
.form-state{font-family:var(--sans);font-size:.8125rem;color:var(--ink-2);min-height:1.2em}
.enq .btn.solid{background:var(--on-block);color:var(--block);border-color:var(--on-block)}
.enq .btn.solid:hover{background:#fff;border-color:#fff}
button[disabled]{opacity:.55;cursor:progress}
@media (max-width:860px){.enq .cols{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{padding-block:clamp(3rem,6vw,4.5rem)}
.foot .cols{display:flex;flex-wrap:wrap;gap:2rem clamp(2rem,6vw,5rem);justify-content:space-between}
.foot .mark{font-size:1.5rem}
.foot address{
  font-style:normal;font-family:var(--sans);font-size:.75rem;line-height:1.9;
  text-transform:uppercase;letter-spacing:.13em;color:var(--ink-2);
}
.foot .fine{
  font-family:var(--sans);font-size:.625rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--ink-3);max-width:none;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;border-top:1px solid var(--rule);
}
.foot a:hover{color:var(--rosette)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .lift{opacity:1;transform:none;animation:none}
  .draw{-webkit-mask-image:none;mask-image:none;animation:none}
  .plate{--r:0px}
}