/* ==========================================================================
   GREENVILLE NAIL BAR / SUITE
   Hospitality, not retail. Centered, quiet, and photographic. Champagne is
   the only accent and it appears on nothing but a rule and a hover.
   ========================================================================== */
:root{
  --ivory:#FCFAF6;
  --sand:#F1EADD;
  --sand-2:#E7DDCC;
  --espresso:#241D16;
  --espresso-2:#191310;
  --champagne:#B99B62;
  --champagne-lt:#D3BB8E;

  --t1:rgba(36,29,22,.94);
  --t2:rgba(36,29,22,.58);
  --t3:rgba(36,29,22,.40);
  --d1:#FFFFFF;
  --d2:rgba(255,255,255,.68);
  --d3:rgba(255,255,255,.44);

  --line:rgba(36,29,22,.14);
  --line-soft:rgba(36,29,22,.07);
  --line-d:rgba(255,255,255,.16);
  --line-d-soft:rgba(255,255,255,.08);

  --disp:'Cormorant Garamond',Georgia,serif;
  --ui:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;

  --fs-hero:clamp(2.9rem,1.4rem + 5.6vw,5.6rem);
  --fs-display:clamp(2.1rem,1.3rem + 3.2vw,3.6rem);
  --fs-h2:clamp(1.55rem,1.2rem + 1.5vw,2.25rem);

  --sec:clamp(84px,9.5vw,168px);
  --gut:clamp(22px,4vw,56px);
  --max:1240px;
  --narrow:760px;

  --e-ui:cubic-bezier(.25,.46,.45,.94);
  --e-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ivory);color:var(--t1);font-family:var(--ui);font-weight:300;
  font-size:1.0625rem;line-height:1.66;letter-spacing:.004em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--espresso);color:var(--ivory)}
.wrap{width:min(100% - var(--gut)*2,var(--max));margin-inline:auto}
.narrow{width:min(100% - var(--gut)*2,var(--narrow));margin-inline:auto}
.ctr{text-align:center}

h1,h2,h3{font-family:var(--disp);font-weight:300;line-height:1.04;letter-spacing:-.012em}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-display)}
h3{font-size:var(--fs-h2);line-height:1.12}
h2 em,h1 em{font-style:italic;font-weight:300}
.lead{font-size:clamp(1rem,.95rem + .35vw,1.1875rem);line-height:1.72;color:var(--t2);font-weight:300}
.ctr .lead{margin-inline:auto;max-width:56ch}
.on-dark{color:var(--d1)}
.on-dark .lead,.on-dark p{color:var(--d2)}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.rule{width:44px;height:1px;background:var(--champagne);margin:0 auto clamp(26px,3vw,40px)}
.rule.l{margin-left:0}
.num{font-variant-numeric:tabular-nums lining-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:19px 42px;
  border:1px solid var(--espresso);background:var(--espresso);color:var(--ivory);border-radius:0;
  font-family:var(--ui);font-weight:400;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  line-height:1;cursor:pointer;transition:background-color 240ms var(--e-ui),color 240ms var(--e-ui),border-color 240ms var(--e-ui)}
