/* ===============================================================
   BLEND 111 — single-file site
   Palette is committed: one visual world, a room after service.
   Accent is the colour of green coffee before it is roasted.

   PHOTOS: every <img> points at /photos/*.jpg. Until a file exists
   there, a labelled placeholder shows in its place, so the page is
   never broken — it just tells you which picture is missing.
   =============================================================== */
:root{
  --ground:#14100E;
  --raised:#1C1613;
  --raised-2:#241D19;
  --line:#2E2521;
  --line-soft:#241C19;
  --bone:#EFE8DC;
  --muted:#9C8E80;
  --faint:#6B5F55;
  --green:#A8B98C;
  --green-deep:#7E9161;
  --ember:#C4693F;

  --measure:60ch;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --gap-section:clamp(4rem,9vw,7.5rem);

  --display:"Bodoni Moda",'Didot','Bodoni MT',Georgia,serif;
  --body:"Karla",'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,'SFMono-Regular',Menlo,monospace;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ground);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
[hidden]{display:none !important;}
::selection{background:var(--green-deep);color:var(--ground);}
a{color:inherit;}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px;}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:78rem;margin-inline:auto;padding-inline:var(--pad);}
.col{max-width:var(--measure);}
.stack{display:flex;flex-direction:column;}
.stack-sm{gap:0.75rem;}
.stack-md{gap:1.25rem;}
section{padding-block:var(--gap-section);}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
.eyebrow--green{color:var(--green-deep);}
h1,h2{
  font-family:var(--display);font-weight:400;line-height:1.06;
  text-wrap:balance;margin:0;letter-spacing:-0.01em;
}
h1{font-size:clamp(2.5rem,1.4rem + 5.4vw,5.5rem);}
h2{font-size:clamp(1.875rem,1.25rem + 2.8vw,3.25rem);}
h3{
  font-family:var(--body);font-size:1rem;font-weight:600;
  line-height:1.3;margin:0;
}
p{margin:0;}
.lede{font-size:clamp(1.0625rem,1rem + 0.45vw,1.3125rem);line-height:1.55;font-weight:300;}
.body-muted{color:var(--muted);}
.body-muted strong{color:var(--bone);font-weight:500;}

/* ---------- the 111 rule ---------- */
.rule111{display:flex;gap:0.5rem;justify-content:center;align-items:center;height:2.5rem;}
.rule111 i{display:block;width:1px;height:100%;
  background:linear-gradient(to bottom,transparent,var(--line) 25%,var(--line) 75%,transparent);}
.rule111 i:nth-child(2){height:72%;}

/* ---------- PHOTO SYSTEM ---------- */
.fig{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--raised);
  border:1px solid var(--line);
}
.fig::after{                     /* placeholder label, sits underneath the img */
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;text-align:center;
  font-family:var(--mono);font-size:0.625rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--faint);
  pointer-events:none;
}
.fig img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;
  background:var(--raised);
}
.fig--wide{aspect-ratio:16/9;}
.fig--tall{aspect-ratio:4/5;}
.fig--sq{aspect-ratio:1/1;}
.fig--natural{aspect-ratio:auto;}            /* show the whole frame */
.fig--natural img{height:auto;object-fit:initial;}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:0.8rem;}
.wordmark{font-family:var(--display);font-size:1.1875rem;letter-spacing:0.02em;
  text-decoration:none;display:flex;align-items:baseline;gap:0.4rem;}
.wordmark span{font-family:var(--mono);font-size:0.6875rem;color:var(--green-deep);letter-spacing:0.1em;}
.mast-link{
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:0.4rem 0.75rem;
  border:1px solid var(--line);border-radius:1px;transition:color .2s,border-color .2s;
}
.mast-link:hover{color:var(--bone);border-color:var(--faint);}
.mast-nav{display:flex;align-items:center;gap:0.5rem;flex-shrink:0;justify-content:flex-end;}
.mast-link{white-space:nowrap;}
@media (max-width:34rem){
  .wordmark span{display:none;}          /* keep the bar on one line on phones */
  .mast-nav{gap:0.375rem;}
  .mast-link{padding:0.35rem 0.55rem;letter-spacing:0.1em;font-size:0.625rem;}
}
section[id]{scroll-margin-top:4.5rem;}   /* anchors clear the sticky bar */

