/* Melins Café & Bistro — site stylesheet.

   PROVENANCE: everything down to the "multi-page additions" marker is lifted
   from the pre-sale demo the client approved on 2026-08-06/08-07 (agreement §16
   names that preview as the starting point for this build). The palette is read
   off HIS OWN LOGO (#076633) and is not ours to change.

   ⚠️ A contrast finding on one of these colours is recorded in BUILD.md as an
   accepted deviation. Do not "fix" a colour the client approved. A text-shadow
   for legibility is free and may stay.
*/

:root{
  --svh:1svh;
  --paper:#f7f1e4; --paper2:#efe5d1; --card:#fffaf0;
  --ink:#14261b; --mute:#4a5a4d;
  --green:#076633; --green-dk:#054f27; --green-hi:#0a7c3e;
  --amber:#a34a19;
  --rule:#d9ccb2;
  --maxw:1280px;
  --pad:max(22px,calc((100vw - var(--maxw))/2 + 22px));
  --disp:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --body:'Public Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'Overpass Mono','SFMono-Regular',Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--green);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.02;margin:0;letter-spacing:-.025em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:var(--paper);padding:12px 18px;font-family:var(--mono);font-size:13px}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap.wide{max-width:1760px}
.num{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block}
.lead{color:var(--mute);font-size:clamp(17px,1.3vw,19.5px);max-width:60ch}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 26px;border-radius:8px;border:1.5px solid var(--green);
  background:var(--green);color:var(--paper);font-family:var(--mono);font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:hover{background:var(--green-dk);border-color:var(--green-dk);transform:translateY(-2px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn[disabled]:hover{background:var(--green);border-color:var(--green);transform:none}
.btn.ghost{background:transparent;color:var(--green)}
.btn.ghost:hover{background:var(--green);color:var(--paper)}

/* ---------- reveal ----------
   ⚠️ THIS BLOCK FAILS OPEN ON PURPOSE. Read before touching it.

   It used to read `[data-rev]{opacity:0}` with `html.no-js [data-rev]{opacity:1}`
   as the escape hatch. That escape hatch was already DEAD: the inline script in
   <head> rewrites `no-js` to `js` while parsing, long before `app.js` at the end
   of <body> has proved it can run. So from 2026-08-14 the state of the page was:
   every photo and most of the copy sat at opacity 0 and NOTHING but a working
   IntersectionObserver could bring it back. Blocking `js/app.js` on the live
   preview reproduced the client-reported symptom exactly — a blank cream page,
   with all 172 image URLs still returning 200.

   The hidden start state is now OPT-IN: `app.js` adds `.rev` to <html> only
   after it has run, seen an IntersectionObserver, and armed its own fallbacks.
   Anything that stops the script (a dropped request on a phone network, a
   content blocker, a parse error, an exception in an earlier line) now leaves
   the page fully VISIBLE and merely un-animated. Never invert this. A pattern
   whose failure mode is invisible content is not an animation, it is a bug with
   a delay on it. */
html.rev [data-rev]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
html.rev [data-rev].in{opacity:1;transform:none}
html.reduce [data-rev]{opacity:1;transform:none;transition:none}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px var(--pad);background:rgba(247,241,228,.93);backdrop-filter:blur(9px);border-bottom:1px solid var(--rule)}
.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav .brand img{height:34px;width:auto}
.nav nav{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px)}
/* padding, not font-size: the desktop nav links measured 19.4px tall, under
   the 24px WCAG 2.5.8 target. The hit area grows, the type does not. */
.nav nav a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.nav nav a:not(.btn){padding:7px 0}
.nav nav a:not(.btn){color:var(--ink)}
.nav nav a:not(.btn):hover{color:var(--green)}
.nav nav a:not(.btn)[aria-current="page"]{color:var(--green);box-shadow:inset 0 -2px 0 var(--green)}
.navtoggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:1.5px solid var(--rule);border-radius:8px;background:transparent;cursor:pointer}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{display:block;width:19px;height:2px;background:var(--ink);content:'';position:relative}
.navtoggle span::before{position:absolute;top:-6px}
.navtoggle span::after{position:absolute;top:6px}
.mnav{display:none;flex-direction:column;gap:4px;padding:10px var(--pad) 18px;background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:59px;z-index:59}
.mnav.open{display:flex}
.mnav a{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:11px 0;border-bottom:1px solid var(--rule)}
.mnav a[aria-current="page"]{color:var(--green)}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,4.6vw,74px) 0 clamp(26px,3vw,44px)}
.hero h1{font-size:clamp(46px,8.4vw,186px);letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin:0 0 22px;display:flex;flex-wrap:wrap;gap:10px 22px}
.herofoot{display:grid;grid-template-columns:1.5fr .8fr .8fr .9fr;gap:clamp(22px,2.4vw,44px);align-items:start;
  margin-top:clamp(30px,3.6vw,58px);border-top:2px solid var(--green);padding-top:clamp(22px,2.2vw,32px)}