.btn:hover{background:var(--champagne);border-color:var(--champagne);color:var(--espresso-2)}
.btn-o{background:transparent;color:var(--t1);border-color:var(--line)}
.btn-o:hover{background:var(--espresso);border-color:var(--espresso);color:var(--ivory)}
.btn-w{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn-w:hover{background:#fff;border-color:#fff;color:var(--espresso)}
.btn-f{background:#fff;border-color:#fff;color:var(--espresso)}
.btn-f:hover{background:var(--champagne);border-color:var(--champagne);color:var(--espresso-2)}
.btn-s{min-height:44px;padding:14px 24px;font-size:.6875rem;letter-spacing:.18em}
.ln{display:inline-block;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid var(--champagne);transition:border-color 240ms var(--e-ui)}
.ln:hover{border-color:var(--espresso)}

/* nav */
header{position:fixed;top:0;left:0;right:0;z-index:90;transition:background-color 340ms var(--e-ui),box-shadow 340ms var(--e-ui)}
header.stuck{background:rgba(252,250,246,.9);backdrop-filter:blur(18px) saturate(180%);box-shadow:0 1px 0 var(--line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:86px;gap:28px}
.wm{font-family:var(--disp);font-weight:400;font-size:1.3rem;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;transition:color 340ms var(--e-ui);line-height:1}
.wm small{display:block;font-family:var(--ui);font-weight:300;font-size:.5rem;letter-spacing:.5em;
  margin-top:8px;color:var(--champagne-lt)}
header.stuck .wm{color:var(--t1)}
.nav nav{display:flex;gap:32px}
.nav nav a{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);
  transition:color 340ms var(--e-ui)}
header.stuck .nav nav a{color:var(--t2)}
.nav nav a:hover{color:var(--champagne-lt)}
header.stuck .nav nav a:hover{color:var(--t1)}
.nav .btn{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.nav .btn:hover{background:#fff;border-color:#fff;color:var(--espresso)}
header.stuck .nav .btn{background:var(--espresso);border-color:var(--espresso);color:var(--ivory)}
header.stuck .nav .btn:hover{background:var(--champagne);border-color:var(--champagne);color:var(--espresso-2)}
.burger{display:none;width:44px;height:44px;background:none;border:0;font-size:1.2rem;color:#fff}
header.stuck .burger{color:var(--t1)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%}
.hero:after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 62% at 50% 46%,rgba(18,13,9,.72) 0%,rgba(18,13,9,.42) 52%,rgba(18,13,9,.18) 100%),
             linear-gradient(180deg,rgba(18,13,9,.52) 0%,rgba(18,13,9,.14) 30%,rgba(18,13,9,.26) 62%,rgba(18,13,9,.76) 100%)}
.hero-in{position:relative;z-index:2;text-align:center;color:#fff;padding:120px 0 90px}
.hero-in .rule{background:var(--champagne-lt)}
.hero-in h1{max-width:17ch;margin-inline:auto}
.hero-in .lead{color:rgba(255,255,255,.84);margin-top:26px;max-width:46ch;margin-inline:auto}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.scrollnote{position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;
  font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* reservation panel */
.res{background:var(--espresso);color:var(--d1);padding-block:clamp(34px,3.6vw,52px)}
.res-g{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1px;background:var(--line-d-soft);
  border:1px solid var(--line-d-soft)}
.res-f{background:var(--espresso);padding:20px 24px}
.res-f label{display:block;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--champagne-lt);margin-bottom:10px}
.res-f select{width:100%;background:transparent;border:0;color:#fff;font-family:var(--disp);
  font-weight:400;font-size:1.25rem;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.res-f select option{background:#fff;color:var(--espresso);font-family:var(--ui);font-size:.9375rem}
.res-go{background:var(--champagne);color:var(--espresso-2);display:flex;align-items:center;
  padding:0 44px;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
  transition:background-color 240ms var(--e-ui)}
.res-go:hover{background:#fff}
.res-note{margin-top:16px;font-size:.8125rem;color:var(--d3);letter-spacing:.03em}

/* sections */
section{padding-block:var(--sec)}
.sand{background:var(--sand)}
.dark{background:var(--espresso);color:var(--d1)}
.sec-head{text-align:center;max-width:64ch;margin-inline:auto}
.sec-head h2{margin-bottom:20px}
.sec-foot{margin-top:clamp(34px,3.8vw,54px);text-align:center}

/* immersive band */
.band{position:relative;overflow:hidden}
.band img{width:100%;aspect-ratio:21/9;object-fit:cover}
.band .cap{position:absolute;inset:auto 0 0 0;padding:clamp(28px,3.4vw,56px);
  background:linear-gradient(0deg,rgba(20,15,11,.72) 0%,rgba(20,15,11,0) 100%);color:#fff;text-align:center}
.band .cap h3{color:#fff;margin-bottom:8px}
.band .cap p{color:rgba(255,255,255,.76);font-size:.9375rem;max-width:52ch;margin-inline:auto}

/* moments (three up) */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,44px);margin-top:clamp(40px,4.4vw,66px)}
.three figure{text-align:center}
.frame{position:relative;overflow:hidden;background:var(--sand-2)}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 760ms var(--e-out)}
.three a:hover .frame img,.card:hover .frame img{transform:scale(1.035)}
.three figcaption{padding-top:24px}
.three h3{margin-bottom:10px}
.three p{font-size:.9375rem;color:var(--t2);max-width:34ch;margin-inline:auto;line-height:1.62}
.three .pr{margin-top:16px;font-family:var(--disp);font-size:1.3rem}
.three .pr small{display:block;font-family:var(--ui);font-size:.6875rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t3);margin-bottom:6px}

/* archive */
.arch{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(40px,4.4vw,64px)}
.card{display:block;text-align:center}
.tag{position:absolute;left:50%;bottom:18px;transform:translate(-50%,10px);background:rgba(252,250,246,.95);
  color:var(--espresso);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;padding:11px 20px;
  opacity:0;transition:opacity 220ms var(--e-ui),transform 260ms var(--e-out);white-space:nowrap}
.card:hover .tag,.card:focus-within .tag{opacity:1;transform:translate(-50%,0)}
.cmeta{padding-top:16px}
.cmeta .t{font-family:var(--disp);font-size:1.125rem}
.cmeta .b{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);margin-top:8px}

/* artists */
.arts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(40px,4.4vw,64px)}
.aq{background:var(--ivory);padding:clamp(28px,2.8vw,38px) clamp(22px,2.2vw,30px);text-align:center;
  display:flex;flex-direction:column;min-height:232px;transition:background-color 300ms var(--e-ui)}
.sand .aq{background:var(--sand)}
.aq:hover{background:#fff}
.aq .nm{font-family:var(--disp);font-size:1.65rem;line-height:1}
.aq .sp{font-size:.8125rem;color:var(--t2);margin-top:12px;line-height:1.58}
.aq .bot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line-soft)}
.aq .bot small{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}

/* split editorial, still centered text */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split img{width:100%;height:100%;object-fit:cover;min-height:clamp(340px,44vw,660px)}
.split .txt{padding:clamp(48px,5.4vw,104px) clamp(28px,4.4vw,80px);display:flex;flex-direction:column;
  justify-content:center;text-align:center}
.split .txt .rule{margin-inline:auto}
.split .txt p{color:var(--t2);max-width:44ch;margin:0 auto 16px;line-height:1.72}
.split.dark .txt p{color:var(--d2)}
.dl{margin-top:30px;max-width:44ch;margin-inline:auto;width:100%;border-top:1px solid var(--line)}
.dark .dl{border-top-color:var(--line-d-soft)}
.dl div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;
  border-bottom:1px solid var(--line-soft);font-size:.9375rem}
.dark .dl div{border-bottom-color:var(--line-d-soft);color:var(--d2)}
.dl b{font-weight:300;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.dark .dl b{color:var(--d3)}

/* promises */
.prom{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d-soft);
  border:1px solid var(--line-d-soft);margin-top:clamp(44px,4.6vw,66px)}
.prom>div{background:var(--espresso);padding:clamp(30px,3vw,42px) clamp(22px,2.4vw,32px);text-align:center}
.prom .k{font-family:var(--disp);font-size:1.5rem;color:var(--champagne-lt);line-height:1}
.prom h3{margin:16px 0 12px;font-size:1.4rem}
.prom p{font-size:.875rem;color:var(--d2);line-height:1.66}

/* pricing */
.menu{max-width:860px;margin:clamp(40px,4.4vw,64px) auto 0}
.mg{margin-bottom:clamp(38px,3.8vw,54px)}
.mg h3{text-align:center;font-size:1.55rem;padding-bottom:16px;margin-bottom:8px;
  border-bottom:1px solid var(--line)}
.mi{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.mi .n{font-size:.9375rem;white-space:nowrap}
.mi .d{font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.mi .dot{flex:1;border-bottom:1px dotted rgba(36,29,22,.22);transform:translateY(-4px)}
.mi .v{font-family:var(--disp);font-size:1.15rem;white-space:nowrap}

/* quote */
.quote{text-align:center}
.quote>q{max-width:20ch}
.quote q{display:block;font-family:var(--disp);font-weight:300;font-style:italic;
  font-size:clamp(1.6rem,3vw,2.75rem);line-height:1.28;letter-spacing:-.012em;max-width:20ch;margin-inline:auto;
  quotes:'\201C' '\201D'}
.quote cite{display:block;font-style:normal;font-size:.6875rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--d3);margin-top:30px}
.rvs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,60px);margin-top:clamp(52px,5.4vw,84px);max-width:1040px;margin-inline:auto}
.rvs div{text-align:center}
.rvs q{display:block;font-family:var(--disp);font-size:1.2rem;line-height:1.42;quotes:'\201C' '\201D'}
.rvs cite{display:block;font-style:normal;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t3);margin-top:18px}

