@font-face{font-family:Bodoni;src:url(assets/serif.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Bodoni;src:url(assets/serif-italic.woff2) format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/sans.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/sans-semibold.woff2) format('woff2');font-weight:600;font-display:swap}
:root{--serif:Bodoni,Georgia,serif;--sans:Manrope,Arial,sans-serif;--gutter:clamp(25px,5.3vw,100px)}
html[data-theme="dark"] {
  color-scheme: dark;
  --header-fill: #101427;
  --header-line: #303955;
  --ice-strip: #253253;
  --ice-text: #e0e8ff;
  --ice-line: #46567d;
  --services-fill: #151b30;
  --white-panel: #111727;
  --studio-fill: #202942;
  --local-fill: #1c243b;
  --map-paper: #181f34;
  --map-line: #465373;
  --field-fill: #181f34;
  --field-line: #7583a7;
  --detail-ink: #dbe2fa;
  --soft-label: #b4c0e4;
  --ordinal-ink: #adbce4;
  --service-ink: #c4cfff;
  --service-info: #bdc9ed;
  --tab-ink: #b9c5e2;
  --tab-active: #e0e6ff;
  --tab-line: #b9c6ff;
  --service-line: #3f4966;
  --service-hover: #303b61;
  --service-button-edge: #798ab9;
  --tab-edge: #53607e;
  --focus-ring: #bfcbff;
  --button-hover: #d7dfff;
  --porcelain: #101427;
  --paper: #1b2238;
  --ink: #f0f3ff;
  --accent: #bbc7ff;
  --muted: #bec8e3;
  --edge: #49536e;
  --mist: #283552;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,textarea,select{font:inherit;color:inherit}button{cursor:pointer}button,a{touch-action:manipulation}button{border:0;background:none}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}.symbols{position:absolute;width:0;height:0;overflow:hidden}.icon{width:18px;height:18px;flex:none}.skip{position:absolute;z-index:20;padding:12px;background:var(--porcelain);transform:translateY(-110%)}.skip:focus{transform:none}
.header{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:88px;padding:13px var(--gutter);border-bottom:1px solid var(--edge);position:relative;z-index:5}.brand{display:inline-flex;align-items:center;flex:none}.brand img{width:clamp(164px,14.5vw,225px);height:auto}.desktop-nav{display:flex;gap:clamp(22px,3.05vw,53px);align-items:center;margin-left:3vw}.desktop-nav a,.text-link,.visit-top,.button,.menu-toggle{font-size:13px;font-weight:600}.desktop-nav a{padding:11px 0;position:relative}.desktop-nav a:after{content:"";position:absolute;bottom:5px;left:0;width:0;height:1px;background:var(--accent);transition:width .2s}.desktop-nav a:hover:after{width:100%}.visit-top{display:inline-flex;align-items:center;gap:23px;padding:13px 19px;border:1px solid var(--ordinal-ink);border-radius:2px}.visit-top .icon{width:14px;height:14px}.visit-top:hover{background:#e2e7fc}.menu-toggle,#mobile-nav{display:none}.hero{display:grid;grid-template-columns:1.04fr 1fr;min-height:540px}.hero-copy{position:relative;isolation:isolate;display:flex;align-items:center;padding:clamp(57px,5.9vw,106px) 26px clamp(82px,7vw,128px) var(--gutter);overflow:hidden}.hero-main{position:relative;z-index:2}.eyebrow,.plate-label,.look-meta{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase}.line{display:inline-flex;align-items:center;gap:12px}.line:before{content:"";width:27px;height:1px;background:currentColor;opacity:.72}.hero h1{font-family:var(--serif);font-size:clamp(78px,7.75vw,156px);font-weight:400;line-height:1.015;letter-spacing:-.064em;margin:29px 0 24px}h1 em,h2 em{font-weight:400;color:var(--accent)}.hero h1 em{letter-spacing:-.071em}.lead{font-size:clamp(15px,1.14vw,20px);line-height:1.75;max-width:335px;color:var(--muted);margin:0}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:31px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:15px 20px;background:var(--accent);color:var(--porcelain);border-radius:2px;transition:background .18s}.button:hover{background:var(--button-hover)}.text-link{border-bottom:1px solid #8995c1;padding:5px 0}.text-link:hover{color:var(--accent);border-color:var(--accent)}.plate-label{position:absolute;bottom:26px;left:var(--gutter);display:flex;align-items:center;gap:9px;font-size:8px;color:var(--ordinal-ink);letter-spacing:.15em}.sample-line{display:inline-block;width:17px;height:1px;background:var(--ordinal-ink)}.serif-index{font:italic 12px var(--serif);text-transform:none;letter-spacing:0}.hero-photo{position:relative;margin:0;min-height:clamp(520px,42.7vw,780px);overflow:hidden;background:var(--portrait-matte,#343436)}.hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 39%}.hero-photo:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent 30%,rgba(15,21,48,.55))}.hero-photo figcaption{position:absolute;z-index:1;bottom:26px;left:32px;right:28px;display:flex;justify-content:space-between;align-items:flex-end;color:white}.cover-caption{display:grid;gap:5px}.cover-caption .eyebrow{font-size:9px;letter-spacing:.18em}.cover-caption #cover-name{font:italic 25px/1.15 var(--serif);letter-spacing:-.04em}.arrows{display:flex;gap:7px}.arrow{display:grid;place-items:center;width:35px;height:35px;color:white;border:1px solid #ffffffad;border-radius:50%;background:#10193435}.arrow:hover{background:#10193488}.prev .icon{transform:rotate(180deg)}.ribbon{display:flex;align-items:center;justify-content:space-around;background:var(--mist);color:var(--detail-ink);padding:17px 3%;gap:15px}.ribbon span{display:flex;align-items:center;gap:clamp(10px,1.4vw,30px);font:italic clamp(17px,1.5vw,24px)/1.5 var(--serif);letter-spacing:-.035em;white-space:nowrap}.ribbon svg{height:17px;width:17px;color:var(--detail-ink)}
.section-pad{padding:clamp(64px,6.2vw,115px) var(--gutter)}h2{font:400 clamp(45px,4.7vw,84px)/1.1 var(--serif);letter-spacing:-.059em;margin:20px 0}h2 em{letter-spacing:-.055em}.studio{display:grid;grid-template-columns:.55fr 1fr;gap:5vw;border-bottom:1px solid var(--edge)}.section-meta{padding-top:12px}.studio h2{margin:0 0 23px}.studio-copy p,.section-intro p,.lookbook-head p,.visit-panel p,.detail-copy p,.visit-dialog-body p{color:var(--muted);max-width:600px;font-size:15px;line-height:1.8;margin:0}.studio-copy p{max-width:580px}.services{display:grid;grid-template-columns:1fr 1.32fr;gap:6vw;background:var(--paper);border-bottom:1px solid var(--edge)}.section-intro h2{margin:19px 0 15px}.service-list{border-top:1px solid var(--field-line);align-self:center}details{border-bottom:1px solid var(--field-line)}summary{list-style:none;display:grid;grid-template-columns:28px 1fr 22px;align-items:center;gap:10px;padding:22px 0;cursor:pointer;font:400 clamp(24px,2.25vw,37px)/1.25 var(--serif);letter-spacing:-.048em}summary::-webkit-details-marker{display:none}.ordinal{font:600 10px var(--sans);letter-spacing:.09em;color:var(--muted)}summary i,summary i:after{display:block;width:14px;height:1px;background:var(--accent)}summary i{position:relative}summary i:after{content:"";transform:rotate(90deg)}details[open] summary i:after{transform:rotate(0)}details p{margin:0 30px 20px 38px;line-height:1.75;font-size:14px;color:var(--muted);max-width:550px}.lookbook-head{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:0 0 29px}.lookbook-head h2{margin:16px 0}.lookbook-head p{font-size:14px}.look-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,45px)}.look{padding:0;text-align:left}.look-image{display:block;position:relative;aspect-ratio:4/4.65;overflow:hidden;background:var(--paper)}.look-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.look:hover img{transform:scale(1.025)}.look-expand{position:absolute;right:10px;bottom:10px;border:1px solid #ffffffb5;border-radius:50%;height:32px;width:32px;display:grid;place-items:center;color:white;background:#10193440}.look-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:8px;letter-spacing:.16em;margin:16px 0 6px}.look-title{font:400 clamp(25px,2.4vw,43px)/1.2 var(--serif);letter-spacing:-.046em}.visit-panel{background:#242c59;color:var(--porcelain);display:flex;align-items:center;justify-content:space-between;gap:30px}.visit-panel h2 em{color:#c6ceff}.visit-panel p{color:#e5e9ff;margin-bottom:23px}.light{background:var(--porcelain);color:var(--ink)}.light:hover{background:#e2e7fc}.visit-panel>img{width:clamp(80px,9.5vw,160px);height:auto;filter:brightness(0) invert(91%);opacity:.65;margin-right:5vw}footer{padding:30px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}footer .brand img{width:150px}footer span,footer .back-top{font-size:11px;color:var(--muted)}.back-top{padding:10px}
dialog{padding:0;background:var(--porcelain);color:var(--ink);border:1px solid var(--edge);width:min(780px,calc(100% - 30px));max-height:90dvh;box-shadow:0 24px 100px #121a3f33}dialog::backdrop{background:#0b102a99}body.modal-open{overflow:hidden}.dialog-inner{position:relative}.close{position:absolute;top:12px;right:12px;z-index:2;border:1px solid var(--edge);border-radius:100%;width:36px;height:36px;background:var(--porcelain);font:26px/1 var(--sans);display:grid;place-items:center;padding:0 0 4px}.detail-layout{display:grid;grid-template-columns:.9fr 1fr}.detail-photo{width:100%;height:100%;min-height:420px;object-fit:cover}.detail-copy{padding:61px 32px 38px}.detail-copy h2,.visit-dialog-body h2{font-size:clamp(38px,3.6vw,56px)}.detail-copy h3{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:22px 0 5px}.detail-copy p,.visit-dialog-body p{font-size:14px}.detail-copy .button{margin-top:23px}.visit-dialog-body{padding:45px clamp(24px,5vw,50px) 27px}#visit-dialog{max-width:550px}#notes-form{display:grid;gap:8px;margin-top:23px}#notes-form label{font-weight:600;font-size:13px}select,textarea{width:100%;padding:10px 12px;border:1px solid var(--field-line);border-radius:2px;background:var(--field-fill);font-size:14px;margin-bottom:11px}textarea{resize:vertical;min-height:60px}#notes-form .button{justify-self:start}#save-status{font-size:12px;min-height:22px}.look button{font:inherit}
@media(min-width:1750px){body{max-width:2060px;margin:auto}.hero{grid-template-columns:1fr 1fr}}
@media(max-width:960px){.hero{grid-template-columns:1fr 1fr}.hero h1{font-size:clamp(62px,7.9vw,84px)}.hero-actions{gap:15px}.hero-photo{min-height:500px}.hero-copy{padding-right:17px}.desktop-nav{margin:0;gap:19px}.ribbon span{font-size:16px}.ribbon svg{width:13px;height:13px}}
@media(max-width:740px){:root{--gutter:23px}.header{min-height:73px;padding:10px var(--gutter);gap:10px}.header .brand img{width:155px}.desktop-nav{display:none}.visit-top{margin-left:auto;font-size:11px;padding:10px;gap:8px}.menu-toggle{width:35px;height:40px;display:grid;align-content:center;justify-items:center;gap:6px;padding:4px}.menu-toggle span{width:21px;height:1px;background:var(--ink)}#mobile-nav:not([hidden]){position:absolute;top:100%;left:0;right:0;display:grid;background:var(--porcelain);border-block:1px solid var(--edge);padding:10px var(--gutter);box-shadow:0 8px 12px #18254d0d}#mobile-nav a,#mobile-nav button{padding:13px 0;border-bottom:1px solid var(--edge);text-align:left;font-size:14px}#mobile-nav button{border:0}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:46px var(--gutter) 51px}.hero-main{width:100%}.hero h1{font-size:clamp(70px,13vw,99px);line-height:1.005;margin:20px 0 17px}.hero .eyebrow{font-size:9px}.lead{max-width:calc(100% - 30px);width:325px;font-size:15px;line-height:1.65}.hero-actions{margin-top:21px;gap:21px}.hero-actions .button{font-size:12px;padding:12px 16px;gap:14px}.text-link{font-size:12px}.plate-label{display:none}.hero-photo{min-height:0;height:clamp(340px,90vw,485px)}.hero-photo>img{object-position:50% 38%}.hero-photo figcaption{bottom:17px;left:20px;right:18px}.ribbon{display:grid;grid-template-columns:1fr 1fr;padding:12px var(--gutter);gap:6px 13px}.ribbon span{font-size:16px;gap:8px}.ribbon span:nth-child(2n){justify-self:start}.studio{grid-template-columns:1fr;gap:18px}.section-meta{padding:0}.studio h2{margin:0 0 16px}.section-pad{padding:55px var(--gutter)}.services{grid-template-columns:1fr;gap:26px}.section-intro br{display:none}.section-intro em:before{content:" "}.section-intro h2{margin:15px 0 10px}.lookbook-head{display:block;margin-bottom:22px}.lookbook-head p br{display:none}.look-grid{grid-template-columns:1fr;gap:23px}.look-image{aspect-ratio:1/.91}.look img{object-position:50% 39%}.look-meta{margin-top:11px}.look-title{font-size:30px}.visit-panel{align-items:flex-start}.visit-panel>img{width:65px;margin:0;opacity:.55}.visit-panel h2{font-size:43px}footer{flex-wrap:wrap;padding:22px var(--gutter);gap:12px}footer .brand{width:100%}footer .brand img{width:140px}.detail-layout{display:block}.detail-photo{width:100%;min-height:0;height:220px;object-position:50% 38%}.detail-copy{padding:22px 24px 25px}.detail-copy h2{margin:12px 0}.visit-dialog-body{padding-top:40px}.visit-dialog-body .line{font-size:8px}}
@media(max-width:360px){:root{--gutter:15px}.header .brand img{width:135px}.hero h1{font-size:66px}.visit-panel>img{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.studio-feature, .lookbook { position: relative; }
.fragment-alias { position: absolute; inset: 0 auto auto 0; }
/* The appointment link stays within reach as the menu and lookbook are explored. */
.header {
  position: sticky;
  top: 0;
  background: var(--porcelain);
}
.header .visit-top {
  color: var(--porcelain);
  background: var(--accent);
  border-color: var(--accent);
}
.header .visit-top:hover { background: var(--button-hover); }
section[id], .fragment-alias, #main { scroll-margin-top: 92px; }
.hero-actions { flex-wrap: wrap; }
.hero .lead { max-width: 355px; }

.services {
  color: #f8f9ff;
  background: #242c59;
  border: 0;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.32fr);
  align-items: start;
}
.services h2 em { color: #c6ceff; }
.services .section-intro > p { color: #e5e9ff; max-width: 280px; }
.sample-note {
  display: block;
  margin-top: 25px;
  color: #d3dbfd;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.service-tabs {
  display: flex;
  gap: clamp(14px, 2.2vw, 38px);
  border-bottom: 1px solid #7784ad;
}
.service-tabs button {
  color: #d3dbfd;
  padding: 10px 0 13px;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  font-size: 14px;
}
.service-tabs button[aria-selected="true"] {
  border-color: #c6cdff;
  color: #ffffff;
}
.menu-list { padding: 0; margin: 0; list-style: none; }
.menu-service {
  display: grid;
  grid-template-columns: 1fr 45px;
  gap: 18px;
  align-items: center;
  padding: 19px 0 18px;
  border-bottom: 1px solid #7784ad;
}
.menu-service h3, .first-steps h3, .visit-info h3 {
  font: 400 clamp(23px, 2.15vw, 36px)/1.2 var(--serif);
  letter-spacing: -.045em;
  margin: 0 0 6px;
}
.menu-service p { color: #e5e9ff; font-size: 14px; line-height: 1.6; margin: 0 0 9px; }
.service-meta { color: #d3dbfd; font-size: 12px; font-weight: 600; }
.service-meta b { margin: 0 5px; }
.service-book {
  color: #d3dbfd;
  border: 1px solid #8795c6;
  border-radius: 50%;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
}
.service-book:hover { background: #394780; }
.services :focus-visible { outline-color: #c6cdff; }
.lookbook .look:nth-child(3n+2) { transform: translateY(25px); }
@media (min-width: 741px) { .look-grid { row-gap: clamp(32px, 3vw, 48px); } }
.lookbook { padding-bottom: calc(clamp(64px, 6.2vw, 115px) + 20px); }

.studio-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .83fr);
  gap: clamp(35px, 6.5vw, 108px);
  align-items: center;
  background: var(--mist);
}
.space-image { margin: 0; }
.space-image img { display: block; width: 100%; aspect-ratio: 1.30; height: auto; object-fit: cover; }
/* Only the active studio photograph participates in layout or the accessibility tree. */
.space-image [data-interior] { display: none; }
[data-palette="onyx"] .space-image [data-interior="onyx"],
[data-palette="iris"] .space-image [data-interior="iris"],
[data-palette="cherry"] .space-image [data-interior="cherry"] { display: block; }
.space-image figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--map-line);
  padding: 12px 0;
  font-size: 10px;
  color: var(--detail-ink);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.space-text p, .first-steps p { font-size: 15px; line-height: 1.8; color: var(--muted); }
.space-text h2 { margin: 18px 0 22px; }
.space-text p { margin: 0 0 12px; max-width: 420px; }
.space-text .text-link { margin-top: 12px; }
.space-text .text-link span { margin-left: 9px; }
.first-visit header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.first-visit h2 { margin: 0; }
.first-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vw; }
.first-steps article { border-top: 1px solid #cfd4e6; padding-top: 21px; }
.step-mark { font: italic 20px var(--serif); color: var(--ordinal-ink); display: block; margin: 0 0 25px; }
.first-steps p { max-width: 320px; margin: 10px 0 17px; }
.faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr);
  gap: 6vw;
  background: var(--paper);
}
.faq h2 { max-width: 415px; }
.faq-list { border-top: 1px solid var(--field-line); }
.faq-list summary { grid-template-columns: 1fr 16px; font-size: clamp(19px, 1.62vw, 27px); padding: 20px 0; line-height: 1.35; }
.faq-list details p { margin-left: 0; }
.visit-panel { gap: clamp(25px, 6vw, 110px); align-items: center; }
.visit-cta { max-width: 680px; }
.visit-info { border-left: 1px solid #7784ad; padding-left: clamp(24px, 4vw, 75px); }
.visit-info img { width: 40px; height: 48px; filter: brightness(0) invert(91%); opacity: .85; margin-bottom: 10px; }
.visit-info h3 { font-size: 24px; }
.visit-info dl { margin: 0; font-size: 13px; }
.visit-info dt { margin: 14px 0 3px; font-weight: 600; }
.visit-info dd { color: #e5e9ff; margin: 0; line-height: 1.6; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 12px; }
.footer-nav button { font: inherit; padding: 0; color: var(--accent); }
.footer-nav a:hover, .footer-nav button:hover { text-decoration: underline; }

#booking-dialog { max-width: 550px; }
.book-inner { padding: 30px clamp(22px, 4vw, 44px) 35px; }
.book-brand { display: flex; gap: 10px; align-items: center; margin-right: 26px; }
.book-brand .eyebrow { font-size: 9px; }
.book-inner h2 { font-size: clamp(38px, 4vw, 57px); margin: 17px 0 10px; }
.book-help { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0; }
#booking-form { margin-top: 23px; }
#booking-form > label, .time-field legend {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
#booking-form select, #booking-date {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--field-line);
  border-radius: 2px;
  background: var(--field-fill);
  padding: 10px 12px;
  color: var(--ink);
  font: 14px var(--sans);
}
#booking-form select { margin-bottom: 0; }
#booking-date:focus-visible, .time-options input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.book-cost { margin: 5px 0 17px; color: var(--muted); font-size: 12px; }
.time-field { border: 0; padding: 0; margin: 19px 0 22px; }
.time-field legend { padding: 0; }
.time-options { display: flex; flex-wrap: wrap; gap: 7px; }
.time-options label { position: relative; cursor: pointer; }
.time-options input { position: absolute; left: 8px; top: 12px; opacity: 0; }
.time-options span {
  display: block;
  padding: 10px 13px;
  border: 1px solid var(--field-line);
  background: var(--field-fill);
  font-size: 13px;
}
.time-options input:checked + span { color: var(--porcelain); background: var(--accent); border-color: var(--accent); }
.receipt { margin: 25px 0 15px; }
.receipt div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--edge); }
.receipt dt { color: var(--muted); font-size: 13px; }
.receipt dd { font-size: 14px; font-weight: 600; margin: 0; text-align: right; }
.demo-note { padding: 11px 14px; color: var(--detail-ink); background: var(--mist); font-size: 13px; }
.demo-note span { margin-right: 7px; }
.review-actions { display: flex; gap: 18px; align-items: center; margin-top: 20px; }
[hidden] { display: none !important; }

@media (max-width: 740px) {
  section[id], .fragment-alias, #main { scroll-margin-top: 76px; }
  .hero-actions { gap: 14px 18px; }
  .services, .studio-feature, .faq { grid-template-columns: 1fr; gap: 26px; }
  .services .section-intro > p { max-width: none; }
  .sample-note { margin-top: 13px; font-size: 9px; }
  .service-tabs { gap: clamp(11px, 4vw, 23px); }
  .service-tabs button { font-size: 13px; }
  .menu-service { gap: 12px; padding: 17px 0; }
  .menu-service p { font-size: 13px; }
  .lookbook .look:nth-child(3n+2) { transform: none; }
  .lookbook { padding-bottom: 55px; }
  .space-image img { aspect-ratio: 1.48; }
  .space-text h2 br { display: none; }
  .space-text h2 em:before { content: " "; }
  .first-visit header { display: block; margin-bottom: 22px; }
  .first-visit h2 { margin-top: 16px; }
  .first-steps { grid-template-columns: 1fr; gap: 17px; }
  .first-steps article { padding-top: 14px; }
  .step-mark { margin-bottom: 8px; font-size: 17px; }
  .first-steps p { max-width: none; margin: 4px 0 8px; }
  .faq h2 { margin-bottom: 0; }
  .visit-panel { display: grid; gap: 26px; }
  .visit-info { border-left: 0; border-top: 1px solid #7784ad; padding: 18px 0 0; }
  .visit-info img { display: none; }
  footer .footer-nav { width: 100%; }
}

/* Keep the crown in frame when portrait photography fills a wider crop. */
.hero-photo > img, .look-image img { object-position: 50% 5%; }

.map-link { display: inline-block; margin-top: 14px; padding: 3px 0; border-bottom: 1px solid #c6cdff; color: var(--porcelain); font-size: 13px; font-weight: 600; }
.map-link span { margin-left: 5px; }

/* An editorial directory and neighborhood plate in the studio's own palette. */
.location-imprint { color: var(--muted); }
.location-imprint:hover .sample-line { background: var(--accent); }
.profile-caption, .directory-kicker, .map-plate figcaption, .map-caption {
  font: 600 10px/1.5 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.profile-caption { display: flex; gap: 8px; align-items: center; color: var(--detail-ink); margin: 0 0 16px; }
.profile-caption i, .map-caption i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; display: inline-block; }
.team { background: var(--white-panel); border-bottom: 1px solid var(--edge); }
.team-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.team h2 { margin-bottom: 2px; }
#team-explanation { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 18px 0 29px; }
.chair-list { border-top: 1px solid #8995c1; }
.chair-list article { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--edge); }
.chair-id { color: var(--ordinal-ink); font: italic 31px var(--serif); letter-spacing: -.07em; }
.directory-kicker { color: var(--soft-label); font-size: 9px; }
.chair-list h3 { font: 400 clamp(24px, 2.25vw, 37px)/1.15 var(--serif); letter-spacing: -.045em; margin: 6px 0; }
.chair-list p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }

.local-copy .text-link span { margin-left: 8px; display: inline-block; }
.neighborhood { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.2fr); align-items: center; gap: clamp(32px,7vw,120px); background: #edf0fb; }
.local-copy p { max-width: 390px; font: 15px/1.8 var(--sans); color: var(--muted); margin: 0 0 21px; }
.local-copy p strong { font-weight: 600; }
.local-aside { display: block; width: fit-content; color: var(--detail-ink); font-size: 12px; margin-top: 21px; }
.local-aside:hover { text-decoration: underline; }
.map-plate { margin: 0; padding: 16px 18px 11px; border: 1px solid var(--map-line); background: var(--map-paper); color: var(--muted); }
.map-plate figcaption, .map-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.map-plate figcaption { padding-bottom: 12px; }
.map-wrap { container-type: inline-size; overflow: hidden; border-block: 1px solid var(--map-line); }
.map-wrap svg { display: block; width: 100%; height: auto; }
.street-names { font-size: 17px; }
.studio-map-name { font-size: 21px; }
@container (max-width: 440px) {
  .street-names { font-size: 24px; }
  .studio-map-name { font-size: 25px; }
}
.map-caption { padding-top: 11px; font-size: 8px; letter-spacing: .08em; }
.map-caption i { color: var(--accent); margin-right: 4px; }
.contact-link { color: #e5e9ff; margin: 10px 0 0 16px; padding: 9px 0; border-bottom: 1px solid #8995c1; font: 600 13px var(--sans); }
.contact-link span { margin-left: 8px; }
#contact-dialog { max-width: 570px; }
.contact-inner { padding: 38px clamp(23px,4vw,45px) 33px; }
.contact-inner h2 { font-size: clamp(40px,4vw,56px); }
#contact-form { margin: 22px 0 0; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#contact-form label, #chair-field label { display: block; color: var(--ink); font: 600 12px var(--sans); }
#contact-form input, #contact-form textarea { display: block; width: 100%; min-width: 0; margin: 6px 0 15px; border: 1px solid var(--field-line); border-radius: 2px; padding: 11px; background: var(--field-fill); color: var(--ink); font: 14px/1.5 var(--sans); }
#contact-form input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
#contact-review { border-top: 1px solid var(--edge); margin-top: 22px; padding-top: 18px; }
#contact-review h3 { font: 28px var(--serif); margin: 9px 0; }
#inquiry-copy, #inquiry-reply { white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.7 var(--sans); }
#inquiry-reply { color: var(--muted); }
#chair-field label { margin-bottom: 7px; }
@media (min-width: 741px) and (max-width: 960px) {
  .header { gap: 15px; }
  .desktop-nav { gap: 14px; }
}
@media (max-width: 740px) {
  .team-heading { display: block; }
  #team-explanation { margin: 15px 0 20px; }
  .chair-list article { grid-template-columns: 31px 1fr; gap: 7px 13px; }
  .chair-id { font-size: 23px; align-self: start; }

  .neighborhood { grid-template-columns: 1fr; gap: 26px; }
  .map-plate { padding: 10px 10px 8px; }
  .map-caption { font-size: 7px; }
  .contact-link { margin-left: 10px; }
}
@media (max-width: 440px) { .contact-fields { grid-template-columns: 1fr; gap: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes type-arrives { from { transform: translateY(13px); opacity: .32; } to { transform: none; opacity: 1; } }
  @keyframes portrait-arrives { from { transform: scale(1.035); } to { transform: scale(1); } }
  @keyframes panel-arrives { from { transform: translateY(8px); opacity: .7; } to { transform: none; opacity: 1; } }
  .hero-main .eyebrow, .hero-main .lead, .hero-actions { animation: type-arrives .8s cubic-bezier(.2,.7,.25,1) both; }
  .hero-main .lead { animation-delay: .19s; }
  .hero-actions { animation-delay: .19s; }
  .hero-photo > #cover-img { animation: portrait-arrives 1.1s ease-out both; }
  dialog[open] .dialog-inner, .revealed, .menu-board [role="tabpanel"]:not([hidden]) { animation: panel-arrives .58s cubic-bezier(.2,.75,.2,1) both; }
  .button, .visit-top, .local-copy .text-link span { transition: background-color .22s, color .22s, transform .22s; }
  .button:hover .icon, .local-copy .text-link:hover span { transform: translate(2px,-2px); }
  .button .icon { transition: transform .22s; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes line-opens { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .hero-main .line::before, .revealed .line::before { transform-origin: left; animation: line-opens .85s ease-out both; }
}

/* First-visit actions use wide touch targets and plain labels. */
.hero-guide { color: var(--accent); }
.hero-guide span { margin-left: 6px; }
.hero-actions .button, .header .visit-top, .service-tabs button, .arrow { min-height: 44px; }
.arrow { width: 44px; height: 44px; }
.cover-caption { text-align: left; color: white; padding: 0; }
.cover-link { display: block; margin-top: 5px; font: 600 12px var(--sans); }
.cover-caption:hover .cover-link { text-decoration: underline; }
.studio-strip { display: grid; grid-template-columns: repeat(3,1fr); padding: 0 var(--gutter); background: #dce6fb; color: var(--detail-ink); border-block: 1px solid var(--map-line); }
.studio-strip > * { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 78px; text-align: left; }
.studio-strip > * + * { border-left: 1px solid var(--map-line); }
.studio-strip svg { width: 23px; height: 23px; flex: none; }
.studio-strip small, .studio-strip strong { display: block; }
.studio-strip small { font: 600 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.studio-strip strong { font: 400 clamp(16px,1.4vw,22px) var(--serif); margin-top: 2px; }
.studio-strip > *:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.service-guide-link { display: inline-flex; align-items: center; gap: 15px; padding: 0 0 3px; margin-top: 12px; min-height: 44px; color: var(--porcelain); border-bottom: 1px solid #d3dbfd; font: 600 14px var(--sans); }
.services h2 { max-width: 420px; }
.menu-service { grid-template-columns: minmax(0,1fr) auto; }
.service-book { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 12px; width: auto; height: 44px; border-radius: 24px; font: 600 13px var(--sans); }
.menu-service .service-meta { color: #d3dbfd; font-size: 13px; }
.gallery-nav { display: none; }
.look-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; }
.look-actions .button { margin: 0; }
.look-actions .text-link { min-height: 44px; }
.faq .section-intro p { max-width: 330px; font: 15px/1.7 var(--sans); color: var(--muted); }
.faq .section-intro .text-link { min-height: 44px; }
.visit-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 15px 0; border-block: 1px solid #cfd4e6; margin: 18px 0; max-width: 440px; }
.visit-facts dt { color: var(--muted); font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.visit-facts dd { margin: 0; font: 14px/1.55 var(--sans); }
.studio-close { background: #242c59; color: var(--porcelain); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: clamp(32px,4vw,70px); }
.studio-close h2 { margin: 8px 0 0; }
.studio-close h2 em { color: #c6ceff; }
.closing-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.closing-actions .contact-link { margin: 0; }
#guide-dialog { max-width: 530px; }
.guide-inner { padding: 36px clamp(22px,4vw,42px); }
.guide-inner h2 { font-size: clamp(40px,4vw,58px); margin: 17px 0 22px; }
.guide-inner label { font: 600 13px var(--sans); }
#guide-goal { margin-top: 8px; padding: 12px 9px; }
.guide-result { padding: 18px; border-left: 2px solid #9fabe1; background: var(--mist); margin: 2px 0 18px; }
.guide-result h3 { font: 400 30px/1.15 var(--serif); margin: 6px 0 9px; }
.guide-result p { font: 14px/1.65 var(--sans); margin: 6px 0 0; }
#guide-price { font-weight: 600; }
.guide-menu { margin-top: 10px; display: block; min-height: 44px; }
.inspiration-note { border-left: 2px solid #9fabe1; padding: 6px 10px; background: var(--mist); font: 600 13px var(--sans); }
.days-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.days-field legend { font: 600 12px var(--sans); padding: 0; }
.week-nav { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.week-nav button, .gallery-nav button { border: 1px solid var(--edge); border-radius: 50%; width: 44px; height: 44px; color: var(--accent); font-size: 18px; }
.week-nav button { border: 0; }
.week-nav button:disabled, .gallery-nav button:disabled { opacity: .34; cursor: default; }
.open-days { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.open-days label { position: relative; cursor: pointer; }
.open-days input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.open-days span { display: grid; gap: 2px; text-align: center; border: 1px solid var(--field-line); padding: 5px 3px; font-size: 12px; background: var(--field-fill); }
.open-days b { font: 400 21px var(--serif); }
.open-days input:checked + span { color: var(--porcelain); background: var(--accent); border-color: var(--accent); }
.open-days input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
#studio-days { margin-bottom: 10px; }
.time-field { margin: 12px 0 16px; }
.time-options span { min-height: 44px; display: grid; place-items: center; }
.close { width: 44px; height: 44px; }
@media (min-width:741px) and (max-width:930px) {
  .header { padding-inline: 20px; gap: 12px; }
  .desktop-nav { gap: 11px; } .desktop-nav a { font-size: 12px; }
}
@media (max-width:740px) {
  .hero { display: grid; grid-template-areas: "cover"; background: #171c38; min-height: clamp(510px,70svh,640px); }
  .hero-copy,.hero-photo { grid-area: cover; }
  .hero-photo { min-height: 100%; height: auto; }
  .hero-photo::after { inset: 0; background: linear-gradient(180deg,rgba(10,16,38,.24) 0%,rgba(10,16,38,.03) 27%,rgba(10,16,38,.30) 45%,rgba(10,16,38,.91) 100%); }
  .hero-photo > img { object-position: 50% 6%; }
  .hero-copy { isolation: auto; z-index: 2; align-items: flex-end; padding: 0 var(--gutter) 27px; pointer-events: none; }
  .hero-main { color: var(--porcelain); }
  .hero-main .hero-actions > * { pointer-events: auto; }
  .hero .plate-label { display: none; }
  .hero h1 { font-size: clamp(58px,15vw,86px); line-height: .99; margin: 11px 0; }
  .hero h1 em { color: #c6ceff; }
  .hero .lead { color: #f8f9ff; max-width: 36ch; width: auto; font-size: 14px; line-height: 1.55; }
  .hero-actions { gap: 10px 14px; margin-top: 14px; }
  .hero-actions .button { color: #171c38; background: var(--porcelain); }
  .hero-guide { color: white; border-color: #c6cdff; min-height: 44px; }
  .hero-photo figcaption { top: 11px; bottom: auto; left: var(--gutter); right: var(--gutter); align-items: flex-start; gap: 6px; }
  .hero-photo .cover-caption { background: rgba(22,30,63,.65); border-radius: 2px; padding: 7px 11px; }
  .hero-photo .cover-caption .eyebrow { font-size: 8px; }
  .hero-photo #cover-name { font-size: 17px; }
  .hero-photo .cover-link { font-size: 10px; margin-top: 1px; }
  .hero-photo .arrows { gap: 5px; }
  .hero-photo .arrow { background: #10173080; }
  .studio-strip { grid-template-columns: 1fr 1fr; padding: 5px var(--gutter); }
  .studio-strip > * { justify-content: flex-start; gap: 8px; min-height: 58px; }
  .studio-strip strong { font: 600 12px var(--sans); }
  .studio-strip small { font-size: 9px; }
  .studio-strip svg { width: 18px; height: 18px; }
  .studio-strip > :nth-child(2) { padding-left: 10px; }
  .studio-strip > button { grid-column: 1/-1; border-left: 0; border-top: 1px solid var(--map-line); min-height: 44px; justify-content: center; }
  .studio-strip > button span { display: flex; align-items: baseline; gap: 9px; }
  .menu-toggle { width: 44px; height: 44px; }
  .services .section-intro h2 { margin-top: 10px; }
  .service-guide-link { margin-top: 2px; }
  .service-book { padding-inline: 11px; }
  .gallery-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
  .gallery-nav > span { color: var(--muted); font-size: 12px; }
  .gallery-nav button + button { margin-left: 5px; }
  .look-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; gap: 13px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 10px; }
  .look-grid .look { min-width: 0; scroll-snap-align: start; padding: 4px; }
  .look-image { aspect-ratio: 4 / 4.7; }
  .studio-close { flex-direction: column; align-items: start; }
  .guide-inner, .book-inner { padding-top: 26px; }
  #booking-dialog select,#guide-goal,#contact-form input,#contact-form textarea { font-size: 16px; }
  .visit-facts { gap: 8px; }
}

@media (max-width: 740px) {
  .hero-photo .cover-caption { text-align: left; gap: 3px; max-width: 58%; }
  .hero-photo .cover-caption .cover-link { display: none; }
  .hero-photo .cover-caption #cover-name::after { content: " ↗"; font: 12px var(--sans); }
  .hero-photo .cover-caption { min-height: 44px; }
}

/* Midnight ink, periwinkle and glacier blue. */
.header { background: var(--header-fill); border-color: var(--header-line); }
[data-palette="iris"] { --portrait-matte: #8391b9; }
.hero { background: var(--header-fill); }
.hero-copy { background: radial-gradient(ellipse at 95% 105%, #303a70 0%, #20294f 46%, #171e3b 88%); color: #fafbff; }
.hero h1 em { color: #c3cbff; }
.hero .lead { color: #e0e5f9; }
.hero-main .eyebrow, .hero .location-imprint { color: #cbd4f4; }
.hero .sample-line { background: #8799d4; }
.hero .hero-actions .button { background: #d4daff; color: #182048; }
.hero .hero-actions .button:hover { background: #eef0ff; }
.hero .hero-guide { color: #f4f5ff; border-color: #9faad7; }
.studio-strip { background: var(--ice-strip); color: var(--ice-text); border-color: var(--ice-line); }
.services { background: var(--services-fill); color: var(--ink); }
.services h2 em { color: var(--accent); }
.services .section-intro > p, .menu-service p { color: var(--muted); }
.services .service-tabs { border-color: var(--tab-edge); }
.services .service-tabs button { color: var(--tab-ink); }
.services .service-tabs button[aria-selected="true"] { color: var(--tab-active); border-color: var(--tab-line); }
.services .menu-service { border-color: var(--service-line); }
.services .service-guide-link, .services .service-book { color: var(--service-ink); border-color: var(--service-button-edge); }
.services .service-book:hover { background: var(--service-hover); }
.services .sample-note, .services .service-meta { color: var(--service-info); }
.services :focus-visible { outline-color: #5066bf; }
.lookbook { background: var(--white-panel); }
.studio-feature { background: var(--studio-fill); }
.neighborhood { background: var(--local-fill); }
.studio-close { background: #222b55; color: white; }
.studio-close h2 em { color: #c8d0ff; }
@media (max-width: 740px) {
  .hero-copy { background: transparent; }
  .hero-photo::after { background: linear-gradient(180deg,rgba(13,20,48,.29) 0%,rgba(13,20,48,.02) 26%,rgba(13,20,48,.31) 46%,rgba(13,20,48,.94) 100%); }
  .hero-photo .cover-caption { background: rgba(20,29,62,.75); }
  .hero-photo .arrow { background: #1923408c; }
  .hero .lead { color: #f2f4ff; }
}

/* Header controls share one touch-friendly row at every breakpoint. */
.header-actions { display: flex; flex: none; align-items: center; gap: 10px; }
@media (min-width: 741px) and (max-width: 900px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; width: 44px; height: 44px; align-content: center; justify-items: center; gap: 6px; }
  .menu-toggle span { width: 21px; height: 1px; background: var(--ink); }
  #mobile-nav:not([hidden]) { display: grid; position: absolute; top: 100%; left: 0; right: 0; background: var(--header-fill); border-block: 1px solid var(--edge); padding: 10px var(--gutter); }
  #mobile-nav a, #mobile-nav button { font-size: 14px; text-align: left; padding: 13px 0; }
}
@media (max-width: 740px) {
  .header { gap: 4px; }
  .header-actions { gap: 4px; }
  .header .visit-top { margin-left: 0; white-space: nowrap; }
}
@media (max-width: 390px) {
  .header { padding-inline: 12px; }
  .header .brand img { width: clamp(104px, 31vw, 126px); }
}

/* Keep contrast on controls across palettes, including native form controls. */
[data-theme="dark"] .brand img, [data-theme="dark"] .book-brand img { filter: brightness(0) invert(.95); }
[data-theme="dark"] .light { background: #d4deff; color: #151d38; }
[data-theme="dark"] .light:hover { background: #eff2ff; }
[data-theme="dark"] .contact-link { color: #e5e9ff; }
[data-theme="dark"] .services :focus-visible { outline-color: var(--focus-ring); }
[data-theme="dark"] dialog::backdrop { background: #060a17ba; }
[data-theme="dark"] :is(input, textarea)::placeholder { color: #a7b2ce; }
[data-theme="dark"] .hero-copy { background: radial-gradient(ellipse at 95% 105%, #303a70, #20294f 46%, #131930 88%); }

@media (max-width: 740px) {
  [data-theme] .hero-copy { background: transparent; }
}

html[data-theme="dark"] {
  --map-grid: #28324b;
  --map-land: #19223a;
  --map-river: #405f9b;
  --map-shore: #6383ba;
  --map-street: #3e4c67;
  --map-road: #62728d;
  --map-marker-bg: #202d4e;
  --map-pin: #c8d6ff;
  --map-ink: #e3eaff;
  --map-label-bg: #202d4e;
  --map-label-edge: #899abc;
  --map-water-name: #e1e9fc;
  --map-north: #c9d5f6;
}

/* Onyx and Cherry share their component colors; Iris uses the ink-blue base. */
[data-theme="dark"] .hero-main { color: var(--ink); }
html[data-theme="dark"][data-palette="onyx"] {
  --night-base: #101010; --night-panel: #181817; --night-raised: #242321; --night-mist: #302c25;
  --night-line: #514d44; --night-text: #f3f0e9; --night-soft: #c7c3ba; --night-accent: #e0be7b; --night-glow: #34302a;
}
html[data-theme="dark"][data-palette="cherry"] {
  --night-base: #1a1017; --night-panel: #22131c; --night-raised: #30202a; --night-mist: #402634;
  --night-line: #624552; --night-text: #fff1f4; --night-soft: #d7c2ca; --night-accent: #eab2bf; --night-glow: #54293a;
}
html[data-theme="dark"]:not([data-palette="iris"]) {
  --porcelain: var(--night-base); --paper: var(--night-raised); --ink: var(--night-text); --accent: var(--night-accent);
  --muted: var(--night-soft); --edge: var(--night-line); --mist: var(--night-mist);
  --header-fill: var(--night-base); --header-line: var(--night-line);
  --white-panel: var(--night-base); --services-fill: var(--night-panel); --studio-fill: var(--night-raised);
  --local-fill: var(--night-panel); --ice-strip: var(--night-mist); --ice-text: var(--night-text); --ice-line: var(--night-line);
  --field-fill: var(--night-panel); --field-line: color-mix(in srgb,var(--night-soft) 58%,var(--night-panel));
  --detail-ink: var(--night-text); --soft-label: var(--night-soft); --ordinal-ink: var(--night-accent);
  --service-ink: var(--night-accent); --service-info: var(--night-soft); --tab-ink: var(--night-soft);
  --tab-active: var(--night-text); --tab-line: var(--night-accent); --service-line: var(--night-line);
  --service-hover: var(--night-mist); --service-button-edge: var(--field-line); --tab-edge: var(--night-line);
  --focus-ring: var(--night-accent); --button-hover: color-mix(in srgb,var(--night-accent) 75%,white);
  --map-paper: var(--night-raised); --map-line: var(--night-line); --map-land: var(--night-base);
  --map-grid: var(--night-panel); --map-river: color-mix(in srgb,var(--night-accent) 28%,var(--night-base));
  --map-shore: var(--field-line); --map-street: var(--night-line); --map-road: var(--field-line);
  --map-marker-bg: var(--night-panel); --map-pin: var(--night-accent); --map-ink: var(--night-text);
  --map-label-bg: var(--night-panel); --map-label-edge: var(--night-soft); --map-water-name: var(--night-text); --map-north: var(--night-soft);
}
[data-theme="dark"]:not([data-palette="iris"]) .hero-copy { background: radial-gradient(ellipse at 98% 96%,var(--night-glow),var(--night-panel) 47%,var(--night-base) 88%); color: var(--ink); }
[data-theme="dark"]:not([data-palette="iris"]) :is(.hero h1 em,.hero .eyebrow,.hero .location-imprint,.studio-close h2 em) { color: var(--accent); }
[data-theme="dark"]:not([data-palette="iris"]) :is(.hero-main,.hero .hero-guide,.studio-close,.contact-link) { color: var(--ink); }
[data-theme="dark"]:not([data-palette="iris"]) .hero .lead { color: var(--muted); }
[data-theme="dark"]:not([data-palette="iris"]) .hero .sample-line { background: var(--accent); }
[data-theme="dark"]:not([data-palette="iris"]) :is(.hero .hero-actions .button,.light) { color: var(--night-base); background: var(--accent); }
[data-theme="dark"]:not([data-palette="iris"]) :is(.hero .hero-actions .button,.light):hover { background: var(--button-hover); }
[data-theme="dark"]:not([data-palette="iris"]) .studio-close { background: var(--night-mist); }
[data-theme="dark"]:not([data-palette="iris"]) :is(.hero .hero-guide,.text-link,.chair-list,.contact-link,.visit-facts,.guide-result,.inspiration-note) { border-color: var(--field-line); }
[data-theme="dark"]:not([data-palette="iris"]) :is(input,textarea)::placeholder { color: var(--muted); }
[data-theme="dark"]:not([data-palette="iris"]) .hero-photo::after { background: linear-gradient(180deg,transparent 28%,rgba(12,12,12,.55)); }
@media(max-width:740px) {
  [data-theme="dark"]:not([data-palette="iris"]) .hero-copy { background: transparent; }
  [data-theme="dark"]:not([data-palette="iris"]) .hero-photo::after { background: linear-gradient(180deg,rgba(12,12,12,.25),transparent 27%,color-mix(in srgb,var(--night-base) 35%,transparent) 46%,var(--night-base) 100%); }
  [data-theme="dark"]:not([data-palette="iris"]) :is(.hero-photo .cover-caption,.hero-photo .arrow) { background: color-mix(in srgb,var(--night-base) 76%,transparent); }
}

/* Keep the picker open while visitors compare the three palettes. */
.appearance-tools { position: relative; display: flex; align-items: center; border: 1px solid var(--edge); border-radius: 24px; }
.palette-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; border-radius: 23px; padding: 0 12px; font: 600 12px var(--sans); color: var(--ink); }
.palette-button svg { width: 18px; height: 18px; }
.palette-button:hover, .palette-button[aria-expanded="true"] { background: var(--mist); }
.palette-panel { position: absolute; inset: calc(100% + 12px) 0 auto auto; z-index: 8; width: min(290px, calc(100vw - 24px)); max-height: calc(100dvh - 100px); overflow: auto; overscroll-behavior: contain; background: var(--header-fill); color: var(--ink); border: 1px solid var(--edge); padding: 17px; box-shadow: 0 12px 32px #0003; }
.palette-panel fieldset { margin: 0; padding: 0; min-width: 0; border: 0; }
.palette-panel legend { padding: 0; font: 400 26px/1.15 var(--serif); }
.palette-panel fieldset > p { margin: 5px 0 13px; color: var(--muted); font-size: 13px; }
.palette-option { display: grid; grid-template-columns: 40px 1fr 16px; align-items: center; gap: 10px; min-height: 50px; padding: 6px 5px; border-top: 1px solid var(--edge); cursor: pointer; position: relative; }
.palette-option b,.palette-option small { display: block; }
.palette-option b { font: 600 13px var(--sans); }
.palette-option small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.palette-option i { visibility: hidden; font: 600 15px var(--sans); color: var(--accent); }
.palette-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.palette-option:has(input:checked) i { visibility: visible; }
.palette-option:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.palette-option:hover { background: var(--mist); }
.palette-option .swatches { height: 25px; width: 40px; border-radius: 20px; border: 1px solid #ffffff40; background: linear-gradient(110deg,var(--chip-surface) 0 58%,var(--chip-accent) 59%); }
[data-swatch="iris"] { --chip-surface:#192140; --chip-accent:#bbc7ff; }
[data-swatch="onyx"] { --chip-surface:#101010; --chip-accent:#e0be7b; }
[data-swatch="cherry"] { --chip-surface:#301c2a; --chip-accent:#eab2bf; }
#palette-done { display: block; margin: 9px 0 0 auto; min-height: 40px; }
@media(max-width:1180px) {
  .palette-button span { display: none; }
  .palette-button { padding: 0; }
}
@media(max-width:740px) {
  .appearance-tools { position: static; }
  .palette-panel { inset: calc(100% + 4px) 12px auto auto; }
}
@media(max-width:390px) {
  .header .brand img { width: clamp(87px,27vw,107px); }
}
@media(max-width:370px) {
  .header .visit-top { gap: 0; padding-inline: 10px; }
  .visit-top .icon,.book-now-word { display:none; }
}
@media(min-width:1000px) {
  .appearance-tools { position: static; }
  .palette-panel { inset: 100% 0 auto; width: 100%; padding: 15px var(--gutter) 17px; border-inline: 0; }
  .palette-panel fieldset { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .palette-panel legend { margin: 0 0 9px; font-size: 21px; }
  .palette-panel fieldset > p { display: none; }
  .palette-option { grid-template-columns: 26px 1fr 13px; gap: 7px; border: 1px solid var(--edge); padding: 7px; }
  .palette-option:has(input:checked) { border-color: var(--accent); }
  .palette-option .swatches { width: 25px; height: 25px; }
  #palette-done { position: absolute; top: 4px; right: var(--gutter); margin: 0; }
}

/* Each headline line has its own mask, with room for the italic descenders. */
.title-line { display: block; clip-path: inset(-10% -8% -16% -6%); }
.title-line > * { display: block; }
#cover-out { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes headline-rise {
    from { transform: translateY(.74em); opacity: .12; }
    to { transform: translateY(0); opacity: 1; }
  }
  .title-line > * { animation: headline-rise .86s cubic-bezier(.17,.82,.22,1) .04s both; }
  .title-line + .title-line > * { animation-delay: .17s; }

  @keyframes print-reveal {
    from { clip-path: inset(0 0 13% 0); transform: translateY(8px); opacity: .74; }
    to { clip-path: inset(0); transform: none; opacity: 1; }
  }
  .look-in-view .look-image { animation: print-reveal .78s cubic-bezier(.22,.76,.22,1) both; }
  @media(min-width:741px) {
    .look-in-view:nth-child(3n+2) .look-image { animation-delay: .08s; }
    .look-in-view:nth-child(3n) .look-image { animation-delay: .15s; }
  }
  .look:focus-visible .look-image { animation: none; }
  .look-name-enter { display: inline-block; animation: headline-rise .43s cubic-bezier(.16,.75,.22,1); }
  .palette-panel:not([hidden]), #mobile-nav:not([hidden]) { animation: panel-arrives .26s cubic-bezier(.2,.8,.24,1) both; }
  .palette-option { transition: background-color .2s, border-color .2s; }
  .palette-option .swatches { transition: transform .22s; }
  .palette-option:hover .swatches { transform: translateX(2px); }
  .studio-strip, .services, .lookbook, .team, .studio-feature, .neighborhood, .studio-close, .header {
    transition: background-color .3s ease-out, color .25s ease-out, border-color .25s;
  }
  #booking-review:not([hidden]), #guide-result:not([hidden]), #contact-review:not([hidden]) { animation: panel-arrives .34s ease-out both; }
}