/* ---------- HERO (full-bleed photo) ---------- */
.hero{
  position:relative;
  min-height:min(86vh,46rem);
  display:flex;align-items:flex-end;
  padding-block:clamp(3rem,10vw,6rem);
  overflow:hidden;
  background:var(--raised);
}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img,
.hero-media video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.03);
}
.hero-media video{z-index:2;opacity:0;transition:opacity 1.2s ease;}
.hero-media video.is-playing{opacity:1;}
.hero-scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to top, var(--ground) 4%, color-mix(in srgb,var(--ground) 72%,transparent) 42%, color-mix(in srgb,var(--ground) 30%,transparent) 100%),
    linear-gradient(to right, color-mix(in srgb,var(--ground) 62%,transparent), transparent 62%);
}
.hero .wrap{position:relative;z-index:3;}
.hero .inner{display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,1.875rem);}
.hero h1{max-width:15ch;}
.hero h1 .soft{color:var(--muted);}
.hero-sub{max-width:42ch;}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:0.4rem 1.25rem;
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);
}
.rise{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.22,.8,.3,1) forwards;}
.rise:nth-child(1){animation-delay:.08s;}
.rise:nth-child(2){animation-delay:.2s;}
.rise:nth-child(3){animation-delay:.32s;}
.rise:nth-child(4){animation-delay:.44s;}
@keyframes rise{to{opacity:1;transform:none;}}

/* ---------- section heads ---------- */
.head{display:flex;flex-direction:column;gap:0.875rem;margin-bottom:2rem;max-width:32ch;}

/* ---------- restaurant: text + photo trio ---------- */
.gallery{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  margin-top:2.5rem;
}
.gallery .fig{border:0;}

.awards{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--line);max-width:44rem;}
.awards li{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding-block:0.85rem;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.awards .what{font-size:0.9375rem;min-width:0;}
.awards .who{min-width:0;overflow-wrap:anywhere;text-align:right;
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted);text-align:right;flex-shrink:0;}

/* ---------- pull quote ---------- */
.pull{border-left:1px solid var(--green-deep);padding-left:clamp(1.25rem,4vw,2.5rem);max-width:34ch;}
.pull p{font-family:var(--display);font-size:clamp(1.3125rem,1.05rem + 1.2vw,1.875rem);
  line-height:1.28;font-style:italic;}
.pull cite{display:block;margin-top:1.125rem;font-family:var(--mono);font-style:normal;
  font-size:0.6875rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}

/* ---------- split: photo beside text ---------- */
.split{
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:56rem){
  .split{grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);}
  .split--flip .split-media{order:2;}
  .split-media{position:sticky;top:6rem;}
}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border-block:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));}
.steps li{background:var(--ground);padding:1.5rem 1.375rem 1.75rem;display:flex;flex-direction:column;gap:0.5rem;}
.steps .n{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.14em;color:var(--green-deep);}
.steps p{font-size:0.9rem;color:var(--muted);line-height:1.6;}

/* ---------- lots ---------- */
.lots{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}
.lot{background:var(--ground);display:flex;flex-direction:column;}
.lot .fig{border:0;border-bottom:1px solid var(--line);}
.lot-body{padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:0.5rem;flex:1;}
.lot .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;}
.lot .origin{font-family:var(--display);font-size:1.25rem;line-height:1.2;}
.lot .price{font-family:var(--mono);font-size:0.875rem;font-variant-numeric:tabular-nums;}
.lot .notes{font-size:0.9rem;color:var(--muted);}
.lot .proc{font-family:var(--mono);font-size:0.5875rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--faint);margin-top:auto;padding-top:0.5rem;}

/* ---------- spec list ---------- */
.spec{margin:0.75rem 0 0;padding:0;border-top:1px solid var(--line);}
.spec div{display:flex;justify-content:space-between;gap:1.5rem;
  padding-block:0.7rem;border-bottom:1px solid var(--line);}
.spec dt{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);margin:0;}
.spec dd{margin:0;font-size:0.9375rem;text-align:right;}

