/* ==========================================================================
   Jana Hospitality Group — contemporary edition
   Same palette. Rebuilt on a strict grid, a single type scale, clean lines.
   ========================================================================== */

:root {
  --ink:#0A0A0A; --ink-2:#0E0B0B; --aubergine:#1C1214;
  --oxblood:#3E0D09; --burgundy:#5A1114;
  --red:#9F1E18; --red-hi:#BC2A20; --crimson:#8C2F26;
  --clay:#BE5139; --slate:#8FA3BE;
  --gold:#B09568; --gold-hi:#E6D0AA; --amber:#F0B98A;
  --bone:#F9E7C8; --bone-2:#E1CEAC; --bone-3:#AB9774; --paper:#FBF1E1;
  --cream:#FBE3B6; --cream-2:#F4D7A4;
  --line:rgba(232,229,224,.13); --line-2:rgba(232,229,224,.22); --line-in:rgba(20,14,14,.18);

  --display:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  --gut:80px; --maxw:1560px; --sec:168px; --sec-sm:104px;
  --t-hero:clamp(52px,7.2vw,124px);
  --t-h1:clamp(42px,5.4vw,88px);
  --t-h2:clamp(34px,3.9vw,62px);
  --t-h3:clamp(24px,2.2vw,34px);
  --t-lead:clamp(20px,1.55vw,26px);
  --t-body:17px; --t-micro:11px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone-2);font-family:var(--sans);
  font-size:var(--t-body);line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:var(--bone);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
h1,h2,h3,h4{margin:0;font-weight:500;color:var(--cream)}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.015em;line-height:1.06}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.cols>*,.split>*,.stack>*,.sechead>*,.footer__grid>*{min-width:0}
.bleed{max-width:var(--maxw);margin:0 auto}

.eyebrow{font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.mono{font-family:var(--sans);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.rule{width:100%;height:1px;background:var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;font-family:var(--sans);
  font-size:var(--t-micro);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:0 30px;height:52px;border:1px solid transparent;white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.btn--solid{background:var(--red);color:var(--paper)}
.btn--solid:hover{background:var(--red-hi);color:var(--paper)}
.btn--ghost{border-color:var(--line-2);color:var(--bone)}
.btn--ghost:hover{border-color:var(--bone);background:var(--bone);color:var(--ink)}
.btn--paper{background:var(--paper);color:var(--oxblood)}
.btn--paper:hover{background:#FCF7EF}
.btn svg{flex:none}
.arrowlink{display:inline-flex;align-items:center;gap:14px;height:44px;font-family:var(--sans);
  font-size:var(--t-micro);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.arrowlink svg{flex:none;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.arrowlink:hover{color:var(--gold-hi)}
.arrowlink:hover svg{transform:translateX(6px)}

.utility{background:var(--ink);border-bottom:1px solid var(--line);font-family:var(--sans);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:24px}
.utility__right{display:flex;gap:32px}
.utility__accent{color:var(--gold)}

.masthead{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.86);
  backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;justify-content:space-between;align-items:center;min-height:84px;gap:32px}
.brand{display:flex;align-items:center;gap:18px}
.brand__mono{height:38px;width:auto;flex:none}
.brand__stack{display:flex;flex-direction:row;align-items:center;gap:16px;padding-left:18px;border-left:1px solid var(--line)}
.brand__word{height:24px;width:auto;align-self:flex-start;flex:none}
.brand__sub{align-self:center;padding-left:16px;border-left:1px solid var(--line);font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.34em;color:var(--bone-3);text-transform:uppercase}
.nav{display:flex;align-items:center;gap:40px}
.nav a{font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-2);display:inline-flex;align-items:center;height:44px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:12px;height:1px;background:var(--gold);
  transition:right .3s cubic-bezier(.2,.7,.3,1)}
.nav a:hover{color:var(--bone)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav .btn{height:42px;padding:0 22px}
.nav .btn::after{display:none}
.navtoggle{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;
  flex-direction:column;align-items:flex-end;justify-content:center;gap:7px}
.navtoggle span{display:block;height:1px;width:24px;background:var(--bone);transition:transform .3s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.hero{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.hero__copy{display:flex;flex-direction:column;justify-content:center;padding:150px var(--gut)}
.hero h1{font-size:var(--t-hero);margin:28px 0 0}
.hero__lede{font-size:var(--t-lead);line-height:1.5;color:var(--bone-2);max-width:46ch;margin:36px 0 0}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:52px}
.hero__media{position:relative;overflow:hidden;background:var(--ink-2);min-height:640px}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink),rgba(10,10,10,0) 28%)}
.hero__caption{position:absolute;left:40px;bottom:36px;font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);line-height:2.1}
.hero__caption span{color:var(--bone-3)}

.phero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-2)}
.phero__img{position:absolute;inset:0}
.phero__img img{width:100%;height:100%;object-fit:cover}
.phero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.15) 40%,rgba(10,10,10,.75) 82%,var(--ink))}
.phero__inner{position:relative;width:100%;padding-top:200px;padding-bottom:92px;display:flex;
  justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap}
