/* ══════════════════════════════════════════════════════════════════════════════
   SITE KIT · THE FINISH                                         finish.css v1.0 (2026-10-01)
   The last tenth of craft, as defaults. Round 1 measured layout and motion, round 2 read composition;
   neither set the finish: how the type is set, what answers a pointer, how a shadow is drawn, how one
   page hands over to the next. Every rule here is measured on the award winners that were READ
   (client-site-design/reference/finish.md has the numbers) and checked by the gate's FINISH section.

   Load it AFTER kit.css / palette.css and BEFORE site.css:
     extraCss: [..., 'palette.css', 'tint.css', 'motion.css', 'presets.css', 'finish.css', 'site.css']
   Almost every selector sits inside :where(), so it carries NO specificity: anything a site's own
   stylesheet says wins without a fight. It reads the site's tokens (--ink, --paper, --accent,
   --accent-txt, --nav-h) and falls back to the kit's when a site has none.
   --finish:1 is how the gate knows a site has opted in (FINISH rows fail instead of warn).
   ══════════════════════════════════════════════════════════════════════════════ */
:root{
  --finish:1;
  /* one easing family for the whole site: fast out of the gate, long settle. The keyword `ease` is the browser default
     and reads as a default; the winners draw their own curve (finish.md §4). */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);      /* the single most common curve in the winners' stylesheets */
  --t-micro:300ms;            /* hover, focus, press: the measured median */
  --t-move:700ms;             /* a photograph easing under the pointer, a panel arriving */
  /* shadows are light, layered and tinted with the site's own ink, never a black blur */
  --fin-ink:var(--ink,#1B2419);
  --fin-paper:var(--paper,#F7F3EA);
  --fin-accent:var(--accent-txt,var(--accent,#7A5C2E));
  --lift-1:0 1px 1px color-mix(in srgb,var(--fin-ink) 5%,transparent),0 3px 8px -2px color-mix(in srgb,var(--fin-ink) 8%,transparent);
  --lift-2:0 1px 2px color-mix(in srgb,var(--fin-ink) 5%,transparent),0 8px 18px -6px color-mix(in srgb,var(--fin-ink) 10%,transparent),0 22px 44px -18px color-mix(in srgb,var(--fin-ink) 14%,transparent);
  --lift-3:0 2px 3px color-mix(in srgb,var(--fin-ink) 5%,transparent),0 14px 28px -10px color-mix(in srgb,var(--fin-ink) 12%,transparent),0 44px 80px -28px color-mix(in srgb,var(--fin-ink) 20%,transparent);
  --hair:color-mix(in srgb,var(--fin-ink) 14%,transparent);
  --wash:color-mix(in srgb,var(--fin-accent) 7%,var(--fin-paper));
}

/* ── 1. how the type is set ─────────────────────────────────────────────────── */
:where(html){
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-kerning:normal;font-optical-sizing:auto;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  hanging-punctuation:first allow-end last;      /* Safari hangs an opening quote into the margin */
  accent-color:var(--fin-accent);caret-color:var(--fin-accent);
  -webkit-tap-highlight-color:transparent;
}
/* no heading ends on one stranded word; no paragraph ends on one either */
:where(h1,h2,h3,h4,blockquote,figcaption,.lede,.h-display){text-wrap:balance}
:where(p,li,dd,dt){text-wrap:pretty}
:where(h1,h2,h3,h4,p,li,blockquote){font-feature-settings:"kern","liga","calt"}
/* a fake italic or bold (the browser slanting or smearing a face that has none loaded) is caught by the gate's FAUX
   checks, not forced off here: font-synthesis:none would also strip the weight from the fallback face while the real
   one is still arriving, and the page would flash thin. */
/* a paragraph never sits glued to the heading above it. The winners leave .68 of the heading's size (finish.md, Air);
   this is the floor, and in normal flow it collapses into whatever margin the heading already has. */
:where(h1,h2,h3) + p{margin-top:.9em}
/* numbers that line up: prices, hours, phone numbers, dates, tables */
:where(table,time,.price,.pr,.num,.hours,.ledger,.mrow,[data-num],a[href^="tel:"]){font-variant-numeric:tabular-nums lining-nums}
:where(a[href^="tel:"]){white-space:nowrap}
/* small capitals get air. NOT a winners' norm (18% track theirs): it is the habit of both of Adam's vision sites */
:where(.eyebrow,.label,.caps,.kicker,[data-caps]){text-transform:uppercase;letter-spacing:.14em;font-feature-settings:"kern","case"}
:where(abbr,.sc){font-variant-caps:all-small-caps;letter-spacing:.05em;text-decoration:none}
/* a quotation hangs its mark outside the measure */
:where(blockquote){quotes:"\201C" "\201D" "\2018" "\2019"}
:where(.hangq){text-indent:-.42em}
:where(.hangq)::before{content:open-quote}
:where(.hangq)::after{content:close-quote}
/* a raised first letter for the one paragraph that tells the story (About, never a service list) */
.dropcap::first-letter{font-family:var(--serif,inherit);float:left;font-size:3.4em;line-height:.82;padding:.06em .1em 0 0;color:var(--fin-accent)}
@supports (initial-letter:3){.dropcap::first-letter{float:none;font-size:inherit;line-height:inherit;padding:0 .12em 0 0;initial-letter:3}}

/* ── 2. selection, focus, the things only a careful visitor finds ───────────── */
::selection{background:color-mix(in srgb,var(--fin-accent) 24%,var(--fin-paper));color:var(--fin-ink);text-shadow:none}
:where(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{outline:2px solid var(--fin-accent);outline-offset:3px;border-radius:2px}
:where([id]){scroll-margin-top:calc(var(--nav-h,100px) + 24px)}
:where(html){scrollbar-color:color-mix(in srgb,var(--fin-ink) 32%,transparent) transparent}

/* ── 3. links inside copy: a fine rule that darkens, never a browser-blue underline ── */
:where(main p,main li,main dd,main figcaption,main blockquote) :where(a:not(.btn):not(.tlink):not([class*="btn"])){
  padding-block:11px;      /* an inline box: the lines do not move, the tap target reaches 44px */
  color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.24em;
  text-decoration-color:color-mix(in srgb,currentColor 38%,transparent);text-decoration-skip-ink:auto;
  transition:text-decoration-color var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out)}
@media (hover:hover){
  :where(main p,main li,main dd,main figcaption,main blockquote) :where(a:not(.btn):not(.tlink):not([class*="btn"])):hover{text-decoration-color:currentColor;color:var(--fin-accent)}
}

/* ── 4. everything that can be pressed answers: hover, then press ───────────── */
:where(.btn,button,.chip,.pill,[role="button"]){transition:background-color var(--t-micro) var(--ease-out),color var(--t-micro) var(--ease-out),border-color var(--t-micro) var(--ease-out),box-shadow var(--t-micro) var(--ease-out),transform var(--t-micro) var(--ease-out)}
/* the kit's own buttons and header links take the site's curve, not the browser's "ease" */
.btn,.tlink,.nav a,.foot a,.foot a.btn{transition-timing-function:var(--ease-out)}   /* .foot a.btn: the footer's link rule outranks .btn */
:where(.btn,button:not(.burger):not([class*="close"]),[role="button"]):active{transform:translateY(1px) scale(.985);transition-duration:80ms}
/* an arrow that leans forward under the pointer: <a class="btn">Label <span class="ar">→</span></a> */
:where(.ar){display:inline-block;transition:transform var(--t-micro) var(--ease-out)}
@media (hover:hover){:where(a,button):hover > :where(.ar){transform:translateX(.28em)}}
/* a photograph that breathes under the pointer: put .zoom on its frame (figure, a, div) */
.zoom{overflow:hidden}
.zoom img{transition:transform var(--t-move) var(--ease-out);will-change:auto}
@media (hover:hover){.zoom:hover img{transform:scale(1.035)}}
/* a text link that draws its own rule: <a class="draw">Read the menu</a> */
.draw{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:.18em;transition:background-size 420ms var(--ease-out)}
.draw:focus-visible{background-size:100% 1px}
@media (hover:hover){.draw:hover{background-size:100% 1px}}
@media (hover:none){.draw{background-size:100% 1px}}

/* ── 5. photographs ─────────────────────────────────────────────────────────── */
/* a tone of the paper under every photograph, so a slow connection shows a quiet block, not a white hole */
:where(img[src*=".jpg"],img[src*=".jpeg"]){background-color:color-mix(in srgb,var(--fin-ink) 7%,var(--fin-paper))}
:where(figure){margin:0}
:where(figcaption){font-variant-numeric:lining-nums}

/* ── 6. depth without a drop shadow ─────────────────────────────────────────── */
.lift-1{box-shadow:var(--lift-1)}.lift-2{box-shadow:var(--lift-2)}.lift-3{box-shadow:var(--lift-3)}
.hair-t{border-top:1px solid var(--hair)}.hair-b{border-bottom:1px solid var(--hair)}
.washband{background:radial-gradient(120% 90% at 12% 0%,var(--wash),transparent 62%),radial-gradient(90% 80% at 100% 100%,color-mix(in srgb,var(--fin-ink) 4%,transparent),transparent 60%)}

/* ── 7. forms: a field that wakes up quietly ────────────────────────────────── */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea){transition:border-color var(--t-micro) var(--ease-out),box-shadow var(--t-micro) var(--ease-out),background-color var(--t-micro) var(--ease-out)}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea):focus{outline:0;border-color:var(--fin-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--fin-accent) 16%,transparent)}
:where(input,textarea)::placeholder{color:color-mix(in srgb,var(--fin-ink) 46%,transparent);opacity:1}
/* never :invalid (it paints an untouched form red on load, Canvas Experts 9/17): only after the visitor has tried */
:where(input,select,textarea):user-invalid{border-color:#A3352A;box-shadow:0 0 0 4px color-mix(in srgb,#A3352A 12%,transparent)}

/* ── 8. one page hands over to the next (no white blink between pages) ──────── */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:fin-out .22s var(--ease-inout) both}
  ::view-transition-new(root){animation:fin-in .46s var(--ease-out) both}
}
@keyframes fin-out{to{opacity:0}}
@keyframes fin-in{from{opacity:0;transform:translateY(10px)}}

/* ── 9. a page that prints like a letterhead (older visitors print menus and price lists) ── */
@media print{
  .nav,.menu-page,.drawer,.bookbar,.chatfab,.chattag,.chatpanel,.lb,video,.promo{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  main{padding:0!important}
  a{color:inherit!important;text-decoration:none!important}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
  img{max-height:60vh;object-fit:contain;break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  section,figure,li,tr{break-inside:avoid}
}

/* ── 10. reduced motion: every transition in this file becomes instant ──────── */
@media (prefers-reduced-motion:reduce){
  .zoom img,.draw,:where(.ar),:where(.btn,button,.chip,.pill,[role="button"]){transition-duration:.01ms!important}
  .zoom:hover img{transform:none}
}