/* ---------- shop ---------- */
.shop{background:var(--raised);border-block:1px solid var(--line);}
.gate{max-width:34rem;display:flex;flex-direction:column;gap:1.25rem;}
.gate form{display:flex;gap:0.5rem;flex-wrap:wrap;}
.gate input{
  flex:1 1 14rem;background:var(--raised-2);border:1px solid var(--line);color:var(--bone);
  font-family:var(--mono);font-size:0.9375rem;letter-spacing:0.22em;text-transform:uppercase;
  padding:0.85rem 1rem;border-radius:1px;transition:border-color .2s;
}
.gate input::placeholder{color:var(--faint);letter-spacing:0.16em;}
.gate input:focus{border-color:var(--green-deep);outline:none;}
.gate input:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.btn{
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.16em;text-transform:uppercase;
  padding:0.8rem 1.5rem;background:var(--bone);color:var(--ground);border:1px solid var(--bone);
  border-radius:1px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--green);border-color:var(--green);}
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--line);}
.btn--ghost:hover{background:transparent;color:var(--green);border-color:var(--green-deep);}
.gate-msg{font-family:var(--mono);font-size:0.75rem;letter-spacing:0.08em;color:var(--ember);min-height:1.2em;}
#shopOpen{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  animation:unlock .6s cubic-bezier(.22,.8,.3,1);}
@keyframes unlock{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.offer{background:var(--raised);padding:1.5rem 1.375rem;display:flex;flex-direction:column;gap:0.6rem;}
.offer .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;}
.offer h3{font-family:var(--display);font-size:1.375rem;font-weight:400;}
.offer .amt{font-family:var(--mono);font-size:0.875rem;color:var(--green);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.offer p{font-size:0.9rem;color:var(--muted);flex:1;}
.offer .btn{align-self:flex-start;margin-top:0.4rem;}
.unlocked-note{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--green-deep);}

/* ---------- the book (NOT gated — anyone can buy this) ---------- */
.book{background:var(--raised);border-block:1px solid var(--line);}
.book-grid{display:grid;gap:clamp(2.25rem,5vw,4rem);align-items:start;}
@media (min-width:56rem){
  .book-grid{grid-template-columns:minmax(0,0.72fr) minmax(0,1fr);}
}
.book-cover{
  margin:0;background:var(--raised-2);border:1px solid var(--line);
  padding:clamp(0.875rem,2.5vw,1.5rem);
  box-shadow:0 30px 70px -36px rgba(0,0,0,0.95);
}
.book-cover img{display:block;width:100%;height:auto;}
.book-cover figcaption{font-family:var(--mono);font-size:0.5875rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--faint);margin-top:0.875rem;}
.book-body{display:flex;flex-direction:column;gap:1.125rem;max-width:52ch;}
.book-body h2{margin-bottom:0;}
.book-body p{font-size:0.9375rem;color:var(--muted);margin:0;}
.book-body p.lede{font-size:clamp(1rem,0.95rem + 0.35vw,1.1875rem);color:var(--bone);line-height:1.55;}
.book-buy{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 1.5rem;
  margin-top:0.5rem;padding-top:1.5rem;border-top:1px solid var(--line);}
.book-buy .amt{font-family:var(--mono);font-size:1.125rem;color:var(--green);
  font-variant-numeric:tabular-nums;}
.book-note{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--faint);}

/* ---------- look inside ---------- */
.book-media{display:flex;flex-direction:column;gap:1.25rem;}
.peek-trigger{
  display:block;width:100%;padding:0;margin:0;border:0;background:none;
  position:relative;cursor:zoom-in;color:inherit;font:inherit;
}
.peek-trigger img{display:block;width:100%;height:auto;
  transition:filter .35s ease,transform .45s cubic-bezier(.22,.8,.3,1);}