/* visit */
.vv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-d-soft);
  border:1px solid var(--line-d-soft);margin-top:clamp(40px,4.4vw,62px)}
.vv>div{background:var(--espresso);padding:clamp(32px,3.4vw,52px);text-align:center}
.hrs{margin-top:6px}
.hrs div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line-d-soft);font-size:.9375rem;color:var(--d2)}
.hrs div b{font-weight:300;color:#fff}
.addr{font-family:var(--disp);font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.4;color:#fff}

/* footer */
footer{background:var(--espresso-2);color:var(--d2);padding-block:clamp(56px,6vw,88px) 30px;text-align:center}
.fnav{display:flex;justify-content:center;gap:clamp(18px,2.6vw,40px);flex-wrap:wrap;margin-top:34px}
.fnav a{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;transition:color 240ms var(--e-ui)}
.fnav a:hover{color:#fff}
.fbot{margin-top:clamp(40px,4.4vw,64px);padding-top:26px;border-top:1px solid var(--line-d-soft);
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--d3)}

/* mobile bar */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;height:62px;
  background:rgba(252,250,246,.92);backdrop-filter:blur(20px);border-top:1px solid var(--line-soft);
  align-items:stretch;padding:9px 14px;gap:10px}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;font-size:.6875rem;
  letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line)}
.mbar .b{background:var(--espresso);border-color:var(--espresso);color:var(--ivory);flex:1.7}

.rev{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--e-out),transform 700ms var(--e-out)}
.rev.in{opacity:1;transform:none}
:where(a,button):focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}.rev{opacity:1;transform:none}}

