/* Maison Veyra styles. GENERATED by studio/build-veyra.mjs from studio/veyra/css/*.css. Edit a partial, then rebuild. Reduced-motion blocks are mirrored for the host's Reduce motion switch (mirrorMotionSwitch in studio/veyra/styles.mjs). */
/* base.css: Tokens, reset, typography, shared components (buttons, links, notes, FAQ, editorial rows, cards, page heads, spec lists), header, menu and footer. Owner: P5.
   Source partial. The build concatenates the partials into maison-veyra/style.css; never edit style.css. */
:root{--ink:#090b0d;--paper:#f1eee7;--silver:#b6b6ab;--metal:#bda27a;--line:rgba(241,238,231,.19);--dark-line:rgba(9,11,13,.2);--gutter:clamp(22px,5vw,88px);color-scheme:dark}
/* Revision tokens (2026-09-24): the minimum type sizes, secondary text colours that pass 4.5:1, and target sizes. */
:root{--text-min:12px;--label-min:13px;--muted-on-dark:#a9aba3;--muted-on-light:#5d5f5a;--target-min:24px;--touch-min:44px}
/* Cross-document view transitions (item 24): the opt-in is an inline <style> right after <meta charset> in
   layout.mjs (in this shared stylesheet it arrived too late, and every navigation threw "ViewTransition opt-in
   disabled"). Under reduced motion the pseudo-elements' animation is killed below. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Jost,Arial,sans-serif;font-size:16px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased}
body:has(dialog[open]){overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,select,input,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
button{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--metal);outline-offset:5px}
img{display:block;max-width:100%;height:auto}
figure,p,h1,h2,h3{margin:0}
button{border:0}
h1,h2,h3{font-weight:400;line-height:1.04;letter-spacing:-.045em}
h1{font-size:clamp(62px,7.8vw,128px)}
h2{font-size:clamp(42px,4.7vw,78px)}
h3{font-size:30px}
em{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400}
p{font-size:17px}
p+p{margin-top:20px}
::selection{background:var(--metal);color:var(--ink)}
[hidden]{display:none!important}
.skip{position:fixed;left:16px;top:-100px;z-index:2000;background:var(--paper);color:var(--ink);padding:12px}
.skip:focus{top:12px}
.wrap{padding:104px var(--gutter)}
.light-section,.light-page{background:var(--paper);color:var(--ink);--line:var(--dark-line);color-scheme:light}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;line-height:1.5;margin-bottom:25px}
.fine{font-size:12px;line-height:1.65;opacity:.68}
.lede{font-size:clamp(19px,1.6vw,25px);line-height:1.5}
.button,.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:30px}
.button{border:1px solid transparent;background:var(--paper);color:var(--ink);border-radius:50px;padding:16px 24px;font-size:13px;line-height:1.4;transition:background .2s,transform .2s,box-shadow .2s;min-height:52px}
.button:hover{background:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.light-section .button,.light-page .button,.dark-button{background:var(--ink);color:var(--paper)}
.light-section .button:hover,.light-page .button:hover,.dark-button:hover{background:#292b2c;box-shadow:0 10px 26px rgba(0,0,0,.16)}
.button:disabled{opacity:.62;transform:none;box-shadow:none}
.button.full{width:100%}
.text-link{padding:12px 0;border-bottom:1px solid currentColor;font-size:13px;transition:gap .2s,opacity .2s}
.text-link:hover{gap:36px}
.text-link:hover span{transform:translate(3px,-3px)}
.text-link span{transition:transform .2s}
.text-button,.small-link{background:none;text-decoration:underline;text-underline-offset:4px;padding:10px 0;font-size:13px}
.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:24px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px}
.section-heading>p{max-width:380px;opacity:.72}
.concept-note{display:flex;align-items:start;gap:15px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.concept-note p{font-size:12px;line-height:1.7;max-width:900px}
.tiny-v{font:24px 'Cormorant Garamond',serif}
.concept-note:where(main>*){padding:28px var(--gutter)}
.disclosure{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 18px;text-align:center;background:#171b1d;color:#d3d2c9;font-size:12px;letter-spacing:.03em;min-height:29px;padding:7px 20px;line-height:1.5}
.disclosure p{margin:0}
.disclosure-about{display:inline-flex;align-items:center;min-height:var(--target-min);background:none;text-decoration:underline;text-underline-offset:3px;color:inherit;font-size:12px;padding:2px 0;white-space:nowrap}
/* item 11: the panel opened from the disclosure bar. Same modal pattern as .menu-dialog, including the V1
   Escape fix (handled and stopped in app.js) so a page that frames this site does not also act on the key. */
.about-dialog{border:0;background:var(--paper);color:var(--ink);border-radius:0;padding:0;margin:auto;width:min(620px,92vw);max-height:min(720px,86vh);overflow-y:auto}
.about-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.about-panel-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px clamp(24px,5vw,44px) 0}
.about-panel-top .eyebrow{margin:0}
.about-panel-body{padding:22px clamp(24px,5vw,44px) 6px}
.about-panel-body h2{font-size:clamp(26px,4vw,36px);letter-spacing:-.03em;line-height:1.15;margin-bottom:20px}
.about-panel-body>p{font-size:14px;line-height:1.7;opacity:.82;margin-bottom:6px}
.about-panel-body section{padding:16px 0}
.about-panel-body section+section{border-top:1px solid var(--dark-line)}
.about-panel-body h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.about-panel-body section p{font-size:14px;line-height:1.7;opacity:.78;margin:0}
.about-panel-links{display:flex;gap:24px;padding:18px clamp(24px,5vw,44px) 30px;border-top:1px solid var(--dark-line)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:20px var(--gutter);position:sticky;top:0;z-index:100;background:rgba(9,11,13,.94);border-bottom:1px solid var(--line);color:var(--paper);backdrop-filter:blur(15px);min-height:85px;view-transition-name:site-header}
.wordmark{display:flex;align-items:center;gap:12px;line-height:1.06;font-size:8px;letter-spacing:.31em;min-width:133px}
.wordmark b{font-size:20px;letter-spacing:.23em;font-weight:400}
.monogram{font-family:'Cormorant Garamond',serif;font-size:47px;line-height:1;font-style:italic}
.desktop-nav{display:flex;align-items:center;gap:clamp(20px,2.8vw,46px);font-size:13px}
.desktop-nav a{display:inline-block;padding:6px 0;opacity:.75;position:relative;transition:opacity .2s}
.desktop-nav a:hover,.desktop-nav a[aria-current]{opacity:1}
.desktop-nav a:after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:currentColor;transition:width .25s}
.desktop-nav a:hover:after{width:100%}
.desktop-nav a[aria-current]:after{width:16px}
.header-actions{display:flex;align-items:center;gap:25px;font-size:13px}
.bag-link{white-space:nowrap;display:inline-flex;align-items:center;min-height:24px}
.bag-link span{font-size:12px;display:inline-grid;place-items:center;min-width:21px;height:21px;margin-left:4px;border:1px solid var(--line);border-radius:50%;transition:border-color .2s}
.bag-link:hover span{border-color:currentColor}
.header-config{border:1px solid #666765;border-radius:50px;padding:10px 17px;display:flex;gap:24px;align-items:center;white-space:nowrap;transition:background .2s,color .2s}
.header-config:hover{background:var(--paper);color:var(--ink)}
.menu-trigger{display:none;background:none;padding:8px 0;align-items:center;gap:12px;font-size:13px;min-height:24px}
.menu-trigger span{font-size:17px}
.menu-dialog{border:0;background:var(--paper);color:var(--ink);inset:0 0 0 auto;padding:35px clamp(24px,5vw,65px);margin:0;width:min(660px,100%);height:100dvh;max-height:none;max-width:none;overflow-y:auto}
.menu-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.menu-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:50px}
.menu-top .eyebrow{margin:0}
.close-button{background:none;font-size:13px;padding:12px}
.menu-dialog nav{display:flex;flex-direction:column}
.menu-dialog nav>a{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--dark-line);padding:22px 0;font-size:clamp(32px,6vw,58px);line-height:1.2;letter-spacing:-.04em}
.menu-dialog nav small{font-size:12px;letter-spacing:.1em}
.menu-dialog nav>a>span{margin-left:auto;font-size:24px}
.menu-dialog nav>.menu-config{font-size:22px}
.menu-dialog>p{font-size:12px;margin-top:48px;opacity:.6}
.watch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* item 21: an edge-lit field per model (documented finish/accent colours only, nothing invented) so the three
   renders read as distinct even before P6's transparent re-renders land, plus a hover/focus crossfade to the
   wrist photograph. isolation:isolate keeps the glow contained to this card's own stacking context. */