.herofoot .subs{margin:0;font-size:clamp(17px,1.25vw,20px);color:var(--mute)}
.herofoot dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--amber);margin-bottom:7px}
.herofoot dd{margin:0;font-size:16px;line-height:1.5}
.herofoot dd a:not(.btn){color:var(--ink);text-decoration:none;display:inline-block;padding:3px 0}
.herofoot dd a:not(.btn):hover{color:var(--green)}
.hero .cta{display:flex;flex-wrap:wrap;gap:11px}

/* Inner pages get the same type register at a smaller scale. */
.phead{padding:clamp(34px,4vw,64px) 0 clamp(20px,2.4vw,34px)}
.phead h1{font-size:clamp(38px,6vw,96px);letter-spacing:-.035em;margin-top:12px}
.phead h1 em{font-style:normal;color:var(--green)}
.phead .lead{margin-top:clamp(16px,1.6vw,24px)}

/* ---------- marquee ---------- */
.strip{background:var(--green);color:var(--paper);overflow:hidden;padding:15px 0;border-top:1.5px solid var(--green-dk);border-bottom:1.5px solid var(--green-dk)}
.striptrack{display:flex;width:max-content;animation:slide 46s linear infinite}
.strip.off .striptrack{animation-play-state:paused}
.stripseg{display:flex;flex:none}
.stripseg span{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;padding:0 30px;white-space:nowrap;display:flex;align-items:center;gap:30px}
.stripseg span::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--paper);opacity:.55;flex:none}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}