.peek-trigger:hover img,.peek-trigger:focus-visible img{filter:brightness(0.94);}
.peek-trigger:focus-visible{outline:2px solid var(--green);outline-offset:4px;}
.peek-badge{
  /* a tab clipped to the foot of the cover: it straddles the image edge and
     the mount below it, so it never lands on the cover's own typography */
  position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  display:inline-flex;align-items:center;gap:0.45rem;white-space:nowrap;
  padding:0.5rem 0.85rem;background:color-mix(in srgb,var(--ground) 92%,transparent);
  border:1px solid var(--line);color:var(--bone);
  font-family:var(--mono);font-size:0.625rem;letter-spacing:0.14em;text-transform:uppercase;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .25s,border-color .25s,color .25s;
}
.peek-trigger:hover .peek-badge,.peek-trigger:focus-visible .peek-badge{
  background:var(--green-deep);border-color:var(--green-deep);color:var(--ground);}
/* no interior pages present — degrade to a plain cover */
.peek-trigger.is-plain{cursor:default;}
.peek-trigger.is-plain .peek-badge{display:none;}

.peek-label{font-family:var(--mono);font-size:0.5875rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 0.625rem;}
.peek-thumbs{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(5,1fr);background:var(--line);border:1px solid var(--line);}
.peek-thumbs button{
  display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:var(--raised-2);
  cursor:pointer;overflow:hidden;position:relative;
}
.peek-thumbs img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0.68;transition:opacity .25s ease,transform .45s cubic-bezier(.22,.8,.3,1);}
.peek-thumbs button:hover img,.peek-thumbs button:focus-visible img{opacity:1;transform:scale(1.04);}
.peek-thumbs button:focus-visible{outline:2px solid var(--green);outline-offset:-2px;}

/* ---------- look inside: the viewer ---------- */
.peek{
  position:fixed;inset:0;z-index:100;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(0.25rem,2vw,1rem);padding:clamp(0.75rem,3vw,2rem);
  background:color-mix(in srgb,#0B0907 94%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .25s ease;
}
.peek.is-open{opacity:1;}
.peek-stage{margin:0;width:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0.875rem;min-width:0;}
.peek-frame{display:flex;align-items:center;justify-content:center;
  max-width:100%;min-height:0;min-width:0;}
.peek-frame img{
  display:block;max-width:100%;max-height:78vh;width:auto;height:auto;
  background:var(--bone);border:1px solid var(--line);
  box-shadow:0 30px 80px -40px #000;cursor:zoom-in;
}
/* tap/click the page to read it close up; the frame pans */
.peek-frame.is-zoomed{overflow:auto;-webkit-overflow-scrolling:touch;
  width:100%;max-height:78vh;align-items:flex-start;justify-content:flex-start;}
.peek-frame.is-zoomed img{max-width:none;max-height:none;width:240%;cursor:zoom-out;}
.peek-cap{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:0.5rem 1.25rem;text-align:center;}
.peek-cap span{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.1em;color:var(--muted);}
.peek-cap .peek-count{color:var(--faint);font-variant-numeric:tabular-nums;}
.peek-nav,.peek-close{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  cursor:pointer;border-radius:1px;line-height:1;
  transition:color .2s,border-color .2s,background .2s;
}
.peek-nav{width:3rem;height:3rem;font-size:1.5rem;font-family:var(--body);}
.peek-nav:hover:not(:disabled),.peek-close:hover{color:var(--bone);border-color:var(--faint);}
.peek-nav:disabled{opacity:0.3;cursor:default;}
.peek-nav:focus-visible,.peek-close:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.peek-close{position:absolute;top:clamp(0.75rem,3vw,1.5rem);right:clamp(0.75rem,3vw,1.5rem);
  width:2.5rem;height:2.5rem;font-size:1.25rem;}
@media (max-width:40rem){
  .peek{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;justify-items:stretch;}
  .peek-stage{grid-row:1;grid-column:1;height:100%;}
  .peek-frame img{max-height:70vh;}
  .peek-frame.is-zoomed{max-height:70vh;}
  /* both arrows share the one cell under the page */
  .peek-prev{grid-row:2;grid-column:1;justify-self:start;}
  .peek-next{grid-row:2;grid-column:1;justify-self:end;}
  .peek-nav{width:3.25rem;height:3.25rem;}
}
body.peek-locked{overflow:hidden;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:2.75rem 3.5rem;font-size:0.875rem;color:var(--muted);}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:2rem;margin-bottom:2.25rem;}
.foot-grid h4{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--faint);margin:0 0 0.6rem;font-weight:400;}
.foot-grid a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);}
.foot-grid a:hover{color:var(--green);border-color:var(--green-deep);}
.colophon{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.1em;color:var(--faint);
  text-transform:uppercase;display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;
  padding-top:1.25rem;border-top:1px solid var(--line-soft);}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;}
  .rise{opacity:1;transform:none;}
}