.watch-card-image{display:block;position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 18%,#33363a,#131517 74%);aspect-ratio:4/5;overflow:hidden;border:1px solid #313437;transition:border-color .25s,transform .4s cubic-bezier(.2,.65,.2,1)}
.watch-card-image:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 50px rgba(189,162,122,.14),inset 0 1px 0 rgba(241,238,231,.14);pointer-events:none}
.watch-card[data-model="vector"] .watch-card-image{background:radial-gradient(ellipse at 50% 18%,#3a342c,#151210 74%)}
.watch-card[data-model="vector"] .watch-card-image:after{box-shadow:inset 0 0 50px rgba(236,110,42,.22),inset 0 1px 0 rgba(241,238,231,.16)}
.watch-card[data-model="nocturne"] .watch-card-image:after{box-shadow:inset 0 0 50px rgba(189,162,122,.24),inset 0 1px 0 rgba(241,238,231,.16)}
.watch-card-image:hover,.watch-card-image:focus-visible{border-color:#4a4d47;transform:translateY(-3px)}
.watch-card-render{height:100%;width:100%;object-fit:contain;transition:transform .7s cubic-bezier(.2,.65,.2,1)}
.watch-card-image:hover .watch-card-render,.watch-card-image:focus-visible .watch-card-render{transform:scale(1.06)}
.watch-card-wrist{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.watch-card-image:hover .watch-card-wrist,.watch-card-image:focus-visible .watch-card-wrist{opacity:1}
/* Names the finish the Nocturne photograph shows (mini-round item 8). Hidden, not just transparent, when the
   photograph is not showing, so it is never read or measured as invisible text. */
.watch-card-note{position:absolute;left:22px;bottom:18px;z-index:1;padding:5px 9px;background:#131517;color:var(--paper);font-size:12px;letter-spacing:.06em;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.watch-card-image:hover .watch-card-note,.watch-card-image:focus-visible .watch-card-note{opacity:1;visibility:visible}
/* Without hover the photograph never shows, so it is not drawn and, being lazy, never fetched (mini-round item 6). */
@media(hover:none){.watch-card-wrist,.watch-card-note{display:none}}
/* Explicit paper colour, not inherited: this card's own field is always a dark gradient (see .watch-card-image
   above) regardless of whether the section around the card is light or dark, so relying on the ambient
   inherited text colour breaks the moment a caller places card() inside a light-section (product pages' related
   models do exactly that, which is what surfaced this as a real 1.6:1 contrast failure, not a hypothetical one). */
.model-number{position:absolute;top:22px;left:22px;font-size:12px;letter-spacing:.14em;z-index:1;color:var(--paper)}
.round-arrow{position:absolute;bottom:22px;right:22px;border:1px solid #646866;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-size:18px;z-index:1;color:var(--paper);transition:background .2s,color .2s}
.watch-card-image:hover .round-arrow,.watch-card-image:focus-visible .round-arrow{background:var(--paper);color:var(--ink)}
.watch-card-copy{display:flex;justify-content:space-between;align-items:start;gap:15px;padding-top:25px}
.watch-card-copy .eyebrow{font-size:12px;margin-bottom:8px}
.watch-card h3{font:38px 'Cormorant Garamond',serif;letter-spacing:-.025em;line-height:1.2;margin-bottom:7px}
.watch-card-copy p:not(.eyebrow){font-size:12px;opacity:.65}
.card-price{white-space:nowrap;font-size:12px!important;padding-top:4px}
.editorial{display:grid;grid-template-columns:1.15fr 1fr;min-height:620px;background:#151819}
.editorial.reverse{grid-template-columns:1fr 1.15fr}
.editorial.reverse .editorial-image{order:2}
.editorial-image{min-height:620px;overflow:hidden}
.editorial-image img{width:100%;height:100%;object-fit:cover}
.editorial-copy{padding:90px clamp(30px,6vw,105px);align-self:center}
.editorial-copy>p:not(.eyebrow){font-size:16px;line-height:1.8;opacity:.65;margin-top:30px;max-width:400px}
.editorial-copy .text-link{margin-top:30px}
.faq-section{display:grid;grid-template-columns:1fr 1.2fr;gap:12%}
.faq-section>div:first-child>p:not(.eyebrow){margin-top:30px;max-width:360px;opacity:.7}
.faq-section>div:first-child>.button{margin-top:28px}
.faqs details{border-top:1px solid var(--line)}
.faqs details:last-child{border-bottom:1px solid var(--line)}
.faqs summary{cursor:pointer;list-style:none;padding:25px 0;display:flex;justify-content:space-between;gap:30px;align-items:center;font-size:17px;line-height:1.4}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary>span{font-size:22px;flex-shrink:0;transition:transform .2s}
.faqs details[open] summary>span{transform:rotate(45deg)}
.faqs details>div{padding:0 30px 25px 0}
.faqs details>div p{font-size:15px;opacity:.7;line-height:1.8}
.site-footer{background:var(--ink);color:var(--paper);padding:95px var(--gutter) 30px;--line:rgba(241,238,231,.19)}
.footer-top{display:flex;justify-content:space-between;gap:50px}
.footer-heading{font-size:clamp(58px,7vw,115px);line-height:.97;letter-spacing:-.06em}
.footer-top .button{margin-top:35px;background:var(--paper);color:var(--ink)}
.footer-nav{display:flex;gap:90px;padding-top:12px}
.footer-nav h2{font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:25px;color:var(--muted-on-dark)}
.footer-nav a{display:flex;align-items:center;min-height:24px;font-size:13px;margin-bottom:11px;opacity:.75;transition:opacity .2s}
.footer-nav a:hover{opacity:1}
.footer-brand{font-size:clamp(100px,23.1vw,380px);line-height:.78;letter-spacing:.03em;text-align:center;font-weight:300;padding-top:130px;padding-bottom:35px;border-bottom:1px solid var(--line);user-select:none}
.footer-bottom{display:flex;justify-content:space-between;gap:60px;padding-top:28px}
.footer-bottom>p{max-width:610px;color:var(--muted-on-dark);font-size:12px}
.footer-bottom>div{display:flex;gap:24px;align-items:center;font-size:13px;white-space:nowrap;color:var(--muted-on-dark)}
.footer-bottom>div a{display:inline-flex;align-items:center;min-height:24px}
.plain-link>span{display:none}
.page-head{padding-top:90px;padding-bottom:72px}
.page-head h1{max-width:1180px}
.page-head .lede{margin-top:38px;max-width:690px;color:var(--silver)}
.light-page .page-head .lede{color:#646663}
.product-description{display:grid;grid-template-columns:1fr 1fr;gap:13%;align-items:start}
.product-description .lede{margin-top:35px;font-size:19px;opacity:.7}
.spec-list{margin:0}
.spec-list>div{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px;border-top:1px solid var(--line);padding:19px 0}
.spec-list dt{font-size:12px;color:var(--muted-on-light)}
.spec-list dd{font-size:13px;margin:0}
.spec-list>div:last-child{border-bottom:1px solid var(--line)}
.status{font-size:12px;line-height:1.7;margin-top:18px;overflow-wrap:anywhere}
.three-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:55px}
.three-notes article{border-top:1px solid var(--line);padding-top:20px}
.three-notes article>span{font-size:12px;opacity:.7}
.three-notes h3{font-size:25px;margin-top:28px;margin-bottom:20px}
.three-notes p{font-size:14px;line-height:1.8;opacity:.68}
.three-notes .text-link{margin-top:18px;font-size:13px}
.wide-image{position:relative;max-height:760px;overflow:hidden}
.wide-image img{width:100%;height:clamp(400px,49vw,740px);object-fit:cover}
/* Integration: the caption sits on its own dark label, so it reads on light photographs too (white text with only a
   shadow measured about 1.5:1 on the Maison material study). */
.wide-image figcaption{position:absolute;bottom:25px;left:var(--gutter);max-width:calc(100% - 2 * var(--gutter));font-size:12px;line-height:1.5;color:#fff;background:#090b0dd9;padding:5px 10px}
@keyframes pictureIn{from{opacity:.5;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@media(min-width:1600px){
  .watch-card-copy{padding-top:32px}
  .watch-card h3{font-size:44px}
}
@media(max-width:1100px){
  .desktop-nav{gap:20px}
  .header-config{display:none}
  .header-actions{gap:24px}
  .site-header{padding-top:17px;padding-bottom:17px}
  .watch-card-copy{display:block}
  .card-price{margin-top:15px}
  .watch-grid{gap:16px}
  .editorial{grid-template-columns:1fr 1fr;min-height:520px}
  .editorial-image{min-height:520px}
  .editorial-copy{padding:70px 40px}
  .footer-nav{gap:45px}
  .footer-bottom{gap:30px}
  .footer-bottom>div{flex-wrap:wrap;max-width:300px}
  .three-notes{gap:30px}
}
@media(max-width:800px){
  .wrap{padding:75px var(--gutter)}
  .desktop-nav{display:none}
  .menu-trigger{display:flex}
  .site-header{min-height:77px}
  .wordmark{min-width:unset}
  .header-actions{gap:22px}
  .watch-grid{grid-template-columns:1fr 1fr}
  .watch-card:last-child{grid-column:1/-1;width:calc(50% - 8px);margin:25px auto 0}
  .watch-card h3{font-size:38px}
  .editorial,.editorial.reverse{grid-template-columns:1fr 1fr}
  .editorial-copy{padding:55px 28px}
  .editorial-copy h2{font-size:43px}
  .editorial-image{min-height:540px}
  .section-heading{align-items:start;gap:25px}
  .section-heading>p{font-size:14px;max-width:300px}
  .faq-section{grid-template-columns:1fr;gap:42px}
  .faqs summary{font-size:16px}
  .footer-top{gap:40px}
  .footer-nav{gap:25px}
  .footer-nav a{font-size:13px}
  .footer-heading{font-size:70px}
  .footer-top .button{font-size:13px;padding:14px 20px}
  .footer-brand{padding-top:95px;padding-bottom:25px}
  .footer-bottom{display:block}
  .footer-bottom>div{max-width:none;margin-top:25px}
  .page-head{padding-top:70px;padding-bottom:55px}
  .page-head h1{font-size:78px}
  .product-description{gap:8%}
  .product-description h2{font-size:45px}
  .spec-list>div{grid-template-columns:1fr;gap:6px}
  .three-notes h3{font-size:23px}
  .three-notes p{font-size:13px}
}
@media(max-width:580px){
  :root{--gutter:22px}
  .disclosure{padding:7px 15px;min-height:27px;letter-spacing:.02em;gap:3px 14px}
  .disclosure-about{font-size:12px}
  .site-header{padding:15px 22px;min-height:71px}
  .wordmark{font-size:6px;gap:8px}
  .wordmark b{font-size:17px}
  .monogram{font-size:39px}
  .header-actions{gap:20px;font-size:13px}
  .menu-trigger{font-size:13px;gap:9px}
  .menu-trigger span{font-size:15px}
  .wrap{padding-top:65px;padding-bottom:65px}
  .eyebrow{margin-bottom:20px}
  h2{font-size:48px}
  p{font-size:15px}
  .button{min-height:47px;padding:14px 21px;font-size:13px}
  .section-heading{display:block;margin-bottom:35px}
  .section-heading>.text-link{margin-top:25px}
  .section-heading>p{margin-top:25px;max-width:none}
  .watch-grid{grid-template-columns:1fr;gap:40px}
  .watch-card:last-child{grid-column:auto;width:auto;margin:0}
  .watch-card-image{aspect-ratio:1.03}
  .watch-card-copy{display:flex;padding-top:21px}
  .watch-card h3{font-size:38px}
  .watch-card-copy p:not(.eyebrow){font-size:12px}
  .watch-card-copy .card-price{margin-top:0;padding-top:3px;font-size:12px!important}
  .model-number{font-size:12px;top:18px;left:18px}
  .editorial,.editorial.reverse{grid-template-columns:1fr}
  .editorial.reverse .editorial-image{order:0}
  .editorial-image{min-height:0;height:390px}
  .editorial-copy{padding:55px 22px 65px}
  .editorial-copy h2{font-size:51px}
  .editorial-copy>p:not(.eyebrow){font-size:14px;max-width:none;margin-top:25px}
  .faq-section{gap:35px}
  .faqs summary{font-size:15px;padding:21px 0}
  .faqs details>div p{font-size:13px}
  .site-footer{padding:65px 22px 25px}
  .footer-top{display:block}
  .footer-heading{font-size:79px}
  .footer-nav{margin-top:60px;gap:50px}
  .footer-nav h2{margin-bottom:20px}
  .footer-nav a{font-size:13px}
  .footer-brand{font-size:23vw;padding-top:65px;padding-bottom:25px}
  .footer-bottom{padding-top:22px}
  .footer-bottom>p{line-height:1.7}
  .footer-bottom>div{gap:24px;margin-top:25px}
  .footer-bottom>div>span{width:100%;margin-top:-10px}
  .page-head{padding-top:60px;padding-bottom:48px}
  .page-head h1{font-size:60px;letter-spacing:-.05em}
  .page-head .lede{font-size:16px;line-height:1.7;margin-top:28px}
  .product-description{grid-template-columns:1fr;gap:40px}
  .product-description h2{font-size:48px}
  .product-description .lede{font-size:16px;margin-top:25px}
  .spec-list>div{grid-template-columns:.85fr 1.15fr;gap:20px;padding:17px 0}
  .spec-list dd{font-size:12px}
  .three-notes{grid-template-columns:1fr;gap:35px}
  .three-notes h3{margin-top:17px;font-size:26px;margin-bottom:17px}
  .three-notes p{font-size:14px}
  .wide-image img{height:400px}
  .wide-image figcaption{font-size:12px;left:22px;right:22px;bottom:18px}
}
@media(max-width:350px){
  :root{--gutter:17px}
  .site-header{padding-left:17px;padding-right:17px}
  .header-actions{gap:15px}
  .page-head h1{font-size:52px}
  .footer-nav{gap:30px}
  .watch-card-copy{display:block}
  .card-price{margin-top:12px!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  /* The view-transition pseudo-elements live outside the regular tree, so the universal rule above does not
     reach them (item 24): kill their animation explicitly instead of disabling @view-transition itself. */
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* motion switch: copy of the block above, for html[data-motion="reduce"] */
html:where([data-motion="reduce"]){scroll-behavior:auto}
  :where(html[data-motion="reduce"]),:where(html[data-motion="reduce"]) *,:where(html[data-motion="reduce"]):before,:where(html[data-motion="reduce"]) *:before,:where(html[data-motion="reduce"]):after,:where(html[data-motion="reduce"]) *:after{animation:none!important;transition:none!important}
  /* The view-transition pseudo-elements live outside the regular tree, so the universal rule above does not
     reach them (item 24): kill their animation explicitly instead of disabling @view-transition itself. */
  :where(html[data-motion="reduce"])::view-transition-group(*),:where(html[data-motion="reduce"])::view-transition-old(*),:where(html[data-motion="reduce"])::view-transition-new(*){animation:none!important}
/* end motion switch copy */
@media(max-width:1100px){
  .header-config{display:inline-flex;padding:9px 12px;gap:9px;font-size:13px}
}
@media(max-width:580px){
  .site-header{gap:10px;padding-right:18px;padding-left:18px}
  .header-actions{gap:12px}
  .header-config{display:inline-flex;padding:8px 10px;font-size:13px;gap:6px}
  .header-config>span{display:none}
}
/* Item 16: every control at least 24x24 always (set above); at least 44x44 under a coarse pointer. A short
   utility link (Privacy, Terms) needs the width bump too, not just height, or its own tap target stays a
   38px-wide sliver even once it is 44 tall. */
@media(hover:none) and (pointer:coarse){
  .bag-link,.menu-trigger,.header-config,.footer-nav a,.desktop-nav a,.close-button,.disclosure-about,.wordmark{min-height:var(--touch-min)}
  .footer-bottom>div a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-min);min-width:var(--touch-min)}
}
/* Item 41: a small cursor label over a ready 3D stage ("Explore" / "Drag"). Purely decorative: aria-hidden
   already excludes it from the a11y kit's text-size scan (see research/veyra-kit/a11y.mjs). cursor.js hides it
   on touch devices and never changes the canvas's own cursor. */
.cursor-label{position:fixed;left:0;top:0;z-index:500;pointer-events:none;background:var(--ink);color:var(--paper);font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:7px 14px;border-radius:50px;white-space:nowrap}
/* Item 41: richer hover states for cards, buttons and text links (buttons and text-link hover rules are above). */
.watch-card-copy h3 a{transition:opacity .2s}
.watch-card-copy h3 a:hover{opacity:.68}
/* Sample delivery, returns and warranty block: servicePolicy() in studio/veyra/shared.mjs. */
.service-policy{border-top:1px solid var(--line);padding-top:22px;margin-top:28px}
.service-policy>.eyebrow{margin-bottom:10px}
.service-policy h2,.service-policy h3{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin-bottom:14px}
.service-policy dl{margin:0;display:grid;gap:12px}
.service-policy dl>div{display:grid;grid-template-columns:minmax(96px,.4fr) 1fr;gap:14px}
.service-policy dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.service-policy dd{margin:0;font-size:13px;line-height:1.6;opacity:.82}
.service-policy>.fine{margin-top:14px}
/* Integration (ruling c), phones: the bar is one row, the required line on the left and "About" on the right (its
   accessible name stays "About this concept"). It took 106 px of a 375 x 812 first screen as three rows; one row gives
   that height back to the watch and the headline. */
@media(max-width:580px){
  .disclosure{flex-wrap:nowrap;justify-content:space-between;text-align:left;gap:12px;padding:6px 14px}
  .disclosure p{flex:1 1 auto;min-width:0}
  .disclosure-about{flex:none;min-width:var(--touch-min);justify-content:center}
  .disclosure-about .about-long{display:none}
}
/* Integration (fix 9), touch screens: the tablet header links ("Maison" was 39 px wide) and the About panel's Privacy
   and Terms links (25 px tall) reach 44 x 44. */
@media(hover:none) and (pointer:coarse){
  .desktop-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch-min)}
  .about-dialog .plain-link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-min);min-width:var(--touch-min)}
}
/* stage.css: The 3D stage holder, its still, loading line and the shared view controls (home, product, configurator). Owner: P2.
   Source partial. The build concatenates the partials into maison-veyra/style.css; never edit style.css. */
.watch-scene{position:relative;min-height:620px;background:transparent;overflow:hidden;touch-action:pan-y}
.watch-scene canvas{width:100%;height:100%;display:block;position:absolute;inset:0;touch-action:pan-y}
/* Until every render ships with a transparent background (P6), lighten-blend the still against the dark stage
   so its own dark rectangle disappears instead of showing as a visible box. */
.watch-fallback{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
/* z-index: the note is drawn above the canvas, so a strap that reaches it never covers letters (phones). */
.scene-loading{position:absolute;bottom:22px;left:0;right:0;z-index:2;text-align:center;letter-spacing:.15em;text-transform:uppercase;font-size:12px;opacity:.6;pointer-events:none}
.watch-tools{padding:10px 25px 18px;text-align:center}
.view-buttons{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.view-buttons button{border:1px solid #43484a;background:transparent;padding:12px 16px;border-radius:30px;font-size:13px;color:var(--paper);min-height:24px}
.view-buttons button:hover,.view-buttons button[aria-pressed=true]{border-color:var(--paper);background:var(--paper);color:var(--ink)}
.watch-tools>.fine{font-size:12px;margin-top:10px}
.explode-label{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:16px;font-size:12px;margin-top:14px}
.explode-label input{width:170px;accent-color:var(--metal);height:24px}
.explode-label>span{font-size:12px;opacity:.55}
@media(max-width:580px){
  .watch-tools{padding:8px 15px 20px}
  .view-buttons{gap:6px}
  .view-buttons button{padding:11px 14px;font-size:13px}
  .explode-label{gap:10px;font-size:12px;margin-top:12px}
  .explode-label input{width:130px}
  .watch-tools>.fine{font-size:12px}
}
/* Real control labels, not decorative marks: keep every stage control at the button/target minimums
   regardless of breakpoint, and grow to the touch minimum on coarse pointers. */
@media(hover:none) and (pointer:coarse){
  .view-buttons button{min-height:44px;min-width:44px}
  .explode-label input{height:44px}
}
/* Persistent inspection entry and a longer construction chapter. */
.inspect-trigger{background:transparent;color:inherit}
.watch-tools .inspect-trigger{margin-top:8px}
/* home.css: Home page: the watch story, stage, chapters and the home-only sections below it. Owner: P1.
   Source partial. The build concatenates the partials into maison-veyra/style.css; never edit style.css. */
.watch-story{position:relative}
.watch-stage{position:sticky;top:85px;height:calc(100svh - 85px);margin-bottom:calc(-100svh + 85px);overflow:hidden;background:radial-gradient(ellipse at 73% 47%,#25282a 0,#111416 33%,#090b0d 70%)}
.watch-stage .watch-scene{position:absolute;inset:0 0 0 39%;height:100%;min-height:0}
/* Item 40: bottom is offset well past 24px on purpose. .watch-stage's height assumes an 85px header (kept as is:
   the frozen 3D scene reads that same value to drive scroll progress, so it must not change here), but the real
   header runs 124 to 128px, leaving the stage 39 to 43px taller than the viewport at desktop and tablet widths.
   68px clears that with a margin on both, confirmed against the measured header heights, without touching the
   stage's own box. */
.stage-index{position:absolute;bottom:68px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em;color:var(--silver);pointer-events:none}
.story-chapters{position:relative;pointer-events:none}
.story-chapter{min-height:90svh;display:flex;align-items:center;width:47%;padding:9vh 0 11vh var(--gutter);pointer-events:none}
.story-chapter>div{pointer-events:auto}
/* Items 12/28: stills for the construction and capabilities chapters, shown only under reduced motion (below),
   when the live 3D pose animation is skipped and the construction chapter has no other image. */
.story-still{display:none}
.story-chapter h1{font-size:clamp(52px,5.1vw,86px);line-height:.99;letter-spacing:-.052em}
.story-chapter h2{font-size:clamp(50px,5.5vw,90px)}
.story-chapter p:not(.eyebrow):not(.hero-price){font-size:15px;line-height:1.7;max-width:365px;color:#b9bcb8;margin-top:28px}
.story-chapter .button-row{margin-top:32px}
.story-chapter .button-row .text-link{font-size:12px}
.story-chapter .text-link,.story-chapter>.button{margin-top:28px}
.hero-price{margin-top:26px;font-size:12px;letter-spacing:.04em}
.hero-price span{opacity:.5;margin-left:8px;font-size:12px}
.scroll-cue{display:inline-flex;gap:28px;font-size:12px;text-transform:uppercase;letter-spacing:.17em;margin-top:38px;opacity:.55}
.chapter-detail{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:var(--silver);margin-top:32px}
.intro-statement{padding-top:140px;padding-bottom:140px}
.intro-statement h2{font-size:clamp(56px,8vw,120px)}
.intro-columns{display:grid;grid-template-columns:1fr 1fr;gap:10%;max-width:940px;margin:55px 0 0 auto}
.intro-columns p{font-size:16px;opacity:.7}
.intro-columns p+p{margin:0}
.collection-section{padding-top:115px;padding-bottom:130px}
.capability-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}
.capability-picture{position:relative;aspect-ratio:1;overflow:hidden}
.capability-picture img{width:100%;height:100%;object-fit:cover;animation:pictureIn .5s}
/* A solid scrim behind the caption: text-shadow alone measured 1.16:1 against a light patch of the photo. */
.capability-picture>span{position:absolute;bottom:18px;left:18px;color:#fff;font-size:12px;letter-spacing:.15em;text-transform:uppercase;background:rgba(9,11,13,.78);padding:5px 10px}
.capability{border-top:1px solid var(--line)}
.capability:last-child{border-bottom:1px solid var(--line)}
.capability>button{display:flex;align-items:center;gap:25px;text-align:left;width:100%;padding:25px 0;background:none;color:inherit}
.capability>button>span:first-child{font-size:10px;opacity:.5}
.capability h3{font-size:29px;letter-spacing:-.03em}
.capability>button>span:last-child{margin-left:auto;font-size:24px}
.capability-body{padding:0 0 25px 43px}
.capability-body p{font-size:15px;max-width:380px;opacity:.7}
.capability-body .text-link{margin-top:15px;font-size:12px;display:inline-flex;align-items:center;min-height:44px}
.world-band>div{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
.world-clocks{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.world-clocks article{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:20px}
.world-clocks span{font-size:12px;letter-spacing:.08em}
.world-clocks strong{font-weight:300;font-size:clamp(28px,3.5vw,58px);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.world-band>.fine{margin-top:36px}
@media(min-width:1600px){
  .story-chapter{min-height:95svh}
  .watch-stage .watch-scene{left:43%}
}
@media(max-width:1100px){
  .story-chapter{width:52%}
  .watch-stage .watch-scene{left:36%}
  .story-chapter h1{font-size:clamp(50px,6vw,70px)}
  .story-chapter .button-row{gap:16px}
}
@media(max-width:800px){
  /* Kept from the pre-split cascade: the generic .wrap padding used to win here. */
  .intro-statement{padding-top:75px;padding-bottom:75px}
  .collection-section{padding-top:75px;padding-bottom:75px}
  .watch-stage{top:77px;height:calc(100svh - 77px);margin-bottom:calc(-100svh + 77px)}
  .watch-stage .watch-scene{left:25%;opacity:.77}
  .story-chapter{width:62%;min-height:90svh}
  .story-chapter h1{font-size:58px}
  .story-chapter p:not(.eyebrow):not(.hero-price){font-size:14px;max-width:310px}
  .story-chapter .button-row{margin-top:25px}
  .intro-statement h2{font-size:76px}
  .intro-columns{gap:7%;margin-top:38px}
  .capability-layout{gap:6%}
  .capability h3{font-size:25px}
  .capability>button{gap:17px}
  .capability-body{padding-left:29px}
  .capability-body p{font-size:13px}
  .capability-picture{aspect-ratio:.8}
  .world-band>div{grid-template-columns:1fr;gap:45px}
  .world-clocks{max-width:600px}
  .world-clocks strong{font-size:54px}
}
@media(max-width:580px){
  /* Kept from the pre-split cascade: the generic .wrap padding used to win here. */
  .collection-section{padding-top:65px;padding-bottom:65px}
  .watch-stage{top:71px;height:calc(100svh - 71px);margin-bottom:calc(-100svh + 71px);background:radial-gradient(ellipse at 64% 25%,#252a2c,#090b0d 63%)}
  .watch-stage .watch-scene{inset:0 0 auto 0;height:53%;opacity:1}
  .stage-index{left:22px;right:22px;bottom:15px;font-size:12px;letter-spacing:.08em}
  .stage-index span:last-child{max-width:130px;text-align:right}
  .story-chapter{width:100%;min-height:calc(110svh - 71px);padding:47svh 22px 10vh;align-items:start}
  .story-chapter h1{font-size:clamp(38px,10.6vw,60px);line-height:.98;letter-spacing:-.043em}
  .story-chapter h1 br:nth-of-type(2){display:none}
  .story-chapter h1 em{display:block;margin-top:3px}
  .story-chapter h1 em br{display:none}
  .story-chapter h2{font-size:50px}
  .story-chapter .eyebrow{font-size:12px;margin-bottom:17px}
  .story-chapter p:not(.eyebrow):not(.hero-price){font-size:12px;line-height:1.65;max-width:340px;margin-top:18px}
  .story-chapter .button-row{gap:12px;margin-top:22px}
  .story-chapter .button-row .text-link{display:inline-flex;align-items:center;min-height:44px;font-size:12px;gap:12px}
  .story-chapter .text-link{margin-top:0}
  .hero-price{font-size:12px;margin-top:20px}
  .hero-price span{font-size:12px;display:block;margin-left:0;margin-top:3px}
  .scroll-cue{display:none}
  .chapter-detail{font-size:12px;max-width:300px;margin-top:24px}
  .first-chapter{min-height:calc(116svh - 71px)}
  .intro-statement{padding-top:80px;padding-bottom:80px}
  .intro-statement h2{font-size:58px}
  .intro-columns{grid-template-columns:1fr;gap:23px;margin-top:35px}
  .intro-columns p{font-size:14px}
  .capability-layout{grid-template-columns:1fr;gap:30px}
  .capability-picture{aspect-ratio:1.15}
  .capability-picture>span{font-size:12px;left:18px;bottom:18px}
  .capability h3{font-size:28px}
  .capability>button{padding:22px 0}
  .capability-body{padding-left:34px}
  .capability-body p{font-size:14px}
  .world-clocks{gap:18px}
  .world-clocks strong{font-size:37px}
  .world-clocks span{font-size:12px}
  .world-band>.fine{font-size:12px}
}
@media(max-width:350px){
  .story-chapter{padding-left:17px;padding-right:17px}
  .story-chapter h1{font-size:34px}
  .story-chapter .button-row{gap:12px}
  .story-chapter .button{font-size:12px;padding:13px 16px}
  .story-chapter .button-row .text-link{font-size:12px;gap:7px}
  .world-clocks strong{font-size:31px}
}
@media (max-width:580px) and (prefers-reduced-motion:no-preference){
  :where(html:not([data-motion="reduce"])) .watch-stage{z-index:2;pointer-events:none;background:transparent}
  :where(html:not([data-motion="reduce"])) .watch-stage .watch-scene{pointer-events:auto;background:radial-gradient(ellipse at 64% 45%,#252a2c,#090b0d 80%)}
  :where(html:not([data-motion="reduce"])) .story-chapters{z-index:1}
}
@media(prefers-reduced-motion:reduce){
  .watch-story{display:grid;grid-template-columns:1fr}
  .watch-stage{position:relative;top:0;height:600px;margin-bottom:0}
  .watch-stage .watch-scene{inset:0;height:100%}
  .story-chapters{display:grid;grid-template-columns:1fr 1fr;padding:0 var(--gutter) 65px;gap:45px}
  .story-chapter{min-height:0;padding:0;width:100%;display:block}
  .first-chapter{grid-column:1/-1;padding:25px 0 30px;max-width:700px}
  .story-chapter h1{font-size:70px}
  .story-chapter h2{font-size:40px}
  .story-chapter p:not(.eyebrow):not(.hero-price){max-width:none}
  .stage-index{display:none}
  .watch-stage .watch-scene{opacity:1}
  .scroll-cue{display:none}
  .story-still{display:block;width:100%;max-width:320px;height:auto;margin-top:24px;border:1px solid var(--line)}
}
/* motion switch: copy of the block above, for html[data-motion="reduce"] */
:where(html[data-motion="reduce"]) .watch-story{display:grid;grid-template-columns:1fr}
  :where(html[data-motion="reduce"]) .watch-stage{position:relative;top:0;height:600px;margin-bottom:0}
  :where(html[data-motion="reduce"]) .watch-stage .watch-scene{inset:0;height:100%}
  :where(html[data-motion="reduce"]) .story-chapters{display:grid;grid-template-columns:1fr 1fr;padding:0 var(--gutter) 65px;gap:45px}
  :where(html[data-motion="reduce"]) .story-chapter{min-height:0;padding:0;width:100%;display:block}
  :where(html[data-motion="reduce"]) .first-chapter{grid-column:1/-1;padding:25px 0 30px;max-width:700px}
  :where(html[data-motion="reduce"]) .story-chapter h1{font-size:70px}
  :where(html[data-motion="reduce"]) .story-chapter h2{font-size:40px}
  :where(html[data-motion="reduce"]) .story-chapter p:not(.eyebrow):not(.hero-price){max-width:none}
  :where(html[data-motion="reduce"]) .stage-index{display:none}
  :where(html[data-motion="reduce"]) .watch-stage .watch-scene{opacity:1}
  :where(html[data-motion="reduce"]) .scroll-cue{display:none}
  :where(html[data-motion="reduce"]) .story-still{display:block;width:100%;max-width:320px;height:auto;margin-top:24px;border:1px solid var(--line)}
/* end motion switch copy */
@media(prefers-reduced-motion:reduce) and (max-width:580px){
  .watch-stage{height:400px}
  .story-chapters{grid-template-columns:1fr;gap:50px}
  .first-chapter{grid-column:auto}
  .story-chapter h1{font-size:44px}
  .story-chapter h2{font-size:40px}
  .story-chapter .text-link{margin-top:20px}
}
/* motion switch: copy of the block above, for html[data-motion="reduce"] */
@media (max-width:580px){:where(html[data-motion="reduce"]) .watch-stage{height:400px}
  :where(html[data-motion="reduce"]) .story-chapters{grid-template-columns:1fr;gap:50px}
  :where(html[data-motion="reduce"]) .first-chapter{grid-column:auto}
  :where(html[data-motion="reduce"]) .story-chapter h1{font-size:44px}
  :where(html[data-motion="reduce"]) .story-chapter h2{font-size:40px}
  :where(html[data-motion="reduce"]) .story-chapter .text-link{margin-top:20px}}
/* end motion switch copy */
.stage-explore{position:absolute;bottom:62px;left:69.5%;transform:translateX(-50%);z-index:4;background:var(--ink);border:1px solid #6b6b61;border-radius:30px;padding:12px 20px;font-size:12px;letter-spacing:.06em;white-space:nowrap;pointer-events:auto}
.stage-explore span{margin-left:20px}
.stage-explore:hover{background:#e9e6de;color:#101315}
.watch-stage .scene-loading{bottom:115px}
@media (prefers-reduced-motion:no-preference){
  :where(html:not([data-motion="reduce"])) .construction-chapter{min-height:210svh}
  :where(html:not([data-motion="reduce"])) .construction-chapter>div{position:sticky;top:32vh;align-self:flex-start;margin-top:25vh}
}
@media(max-width:580px){
  .stage-explore{left:50%;bottom:20px;padding:9px 18px;font-size:12px}
  .watch-stage .scene-loading{bottom:65px;font-size:12px}
  .stage-index{display:none}
}
@media(prefers-reduced-motion:reduce){
  .stage-explore{left:50%;bottom:36px}
  .watch-stage .scene-loading{bottom:90px}
}
/* motion switch: copy of the block above, for html[data-motion="reduce"] */
:where(html[data-motion="reduce"]) .stage-explore{left:50%;bottom:36px}
  :where(html[data-motion="reduce"]) .watch-stage .scene-loading{bottom:90px}
/* end motion switch copy */
/* An engraved product study: original diagrams around the live watch, never over it. */
.veyra-study{--study-header:85px;--study-travel:max(500svh,5000px)}
.veyra-study .watch-stage{background:radial-gradient(ellipse at 75% 45%,#20272a 0,#111719 34%,#090b0d 70%)}
.veyra-study .stage-index{left:52%;gap:20px}
.veyra-study .stage-index>span:last-child{text-align:right}
.study-registration,.study-drawing,.study-navigation,.construction-index>button>span,.story-apps>button>span,.story-models>button>span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.study-registration{position:absolute;inset:29px var(--gutter) auto 53%;display:flex;justify-content:space-between;gap:14px;font-size:8px;letter-spacing:.13em;color:#a39b8c;pointer-events:none;z-index:2}
.study-drawing{position:absolute;inset:84px 7% 112px 51%;pointer-events:none;border:1px solid #bda27a20;border-left-color:#bda27a35;border-right-color:#bda27a35;background:repeating-linear-gradient(0deg,transparent 0,transparent 39px,#bda27a09 39px,#bda27a09 40px)}
.study-drawing:before,.study-drawing:after{content:'';position:absolute;pointer-events:none}
.study-drawing:before{inset:0 50%;border-left:1px dashed #bda27a24}
.study-drawing:after{inset:50% 0;border-top:1px dashed #bda27a20}
.study-cross{position:absolute;width:13px;height:13px;transform:translate(-50%,-50%)}
.study-cross:before,.study-cross:after{content:'';position:absolute;background:#bda27a7d}
.study-cross:before{width:13px;height:1px;top:6px}
.study-cross:after{height:13px;width:1px;left:6px}
.study-cross-tl{top:0;left:0}
.study-cross-tr{top:0;left:100%}
.study-cross-bl{top:100%;left:0}
.study-cross-br{top:100%;left:100%}
.study-measure{position:absolute;left:calc(100% + 16px);top:50%;writing-mode:vertical-rl;transform:translateY(-50%);white-space:nowrap;font-size:7px;letter-spacing:.14em;color:#9e9684}
.study-navigation{position:sticky;top:var(--study-header);height:44px;margin-bottom:-44px;padding:0 var(--gutter);display:flex;gap:23px;align-items:center;width:100%;z-index:5;background:#090b0dfa;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.study-navigation a{display:flex;align-items:center;gap:6px;min-height:44px;color:#a6aaa5;white-space:nowrap;border-top:1px solid transparent;transition:color .2s,border-color .2s}
.study-navigation a span{font-size:7px;color:#776e60}
.study-navigation a:hover,.study-navigation a[aria-current]{color:var(--paper);border-color:var(--metal)}
.veyra-study .story-chapter{width:46%;padding-top:90px;padding-bottom:85px;scroll-margin-top:44px}
.veyra-study .story-chapter>div{width:100%;max-width:590px;position:static;align-self:auto;margin-top:0}
.veyra-study .story-chapter h1{font-size:clamp(48px,4.6vw,82px)}
.veyra-study .story-chapter h2{font-size:clamp(42px,4.8vw,78px)}
.veyra-study .story-chapter .eyebrow{color:var(--metal);font-size:12px;letter-spacing:.16em}
.veyra-study .story-chapter p:not(.eyebrow):not(.hero-price){margin-top:24px;max-width:400px;font-size:14px;line-height:1.65}
.veyra-study .hero-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;font-size:12px}
.veyra-study .hero-price span{font-size:12px;opacity:1;margin:0}
.veyra-study .hero-price strong{font-weight:400}
.veyra-study .hero-price small{font-size:9px;opacity:.5;margin-left:4px}
.veyra-study .button-row{gap:16px}
.veyra-study .button-row .text-link{margin-top:0}
.veyra-study .button{font-size:12px;padding:14px 21px;gap:18px}
.construction-index,.story-apps,.story-config,.story-models{margin-top:26px;border-top:1px solid #bda27a59}
.construction-index button,.story-models button{width:100%;display:flex;align-items:center;gap:16px;padding:13px 0;min-height:46px;background:transparent;text-align:left;border-bottom:1px solid var(--line);transition:background .2s,padding .2s}
.construction-index button:hover,.story-models button:hover,.story-models button[aria-pressed=true]{background:#bda27a10;padding-left:10px;padding-right:10px}
.construction-index button>span,.story-models button>span{font-size:9px;color:var(--metal)}
.construction-index button>strong,.story-models button>strong{font-weight:400;font-size:14px;letter-spacing:.01em}
.construction-index button>b,.story-models button>b{margin-left:auto;font-weight:400;color:var(--metal)}
.story-models button>small{margin-left:auto;font-size:12px;color:#adb0a9}
.story-models button>b{margin-left:3px}
.story-models button[aria-pressed=true]{border-bottom-color:var(--metal)}
.story-apps{display:grid;grid-template-columns:1fr 1fr}
.story-apps>button{position:relative;display:grid;grid-template-columns:20px 1fr;gap:9px 6px;min-height:108px;padding:18px 15px 17px 0;text-align:left;background:transparent;border-bottom:1px solid var(--line)}
.story-apps>button:nth-child(even){border-left:1px solid var(--line);padding-left:18px}
.story-apps>button>span{font-size:8px;color:var(--metal);padding-top:3px}
.story-apps>button>strong{font-size:14px;font-weight:400;line-height:1.35;padding-right:12px}
.story-apps>button>small{grid-column:2;font-size:12px;line-height:1.5;color:#afb3ac}
.story-apps>button>b{position:absolute;top:17px;right:8px;font-size:12px;font-weight:400;color:var(--metal)}
.story-apps>button:hover{background:#bda27a0e}
.story-config{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.story-config>label{min-width:0;padding:13px 0 10px;border-bottom:1px solid var(--line)}
.story-config>label>span{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--metal);margin-bottom:6px}
.story-config select{display:block;width:100%;max-width:100%;padding:6px 14px 6px 0;border:0;background:transparent;color:var(--paper);border-radius:0;font-size:12px;cursor:pointer;text-overflow:ellipsis}
.story-config option{background:#151a1c;color:var(--paper)}
.story-config-total{display:grid;grid-template-columns:1fr auto;gap:5px;margin:22px 0 19px;align-items:center}
.story-config-total>span{font-size:12px;color:#adb0a9}
.story-config-total>strong{font-size:24px;font-weight:300;font-variant-numeric:tabular-nums}
.story-config-total>small{grid-column:1/-1;font-size:12px;color:#959b96}
.veyra-study .story-chapter .story-config-status{min-height:32px;font-size:12px;margin-top:12px;color:#b8bdaf}
.veyra-study .chapter-detail{font-size:12px;letter-spacing:.08em;line-height:1.7;margin-top:23px}
.veyra-study [data-selected-model-link]{gap:5px}
.veyra-study [data-selected-model-link]>span:last-child{margin-left:18px}
@media (prefers-reduced-motion:no-preference){
  :where(html:not([data-motion="reduce"])) .veyra-study .story-chapter{min-height:calc(var(--study-travel) * .18)}
  :where(html:not([data-motion="reduce"])) .veyra-study .construction-chapter{min-height:calc(var(--study-travel) * .32)}
  :where(html:not([data-motion="reduce"])) .veyra-study #capabilities{min-height:calc(var(--study-travel) * .22)}
  :where(html:not([data-motion="reduce"])) .veyra-study #the-collection{min-height:calc(var(--study-travel) * .10 + 100svh - var(--study-header))}
}
@media(min-width:1600px){
  .veyra-study .watch-stage .watch-scene{left:42%}
}
@media(max-width:1100px){
  .veyra-study .story-chapter{width:48%}
  .veyra-study .watch-stage .watch-scene{left:40%}
  .study-registration{left:54%;right:5%;font-size:7px}
  .study-drawing{left:54%;right:6%}
  .study-navigation{gap:15px}
  .veyra-study .story-chapter h1{font-size:clamp(44px,5vw,62px)}
  .veyra-study .story-chapter h2{font-size:clamp(42px,4.6vw,57px)}
}
@media(max-width:800px){
  .veyra-study{--study-header:77px}
  .veyra-study .story-chapter{width:51%}
  .veyra-study .watch-stage .watch-scene{left:38%;opacity:1}
  .veyra-study .story-chapter h1{font-size:43px}
  .veyra-study .story-chapter h2{font-size:42px}
  .veyra-study .stage-explore{left:71%;padding:11px 15px;font-size:12px}
  .veyra-study .stage-explore span{margin-left:9px}
  .study-registration{left:55%;gap:8px;font-size:6px}
  .study-drawing{left:57%;right:7%}
  .study-measure{font-size:6px}
  .study-navigation{gap:12px;font-size:12px}
  .study-navigation a{gap:5px}
  .story-apps>button{padding-right:10px}
  .story-apps>button:nth-child(even){padding-left:10px}
  .story-apps>button>strong{font-size:12px}
}
@media(max-width:580px){
  /* Item 8: a shorter journey (was max(560svh,6000px), about 5,929px of actual scroll) and a smaller watch
     panel (34svh, was 40svh) so more of each screen is free for reading. */
  .veyra-study{--study-header:71px;--study-travel:max(260svh,2800px)}
  .veyra-study .watch-stage{background:transparent}
  .study-registration{left:24px;right:24px;top:51px;font-size:7px}
  .study-drawing{left:23%;right:23%;top:80px;bottom:calc(66% + 24px)}
  .study-measure{left:calc(100% + 14px)}
  /* Item 31: a full-width, solid band (was width:max-content, letting text show through beside it). */
  .study-navigation{width:100%;padding:0 14px;display:grid;grid-template-columns:.8fr 1.15fr 1.15fr 1.3fr 1fr;gap:4px;height:44px;margin-bottom:-44px;background:#090b0df5;border-bottom:1px solid var(--line)}
  .study-navigation a{min-height:44px;min-width:0;flex-direction:column;justify-content:center;align-items:stretch;gap:0;font-size:12px;line-height:1.15;letter-spacing:0;white-space:normal;overflow-wrap:break-word;text-align:center;padding:2px 0}
  .study-navigation a span{display:none}
  .veyra-study .watch-stage .watch-scene{inset:44px 0 auto;height:34svh;min-height:0;background:radial-gradient(ellipse at 64% 45%,#20272a,#090b0d 80%)}
  /* Item 8: the chapter's own text block is sticky just below the watch, so it stays on screen for the whole
     chapter instead of scrolling away while the chapter's oversized min-height (the pose-timing budget) passes. */
  .veyra-study .story-chapter{width:100%;padding:0 22px 40px;align-items:flex-start;scroll-margin-top:44px}
  .veyra-study .story-chapter>div{max-width:none;position:sticky;top:calc(34svh + 130px)}
  .veyra-study .story-chapter h1{font-size:clamp(39px,10.5vw,58px)}
  .veyra-study .story-chapter h2{font-size:clamp(39px,10vw,54px)}
  .veyra-study .story-chapter .eyebrow{margin-bottom:20px;font-size:12px}
  .veyra-study .story-chapter p:not(.eyebrow):not(.hero-price){font-size:13px;max-width:400px;margin-top:20px}
  /* Item 23: the button sits on the lower watch (as it already does on tablet and desktop, matching the
     background fix above) instead of the "just below it" gap, which the sticky chapter text also needs to
     clear: the watch, unlike that text, never scrolls, so nothing can ever pass behind the button here. */
  .veyra-study .stage-explore{left:50%;top:calc(34svh - 50px);bottom:auto;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;font-size:12px;z-index:4}
  .veyra-study .watch-stage .scene-loading{bottom:auto;top:24px;font-size:12px}
  .veyra-study .scroll-cue{font-size:12px;margin-top:25px;gap:17px}
  .veyra-study .hero-price{margin-top:21px}
  .veyra-study .button-row{margin-top:25px;gap:15px}
  .veyra-study .button-row .text-link{display:inline-flex}
  .veyra-study .story-chapter .story-config-status{font-size:12px;margin-top:12px}
  .story-config select{font-size:13px;min-height:44px;padding-top:13px;padding-bottom:13px}
  .story-apps>button{min-height:100px}
  .story-apps>button>strong{font-size:13px}
  .story-apps>button:nth-child(even){padding-left:16px}
}
@media(prefers-reduced-motion:reduce){
  .veyra-study .study-navigation{position:relative;top:0;margin:0 0 40px;order:1}
  .veyra-study .story-chapters{order:2;gap:65px 8%}
  .veyra-study .story-chapter{width:100%;min-height:0;padding:0;scroll-margin-top:3px}
  /* Overrides the phone rule's position:sticky (same specificity, but this rule is later in the file and matches
     whenever reduced motion is on, at any width): reduced motion always reads as plain, non-sticky blocks. */
  .veyra-study .story-chapter>div{max-width:none;position:static}
  .veyra-study .watch-stage{height:560px;margin:0}
  .veyra-study .watch-stage .watch-scene{inset:0;height:100%;width:100%}
  .study-registration{left:var(--gutter)}
  .study-drawing{left:30%;right:30%;top:70px;bottom:100px}
  .veyra-study .stage-explore{left:50%;top:auto;bottom:30px}
  .veyra-study .watch-stage .scene-loading{bottom:85px}
}
/* motion switch: copy of the block above, for html[data-motion="reduce"] */
:where(html[data-motion="reduce"]) .veyra-study .study-navigation{position:relative;top:0;margin:0 0 40px;order:1}
  :where(html[data-motion="reduce"]) .veyra-study .story-chapters{order:2;gap:65px 8%}
  :where(html[data-motion="reduce"]) .veyra-study .story-chapter{width:100%;min-height:0;padding:0;scroll-margin-top:3px}
  /* Overrides the phone rule's position:sticky (same specificity, but this rule is later in the file and matches
     whenever reduced motion is on, at any width): reduced motion always reads as plain, non-sticky blocks. */
  :where(html[data-motion="reduce"]) .veyra-study .story-chapter>div{max-width:none;position:static}
  :where(html[data-motion="reduce"]) .veyra-study .watch-stage{height:560px;margin:0}
  :where(html[data-motion="reduce"]) .veyra-study .watch-stage .watch-scene{inset:0;height:100%;width:100%}
  :where(html[data-motion="reduce"]) .study-registration{left:var(--gutter)}
  :where(html[data-motion="reduce"]) .study-drawing{left:30%;right:30%;top:70px;bottom:100px}
  :where(html[data-motion="reduce"]) .veyra-study .stage-explore{left:50%;top:auto;bottom:30px}
  :where(html[data-motion="reduce"]) .veyra-study .watch-stage .scene-loading{bottom:85px}
/* end motion switch copy */
@media(prefers-reduced-motion:reduce) and (max-width:580px){
  .veyra-study .watch-stage{height:420px}
  .veyra-study .study-registration{top:24px}
  .veyra-study .study-drawing{top:60px;bottom:90px;left:25%;right:25%}
  .veyra-study .study-navigation{margin-bottom:35px}
  .veyra-study .story-chapter{padding:0}
  .veyra-study .story-chapter h1{font-size:44px}
}
/* motion switch: copy of the block above, for html[data-motion="reduce"] */
@media (max-width:580px){:where(html[data-motion="reduce"]) .veyra-study .watch-stage{height:420px}
  :where(html[data-motion="reduce"]) .veyra-study .study-registration{top:24px}
  :where(html[data-motion="reduce"]) .veyra-study .study-drawing{top:60px;bottom:90px;left:25%;right:25%}
  :where(html[data-motion="reduce"]) .veyra-study .study-navigation{margin-bottom:35px}
  :where(html[data-motion="reduce"]) .veyra-study .story-chapter{padding:0}
  :where(html[data-motion="reduce"]) .veyra-study .story-chapter h1{font-size:44px}}
/* end motion switch copy */
/* Keep the explanation beside the object for the entire desktop chapter. */
@media (min-width:581px) and (prefers-reduced-motion:no-preference){
  :where(html:not([data-motion="reduce"])) .veyra-study .story-chapter{align-items:flex-start;padding-top:70px;padding-bottom:70px}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-chapter>div{position:sticky;top:calc(var(--study-header) + 70px);align-self:flex-start}
}
@media (min-width:581px) and (max-height:800px) and (prefers-reduced-motion:no-preference){
  :where(html:not([data-motion="reduce"])) .veyra-study .story-chapter h1{font-size:clamp(40px,4.1vw,58px)}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-chapter h2{font-size:clamp(36px,3.4vw,48px)}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-chapter .eyebrow{margin-bottom:14px}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-chapter p:not(.eyebrow):not(.hero-price){font-size:13px;line-height:1.55;margin-top:14px}
  :where(html:not([data-motion="reduce"])) .veyra-study .construction-index,:where(html:not([data-motion="reduce"])) .veyra-study .story-apps,:where(html:not([data-motion="reduce"])) .veyra-study .story-config,:where(html:not([data-motion="reduce"])) .veyra-study .story-models{margin-top:18px}
  :where(html:not([data-motion="reduce"])) .veyra-study .construction-index button,:where(html:not([data-motion="reduce"])) .veyra-study .story-models button{padding-top:7px;padding-bottom:7px;min-height:36px}
  :where(html:not([data-motion="reduce"])) .veyra-study .construction-index button>strong{font-size:13px}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-apps>button{min-height:88px;padding-top:13px;padding-bottom:12px}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-config>label{padding-top:8px;padding-bottom:6px}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-config>label>span{margin-bottom:3px}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-config select{padding-top:3px;padding-bottom:3px}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-config-total{margin-top:14px;margin-bottom:14px}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-config-total>strong{font-size:22px}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-chapter .story-config-status{font-size:12px;min-height:0;margin-top:8px;line-height:1.4}
  :where(html:not([data-motion="reduce"])) .veyra-study .story-chapter .story-config-status:empty{display:none}
  :where(html:not([data-motion="reduce"])) .veyra-study .chapter-detail{margin-top:14px}
  :where(html:not([data-motion="reduce"])) .veyra-study .button-row{margin-top:20px}
  :where(html:not([data-motion="reduce"])) .veyra-study .hero-price{margin-top:18px}
  :where(html:not([data-motion="reduce"])) .veyra-study .scroll-cue{margin-top:21px}
}
/* Item 19: a line from a hovered/focused construction-index button to its part's projected position, drawn by
   home.js from veyra:highlight-point. Fixed and pointer-events:none so it never affects layout or input. */
.veyra-highlight-line{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40;opacity:0}
.veyra-highlight-line.is-visible{opacity:1}
.veyra-highlight-line line{stroke:var(--metal);stroke-width:1;stroke-opacity:.7}
.veyra-highlight-line circle{fill:none;stroke:var(--metal);stroke-width:1;stroke-opacity:.7}
@media (prefers-reduced-motion:no-preference){
  :where(html:not([data-motion="reduce"])) .veyra-highlight-line{transition:opacity .15s}
}
/* Integration, phones with motion: the first chapter starts below the watch panel, so its headline is readable on
   the first screen (it sat under the canvas: the chapter box began at the story top, behind the panel). The box
   grows by the offset, which also delays the later chapters' text towards their pose thresholds. */
@media (max-width:580px) and (prefers-reduced-motion:no-preference){
  /* Read by story-progress.js: chapter text sits below the watch here, so the index and the pose take a lead. */
  :where(html:not([data-motion="reduce"])) .veyra-study{--story-text-below-watch:1}
}
/* Integration, phones: the five chapter names no longer break mid-word ("CONSTRUCTI / ON" in a five-column grid at
   12 px). The index scrolls sideways instead, and home.js keeps the current chapter in view. The band is opaque:
   at 96 percent the large chapter headings still showed through faintly (item 31). */
@media(max-width:580px){
  .study-navigation{display:flex;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 18px;background:#090b0d}
  .study-navigation::-webkit-scrollbar{display:none}
  .study-navigation a{flex:none;flex-direction:row;align-items:center;justify-content:center;min-width:44px;white-space:nowrap;overflow-wrap:normal;padding:0;letter-spacing:.04em}
}
/* Integration (fix 5): the legend row under the drawing frame holds the chapter caption on the left and "Explore the
   watch" at its right end, so the two can never meet at any width. The materials line is dropped from this row: at
   Nocturne's length ("Dark ceramic, metal accents and sapphire") it met the button at every placement tried, and it
   repeats what the chapters and product pages say. The row stays inside the first screen (item 40). */
@media (min-width:581px) and (prefers-reduced-motion:no-preference){
  :where(html:not([data-motion="reduce"])) .veyra-study .stage-index>[data-current-material]{display:none}
  :where(html:not([data-motion="reduce"])) .veyra-study .stage-explore{left:auto;right:var(--gutter);transform:none}
}
/* Below 780 px the legend row is too short for the caption and the button together: the chapter index above the
   stage already names the chapter, so the caption goes. */
@media (min-width:581px) and (max-width:780px) and (prefers-reduced-motion:no-preference){
  :where(html:not([data-motion="reduce"])) .veyra-study .stage-index [data-study-caption]{display:none}
}
/* Integration (ruling c), phones: the headline is readable at load, nothing sits on the watch, and the watch panel is
   back to the backup's size where the screen allows. The panel is min(40svh, 100svh - 414px): 325 px at
   375 x 812, the backup's panel, and shorter on short phones so the headline still clears the fold. The caption sits
   inside the panel under the watch, and "Explore the watch" in its own opaque band under the panel (the text that
   scrolls up behind the panel no longer shows around the button). */
@media(max-width:580px){
  .veyra-study{--study-scene-h:min(40svh,calc(100svh - 414px))}
  .veyra-study .watch-stage .watch-scene{height:var(--study-scene-h)}
  .veyra-study .watch-stage .scene-loading{top:auto;bottom:10px}
  .veyra-study .stage-explore{top:calc(44px + var(--study-scene-h) + 8px);bottom:auto}
  .veyra-study .watch-stage::after{content:"";position:absolute;left:0;right:0;top:calc(44px + var(--study-scene-h));height:62px;background:var(--ink);z-index:3;pointer-events:none}
}
@media (max-width:580px) and (prefers-reduced-motion:no-preference){
  :where(html:not([data-motion="reduce"])) .veyra-study .story-chapter>div{top:calc(var(--study-header) + 118px + var(--study-scene-h))}
  :where(html:not([data-motion="reduce"])) .veyra-study .first-chapter{padding-top:calc(118px + var(--study-scene-h))}
}
@media(max-width:580px) and (prefers-reduced-motion:reduce){
  .veyra-study .watch-stage{height:calc(106px + var(--study-scene-h))}
}
/* motion switch: copy of the block above, for html[data-motion="reduce"] */
@media (max-width:580px){:where(html[data-motion="reduce"]) .veyra-study .watch-stage{height:calc(106px + var(--study-scene-h))}}
/* end motion switch copy */
/* Integration (fix 9), touch screens: the construction and collection lists keep 44 px rows even where short screens
   tighten them to 36 px. */
@media(hover:none) and (pointer:coarse){
  .veyra-study .construction-index button,.veyra-study .story-models button{min-height:var(--touch-min)}
  .veyra-study .story-config select{min-height:var(--touch-min)}
  .veyra-study .text-link{min-height:var(--touch-min)}
}
/* product.css: Product pages. Owner: P2.
   Source partial. The build concatenates the partials into maison-veyra/style.css; never edit style.css. */
.product-hero{display:grid;grid-template-columns:1.22fr 1fr;background:var(--paper);color:var(--ink)}
.product-visual{background:radial-gradient(ellipse at center,#222729,#090b0d 75%);color:var(--paper);min-width:0}
.product-visual>.watch-scene{height:560px;min-height:560px}
/* Trim the shared stage controls specifically on product pages at desktop and tablet, so "Explore the
   watch" stays inside the first screen (item 40). Scoped to .product-visual and to widths above the
   phone reorder below: stage.css's own values still apply unscoped everywhere else, including the
   configurator, and untouched on phones where the reorder makes this moot. */
@media(min-width:581px){
  .product-visual .watch-tools{padding:8px 25px 10px}
  .product-visual .explode-label{margin-top:8px}
  .product-visual .watch-tools .inspect-trigger{margin-top:4px}
}
.product-intro{padding:75px clamp(30px,5vw,85px);align-self:center}
.product-intro h1{font-family:'Cormorant Garamond',serif;font-size:clamp(64px,6.7vw,110px);letter-spacing:-.05em;line-height:.95}
.product-line{font-size:22px;line-height:1.3;margin-top:23px}
.product-intro>p:not(.eyebrow):not(.product-line):not(.product-price):not(.fine){font-size:15px;opacity:.68;margin-top:25px}
.product-key-specs{display:flex;gap:50px;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);padding:20px 0;margin-top:30px}
.product-key-specs>span{font-size:24px}
.product-key-specs small{display:block;font-size:12px;color:var(--muted-on-light);margin-top:4px}
.product-price{font-size:23px;margin:28px 0 22px}
.product-intro .button{background:var(--ink);color:var(--paper)}
.product-actions{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.product-actions>.button{width:100%}
.product-intro>.fine{margin:14px 0}
.product-secondary-actions{display:flex;gap:24px;flex-wrap:wrap;margin-top:4px}
@media(max-width:1100px){
  .product-hero{grid-template-columns:1.1fr 1fr}
  .product-intro{padding:50px 30px}
  .product-visual>.watch-scene{height:460px;min-height:460px}
}
@media(max-width:800px){
  .product-hero{grid-template-columns:1fr}
  .product-visual>.watch-scene{height:460px;min-height:460px}
  .product-intro{padding:55px var(--gutter)}
  .product-intro h1{font-size:90px}
  .product-intro>p:not(.eyebrow){max-width:600px}
  .product-actions{max-width:420px}
}
@media(max-width:580px){
  .product-visual>.watch-scene{min-height:260px;height:260px}
  .product-intro{padding:16px 22px 36px}
  .product-intro h1{font-size:80px}
  .product-line{font-size:23px;margin-top:14px}
  .product-intro>p:not(.eyebrow):not(.product-line):not(.product-price):not(.fine){font-size:14px;margin-top:12px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .product-key-specs{gap:55px;margin-top:12px;padding:6px 0}
  .product-price{margin:14px 0 16px}
  .product-actions{max-width:none;margin-top:16px}
  /* Reorder without moving the DOM: the view buttons and slider must stay inside .product-visual
     (watch-scene.js binds them via holder.parentElement), so .product-visual is flattened and its two
     children take their place directly among .product-hero's own flex items. Backgrounds that used to
     come from .product-visual's own box are reapplied on the two children directly below. */
  .product-hero{display:flex;flex-direction:column}
  .product-visual{display:contents}
  .product-visual>.watch-scene{order:1;background:radial-gradient(ellipse at center,#222729,#090b0d 75%)}
  .product-intro{order:2}
  .watch-tools{order:3;background:#090b0d;color:var(--paper)}
}
.wrist-image figcaption{background:rgba(9,11,13,.8);padding:9px 13px;max-width:calc(100% - 2 * var(--gutter));text-shadow:none;line-height:1.5;font-size:12px}
/* The shared .eyebrow tag (base.css) runs 9-10px, and one nested case (.watch-card-copy .eyebrow, used by
   the related-models cards below) runs 8px. Both are below the 12px minimum. Scoped to the product routes
   only, so the fix does not reach the collection page or any other package's use of the same classes. */
[data-page^="watches/"] .eyebrow{font-size:12px}
@media(max-width:580px){
  .product-intro h1{font-size:clamp(60px,19vw,80px)}
}

/* Sticky phone action bar (item 4, fix 7): hidden by default and shown by product.js only once the
   in-page .product-actions have scrolled out of view, so it never sits over the in-page price at load.
   visibility (not opacity) is used so the bar also leaves the tab order while hidden. The transform slide
   is a plain transition; base.css's reduced-motion kill switch (`*,*:before,*:after{transition:none}`)
   already mutes it site-wide, so no separate reduced-motion rule is needed here. */
.product-sticky-bar{display:none}
@media(max-width:580px){
  body[data-page^="watches/"]{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .product-sticky-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(9,11,13,.95);backdrop-filter:blur(15px);color:var(--paper);padding:12px var(--gutter);padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);visibility:hidden;transform:translateY(100%);transition:transform .22s ease,visibility .22s ease}
  .product-sticky-bar.is-visible{visibility:visible;transform:translateY(0)}
  .product-sticky-bar .product-sticky-price{font-size:15px;white-space:nowrap}
  .product-sticky-bar .button{padding:12px 18px;min-height:44px;font-size:13px;white-space:nowrap;width:auto}
}

/* Product photograph gallery (item 12): the five stills as a scrollable thumbnail row. */
.product-gallery-section .eyebrow{margin-bottom:18px}
.product-gallery{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px}
.gallery-thumb{flex:0 0 auto;width:104px;min-height:44px;border:1px solid var(--dark-line);background:var(--paper);color:var(--ink);padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.gallery-thumb img{width:88px;height:110px;object-fit:contain}
.gallery-thumb span{font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.gallery-thumb:hover,.gallery-thumb:focus-visible{border-color:var(--metal)}
@media(max-width:580px){
  .gallery-thumb{width:88px}
  .gallery-thumb img{width:72px;height:90px}
}

/* Spec list contrast (item 15): override the shared 4.21:1 label on product pages only. base.css's
   .spec-list dt keeps its own value everywhere else (it is also used on secondary pages, owned by P4). */
.product-description .spec-list dt{opacity:1;color:var(--muted-on-light);font-size:12px}

/* Buying aids (item 30): advisor panel, wishlist, fit helper, related models. */
.aids-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.aid-card h3{font-family:'Cormorant Garamond',serif;font-size:26px;letter-spacing:-.02em;line-height:1.1;margin-bottom:12px}
.aid-card>p{font-size:14px;line-height:1.6;opacity:.75;margin-bottom:14px}
.aid-card .fine{margin-top:10px}
.wishlist-strip{margin-top:16px;padding-top:14px;border-top:1px solid var(--dark-line)}
.wishlist-strip>p{margin-bottom:8px}
.wishlist-items{display:flex;flex-wrap:wrap;gap:14px}
.wishlist-items a{font-size:13px;text-decoration:underline;text-underline-offset:3px}
.fit-field{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.fit-field>span{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.fit-field input[type=range]{width:100%;accent-color:var(--metal);height:24px}
@media(hover:none) and (pointer:coarse){.fit-field input[type=range]{height:44px}}
.related-models{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
@media(max-width:1100px){.aids-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:800px){.aids-grid{grid-template-columns:1fr;gap:34px}.related-models{grid-template-columns:1fr;gap:26px;margin-top:44px}}

/* Speak to an advisor (item 30): a small centered panel, matching the disclosure and menu dialog pattern. */
.advisor-dialog{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 48px));max-width:none;height:fit-content;max-height:calc(100dvh - 48px);border:1px solid var(--dark-line);border-radius:0;background:var(--paper);color:var(--ink);padding:38px clamp(24px,5vw,42px) 34px;overflow-y:auto}
.advisor-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.advisor-dialog h3{font-family:'Cormorant Garamond',serif;font-size:32px;letter-spacing:-.02em;line-height:1.05;margin:8px 0 16px}
.advisor-dialog p{font-size:14px;line-height:1.65;margin-top:14px}
.advisor-dialog .fine{margin-top:14px}
.advisor-dialog .text-link{margin-top:22px}
.advisor-dialog .close-button{position:absolute;top:10px;right:14px}
/* configurator.css: Configurator page. Owner: P3.
   Source partial. The build concatenates the partials into maison-veyra/style.css; never edit style.css. */
.config-intro{padding-top:55px;padding-bottom:45px;display:grid;grid-template-columns:1fr 1fr;align-items:end}
.config-intro>.eyebrow{grid-column:1/-1}
.config-intro h1{font-size:clamp(58px,6vw,90px)}
.config-intro>p:not(.eyebrow){font-size:14px;max-width:380px;justify-self:end;opacity:.6}
.config-layout{display:grid;grid-template-columns:1.3fr 1fr;align-items:start;border-top:1px solid var(--dark-line)}
.config-visual{position:sticky;top:85px;background:radial-gradient(ellipse at center,#24282a,#090b0d 70%);color:var(--paper)}
.config-visual>.watch-scene{height:calc(100svh - 200px);min-height:520px;max-height:830px}
.config-panel{padding:45px clamp(25px,5vw,85px) 60px;background:var(--paper);min-width:0}
.config-panel h2{font-size:35px}
.config-panel>.fine{margin-top:8px;margin-bottom:24px;font-size:13px}
/* Sticky summary (item 9): pinned near the top of the panel on desktop, so price and Add to bag are visible
   before any scroll, and stay visible while later fields scroll past. A fixed bottom bar takes over on phones. */
.config-summary-bar{position:sticky;top:85px;z-index:3;background:var(--paper);border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);padding:18px 0;margin-bottom:6px}
.config-summary-bar>.config-summary{margin:0 0 10px!important;font-size:13px}
.config-summary-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.config-total{display:flex;align-items:baseline;gap:12px;min-width:0}
.config-total>span{font-size:12px;color:var(--muted-on-light)}
.config-total>strong{font-size:30px;font-weight:400;white-space:nowrap}
.config-summary-bar .config-illustrative{display:block;font-size:12px;color:var(--muted-on-light);margin-top:8px}
.config-summary-bar .button{flex:0 0 auto;font-size:13px;white-space:nowrap}
.config-summary-bar .status{margin-top:8px}
.config-field{border-top:1px solid var(--dark-line);padding:15px 0}
.config-field>label,.tile-group-label{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px;color:var(--muted-on-light)}
.config-field>select{border:0;padding:10px 28px 10px 0;width:100%;background:transparent;color:var(--ink);font-size:17px;border-radius:0;line-height:1.5;cursor:pointer;appearance:auto;min-height:44px}
.config-field>.small-link{display:inline-flex;align-items:center;font-size:12px;padding:10px 0;min-height:44px}
/* The real select stays in the DOM (CONTRACT) and still drives the price logic; the tiles are the visible,
   accessible control (role=radiogroup/radio). display:none keeps it out of the accessibility tree entirely,
   rather than leaving a redundant, near-invisible control alongside the tiles. */
.sr-select{display:none}
.tile-group{display:flex;flex-wrap:wrap;gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:76px;padding:12px 10px;background:transparent;border:1px solid var(--dark-line);color:var(--ink);text-align:center}
.tile:hover{border-color:var(--metal)}
.tile[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tile-swatch{width:34px;height:34px;border-radius:50%;border:1px solid var(--dark-line);overflow:hidden}
.tile[aria-checked="true"] .tile-swatch{border-color:rgba(241,238,231,.4)}
.tile-swatch-strap{display:block;background:#cfcabb}
.tile-swatch-strap img{width:100%;height:100%;object-fit:cover;display:block}
.tile-swatch-bracelet{background:repeating-linear-gradient(90deg,#c9ccc2 0 5px,#9a9d92 5px 7px)}
.dial-swatch{width:30px;height:36px;border-radius:12%;background:#0c1215;display:grid;place-items:center;border:1px solid rgba(9,11,13,.35)}
.dial-swatch:after{content:'10:08';display:block;color:var(--paper);font-size:8px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.25}
.dial-swatch[data-dial="orbit"]:after{content:'17:08'}
.dial-swatch[data-dial="digital"]:after{font-size:10px;font-weight:600}
.tile-label{font-size:13px;line-height:1.3}
.tile-delta{font-size:12px;color:var(--muted-on-light)}
.tile[aria-checked="true"] .tile-delta{color:var(--muted-on-dark)}
.config-summary{font-size:12px;margin:20px 0!important;line-height:1.8}
.config-secondary{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px}
.config-secondary button{background:transparent;border-bottom:1px solid var(--dark-line);padding:14px 0;text-align:left;font-size:13px;min-height:24px}
.config-secondary button:disabled{opacity:1;color:var(--muted-on-light);cursor:default}
.config-panel>.concept-note{margin-top:24px}
.config-notes>.three-notes{margin-top:55px}
@media(max-width:1100px){
  .config-panel{padding:35px}
}
@media(max-width:800px){
  .config-intro{padding-top:45px;padding-bottom:40px;gap:25px}
  .config-intro>.eyebrow{margin-bottom:0}
  .config-intro h1{font-size:62px}
  .config-layout{grid-template-columns:1fr 1fr}
  .config-panel{padding:30px 23px 45px}
  .config-visual{top:77px}
  .config-visual>.watch-scene{min-height:530px;height:60svh}
  .config-summary-bar{top:77px}
  .config-summary-row{flex-wrap:wrap}
  .config-panel h2{font-size:29px}
}
@media(max-width:580px){
  .config-intro{display:block;padding-top:42px;padding-bottom:33px}
  .config-intro h1{font-size:59px;margin-top:18px}
  .config-intro>p:not(.eyebrow){font-size:13px;max-width:none;margin-top:20px}
  .config-layout{grid-template-columns:1fr}
  .config-visual{position:static}
  .config-visual>.watch-scene{min-height:430px;height:430px;max-height:none}
  .config-panel{padding:35px 22px 130px}
  .config-panel h2{font-size:32px}
  /* Phones: the sticky bar becomes a fixed bottom bar (item 9), always on screen with no scroll needed.
     The descriptive summary line is dropped here to keep the bar compact; price and Add to bag remain. */
  .config-summary-bar{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;margin:0;background:var(--paper);border-top:1px solid var(--dark-line);border-bottom:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 24px rgba(9,11,13,.18)}
  .config-summary-bar>.config-summary{display:none}
  .config-summary-bar .config-illustrative{margin-top:4px}
  .config-summary-bar .status:empty{display:none}
  .config-field{padding:17px 0}
  .config-field>select{font-size:18px}
  .tile{min-width:68px}
  .config-secondary{gap:6px 20px}
}
/* secondary.css: Collection, craftsmanship, technology, maison, ownership, appointments, bag, checkout, privacy and terms. Owner: P4.
   Source partial. The build concatenates the partials into maison-veyra/style.css; never edit style.css. */
.collection-page{padding-top:0}
.collection-page>.fine{margin-top:28px}
.compare-select{border:0;padding:0;margin:0 0 18px;display:flex;gap:28px;flex-wrap:wrap}
.compare-select legend{font-size:12px;margin-bottom:20px}
.compare-select label{display:flex;align-items:center;gap:8px;cursor:pointer}
.compare-select input{accent-color:var(--ink);height:24px;width:24px}
.comparison-scroll{overflow-x:auto;margin-top:30px}
.comparison{border-collapse:collapse;width:100%;min-width:580px;text-align:left;font-size:14px}
.comparison caption{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.12em;padding-bottom:18px;color:var(--muted-on-light)}
.comparison th,.comparison td{padding:23px 24px 23px 0;border-top:1px solid var(--line);width:25%;vertical-align:top}
.comparison th{font-weight:400}
.comparison thead th{font:32px 'Cormorant Garamond',serif}
.comparison thead th:first-child{font:12px Jost,sans-serif}
.comparison tbody th{font-size:12px;opacity:.65}
.comparison td{font-size:13px}
.comparison .text-link{font-size:13px}
.compare-section>.concept-note{margin-top:24px}
.material-intro{padding-bottom:65px}
.material-intro>.lede{max-width:650px;margin-top:40px;opacity:.68}
.material-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px 40px;padding-top:10px}
.material-grid article>img{width:100%;height:auto;aspect-ratio:1.25;object-fit:cover;margin-bottom:30px}
.material-grid h3{font:40px 'Cormorant Garamond',serif;line-height:1.1}
.material-grid article>.eyebrow{margin-bottom:14px}
.material-grid article>p:not(.eyebrow){margin-top:20px;max-width:490px;opacity:.7;font-size:15px}
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.two-column>div>p:not(.eyebrow){margin-top:30px;font-size:16px;opacity:.7}
.two-column .text-link{margin-top:25px}
.two-column>img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.prose p{font-size:17px;line-height:1.8;opacity:.72}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.team-grid img{aspect-ratio:4/5;object-fit:cover;width:100%;margin-bottom:24px}
.team-grid h3{font:36px 'Cormorant Garamond',serif;line-height:1.2}
.team-grid p:not(.eyebrow){font-size:14px;line-height:1.8;opacity:.63;margin-top:17px}
.team-grid .eyebrow{font-size:12px;margin-bottom:10px}
.interface-study{display:grid;grid-template-columns:1fr 1fr;gap:13%;align-items:center;padding-top:20px;padding-bottom:110px}
.dial-demo{aspect-ratio:7.12/8.65;max-width:420px;width:100%;border:1px solid #4c5251;border-radius:12%;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;box-shadow:inset 0 0 0 20px #101315,inset 0 0 0 21px #343839;background:radial-gradient(circle at center,#171d20,#07090b);font-variant-numeric:tabular-nums}
.dial-brand{font-size:11px;letter-spacing:.3em;position:absolute;top:22%}
.dial-clock{font-size:clamp(65px,7vw,110px);line-height:1;letter-spacing:-.04em;font-weight:300}
.dial-city{font-size:12px;letter-spacing:.12em;margin-top:15px}
.dial-bottom{font-size:7px;letter-spacing:.18em;position:absolute;bottom:22%;opacity:.55}
.interface-copy>p:not(.eyebrow){margin-top:28px;font-size:16px;line-height:1.8;color:var(--silver)}
.city-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:27px}
.city-buttons>button{background:transparent;padding:10px 16px;border:1px solid var(--line);border-radius:25px;font-size:13px;min-height:44px}
.city-buttons>button[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.dial-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;margin-bottom:35px}
.dial-options h3{margin-top:25px;font:32px 'Cormorant Garamond',serif}
.dial-options p{font-size:14px;opacity:.68;margin-top:15px}
.mini-dial{aspect-ratio:7.12/8.65;border-radius:12%;background:repeating-conic-gradient(from -1deg,#e6dfcb 0deg 1deg,#080a0c 1deg 30deg);box-shadow:inset 0 0 0 12px #191e21;position:relative;color:var(--paper);isolation:isolate}
.mini-dial:before{content:'';position:absolute;inset:23px;background:#080a0c;border-radius:8%;z-index:-1}
.mini-dial>span{position:absolute;top:29%;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.25em}
.mini-dial>i,.mini-dial>b{position:absolute;left:50%;top:50%;background:var(--paper);transform-origin:0 50%;height:2px;width:30%;transform:rotate(-45deg)}
.mini-dial>b{width:21%;transform:rotate(-150deg)}
.orbit-dial:after{content:'';position:absolute;inset:30%;border:1px solid #755f42;border-radius:50%}
.orbit-dial>b{background:#cf743f}
.digital-dial{background:#0a0d0e;display:flex;flex-direction:column;justify-content:center;align-items:center}
.digital-dial strong{font-weight:300;font-size:clamp(40px,4.5vw,75px);line-height:1;letter-spacing:-.03em}
.digital-dial small{font-size:9px;letter-spacing:.2em;margin-top:15px;color:var(--silver)}
.fit-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px;margin-top:25px}
.fit-table caption{font-size:12px;text-align:left;margin-bottom:15px;opacity:.65}
.fit-table th,.fit-table td{padding:12px 0;border-top:1px solid var(--line);font-weight:400}
.fit-table th{font-size:12px;opacity:.6}
.appointment-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;padding-top:0;align-items:start}
.appointment-photo{aspect-ratio:1;object-fit:cover;width:100%}
.appointment-panel h2{font-size:40px}
.appointment-panel>p:not(.eyebrow){font-size:15px;opacity:.65;margin-top:22px}
.appointment-panel>.concept-note{margin-top:28px}
.appointment-steps{margin-top:25px}
.appointment-steps article{display:flex;gap:25px;padding:26px 0;border-top:1px solid var(--dark-line)}
.appointment-steps article>span{font-size:10px;opacity:.5}
.appointment-steps h3{font-size:23px}
.appointment-steps p{font-size:14px;opacity:.6;margin-top:10px}
.disabled-form{padding:0;border:0;margin:30px 0}
.disabled-form legend{font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:25px;opacity:.6}
.disabled-form label{display:block;font-size:12px;margin-bottom:20px}
.disabled-form input,.disabled-form select,.disabled-form textarea{display:block;width:100%;border:1px solid var(--dark-line);background:rgba(255,255,255,.22);color:#8a8c87;padding:13px 14px;margin-top:8px;border-radius:0;font-size:13px;opacity:1;cursor:not-allowed}
.disabled-form textarea{resize:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* Live, no-data-collected choices (item 17): format, date, time, engraving, delivery and gift presentation. */
.appointment-field,.checkout-field{margin-top:26px}
.field-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin-bottom:12px}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip-row>button{border:1px solid var(--dark-line);background:transparent;color:var(--ink);padding:10px 18px;border-radius:25px;font-size:13px;min-height:44px}
.chip-row>button[aria-checked="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.toggle-pill{border:1px solid var(--dark-line);background:transparent;color:var(--ink);padding:12px 20px;border-radius:25px;font-size:13px;min-height:44px;display:inline-flex;align-items:center;gap:10px}
.toggle-pill:before{content:'';width:14px;height:14px;border-radius:50%;border:1px solid currentColor;flex:none}
.toggle-pill[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.toggle-pill[aria-pressed="true"]:before{background:currentColor}
.appointment-watch{border:1px solid var(--dark-line);padding:16px 18px;margin-bottom:10px}
.appointment-watch-name{font:26px 'Cormorant Garamond',serif}
.appointment-watch>.fine{margin-top:6px}
.confirmation-panel{border:1px solid var(--dark-line);background:#e6e3db;padding:24px;margin-top:22px}
.confirmation-panel[hidden]{display:none}
.confirmation-panel h2,.confirmation-panel h3{font-size:22px;line-height:1.25;letter-spacing:-.02em;margin-bottom:14px}
.confirmation-panel dl{margin:0;display:grid;gap:10px}
.confirmation-panel dl>div{display:grid;grid-template-columns:130px 1fr;gap:14px}
.confirmation-panel dt{font-size:12px;opacity:.6;text-transform:uppercase;letter-spacing:.06em}
.confirmation-panel dd{margin:0;font-size:13px}
.confirmation-panel>.fine{margin-top:16px}
/* The disabled payment button stays legible: base.css dims disabled buttons to 0.42 opacity, which on this
   light page fades pale text toward the page's own background (item 15, 3.66:1). Shown inactive by border only. */
.payment-preview .button:disabled{opacity:1;background:transparent;color:var(--ink);border:1px solid var(--dark-line)}
.bag-layout,.checkout-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:8%;padding-top:0;align-items:start}
.empty-state{padding:55px 20px;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);text-align:center}
.empty-state>.monogram{font-size:85px;opacity:.6}
.empty-state h2{font:38px 'Cormorant Garamond',serif;margin-top:25px}
.empty-state p{font-size:14px;margin-top:20px;color:var(--muted-on-light)}
.empty-state .button{margin-top:28px}
.order-summary{padding:30px;background:#e6e3db;border:1px solid rgba(9,11,13,.08);position:sticky;top:115px;min-width:0}
.order-summary>h2{font:32px 'Cormorant Garamond',serif;margin-bottom:28px}
.summary-line{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--dark-line);padding-top:20px;margin-top:25px}
.summary-line>span{font-size:12px}
.summary-line>strong{font-size:20px;font-weight:400;white-space:nowrap}
.order-summary>.fine{margin:18px 0 24px}
.order-summary>.text-button{display:flex;justify-content:center;align-items:center;min-height:44px;margin:15px auto 20px}
.order-summary>.concept-note{margin-top:25px}
.bag-item{display:grid;grid-template-columns:140px 1fr;gap:25px;border-top:1px solid var(--dark-line);padding:25px 0}
.bag-item-image{background:var(--ink);align-self:start}
.bag-item-image a{display:block}
.bag-item-image img{width:100%;height:185px;object-fit:contain}
.bag-item-strap-note{color:var(--muted-on-dark);font-size:12px;line-height:1.4;text-align:center;margin:0;padding:0 10px 12px}
.bag-item-details h2{font:32px 'Cormorant Garamond',serif}
.bag-item-details>p{font-size:12px;color:var(--muted-on-light);margin-top:5px}
.bag-item-options{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;font-size:12px;margin:15px 0}
.bag-item-options dt{color:var(--muted-on-light)}
.bag-item-options dd{margin:0}
.bag-item-controls{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:15px}
.bag-item-controls label{font-size:12px;display:flex;align-items:center;gap:12px}
.bag-item-controls select{background:transparent;border:1px solid var(--dark-line);padding:7px 10px;font-size:12px;color:var(--ink)}
.bag-item-price{font-size:18px}
.bag-item-actions{display:flex;gap:20px;flex-wrap:wrap;margin-top:15px}
.bag-item-actions .button-small{font-size:13px;padding:9px 15px;min-height:44px}
.bag-item-actions .text-link{background:none;padding:7px 0;font-size:13px;min-height:44px;display:inline-flex;align-items:center}
.checkout-line{padding:20px 0;border-top:1px solid var(--dark-line)}
.checkout-line h2{font:25px 'Cormorant Garamond',serif}
.checkout-options{font-size:12px;color:var(--muted-on-light);margin-top:10px;overflow-wrap:anywhere}
.checkout-line-total{font-size:16px;margin-top:15px}
.payment-preview{border-top:1px solid var(--dark-line);padding-top:28px}
.payment-preview h2{font-size:30px}
.payment-preview p{font-size:14px;opacity:.65;margin:20px 0 25px}
.legal-content{padding-top:40px}
.legal-content article{max-width:750px;margin-left:auto;margin-right:auto}
.legal-content h2{font-size:28px;letter-spacing:-.02em;margin-bottom:22px;margin-top:52px}
.legal-content h2:first-child{margin-top:0}
.legal-content p{font-size:16px;opacity:.72;line-height:1.9}
@media(max-width:1100px){
  .appointment-layout{gap:6%}
  .bag-layout,.checkout-layout{gap:5%}
  .order-summary{padding:25px}
}
@media(max-width:800px){
  /* Kept from the pre-split cascade: the generic .wrap padding used to win here. */
  .collection-page{padding-top:75px}
  .material-intro{padding-bottom:75px}
  .interface-study{padding-bottom:75px}
  .legal-content{padding-top:75px}
  .material-grid{gap:60px 30px;padding-top:0}
  .material-grid h3{font-size:33px}
  .material-grid p{font-size:14px}
  .two-column{gap:7%}
  .two-column h2{font-size:46px}
  .team-grid{gap:19px}
  .team-grid h3{font-size:28px}
  .team-grid .eyebrow{font-size:12px;letter-spacing:.1em}
  .team-grid p:not(.eyebrow){font-size:12px}
  .interface-study{gap:8%;padding-top:20px}
  .dial-clock{font-size:65px}
  .interface-copy h2{font-size:43px}
  .interface-copy>p:not(.eyebrow){font-size:14px}
  .city-buttons>button{font-size:13px;padding:9px 12px}
  .dial-options{gap:5%}
  .mini-dial>span{font-size:7px}
  .mini-dial:before{inset:18px}
  .mini-dial{box-shadow:inset 0 0 0 9px #191e21}
  .digital-dial small{font-size:6px}
  .dial-options p{font-size:12px}
  .appointment-layout{grid-template-columns:1fr;gap:55px;padding-top:0}
  .appointment-layout>div:first-child{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
  .appointment-steps{margin-top:0}
  .appointment-steps article{padding:16px 0;gap:15px}
  .appointment-steps h3{font-size:20px}
  .appointment-steps p{font-size:12px}
  .appointment-panel{max-width:650px}
  .bag-layout,.checkout-layout{grid-template-columns:1fr;gap:45px;padding-top:0}
  .order-summary{position:static}
  .bag-item{grid-template-columns:160px 1fr}
  .bag-item-image img{height:220px}
}
@media(max-width:580px){
  /* Kept from the pre-split cascade: the generic .wrap padding used to win here. */
  .interface-study{padding-bottom:65px}
  .collection-page{padding-top:0}
  .compare-select{gap:15px;font-size:13px}
  .comparison-scroll{margin-right:-22px;padding-right:22px}
  .comparison{min-width:590px}
  .comparison th,.comparison td{padding-top:19px;padding-bottom:19px}
  .comparison thead th{font-size:27px}
  .comparison td{font-size:12px}
  .material-intro{padding-bottom:45px}
  .material-intro>.lede{font-size:17px;margin-top:28px}
  .material-grid{grid-template-columns:1fr;gap:50px;padding-top:0}
  .material-grid article>img{aspect-ratio:1.15;margin-bottom:24px}
  .material-grid h3{font-size:36px}
  .material-grid article>p:not(.eyebrow){font-size:14px;margin-top:17px}
  .two-column{grid-template-columns:1fr;gap:38px}
  .two-column h2{font-size:48px}
  .two-column>div>p:not(.eyebrow){font-size:14px;margin-top:24px}
  .two-column>img{aspect-ratio:1.1}
  .prose p{font-size:15px;line-height:1.8}
  .team-grid{grid-template-columns:1fr;gap:45px}
  .team-grid img{aspect-ratio:.94;object-position:center 30%}
  .team-grid h3{font-size:37px}
  .team-grid p:not(.eyebrow){font-size:14px}
  .team-grid .eyebrow{font-size:12px}
  .interface-study{grid-template-columns:1fr;padding-top:0;gap:40px}
  .dial-demo{max-width:360px;justify-self:center}
  .dial-clock{font-size:80px}
  .dial-brand{font-size:10px}
  .dial-city{font-size:11px}
  .dial-bottom{font-size:7px}
  .interface-copy h2{font-size:50px}
  .interface-copy>p:not(.eyebrow){font-size:14px;margin-top:24px}
  .city-buttons>button{font-size:13px;padding:11px 17px}
  .dial-options{grid-template-columns:1fr;gap:40px;margin-bottom:28px}
  .dial-options article{display:grid;grid-template-columns:125px 1fr;gap:0 25px;align-items:start}
  .mini-dial{grid-row:1/3;width:125px;box-shadow:inset 0 0 0 7px #191e21}
  .mini-dial:before{inset:13px}
  .mini-dial>span{font-size:5px}
  .dial-options h3{font-size:29px;margin-top:7px}
  .dial-options p{font-size:12px;margin-top:8px;line-height:1.7}
  .digital-dial strong{font-size:29px}
  .digital-dial small{font-size:4px;margin-top:6px}
  .appointment-layout{padding-top:0;gap:35px}
  .appointment-layout>div:first-child{display:block}
  .appointment-photo{aspect-ratio:1.05}
  .appointment-steps{margin-top:25px}
  .appointment-steps article{padding:22px 0;gap:22px}
  .appointment-steps h3{font-size:23px}
  .appointment-steps p{font-size:13px}
  .appointment-panel h2{font-size:36px}
  .appointment-panel>p:not(.eyebrow){font-size:14px}
  .bag-layout,.checkout-layout{padding-top:0;gap:35px}
  .order-summary{padding:25px 22px}
  .bag-item{grid-template-columns:95px 1fr;gap:19px;padding:23px 0}
  .bag-item-image img{height:140px}
  .bag-item-details h2{font-size:28px}
  .bag-item-options{gap:4px 10px}
  .bag-item-controls{gap:15px}
  .bag-item-controls label{gap:10px}
  .bag-item-price{font-size:17px}
  .bag-item-actions{gap:8px 15px}
  .bag-item-actions .button-small{padding:9px 12px}
  .bag-item-actions .text-link{padding:6px 0}
  .empty-state{padding:40px 15px}
  .empty-state h2{font-size:34px}
  .empty-state p{font-size:13px}
  .empty-state>.monogram{font-size:65px}
  .form-grid{grid-template-columns:1fr;gap:0}
  .legal-content{padding-top:10px}
  .legal-content h2{font-size:25px;margin-top:37px;margin-bottom:18px}
  .legal-content p{font-size:14px;line-height:1.85}
}
@media(max-width:350px){
  .bag-item{grid-template-columns:75px 1fr;gap:15px}
  .bag-item-image img{height:115px}
  .dial-options article{grid-template-columns:105px 1fr;gap:0 18px}
  .mini-dial{width:105px}
}
.bag-item-options{display:block}
.bag-item-options>div{display:grid;grid-template-columns:54px 1fr;gap:10px;margin:4px 0}
.bag-item-controls{grid-column:2;margin-top:-8px}
.bag-item-controls>.fine-print{font-size:12px;line-height:1.5;color:var(--muted-on-light);flex-basis:100%;margin-top:0}
.bag-item-details>.eyebrow{font-size:12px;margin-bottom:10px;letter-spacing:.1em}
.checkout-line h2>span{font:12px Jost,sans-serif;margin-left:8px}
.checkout-options .bag-item-options{font-size:12px}
/* Compact heads on the task pages (items 20, 22): lead with the bag, the checkout summary or the watches,
   not a marketing head. Scoped by body[data-page] so shared.mjs's pageHead() keeps one signature for every
   package. */
body[data-page="bag/index.html"] .page-head,
body[data-page="checkout/index.html"] .page-head,
body[data-page="collection/index.html"] .page-head{padding-top:40px;padding-bottom:20px}
body[data-page="bag/index.html"] .page-head h1,
body[data-page="checkout/index.html"] .page-head h1,
body[data-page="collection/index.html"] .page-head h1{font-size:clamp(28px,3.4vw,38px)}
body[data-page="bag/index.html"] .page-head .eyebrow,
body[data-page="checkout/index.html"] .page-head .eyebrow,
body[data-page="collection/index.html"] .page-head .eyebrow{margin-bottom:14px}
.collection-page>h2.eyebrow{margin-bottom:14px}
@media(max-width:800px){
  /* Checkout only (item 20's tested case): the order summary leads on phone, ahead of the disabled form. */
  .checkout-layout .order-summary{order:-1}
}
@media(max-width:420px){
  .confirmation-panel dl>div{grid-template-columns:1fr;gap:2px}
}
/* Craftsmanship, technology, maison and ownership open on a full-width image (item 22): a shorter opening
   frame and a tight head straight after it keep the h1 on the first screen, directly below the image. */
body[data-page="craftsmanship/index.html"] .page-head,
body[data-page="technology/index.html"] .page-head,
body[data-page="maison/index.html"] .page-head,
body[data-page="ownership/index.html"] .page-head{padding-top:20px}
body[data-page="craftsmanship/index.html"] main>.wide-image:first-child img,
body[data-page="technology/index.html"] main>.wide-image:first-child img,
body[data-page="maison/index.html"] main>.wide-image:first-child img,
body[data-page="ownership/index.html"] main>.wide-image:first-child img{height:clamp(320px,38vw,520px)}
/* Placed last so it wins over the width breakpoints above at any viewport: the compare checkboxes stay a
   compact 24px for mouse and trackpad, and grow to the touch-target floor only under a coarse pointer. */
@media(hover:none) and (pointer:coarse){.compare-select input{width:44px;height:44px}}
/* Same reasoning (item 16): the bag quantity select and Remove stay compact for mouse and trackpad, and only
   grow to the touch-target floor under a coarse pointer. */
@media(hover:none) and (pointer:coarse){
  .bag-item-controls select{min-height:44px}
  .bag-item-actions .text-link{min-width:44px}
}
/* technology.css: the Technology page's dial studies (verification fix 14). Owner: manager.
   Source partial, placed by the build after secondary.css, whose dial rules it overrides. Never edit style.css. */
/* The twelve hour markers sit on a circle inside the rectangular face. They used to be rays of a conic gradient across
   the whole face, so the markers near the corners and edges were cut off by the rounded corners and the rim. */
.mini-dial{background:#080a0c}
.mini-dial:before{inset:auto;left:50%;top:50%;width:78%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from -1.2deg,#e6dfcb 0deg 2.4deg,transparent 2.4deg 30deg);-webkit-mask:radial-gradient(closest-side,transparent 84%,#000 85%);mask:radial-gradient(closest-side,transparent 84%,#000 85%);z-index:0}
.digital-dial{background:#0a0d0e}
.digital-dial:before{content:none}
/* Orbit's ring is a circle: inset:30% on a 7.12 x 8.65 face drew an ellipse. */
.orbit-dial:after{inset:auto;left:50%;top:50%;width:40%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);z-index:0}
/* The wordmark sits a little higher on Orbit so it clears the ring at phone size. */
.orbit-dial>span{top:26%}