.phero h1{font-size:var(--t-h1);color:var(--cream);margin:26px 0 0}
.phero__lede{font-size:var(--t-lead);line-height:1.5;color:rgba(251,227,182,.8);max-width:44ch;margin-top:28px}
.phero__aside{display:flex;flex-direction:column;align-items:flex-end;gap:24px}
.phero__aside img{height:72px;width:auto;opacity:.85}

.section{padding:var(--sec) 0}
.section--tight{padding:var(--sec-sm) 0}
.section--aubergine{background:var(--aubergine)}
.section--oxblood{background:var(--oxblood)}
.section--paper{background:var(--paper);color:#221A18}
.section--paper h1,.section--paper h2,.section--paper h3{color:#171110}
.divider{border-bottom:1px solid var(--line)}
.split{display:grid;grid-template-columns:260px 1fr;gap:0 80px;align-items:start}
.stack{display:flex;flex-direction:column;gap:32px;max-width:74ch}
.lead{font-family:var(--display);font-weight:500;font-size:var(--t-h3);line-height:1.32;color:var(--cream);letter-spacing:-.008em}
.prose{font-size:var(--t-body);line-height:1.72;color:var(--bone-2);max-width:66ch}

.stats b{font-family:var(--display);font-weight:600;font-size:clamp(38px,3.4vw,52px);color:var(--cream);
  line-height:1;display:block;letter-spacing:-.015em}
.stats span{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--bone-3);
  margin-top:16px;display:block;line-height:1.9;text-transform:uppercase}

.sechead{display:grid;grid-template-columns:1fr auto;gap:40px 80px;align-items:end;padding-bottom:72px}
.sechead h1,.sechead h2{font-size:var(--t-h2)}
.sechead p{font-size:var(--t-body);line-height:1.7;color:var(--bone-3);max-width:38ch}

.concept{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.concept--flip .concept__media{order:2}
.concept__media{position:relative;overflow:hidden;min-height:78vh}
.concept__media img{width:100%;height:100%;object-fit:cover}
.concept__body{padding:120px var(--gut);display:flex;flex-direction:column;justify-content:center}
.concept__tag{display:flex;align-items:center;gap:18px;margin-bottom:40px;font-family:var(--sans);
  font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.concept__tag i{height:1px;width:40px;background:var(--line-2);font-style:normal}
.concept__word{height:62px;width:auto;align-self:flex-start;margin-bottom:14px}
.concept__kicker{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.34em;color:var(--gold);
  margin-bottom:36px;text-transform:uppercase}
.concept h3{font-size:var(--t-h2);letter-spacing:.01em;margin-bottom:12px}
.concept__body p{font-size:var(--t-body);line-height:1.72;color:var(--bone-2);max-width:46ch;margin-bottom:40px}

.fields{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-bottom:40px}
.fields>div{padding:24px 28px 24px 0}
.fields>div+div{padding-left:28px;border-left:1px solid var(--line)}
.fields dt{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--bone-3);
  margin-bottom:12px;text-transform:uppercase}
.fields dd{font-family:var(--display);font-weight:500;font-size:19px;color:var(--cream);margin:0;
  line-height:1.45;letter-spacing:-.008em;overflow-wrap:anywhere}
.fields a[href^="tel:"]{white-space:nowrap;overflow-wrap:normal}
.fields--one{grid-template-columns:1fr;max-width:420px}
.fields a{color:var(--cream)}
.fields a:hover{color:var(--gold-hi)}

.markbox{padding:72px 40px;margin-bottom:48px;display:flex;flex-direction:column;align-items:center;gap:18px;
  text-align:center;border:1px solid var(--line)}
.markbox strong{font-family:var(--display);font-weight:600;font-size:clamp(32px,3.2vw,48px);line-height:1.06;
  letter-spacing:.01em;color:var(--bone)}
.mark--isu span,.tag--isu{color:var(--gold)}

.onred h2{color:var(--paper)}
.onred p{color:rgba(246,239,230,.76)}
.onred .eyebrow{color:var(--amber)}

.quoterule{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
  padding:40px var(--gut);border-bottom:1px solid var(--line)}
.quoterule span{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--gold);
  white-space:nowrap;text-transform:uppercase}
.quoterule q{font-family:var(--display);font-weight:500;font-style:italic;font-size:clamp(19px,1.7vw,26px);color:var(--bone-2);
  text-align:center;letter-spacing:-.008em}

.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.gallery div{aspect-ratio:3/4;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.gallery div:hover img{transform:scale(1.04)}

.menuhead{display:grid;grid-template-columns:1fr auto;gap:32px 60px;align-items:end;padding-bottom:48px;
  border-bottom:1px solid var(--line-in);margin-bottom:80px}
.menuhead .eyebrow{color:var(--crimson)}
.menuhead h2{font-size:var(--t-h2)}
.menuhead>p{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:#7A6A63;
  text-align:right;line-height:2.2;text-transform:uppercase}
.menucols{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.menucol__head{display:flex;align-items:center;gap:20px;margin-bottom:44px}
.menucol__head h3{font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.26em;
  color:var(--crimson);text-transform:uppercase}
.menucol__head i{height:1px;flex:1;background:var(--line-in)}
.menuitem{margin-bottom:36px}
.menuitem__line{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.menuitem__line b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.008em;color:#171110}
.menuitem__line b em{font-style:normal;color:var(--crimson);font-size:11px;font-family:var(--sans);
  font-weight:500;letter-spacing:.14em}
.menuitem__line i{flex:1;border-bottom:1px solid var(--line-in)}
.menuitem__line span{font-family:var(--display);font-weight:500;font-size:19px;color:#5A4A44}
.menuitem p{font-size:15.5px;line-height:1.6;color:#5E514B;max-width:52ch;margin-top:10px}
.menufoot{display:grid;grid-template-columns:1fr auto;gap:32px 60px;align-items:center;margin-top:88px;
  padding-top:36px;border-top:1px solid var(--line-in)}
.menufoot em{font-size:15px;color:#6B5C55;font-style:normal;max-width:62ch}
.menufoot .arrowlink{color:var(--crimson)}

.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line-2);
  color:var(--bone);font-family:var(--sans);font-size:var(--t-body);padding:14px 0;height:52px;width:100%;
  transition:border-color .25s ease}
.field :is(input,select,textarea):focus{outline:none;border-bottom-color:var(--gold)}

.footer{padding:128px 0 44px;border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;gap:56px;padding-bottom:96px}
.footer__word{height:34px;width:auto;align-self:flex-start}
.footer__sub{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.34em;color:var(--bone-3);text-transform:uppercase}
.footer__brand{display:flex;flex-direction:column;gap:20px}
.footer__lockup{display:flex;flex-direction:row;align-items:center;gap:16px}
.footer__lockup .footer__sub{padding-left:16px;border-left:1px solid var(--line)}
.footer__brand p{font-size:15.5px;line-height:1.72;color:var(--bone-3);max-width:32ch}
.footer h4{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.16em;color:var(--gold);
  margin:0 0 24px;text-transform:uppercase}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.footer ul a{font-size:15.5px;color:var(--bone-2);display:inline-flex;align-items:center;min-height:40px}
.footer ul a:hover{color:var(--gold-hi)}
.footer .fields{margin-bottom:28px}
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{min-height:42px;padding:0 16px;border:1px solid var(--line-2);display:flex;align-items:center;
  justify-content:center;transition:border-color .25s ease}
.social a:hover{border-color:var(--gold)}
.colophon{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:36px;
  border-top:1px solid var(--line);font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.12em;
  color:var(--bone-3);text-transform:uppercase}
.colophon nav{display:flex;gap:32px;flex-wrap:wrap}
.colophon a{color:var(--bone-3)}
.colophon a:hover{color:var(--bone)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:20px;z-index:99;background:var(--gold);color:var(--ink);padding:14px 20px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}

.cols{display:grid}
.cols--2{grid-template-columns:1fr 1fr}
.cols--57{grid-template-columns:5fr 7fr}
.cols--543{grid-template-columns:1.4fr 1fr 1fr}
.gap-0{gap:0}.gap-40{gap:40px}.gap-56{gap:56px}.gap-64{gap:80px}
.ai-center{align-items:center}.ai-start{align-items:start}
.pad-l-64{padding-left:80px}.pad-r-68{padding-right:80px}
.selfstart{align-self:flex-start}
.end{display:flex;justify-content:flex-end}
.panel{padding:128px var(--gut);display:flex;flex-direction:column;justify-content:center}
.fill{overflow:hidden;min-height:60vh}
.fill img{width:100%;height:100%;object-fit:cover}
.sublabel{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.16em;color:var(--gold);
  margin:0 0 24px;text-transform:uppercase}
.hours{display:flex;justify-content:space-between;gap:24px;font-size:15.5px;color:var(--bone-2);
  padding:12px 0;border-bottom:1px solid var(--line)}

.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

@media (max-width:1280px){
  :root{--gut:48px;--sec:120px;--sec-sm:80px}
  .nav{gap:28px}.menucols{gap:60px}
  .split{grid-template-columns:200px 1fr;gap:0 48px}
  .concept__body,.pair>article,.panel,.panel--spec{padding:88px var(--gut)}
}
@media (max-width:900px){
  :root{--gut:24px;--sec:88px;--sec-sm:64px}
  body{font-size:16.5px}
  .navtoggle{display:flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 28px}
  .nav.is-open{display:flex}
  .nav a{height:56px;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .btn{margin-top:20px;height:52px}
  .utility .wrap{flex-direction:column;gap:4px;padding-top:10px;padding-bottom:10px;text-align:center;font-size:10px}
  .utility__right{gap:18px;flex-wrap:wrap;justify-content:center}
  .hero{grid-template-columns:1fr}
  .hero__copy{order:2;padding:56px var(--gut) 72px}
  .hero__media{order:1;min-height:58vh}
  .hero__scrim{background:linear-gradient(180deg,rgba(10,10,10,.3),rgba(10,10,10,0) 45%,rgba(10,10,10,.8))}
  .phero{min-height:62vh}
  .phero__inner{padding-top:140px;padding-bottom:56px}
  .phero__aside{align-items:flex-start}
  .phero__aside img{height:52px}
  .split{grid-template-columns:1fr;gap:28px}
  .stack{gap:24px}
  .sechead{grid-template-columns:1fr;padding-bottom:44px}
  .concept,.pair{grid-template-columns:1fr}
  .concept--flip .concept__media{order:0}
  .concept__media{min-height:52vh}
  .concept__body{padding:56px var(--gut) 68px}
  .concept__word{height:46px}
  .gallery{grid-template-columns:1fr 1fr}
  .menucols{grid-template-columns:1fr;gap:56px}
  .menuhead,.menufoot{grid-template-columns:1fr}
  .menuhead>p{text-align:left}
  .cols--2,.cols--57,.cols--75,.cols--3696,.cols--543{grid-template-columns:1fr}
  .gap-56,.gap-64{gap:32px}
  .pad-l-64{padding-left:0;padding-top:32px}
  .pad-r-68{padding-right:0}
  .end{justify-content:flex-start}
  .fill{min-height:44vh}
  .footer{padding:72px 0 32px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px;padding-bottom:56px}
  .footer__brand{grid-column:span 2}
  .colophon{font-size:10px}
}
@media (max-width:560px){
  .gallery{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .fields>div{padding:20px 0}
  .fields>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .footer__grid{grid-template-columns:1fr}
  .footer__brand{grid-column:span 1}
  .brand__mono{height:32px}.brand__word{height:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* logos must keep their aspect ratio inside any flex container */
.brand__word,.brand__mono,.concept__word,.footer__word,.phero__aside img{align-self:flex-start;flex:none;width:auto}
.fields--one{grid-template-columns:1fr;max-width:420px}

/* ==========================================================================
   Refinements
   ========================================================================== */

/* footer column headings read as headings but keep the label scale */
.fcolhead{font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.concepth{font-family:var(--display);font-weight:500;font-size:var(--t-h2);
  letter-spacing:.01em;line-height:1.06;margin-bottom:12px;color:var(--cream)}

/* social icons carry a restaurant name */
.social a{gap:10px}
.social a span{font-family:var(--sans);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.social a:hover span{color:var(--gold-hi)}

/* contact: direct-email panel in place of the form */
.mailbox h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,3vw,42px);line-height:1.1;margin-bottom:22px}
.mailbox > p{font-size:17px;line-height:1.72;color:var(--bone-2);max-width:48ch;margin-bottom:34px}
.mailbox__alt{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.mailbox__alt span{font-family:var(--sans);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);min-width:120px}
.mailbox__alt a{font-family:var(--display);font-size:19px;color:var(--cream);
  letter-spacing:-.008em;overflow-wrap:anywhere}

/* footer contact block stacks so nothing is squeezed */
.footer .fields{grid-template-columns:1fr;margin-bottom:28px}
.footer .fields>div{padding:16px 0}
.footer .fields>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}

/* comfortable touch targets — WCAG 2.5.8 asks 24px, this clears 40px */
.colophon a,.mailbox__alt a,.footer .fields a{display:inline-block;padding:9px 0}
.colophon a{padding:8px 0}

/* the entrance reveal should never trap content in a hidden state */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* selection and scrollbar picked up the brand rather than the browser default */
::selection{background:var(--burgundy);color:var(--cream)}
html{scrollbar-color:var(--gold) var(--ink)}

/* print: legible on paper, no wasted ink on full-bleed photography */
@media print{
  .utility,.masthead,.navtoggle,.nav,.skip,.social,.hero__media,.phero__img,
  .phero__scrim,.gallery,.concept__media,.fill,.footer__grid{display:none !important}
  body{background:#fff;color:#111;font-size:11pt;padding:0}
  h1,h2,h3,h4,.lead,.fields dd,.eyebrow{color:#111 !important}
  .section,.section--tight{padding:18pt 0}
  a{color:#111;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  .concept,.split,.cols{display:block}
}
/* long buttons wrap rather than push the page sideways on small screens */
@media (max-width:560px){
  .btn{white-space:normal;text-align:center;height:auto;min-height:52px;padding:14px 22px;line-height:1.4}
}

/* --- opening list ------------------------------------------------------- */
.signup{background:var(--aubergine);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(72px,8vw,124px) 0}
.signup__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,88px);align-items:center}
.signup h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.6vw,54px);
  line-height:1.08;letter-spacing:-.015em;margin-bottom:22px}
.signup p{font-size:17px;line-height:1.72;color:var(--bone-2);max-width:40ch}
.signup__form{display:flex;flex-direction:column;gap:14px;max-width:460px;width:100%}
.signup__row{display:block}
.signup input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);
  color:var(--cream);font-family:var(--display);font-size:19px;padding:14px 2px;
  transition:border-color .25s ease}
.signup input::placeholder{color:var(--bone-3);font-family:var(--sans);font-size:15px}
.signup input:focus{outline:none;border-bottom-color:var(--gold)}
.signup .btn{margin-top:12px;align-self:flex-start}
.signup__note{font-family:var(--sans);font-size:12.5px;color:var(--bone-3);margin-top:4px;max-width:38ch}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){
  .signup__in{grid-template-columns:1fr;gap:36px}
  .signup__form{max-width:none}
}

/* --- hero headline: contemporary editorial serif ------------------------ */
.hero h1{font-family:"Instrument Serif","Newsreader",Georgia,serif;
  font-weight:400;font-style:italic;font-size:clamp(52px,7.8vw,132px);line-height:1.0;
  letter-spacing:-.018em;color:var(--cream);padding-bottom:.02em;margin-top:0}