/* ===============================================================
   COCKTAILS — index and recipe pages.
   Same tokens, same type, same restraint as the rest of the site.
   =============================================================== */

/* ---------- index ---------- */
#cocktails{padding-block:calc(var(--gap-section) * 0.8) var(--gap-section);}

.filters{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0 0 2rem;}
.chip{
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line);
  padding:0.45rem 0.8rem;border-radius:1px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.chip:hover{color:var(--bone);border-color:var(--faint);}
.chip.is-on{background:var(--green-deep);border-color:var(--green-deep);color:var(--ground);}
.chip:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

.cards{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
}
/* outline rather than border, so neighbouring cards share a hairline and a
   partly-filled last row doesn't leave empty boxes */
.card{background:var(--ground);outline:1px solid var(--line);}
.card[hidden]{display:none;}
.card a{display:block;text-decoration:none;color:inherit;}
.card .fig{border:0;border-bottom:1px solid var(--line);}
.card img{transition:transform .5s cubic-bezier(.22,.8,.3,1),opacity .3s ease;opacity:0.9;}
.card a:hover img,.card a:focus-visible img{transform:scale(1.045);opacity:1;}
.card a:focus-visible{outline:2px solid var(--green);outline-offset:-2px;}
.card-body{padding:0.9rem 1rem 1.15rem;display:flex;flex-direction:column;gap:0.3rem;}
.card-name{font-family:var(--display);font-size:1.0625rem;line-height:1.25;}
.card-base{font-family:var(--mono);font-size:0.5875rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--green-deep);}
.count{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--faint);margin-top:1.5rem;}

/* ---------- a single recipe ---------- */
.recipe{padding-block:calc(var(--gap-section) * 0.6) var(--gap-section);}
.crumb{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:2rem;}
.crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);}
.crumb a:hover{color:var(--green);border-color:var(--green-deep);}
.crumb span{margin:0 0.1rem;}

.recipe-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start;}
@media (min-width:56rem){
  .recipe-grid{grid-template-columns:minmax(0,0.9fr) minmax(0,1fr);}
  .recipe-media{position:sticky;top:6rem;}
}
.recipe-media .fig{border:1px solid var(--line);}
.recipe-body{display:flex;flex-direction:column;gap:1.25rem;max-width:46ch;}
.recipe-body h1{margin:0;}
.recipe-body h2{
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--green-deep);font-weight:400;margin:0 0 0.875rem;
}
.recipe-body section{padding-top:1.5rem;border-top:1px solid var(--line);}

.ing ul{list-style:none;margin:0;padding:0;}
.ing li{
  padding-block:0.5rem;border-bottom:1px solid var(--line-soft);
  font-size:1rem;display:flex;gap:0.75rem;
}
.ing li:last-child{border-bottom:0;}

.steps-n ol{margin:0;padding:0;list-style:none;counter-reset:step;}
.steps-n li{
  counter-increment:step;position:relative;padding-left:2.25rem;margin-bottom:1rem;
  font-size:0.9375rem;color:var(--muted);line-height:1.6;
}
.steps-n li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0.15rem;
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.08em;color:var(--green-deep);
}
.steps-n li:last-child{margin-bottom:0;}

.notes-n p{font-size:0.9375rem;color:var(--muted);margin:0;}

.byline{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--faint);margin:0;padding-top:1.5rem;
  border-top:1px solid var(--line);}

.recipe-foot{margin-top:clamp(3rem,7vw,5rem);padding-top:2rem;border-top:1px solid var(--line);}
.recipe-foot .btn{display:inline-block;}

/* a recipe whose photograph hasn't been imported yet: one column, no gap */
@media (min-width:56rem){
  .recipe-grid--text{grid-template-columns:minmax(0,1fr);}
}
.recipe-grid--text .recipe-body{max-width:60ch;}