/* ---------- sections ---------- */
.sec{padding:clamp(58px,7vw,110px) 0}
.sec.tight{padding:clamp(40px,4.6vw,72px) 0}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,3vw,56px);align-items:end;margin-bottom:clamp(30px,3.6vw,56px)}
.sec-head h2{font-size:clamp(33px,4.4vw,66px);margin-top:12px}
.bandsand{background:var(--paper2);border-top:1.5px solid var(--rule);border-bottom:1.5px solid var(--rule)}
.bandgreen{background:var(--green);color:var(--paper)}
.bandgreen .num{color:#e8d9a8}
.bandgreen .lead{color:#d8e6da}
.bandgreen h2,.bandgreen h3{color:var(--paper)}
.bandgreen a:not(.btn){color:#e8d9a8}
.bandgreen .btn{background:var(--paper);color:var(--green);border-color:var(--paper)}
.bandgreen .btn:hover{background:#fff;border-color:#fff;color:var(--green-dk)}

/* ---------- lunch board ---------- */
.lunchgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,3vw,50px);align-items:start}
.board{background:var(--card);border:1.5px solid var(--rule);border-radius:14px;overflow:hidden}
.boardhead{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;justify-content:space-between;
  background:var(--green);color:var(--paper);padding:17px clamp(24px,2.6vw,40px)}
.boardhead .bt{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.boardhead .bw{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#e8d9a8}
.dish{padding:clamp(24px,2.6vw,40px)}
.dish .dday{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:16px}
.dishlist{list-style:none;margin:0;padding:0}
.dishlist li{display:flex;gap:clamp(14px,1.8vw,26px);align-items:baseline;padding:15px 0;border-top:1px solid var(--rule)}
.dishlist li:first-child{border-top:0;padding-top:0}
.dishlist .m{flex:1;min-width:0}
.dishlist h3{font-size:clamp(19px,1.7vw,25px);margin-bottom:5px}
.dishlist .d{color:var(--mute);font-size:15px;margin:0}
.dishlist .price{font-family:var(--mono);font-size:14px;color:var(--green);letter-spacing:.06em;white-space:nowrap}
.dishlist .tom{display:block;color:var(--mute);font-size:15.5px;padding:2px 0}
.dish .incl{margin-top:22px;border-top:1px solid var(--rule);padding-top:15px;font-size:14.5px;color:var(--mute)}
.boardfoot a{display:inline-block;padding:6px 0}
.boardfoot{border-top:1px solid var(--rule);padding:9px clamp(24px,2.6vw,40px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* ---------- menu cards ---------- */
.menugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px);align-items:start}
/* Cards end where their content ends. Stretching every card to the tallest in
   its row left Sallad (3 items) about half empty next to Frukost, which reads
   as a broken card rather than a short menu. */
.mcard{background:var(--card);border:1.5px solid var(--rule);border-radius:14px;padding:clamp(22px,2.2vw,32px)}
.mcard h3{font-size:clamp(22px,2.1vw,29px)}
.mcard .mnote{font-size:14.5px;color:var(--mute);margin:9px 0 18px}
.mcard ul{list-style:none;margin:0;padding:0}
.mcard li{display:flex;gap:14px;align-items:baseline;padding:11px 0;border-top:1px solid var(--rule)}
.mcard li:first-child{border-top:0}
/* The pastry range is the longest list on the menu and the one worth showing
   off. It spans two of the three columns and splits its own items into two. */
.mcard.span2{grid-column:span 2}
.twocolist{columns:2;column-gap:clamp(18px,2.4vw,40px)}
.twocolist li{break-inside:avoid}
.twocolist li:first-child{border-top:1px solid var(--rule)}
.mcard li b{font-weight:600;font-size:16px}
.mcard li i{font-style:normal;color:var(--mute);font-size:14.5px;display:block}
.mcard li .m{flex:1}
.mcard li .p{font-family:var(--mono);font-size:14px;color:var(--green);white-space:nowrap}
.mcard .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:20px 0 4px}

/* ---------- roast ---------- */
.roastgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,30px)}
.roast{border:1.5px solid rgba(247,241,228,.32);border-radius:14px;padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:12px}
.roast .origins{display:flex;flex-wrap:wrap;gap:8px}
.roast .origins span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(247,241,228,.4);border-radius:999px;padding:7px 14px}
.roast .p{font-family:var(--mono);font-size:15px;color:#e8d9a8;margin-top:auto;padding-top:12px;border-top:1px solid rgba(247,241,228,.28)}

/* ---------- forms + info ---------- */
.twocol{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,3.4vw,56px);align-items:start}
.twocol.even{grid-template-columns:1fr 1fr}
.card{background:var(--card);border:1.5px solid var(--rule);border-radius:14px;padding:clamp(24px,2.6vw,38px)}
.infolist{list-style:none;margin:24px 0 0;padding:0}
.infolist li{display:flex;flex-wrap:wrap;gap:6px 20px;border-top:1px solid var(--rule);padding:14px 0}
.infolist b{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);min-width:150px;font-weight:500}
.infolist a{color:var(--ink);text-decoration:none;display:inline-block;padding:3px 0}
.infolist a:hover{color:var(--green)}
.hours{display:grid;gap:0}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:7px}
input,select,textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:8px;border:1.5px solid var(--rule);
  background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px}