@media(max-width:1080px){
  .res-g{grid-template-columns:1fr 1fr}
  .res-go{grid-column:1/-1;justify-content:center;padding:22px}
  .arch,.arts{grid-template-columns:repeat(2,1fr)}
  .prom{grid-template-columns:1fr 1fr}
  .three{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .split{grid-template-columns:1fr}
  .split img{min-height:320px}
  .rvs{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .vv{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav nav,.nav .btn{display:none}
  .burger{display:block}
  .hero{min-height:92svh}
  .band img{aspect-ratio:4/5}
  .res-g{grid-template-columns:1fr}
  .arch{grid-template-columns:1fr 1fr;gap:12px}
  .arts,.prom{grid-template-columns:1fr}
  body{padding-bottom:62px}
  .mbar{display:flex}
}

/* ==========================================================================
   MOBILE POLISH
   Solid header over colour, real tap targets, safe area for the home
   indicator, and momentum scrolling on the horizontal rails.
   ========================================================================== */
html{-webkit-text-size-adjust:100%}
*{-webkit-tap-highlight-color:transparent}
img{-webkit-user-drag:none;user-select:none}
[id]{scroll-margin-top:96px}
.rail,.wall{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

@media(max-width:760px){
  [id]{scroll-margin-top:82px}
  /* the fixed bar clears the iPhone home indicator */
  .mbar{height:auto;min-height:62px;
        padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .mbar a{min-height:46px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
/* every tappable thing clears 44px on any touch device, tablets included */
@media (pointer:coarse){
  .btn{min-height:50px}
  .btn-s,.btn-sm{min-height:44px}
  .ln,.bk,.go{padding-block:11px}
  .wm{padding-block:5px}
  .addr a,.big a{display:inline-block;padding-block:11px}
  .filters button{padding:12px 0}
  .nav nav a{padding-block:10px}
}
@media(hover:none){
  /* no hover on a phone, so the book overlay is always on */
  .tag,.pill,.arch .bk{opacity:1!important;transform:none!important}
}

@media(max-width:760px){
  header.stuck{background:var(--ivory);backdrop-filter:none;box-shadow:0 1px 0 var(--line)}
  .nav{height:70px}
  .hero-in{padding:96px 0 78px}
  .arch{grid-template-columns:repeat(2,1fr);gap:12px}
  .cmeta .t{font-size:1rem}
  .cmeta .b{font-size:.6875rem}
  .tag{left:12px;right:auto;transform:none;padding:9px 13px;font-size:.6875rem;letter-spacing:.1em;bottom:12px}
  .aq{min-height:0;padding:24px 20px}
  .three figure{max-width:none}
  .res-f{padding:16px 20px}
  .res-f select{font-size:1.15rem}
  .res-go{padding:20px;justify-content:center}
  .mg h3{font-size:1.35rem}
  .quote q{font-size:1.5rem;max-width:none}
  .rvs q{font-size:1.05rem}
}

/* ==========================================================================
   SUBPAGE ADDITIONS (v1.0, 14 Sep 2026)
   Shared by Menu, Artists, The Work, Visit and Book.
   ========================================================================== */
.hero.sub{min-height:0;padding:0}
.hero.sub img{object-position:center 50%}
.hero.sub .hero-in{padding:clamp(150px,18vw,220px) 0 clamp(64px,7vw,104px)}
.hero.sub .hero-in h1{font-size:var(--fs-display);max-width:20ch}
.hero.sub .hero-in .lead{margin-top:20px}
.hero.plain{background:var(--espresso);color:#fff}
.hero.plain:after{display:none}
@media(max-width:760px){.hero.sub{min-height:0}.hero.sub .hero-in{padding:122px 0 56px}}

/* current nav item */
.nav nav a.cur{color:#fff;border-bottom:1px solid var(--champagne-lt);padding-bottom:4px}
header.stuck .nav nav a.cur{color:var(--t1);border-bottom-color:var(--champagne)}

/* filter row: square, hairline, never a pill */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:clamp(30px,3.4vw,46px) auto 0;border:1px solid var(--line)}
.filters button{background:transparent;border:0;border-right:1px solid var(--line);color:var(--t2);
  font-family:var(--ui);font-weight:300;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 22px;cursor:pointer;transition:background-color 240ms var(--e-ui),color 240ms var(--e-ui)}
.filters button:last-child{border-right:0}
.filters button:hover{color:var(--t1)}
.filters button.on{background:var(--espresso);color:var(--ivory)}
.dark .filters{border-color:var(--line-d)}
.dark .filters button{border-right-color:var(--line-d);color:var(--d2)}
.dark .filters button.on{background:#fff;color:var(--espresso)}
@media(max-width:760px){.filters{border:0;gap:8px}.filters button{border:1px solid var(--line)!important;padding:12px 14px;font-size:.6875rem}}

/* sticky category rail for the menu */
.rail{position:sticky;top:86px;z-index:40;background:rgba(252,250,246,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.rail .in{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;justify-content:center}
.rail .in::-webkit-scrollbar{display:none}
.rail a{flex:none;padding:18px 20px;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t2);
  border-bottom:1px solid transparent;transition:color 240ms var(--e-ui),border-color 240ms var(--e-ui)}
.rail a:hover,.rail a.on{color:var(--t1);border-bottom-color:var(--champagne)}
@media(max-width:760px){.rail{top:70px}.rail .in{justify-content:flex-start;padding-inline:var(--gut)}.rail a{padding:15px 12px;font-size:.6875rem}}

/* menu page */
.mg .cnote{text-align:center;font-size:.9375rem;color:var(--t2);max-width:52ch;margin:0 auto 8px;line-height:1.62}
.mg .cbook{text-align:center;margin-top:22px}
.mi .n{white-space:normal}
.mi .v.tbd{color:var(--t3);font-family:var(--ui);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;align-self:center}
.mi .flag{display:inline-block;width:6px;height:6px;background:var(--champagne);margin-left:8px;vertical-align:middle}
.legend{margin-top:26px;text-align:center;font-size:.8125rem;color:var(--t3);letter-spacing:.02em}
.legend .flag{display:inline-block;width:6px;height:6px;background:var(--champagne);margin-right:8px;vertical-align:middle}
@media(max-width:760px){.mi{flex-wrap:wrap}.mi .d{order:3;width:100%;padding-top:4px}.mi .dot{order:1}.mi .v{order:2}.mi .n{order:0}}

/* this month offer */
.offer{background:var(--sand);text-align:center}
.offer .box{max-width:760px;margin-inline:auto;border:1px solid var(--line);padding:clamp(36px,4.4vw,64px) clamp(24px,4vw,56px);background:var(--ivory)}
.offer .box .rule{margin-bottom:22px}
.offer h2{font-size:var(--fs-h2)}
.offer .terms{margin:18px auto 0;max-width:48ch;color:var(--t2);font-size:.9375rem;line-height:1.7}
.offer .cta{margin-top:28px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.offer .until{margin-top:22px;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}

/* artist cards with categories */
.aq .cats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin-top:14px}
.aq .cats span{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);padding-bottom:2px;border-bottom:1px solid var(--line-soft)}
.arts.big .aq{min-height:280px}
.aq .pv{font-size:.8125rem;color:var(--t2);margin-top:10px;line-height:1.58;font-style:italic;font-family:var(--disp);font-size:1.02rem}
.aq[hidden]{display:none}

/* archive with filters */
.arch.big{grid-template-columns:repeat(4,1fr)}
.card[hidden]{display:none}
.card .cmeta .s{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin-top:6px}
@media(max-width:1080px){.arch.big{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.arch.big{grid-template-columns:repeat(2,1fr)}}

/* visit page */
.dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(40px,4.4vw,62px)}
.dirs>div{background:var(--ivory);padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,30px);text-align:center}
.dirs .from{font-family:var(--disp);font-size:1.5rem;line-height:1}
.dirs .t{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin:12px 0 14px}
.dirs p{font-size:.875rem;color:var(--t2);line-height:1.64;max-width:30ch;margin-inline:auto}
@media(max-width:760px){.dirs{grid-template-columns:1fr}}
.map{margin-top:clamp(40px,4.4vw,62px);border:1px solid var(--line);aspect-ratio:21/9;max-width:100%;background:var(--sand-2);position:relative;overflow:hidden}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
.map .pin i{display:block;width:10px;height:10px;background:var(--espresso);margin:0 auto 10px;transform:rotate(45deg)}
.map .pin span{font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--t2);background:rgba(252,250,246,.9);padding:8px 12px}
@media(max-width:760px){.map{aspect-ratio:4/3}}

/* faqs */
.faqs{max-width:760px;margin:clamp(34px,3.8vw,54px) auto 0;border-top:1px solid var(--line)}
.faqs details{border-bottom:1px solid var(--line-soft)}
.faqs summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--disp);font-size:1.3rem;line-height:1.3;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary:after{content:'+';font-family:var(--ui);font-weight:200;color:var(--t3);font-size:1.4rem;line-height:1;transition:transform 240ms var(--e-ui)}
.faqs details[open] summary:after{transform:rotate(45deg)}
.faqs p{padding:0 0 22px;color:var(--t2);font-size:.9375rem;line-height:1.7;max-width:60ch}

/* text club and inputs */
.field{display:flex;gap:0;max-width:520px;margin:26px auto 0;border:1px solid var(--line)}
.dark .field{border-color:var(--line-d)}
.field input{flex:1;min-width:0;background:transparent;border:0;padding:16px 18px;font-family:var(--ui);font-weight:300;font-size:1rem;color:inherit;outline:none}
.field input::placeholder{color:var(--t3)}
.dark .field input::placeholder{color:var(--d3)}
.field .btn{min-height:0;padding:0 24px;border:0;border-left:1px solid var(--line)}
.dark .field .btn{border-left-color:var(--line-d);background:#fff;color:var(--espresso)}
.dark .field .btn:hover{background:var(--champagne)}
.fine{margin-top:14px;font-size:.75rem;color:var(--t3);letter-spacing:.02em;max-width:46ch;margin-inline:auto;line-height:1.6}
.dark .fine{color:var(--d3)}
.social{display:flex;justify-content:center;gap:clamp(18px,2.6vw,36px);flex-wrap:wrap;margin-top:22px}
.social a{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t2);border-bottom:1px solid var(--champagne);padding-bottom:6px}
.dark .social a,.on-dark .social a{color:var(--d2)}

/* book page */
.bk-frame{max-width:960px;margin:clamp(40px,4.4vw,62px) auto 0;border:1px solid var(--line);background:#fff}
.bk-frame .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line-soft);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.bk-frame .body{padding:clamp(34px,4vw,60px) clamp(22px,4vw,56px);text-align:center}
.bk-frame .body p{color:var(--t2);max-width:48ch;margin:0 auto 16px;line-height:1.7}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(40px,4.4vw,62px)}
.steps>div{background:var(--ivory);padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,30px);text-align:center}
.sand .steps>div{background:var(--sand)}
.steps .k{font-family:var(--disp);font-size:1.5rem;color:var(--champagne);line-height:1}
.steps h3{margin:14px 0 10px;font-size:1.35rem}
.steps p{font-size:.875rem;color:var(--t2);line-height:1.64;max-width:30ch;margin-inline:auto}
@media(max-width:1080px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.res-f input{width:100%;background:transparent;border:0;color:#fff;font-family:var(--disp);font-weight:400;font-size:1.25rem;outline:none}
.res-f input::placeholder{color:var(--d3)}

/* proposal flag on the promises */
.prop{margin-top:22px;text-align:center;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--d3)}

/* brand guide only */
.bg-swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,3.8vw,54px)}
.bg-swatches>div{background:var(--ivory);text-align:center}
.bg-swatches .sw{height:120px}
.bg-swatches .nm{padding:14px 8px 4px;font-family:var(--disp);font-size:1.05rem}
.bg-swatches .hx{padding:0 8px 16px;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
@media(max-width:1080px){.bg-swatches{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.bg-swatches{grid-template-columns:repeat(2,1fr)}}
.spec{max-width:900px;margin:clamp(34px,3.8vw,54px) auto 0;border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line-soft)}
.spec .lb{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--t3);line-height:1.6}
.spec .lb small{display:block;text-transform:none;letter-spacing:0;font-size:.75rem;margin-top:4px}
@media(max-width:760px){.spec>div{grid-template-columns:1fr;gap:8px}}
.bg-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:28px}
.bg-two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,3.8vw,54px)}
.bg-two>div{padding:clamp(28px,3vw,44px)}
.bg-two .ok{background:var(--ivory)}
.bg-two .no{background:var(--sand)}
.bg-two h3{font-size:1.35rem;margin-bottom:14px}
.bg-two p{font-size:.9375rem;color:var(--t2);line-height:1.68;margin-bottom:12px}
@media(max-width:760px){.bg-two{grid-template-columns:1fr}}
.bg-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(34px,3.8vw,54px)}
.bg-photos figure{text-align:center}
.bg-photos figcaption{padding-top:16px;font-size:.875rem;color:var(--t2);line-height:1.6;max-width:32ch;margin-inline:auto}
.bg-photos figcaption b{display:block;font-weight:300;font-family:var(--disp);font-size:1.3rem;color:var(--t1);margin-bottom:6px}
@media(max-width:760px){.bg-photos{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.toc{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2vw,28px);margin-top:30px}
.toc a{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t2);padding-bottom:5px;border-bottom:1px solid var(--line)}
.toc a:hover{border-bottom-color:var(--champagne);color:var(--t1)}
.checklist{max-width:860px;margin:clamp(34px,3.8vw,54px) auto 0;border-top:1px solid var(--line)}
.checklist>div{display:grid;grid-template-columns:28px 1fr auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:.9375rem}
.checklist i{display:block;width:12px;height:12px;border:1px solid var(--line);transform:translateY(2px)}
.checklist .who{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
@media(max-width:760px){.checklist>div{grid-template-columns:28px 1fr}.checklist .who{grid-column:2}}
/* ten artists: five across, borders per tile so filtered grids leave no grey cells */
.arts.big{grid-template-columns:repeat(5,1fr);background:transparent;gap:0;border-right:0;border-bottom:0}
.arts.big .aq{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:300px}
@media(max-width:1080px){.arts.big{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.arts.big{grid-template-columns:1fr}.arts.big .aq{border-right:0}}
.arch.big{background:transparent}

/* ==========================================================================
   ROUND 2 (14 Sep 2026): menu chooser and service dropdowns, quiet filters,
   square archive, Google review block.
   ========================================================================== */
.choose{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,3.8vw,54px)}
.choose button{background:var(--ivory);border:0;padding:clamp(26px,3vw,40px) 16px;text-align:center;cursor:pointer;
  font-family:var(--disp);font-weight:300;font-size:1.5rem;line-height:1;color:var(--t1);
  transition:background-color 240ms var(--e-ui),color 240ms var(--e-ui)}
.choose button small{display:block;font-family:var(--ui);font-weight:300;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-top:12px}
.choose button:hover{background:#fff}
.choose button.on{background:var(--espresso);color:#fff}
.choose button.on small{color:var(--champagne-lt)}
@media(max-width:760px){.choose{grid-template-columns:1fr 1fr}.choose button{font-size:1.2rem;padding:22px 10px}}
.mcat{display:none;max-width:760px;margin:clamp(40px,4.4vw,64px) auto 0}
.mcat.on{display:block}
.mcat .cnote{text-align:center;font-size:.9375rem;color:var(--t2);max-width:52ch;margin:0 auto 18px;line-height:1.62}
.mcat .list{border-top:1px solid var(--line)}
.svc{border-bottom:1px solid var(--line-soft)}
.svc summary{list-style:none;display:flex;align-items:baseline;gap:18px;padding:20px 0;cursor:pointer}
.svc summary::-webkit-details-marker{display:none}
.svc summary .n{font-family:var(--disp);font-size:1.3rem;line-height:1.2;flex:1}
.svc summary .d{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.svc summary .pl{font-family:var(--ui);font-weight:200;font-size:1.4rem;color:var(--t3);line-height:1;width:16px;text-align:center;transition:transform 240ms var(--e-ui);align-self:center}
.svc[open] summary .pl{transform:rotate(45deg)}
.svc .x{display:grid;grid-template-columns:1fr auto;gap:18px 40px;align-items:end;padding:2px 0 28px}
.svc .x p{color:var(--t2);font-size:.9375rem;line-height:1.7;max-width:52ch}
.svc .x .pr{font-family:var(--disp);font-size:1.6rem;white-space:nowrap;text-align:right}
.svc .x .pr small{display:block;font-family:var(--ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.svc .x .pr.tbd{font-family:var(--ui);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.svc .x .go{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
@media(max-width:760px){.svc .x{grid-template-columns:1fr}.svc .x .pr{text-align:left}.svc summary .n{font-size:1.15rem}}
.mcat .flag{display:inline-block;width:6px;height:6px;background:var(--champagne);margin-left:10px;vertical-align:middle}

/* quiet text filters */
.tf{display:flex;flex-wrap:wrap;justify-content:center;gap:6px clamp(16px,2.4vw,30px);margin-top:clamp(28px,3vw,40px)}
.tf button{background:none;border:0;border-bottom:1px solid transparent;padding:8px 0;cursor:pointer;
  font-family:var(--ui);font-weight:300;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);
  transition:color 240ms var(--e-ui),border-color 240ms var(--e-ui)}
.tf button:hover{color:var(--t1)}
.tf button.on{color:var(--t1);border-bottom-color:var(--champagne)}
.tf-sel{display:flex;justify-content:center;margin-top:14px}
.tf-sel select{background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 28px 10px 0;
  font-family:var(--disp);font-size:1.15rem;color:var(--t1);-webkit-appearance:none;appearance:none;cursor:pointer;outline:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat}

/* archive: square, three across */
.arch.big{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.arch.big .frame img{aspect-ratio:1/1}
@media(max-width:1080px){.arch.big{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.arch.big{grid-template-columns:repeat(2,1fr);gap:12px}}

/* google reviews */
.gr{max-width:1040px;margin:clamp(40px,4.4vw,62px) auto 0;display:grid;grid-template-columns:280px 1fr;gap:1px;background:var(--line);border:1px solid var(--line);text-align:left}
.gr .sum{background:var(--ivory);padding:clamp(30px,3vw,44px) 28px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.gr .sum .big{font-family:var(--disp);font-size:4.2rem;line-height:1;font-weight:300}
.gr .sum .n{font-size:.8125rem;color:var(--t2);margin-top:12px;line-height:1.6}
.gr .sum .ln{margin-top:22px;align-self:center}
.stars{color:var(--champagne);letter-spacing:.12em;font-size:.95rem;line-height:1;margin-top:10px}
.gr .rv{background:var(--ivory);padding:clamp(22px,2.6vw,32px) clamp(22px,2.8vw,34px);border-bottom:1px solid var(--line-soft)}
.gr .rv:last-child{border-bottom:0}
.gr .who{display:flex;align-items:center;gap:14px}
.gr .av{width:38px;height:38px;background:var(--sand-2);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:1.05rem;color:var(--t1);flex:none}
.gr .nm{font-size:.9375rem;line-height:1.3}
.gr .meta{font-size:.6875rem;color:var(--t3);letter-spacing:.04em;margin-top:3px}
.gr .rv .stars{margin:12px 0 10px;font-size:.8rem}
.gr .rv p{font-size:.9375rem;line-height:1.68;color:var(--t2);max-width:64ch}
.gr .rv .more{display:inline-block;margin-top:10px;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--line)}
@media(max-width:760px){.gr{grid-template-columns:1fr}}
/* height attributes are for layout reservation only; CSS ratios win */
.frame img,.band img,.bg-photos img{height:auto}

/* theme additions */
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.gnb-page{max-width:760px;margin:0 auto;padding:160px 24px 96px}
.gnb-page h1{margin-bottom:24px}

div.card{display:block}
.entry{font-size:1.0625rem;line-height:1.8;color:var(--t2)}
.entry p{margin:0 0 1.2em}
.entry h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.2;color:var(--t1);margin:1.9em 0 .6em}
.entry a{color:var(--t1);border-bottom:1px solid var(--champagne)}
.entry ul,.entry ol{margin:0 0 1.2em 1.2em}
.post-meta{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:34px}
.jlist{max-width:760px;margin:0 auto;border-top:1px solid var(--line)}
.jlist article{padding:34px 0;border-bottom:1px solid var(--line-soft)}
.jlist h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;margin-bottom:12px}
.jlist p{color:var(--t2);line-height:1.7;max-width:60ch}
.jlist .ln{display:inline-block;margin-top:16px}
.gnb-page h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.12}
.split .txt h2{margin-bottom:26px}
@media(min-width:1100px){.lead.wide{max-width:none;white-space:nowrap}.sec-head:has(.lead.wide){max-width:none}}
#reviews .sec-head h2{color:var(--ivory)}
#reviews .sec-head .rule{background:var(--champagne-lt)}
#reviews .gr{background:transparent;border:0;gap:18px;grid-template-columns:300px 1fr}
#reviews .gr{color:var(--t1)}
#reviews .gr .sum .big,#reviews .gr .nm{color:var(--t1)}
#reviews .gr .sum{padding-block:clamp(36px,4vw,56px)}
#reviews .gr .sum .big{font-size:5.4rem}
#reviews .gr .sum .stars{font-size:1.35rem;margin-top:14px}
#reviews .gr .sum .n{font-size:.9375rem;color:var(--t1)}
#reviews .gr>div:last-child{display:grid;gap:18px}
#reviews .gr .rv{border-bottom:0}
#reviews .gr .rv p{font-family:var(--disp);font-size:clamp(1.2rem,1.5vw,1.45rem);line-height:1.5;color:var(--t1);max-width:none}
#reviews .gr .nm{font-size:1rem;font-weight:400}
#reviews .gr .meta{color:var(--t2)}
@media(max-width:900px){#reviews .gr{grid-template-columns:1fr}}
.mcat{max-width:none}
.svc .x.has-img{grid-template-columns:clamp(150px,15vw,210px) 1fr auto;align-items:center;gap:16px clamp(24px,3.4vw,56px);padding:8px 0 32px}
.svc .x .ph{grid-column:1;grid-row:1 / span 2;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--sand-2)}
.svc .x.has-img p{grid-column:2;grid-row:1;align-self:end;max-width:62ch}
.svc .x.has-img .pr{grid-column:3;grid-row:1;align-self:end}
.svc .x.has-img .go{grid-column:2 / -1;grid-row:2;align-self:start;margin-top:0}
@media(max-width:760px){.svc .x.has-img{grid-template-columns:1fr;gap:14px}.svc .x .ph{grid-row:auto;aspect-ratio:16/10}.svc .x.has-img p,.svc .x.has-img .pr,.svc .x.has-img .go{grid-column:1;grid-row:auto}}
.nav .btn.call{background:transparent}
.nav .btn.bk{background:#fff;border-color:#fff;color:var(--espresso)}
.nav .btn.bk:hover{background:var(--champagne);border-color:var(--champagne);color:var(--espresso-2)}
header.stuck .nav .btn.call{background:transparent;color:var(--t1);border-color:var(--espresso)}
header.stuck .nav .btn.call:hover{background:var(--espresso);color:var(--ivory)}
@media(max-width:1180px){.nav .btn.call{display:none}}
.offer .window{font-family:var(--disp);font-size:clamp(1.25rem,1.8vw,1.6rem);color:var(--t1);margin:6px 0 14px}
@media(min-width:900px){.sec-head.one{max-width:none}.sec-head.one h2{white-space:nowrap}}
@media(min-width:1100px){.hero .hero-in:has(.lead.two){width:min(100% - var(--gut)*2,1100px)}.hero .hero-in .lead.two{max-width:47em;text-wrap:balance}}
.mg .more{margin-top:20px;text-align:center}
.mg .more .ln{font-size:.6875rem}
.post-cta{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);text-align:center}

/* ==========================================================================
   Audit fixes: tablet layout, tap targets, legibility
   ========================================================================== */
:root{--t2:rgba(36,29,22,.72);--t3:rgba(36,29,22,.62)}
.btn{white-space:nowrap}
.wm small{font-size:.5625rem}
.band .cap{background:linear-gradient(0deg,rgba(20,15,11,.86) 0%,rgba(20,15,11,.55) 55%,rgba(20,15,11,0) 100%);padding-top:clamp(56px,7vw,110px)}
/* tablet keeps three services across and a four across archive */
@media(min-width:700px) and (max-width:1080px){
  .three{grid-template-columns:repeat(3,1fr);max-width:none;gap:18px}
  .three p{font-size:.875rem}
  .arch{grid-template-columns:repeat(4,1fr)}
  .arch.big{grid-template-columns:repeat(3,1fr)}
}
/* the full navigation needs room, so tablets and phones share the menu button */
@media(max-width:1024px){
  .nav nav{display:none}
  .burger{display:block}
  body.navopen .nav nav{display:flex;flex-direction:column;position:fixed;inset:0;z-index:98;background:var(--ivory);align-items:center;justify-content:center;gap:28px}
  body.navopen .nav nav a{color:var(--t1);font-size:1rem;padding:8px 14px}
  body.navopen .burger{position:relative;z-index:99;color:var(--t1)}
  body.navopen{overflow:hidden}
}
@media(max-width:760px){
  body{padding-bottom:0}
  footer{padding-bottom:calc(102px + env(safe-area-inset-bottom,0px))}
  .three .frame img{aspect-ratio:1/1}
  .arts:not(.big)>.aq:nth-child(n+5){display:none}
}
/* comfortable tap targets on touch screens */
@media (pointer:coarse),(max-width:1024px){
  .fnav{gap:4px clamp(10px,2vw,26px)}
  .fnav a{padding:12px 8px;display:inline-block}
  .ln{padding-block:12px 10px}
  .tf button{min-height:44px;padding-inline:8px}
  .addr a{display:inline-block;padding-block:10px}
  .jlist h2 a{display:inline-block;padding-block:6px}
}
/* a blurred header is repainted on every scroll frame, a solid one is not */
header.stuck{background:rgba(252,250,246,.97);backdrop-filter:none;-webkit-backdrop-filter:none}

/* ==========================================================================
   Motion. Everything here is opacity or transform only, which the browser can
   animate without repainting. Hidden starting states only apply once scripts
   are running (html.js), and the whole layer is skipped for visitors who ask
   for reduced motion.
   ========================================================================== */
html:not(.js) .rev{opacity:1;transform:none}
.btn{transition-property:background-color,border-color,color,transform}
.btn:active{transform:scale(.985)}
.split{overflow:hidden}
@keyframes gnbUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes gnbFade{from{opacity:0}to{opacity:1}}
@media (hover:hover){
  .nav nav a{position:relative}
  .nav nav a::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform 460ms var(--e-out)}
  .nav nav a:hover::after{transform:scaleX(1)}
  .nav nav a.cur::after{display:none}
}
@media (prefers-reduced-motion:no-preference){
  /* hero: the photograph settles while the words rise in turn */
  html.js .hero>img{transform:scale(1.04);transition:transform 1800ms var(--e-out)}
  html.js.ready .hero>img{transform:scale(1)}
  html.js .hero-in>*{opacity:0;transform:translateY(16px);transition:opacity 800ms var(--e-out),transform 800ms var(--e-out)}
  html.js .hero-in>.rule{opacity:1;transform:scaleX(0);transition:transform 900ms var(--e-out) 80ms}
  html.js.ready .hero-in>*{opacity:1;transform:none}
  html.js.ready .hero-in>h1{transition-delay:120ms}
  html.js.ready .hero-in>.lead{transition-delay:240ms}
  html.js.ready .hero-in>.hero-cta{transition-delay:360ms}
  html.js .mbar{transform:translateY(100%);transition:transform 700ms var(--e-out) 500ms}
  html.js.ready .mbar{transform:none}

  /* section headings: the rule draws, then the heading and line follow */
  html.js .sec-head.rev{opacity:1;transform:none}
  html.js .sec-head.rev>*{opacity:0;transform:translateY(14px);transition:opacity 700ms var(--e-out),transform 700ms var(--e-out)}
  html.js .sec-head.rev>.rule{opacity:1;transform:scaleX(0);transition:transform 800ms var(--e-out)}
  html.js .sec-head.rev.in>*{opacity:1;transform:none}
  html.js .sec-head.rev.in>:nth-child(2){transition-delay:80ms}
  html.js .sec-head.rev.in>:nth-child(3){transition-delay:160ms}
  html.js .sec-head.rev.in>:nth-child(n+4){transition-delay:240ms}

  /* side by side sections: the photograph fades up to full size, the text follows */
  html.js .split>img{opacity:0;transform:scale(1.03);transition:opacity 900ms var(--e-ui),transform 1200ms var(--e-out)}
  html.js .split.in>img{opacity:1;transform:none}
  html.js .split .txt>*{opacity:0;transform:translateY(14px);transition:opacity 700ms var(--e-out),transform 700ms var(--e-out)}
  html.js .split .txt>.rule{opacity:1;transform:scaleX(0);transition:transform 800ms var(--e-out) 100ms}
  html.js .split.in .txt>*{opacity:1;transform:none}
  html.js .split.in .txt>:nth-child(2){transition-delay:120ms}
  html.js .split.in .txt>:nth-child(3){transition-delay:200ms}
  html.js .split.in .txt>:nth-child(4){transition-delay:280ms}
  html.js .split.in .txt>:nth-child(n+5){transition-delay:360ms}

  /* cards arrive one after another */
  html.js :is(.three,.arch,.arts,.dirs,.mg,.gr).rev{opacity:1;transform:none}
  html.js :is(.three,.arch,.arts,.dirs,.mg).rev>*,html.js .gr.rev .sum,html.js .gr.rev .rv{opacity:0;transform:translateY(16px);transition:opacity 700ms var(--e-out) var(--d,0ms),transform 700ms var(--e-out) var(--d,0ms)}
  html.js :is(.three,.arch,.arts,.dirs,.mg).rev.in>*,html.js .gr.rev.in .sum,html.js .gr.rev.in .rv{opacity:1;transform:none}
  html.js .gr.rev .rv:nth-child(1){--d:80ms}
  html.js .gr.rev .rv:nth-child(2){--d:160ms}
  html.js .mg.rev>*{transform:translateY(10px)}

  /* the menu: choosing a category brings its list in row by row */
  html.js .mcat.on{animation:gnbFade 400ms var(--e-ui) both}
  html.js .mcat.on .svc{animation:gnbUp 500ms var(--e-out) both;animation-delay:var(--d,0ms)}

  /* phone and tablet menu */
  @media(max-width:1024px){
    body.navopen .nav nav{animation:gnbFade 320ms var(--e-ui) both}
    body.navopen .nav nav a{animation:gnbUp 500ms var(--e-out) both;animation-delay:var(--d,0ms)}
  }
}
@media (prefers-reduced-motion:no-preference){
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(1){--d:0ms}
  html.js .mg.rev>:nth-child(1){--d:0ms}
  html.js .mcat .svc:nth-child(1){--d:0ms}
  body.navopen .nav nav a:nth-child(1){--d:60ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(2){--d:70ms}
  html.js .mg.rev>:nth-child(2){--d:40ms}
  html.js .mcat .svc:nth-child(2){--d:25ms}
  body.navopen .nav nav a:nth-child(2){--d:110ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(3){--d:140ms}
  html.js .mg.rev>:nth-child(3){--d:80ms}
  html.js .mcat .svc:nth-child(3){--d:50ms}
  body.navopen .nav nav a:nth-child(3){--d:160ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(4){--d:210ms}
  html.js .mg.rev>:nth-child(4){--d:120ms}
  html.js .mcat .svc:nth-child(4){--d:75ms}
  body.navopen .nav nav a:nth-child(4){--d:210ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(5){--d:0ms}
  html.js .mg.rev>:nth-child(5){--d:160ms}
  html.js .mcat .svc:nth-child(5){--d:100ms}
  body.navopen .nav nav a:nth-child(5){--d:260ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(6){--d:70ms}
  html.js .mg.rev>:nth-child(6){--d:200ms}
  html.js .mcat .svc:nth-child(6){--d:125ms}
  body.navopen .nav nav a:nth-child(6){--d:310ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(7){--d:140ms}
  html.js .mg.rev>:nth-child(7){--d:240ms}
  html.js .mcat .svc:nth-child(7){--d:150ms}
  body.navopen .nav nav a:nth-child(7){--d:360ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(8){--d:210ms}
  html.js .mg.rev>:nth-child(8){--d:280ms}
  html.js .mcat .svc:nth-child(8){--d:175ms}
  body.navopen .nav nav a:nth-child(8){--d:410ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(9){--d:0ms}
  html.js .mg.rev>:nth-child(9){--d:320ms}
  html.js .mcat .svc:nth-child(9){--d:200ms}
  body.navopen .nav nav a:nth-child(9){--d:460ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(10){--d:70ms}
  html.js .mg.rev>:nth-child(10){--d:360ms}
  html.js .mcat .svc:nth-child(10){--d:225ms}
  body.navopen .nav nav a:nth-child(10){--d:510ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(11){--d:140ms}
  html.js .mg.rev>:nth-child(11){--d:400ms}
  html.js .mcat .svc:nth-child(11){--d:250ms}
  body.navopen .nav nav a:nth-child(11){--d:560ms}
  html.js :is(.three,.arch,.arts,.dirs).rev>:nth-child(12){--d:210ms}
  html.js .mg.rev>:nth-child(12){--d:440ms}
  html.js .mcat .svc:nth-child(12){--d:250ms}
  body.navopen .nav nav a:nth-child(12){--d:610ms}
  html.js .mcat .svc:nth-child(n+13){--d:260ms}
}