textarea{min-height:104px;resize:vertical}
input::placeholder,textarea::placeholder{color:#7d8a7e}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.status{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--green);margin:14px 0 0;min-height:1.4em}
.status.fel{color:var(--amber)}
.note{display:flex;gap:11px;align-items:flex-start;margin-top:18px;border-top:1px solid var(--rule);padding-top:15px;font-size:14px;color:var(--mute)}
.note svg{width:19px;height:26px;flex:none;margin-top:3px;color:var(--green)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
footer{background:var(--green);color:var(--paper);padding:clamp(46px,5vw,74px) 0 34px}
footer img{height:44px;width:auto;margin-bottom:20px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
footer h2.fh{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#e8d9a8;font-weight:500;margin:0 0 14px}
footer p,footer li{color:#d8e6da;font-size:15.5px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
footer li a{display:inline-block;padding:4px 0}
footer a{color:#d8e6da;text-decoration:none}
footer a:hover{color:var(--paper)}
.colophon{margin-top:38px;border-top:1px solid rgba(247,241,228,.28);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#c7dbc9}

/* =========================================================================
   MULTI-PAGE ADDITIONS — everything below is new for the production build.
   It ADDS layout for the client's own photographs (the demo had none) and the
   pages the demo carried as anchors. No token above is redefined.
   ========================================================================= */

/* Photographs. Every one of these is the client's own, sent 2026-08-10. */
figure{margin:0}
.shot{overflow:hidden;border-radius:14px;border:1.5px solid var(--rule);background:var(--paper2);
  display:flex;flex-direction:column}
/* height:auto + the inline aspect-ratio: the intrinsic box is set by the
   ratio, so object-fit still crops, and the caption is no longer clipped
   at 200% zoom (audit 2026-08-14). */
.shot img{width:100%;height:auto;object-fit:cover;flex:none}
.shot figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:11px 14px;background:var(--card);border-top:1px solid var(--rule)}

/* Feature: photo beside text, alternating. */
.featgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.2vw,56px);align-items:center}
.featgrid.flip .ftext{order:2}
.featgrid .ftext h2{font-size:clamp(29px,3.4vw,52px);margin-bottom:16px}
.featgrid .shot img{aspect-ratio:4 / 3}

/* Wide photo band. */
.photoband .shot img{aspect-ratio:16 / 9}

/* Gallery of the rest. */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.pgrid .shot img{aspect-ratio:1 / 1}

/* Tall photo in a .twocol side column. */
.tallshot img{aspect-ratio:3 / 4}

/* Map. Loaded ON CLICK, so no request reaches Google before a visitor asks for
   it. That keeps the "no third-party request" promise the self-hosted fonts
   also serve, and the address link below always works with JS off. */
.mapbox{position:relative;border:1.5px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--paper2)}
.mapbox .mapinner{aspect-ratio:16 / 10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px;text-align:center}
.mapbox iframe{display:block;width:100%;height:100%;border:0;aspect-ratio:16 / 10}
.mapbox .maphint{font-size:14.5px;color:var(--mute);max-width:44ch;margin:0}
.mapbox .maphint a{display:inline-block;padding:5px 0}

/* Long-form prose (privacy policy). */
.prose{max-width:70ch}
.prose h2{font-size:clamp(24px,2.6vw,34px);margin:clamp(34px,3.4vw,52px) 0 12px}
.prose h3{font-size:clamp(19px,1.8vw,23px);margin:26px 0 8px}
.prose ul{padding-left:1.15em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose dl{margin:0 0 1em}
.prose dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-top:14px}
.prose dd{margin:4px 0 0}

/* Cross-page CTA row. */
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.4vw,34px)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .menugrid{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1020px){
  .lunchgrid,.twocol,.twocol.even,.roastgrid,.featgrid{grid-template-columns:1fr}
  .featgrid.flip .ftext{order:0}
  .sec-head{grid-template-columns:1fr}
  .herofoot{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body{font-size:16.5px}
  .nav nav{display:none}
  .navtoggle{display:inline-flex}
  .menugrid{grid-template-columns:1fr}
  /* One column: nothing can span two, and a 17-item list in two narrow phone
     columns is unreadable. */
  .mcard.span2{grid-column:auto}
  .twocolist{columns:1}
  .fieldrow{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .infolist b{min-width:0;width:100%}
  .herofoot{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}