/* House of SRS · site. Shared chrome, components, division themes.
   No raw colour or size here: everything resolves through css/tokens.css. */
@import url("tokens.css");

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--f-body);font-size:var(--t-body);line-height:var(--lh-body);font-weight:400;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

/* ----------------------------------------------------------------- type -- */
.t-title{font-family:var(--f-display);font-weight:400;font-size:var(--t-title);letter-spacing:var(--track-title);text-transform:uppercase;line-height:1.1}
.t-section{font-family:var(--f-sub);font-weight:500;font-size:var(--t-section);letter-spacing:var(--track-sub);text-transform:uppercase;line-height:1.25}
.t-label{font-family:var(--f-sub);font-weight:500;font-size:var(--t-nav);letter-spacing:var(--track-sub);text-transform:uppercase;line-height:1.3}
.t-quote{font-family:var(--f-editorial);font-style:italic;font-weight:300;font-size:var(--t-quote);line-height:1.25;letter-spacing:0}
.t-film{font-family:var(--f-editorial);font-weight:300;font-size:var(--t-quote);line-height:1.2}
.t-caption{font-family:var(--f-body);font-weight:300;font-size:var(--t-caption);letter-spacing:var(--track-cap);line-height:1.5}
.t-body{max-width:var(--measure)}
.t-lede{font-family:var(--f-editorial);font-weight:300;font-size:clamp(1.375rem,1.2rem+0.8vw,1.75rem);line-height:1.35}
.muted{color:var(--gold-deep)}

/* --------------------------------------------------------------- layout -- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:52rem}
.section{padding-block:var(--s-7)}
.section--tight{padding-block:var(--s-5)}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-5)}
.rule{border:0;border-top:var(--hairline) solid var(--gold);margin:0}
.rule--soft{border-top-color:color-mix(in oklab,var(--gold) 55%,transparent)}
.stack>*+*{margin-top:var(--s-3)}
.grid{display:grid;gap:var(--s-4)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ nav -- */
.bar{position:sticky;top:0;z-index:50;height:var(--bar-h);background:color-mix(in srgb,var(--ivory) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:var(--hairline) solid var(--gold)}
.bar__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.bar__mark{display:flex;align-items:center;gap:var(--s-2);font-family:var(--f-display);font-size:1rem;letter-spacing:var(--track-title);text-transform:uppercase;color:var(--espresso);white-space:nowrap}
.bar__mark img{height:44px;width:auto;border-radius:var(--radius)}
/* Five items, one of them long. The bar holds a single line down to 1100px and
   hands over to the Menu button below that, rather than wrapping every label. */
.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2.5rem)}
.nav a{font-family:var(--f-sub);font-weight:500;font-size:var(--t-nav);letter-spacing:var(--track-sub);text-transform:uppercase;white-space:nowrap;color:var(--espresso);padding:.5rem 0;border-bottom:1px solid transparent;transition:border-color var(--d) var(--ease),color var(--d) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--gold-deep);color:var(--gold-deep)}
.nav__toggle{display:none;background:none;border:var(--hairline) solid var(--gold-deep);border-radius:var(--radius);padding:.55rem .8rem;font-family:var(--f-sub);font-size:var(--t-nav);letter-spacing:var(--track-sub);text-transform:uppercase;color:var(--espresso);cursor:pointer}
@media (max-width:1100px){
  .nav__toggle{display:inline-block}
  .nav{position:absolute;top:var(--bar-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ivory);border-bottom:var(--hairline) solid var(--gold);padding:var(--s-2) var(--gutter) var(--s-3);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--d) var(--ease),transform var(--d) var(--ease)}
  .nav a{padding:.9rem 0;white-space:normal;border-bottom:var(--hairline) solid color-mix(in oklab,var(--gold) 45%,transparent)}
  .nav[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
}

/* -------------------------------------------------------------- buttons -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.85rem 1.75rem;border:var(--hairline) solid transparent;border-radius:var(--radius);font-family:var(--f-sub);font-weight:500;font-size:var(--t-nav);letter-spacing:var(--track-sub);text-transform:uppercase;cursor:pointer;transition:background-color var(--d) var(--ease),color var(--d) var(--ease),border-color var(--d) var(--ease),transform var(--d) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn--house{background:var(--gold);color:var(--espresso)}
.btn--house:hover{background:var(--gold-light)}
.btn--ghost{background:transparent;color:var(--espresso);border-color:var(--gold-deep)}
.btn--ghost:hover{border-color:var(--espresso)}
.btn--sinema{background:var(--yellow);color:var(--studio)}
.btn--sinema:hover{background:var(--amber);color:var(--studio)}
.btn--sinema-ghost{background:transparent;color:var(--screen);border-color:var(--amber)}
.btn--sinema-ghost:hover{border-color:var(--yellow)}
.btn--watches{background:var(--gold);color:var(--espresso);border-color:var(--gold-deep)}
.btn--watches:hover{background:var(--gold-light);color:var(--espresso)}
.btn--watches-ghost{background:transparent;color:var(--espresso);border-color:var(--gold-deep)}
.btn--watches-ghost:hover{border-color:var(--espresso);color:var(--espresso)}
.link{border-bottom:1px solid var(--gold-deep);padding-bottom:1px;transition:border-color var(--d) var(--ease)}
.link:hover{border-bottom-color:var(--espresso)}

/* ----------------------------------------------------------- to confirm -- */
/* Visible, greppable marker for every item the content sheet leaves open.
   Removed when the fact lands; never shipped to LIVE. */
.tbc{font-family:var(--f-body);font-weight:300;font-size:var(--t-caption);letter-spacing:var(--track-cap);color:var(--gold-deep);border-bottom:1px dashed var(--gold-deep)}
.spec{color:var(--gold-deep);border-bottom:1px dashed var(--gold-deep)}
[data-theme="sinema"] .tbc,[data-theme="sinema"] .spec{color:var(--gold-deep);border-bottom-color:var(--gold-deep)}
[data-theme="watches"] .tbc,[data-theme="watches"] .spec{color:var(--gold-deep);border-bottom-color:var(--gold-deep)}

/* ------------------------------------------------------------- held slot -- */
.held{position:relative;display:grid;place-items:center;text-align:center;padding:var(--s-3);background:var(--gold-light);color:var(--gold-deep);border:var(--hairline) solid var(--gold)}
.held::before{content:"";position:absolute;inset:8px;border:1px dashed color-mix(in oklab,var(--gold-deep) 50%,transparent);pointer-events:none}
.held span{display:block;color:var(--umber);font-family:var(--f-body);font-weight:300;font-size:var(--t-caption);letter-spacing:var(--track-cap)}
.held b{display:block;font-family:var(--f-editorial);font-weight:300;font-size:1.25rem;color:var(--umber);margin-bottom:.35rem}
[data-theme="sinema"] .held{background:var(--gold-light);color:var(--gold-deep);border-color:var(--gold)}
[data-theme="sinema"] .held::before{border-color:color-mix(in oklab,var(--gold-deep) 50%,transparent)}
[data-theme="sinema"] .held b{color:var(--espresso)}
[data-theme="watches"] .held{background:var(--gold-light);color:var(--gold-deep);border-color:var(--gold)}
[data-theme="watches"] .held::before{border-color:color-mix(in oklab,var(--gold-deep) 45%,transparent)}
[data-theme="watches"] .held b{color:var(--espresso)}

/* ---------------------------------------------------------------- media -- */
.frame{position:relative;overflow:hidden;background:var(--gold-light)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--4x5{aspect-ratio:4/5}.frame--16x9{aspect-ratio:16/9}.frame--1x1{aspect-ratio:1/1}.frame--3x2{aspect-ratio:3/2}
figcaption{margin-top:var(--s-1)}

/* ----------------------------------------------------------------- card -- */
.card{display:block;position:relative}
.card .frame img{transition:transform 900ms var(--ease)}
.card:hover .frame img{transform:scale(1.03)}
.card__body{padding-top:var(--s-2)}
.card__title{font-family:var(--f-display);font-weight:400;font-size:1.05rem;letter-spacing:var(--track-title);text-transform:uppercase;color:var(--espresso)}
.card__line{margin-top:.5rem;max-width:34ch}

/* --------------------------------------------------------------- reveal -- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-24px)}
[data-reveal="right"]{transform:translateX(24px)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ------------------------------------------------------------- pullquote -- */
.pull{padding-block:var(--s-5);border-top:var(--hairline) solid var(--gold);border-bottom:var(--hairline) solid var(--gold);text-align:center}
.pull p{max-width:26ch;margin-inline:auto}
.pull cite{display:block;margin-top:var(--s-2);font-style:normal}

/* -------------------------------------------------------------- lightbox -- */
.lightbox{position:fixed;inset:0;z-index:100;background:color-mix(in srgb,var(--espresso) 94%,transparent);display:grid;place-items:center;padding:var(--gutter);opacity:0;pointer-events:none;transition:opacity var(--d) var(--ease)}
.lightbox[data-open="true"]{opacity:1;pointer-events:auto}
.lightbox img{max-height:82vh;width:auto;max-width:100%;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.lightbox figcaption{color:var(--gold-light);text-align:center;margin-top:var(--s-2)}
.lightbox__close{position:absolute;top:var(--s-3);right:var(--gutter);background:none;border:var(--hairline) solid var(--gold);color:var(--gold-light);border-radius:var(--radius);padding:.5rem .9rem;font-family:var(--f-sub);font-size:var(--t-nav);letter-spacing:var(--track-sub);text-transform:uppercase;cursor:pointer}

/* ----------------------------------------------------------------- form -- */
.form{display:grid;gap:var(--s-3)}
.form-card{background:#ffffff;border:1px solid color-mix(in oklab,var(--gold) 45%,transparent);border-radius:var(--radius);padding:var(--s-5);box-shadow:0 12px 36px rgba(43,38,31,0.04)}
.form__row{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--f-sub);font-weight:500;font-size:.72rem;letter-spacing:var(--track-sub);text-transform:uppercase;color:var(--espresso)}
.field input,.field select,.field textarea{width:100%;background:#ffffff;border:1px solid color-mix(in oklab,var(--gold) 45%,#d8cec0);padding:.75rem 1rem;border-radius:var(--radius);font-family:var(--f-body);font-size:.925rem;color:var(--ink);transition:border-color var(--d) var(--ease),box-shadow var(--d) var(--ease)}
.field textarea{min-height:6.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--espresso);box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 35%,transparent)}
.field select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.field option{color:var(--ink);background:#ffffff}
.form__ack{display:none;padding:var(--s-3) var(--s-4);background:var(--gold-light);border:var(--hairline) solid var(--gold);border-radius:var(--radius);color:var(--espresso)}
.form[data-sent="true"] .form__ack{display:block}
.form[data-sent="true"] .form__fields{display:none}

/* --------------------------------------------------------------- footer -- */
.foot{background:var(--espresso);color:var(--ivory);padding-block:var(--s-7) var(--s-5)}
.foot a{color:var(--ivory)}
.foot .t-label{color:var(--gold)}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.35fr;gap:var(--s-5);align-items:start}
@media (max-width:960px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot__grid{grid-template-columns:1fr}}
.foot__mark img.foot__emblem{width:76px;height:auto;border-radius:0}
.foot__mark img.foot__wordmark{width:185px;height:auto;margin-top:var(--s-2);border-radius:0}
.foot__copy{margin-top:var(--s-3);max-width:32ch;color:var(--gold-light);font-size:.9rem;line-height:1.6}
.foot__links li{padding:.35rem 0}
.foot__links a{color:var(--gold-light);font-size:.9rem;border-bottom:1px solid transparent;transition:color var(--d) var(--ease),border-color var(--d) var(--ease)}
.foot__links a:hover{color:var(--ivory);border-bottom-color:var(--gold)}
.foot__form-card{background:rgba(255,255,255,0.035);border:var(--hairline) solid color-mix(in oklab,var(--gold) 35%,transparent);border-radius:var(--radius);padding:var(--s-4)}
.foot__form-card .field label{color:var(--gold);font-family:var(--f-sub);font-size:.7rem;letter-spacing:var(--track-sub);text-transform:uppercase}
.foot__form-card .field input,.foot__form-card .field textarea{background:rgba(255,255,255,0.05);border:1px solid color-mix(in oklab,var(--gold) 30%,transparent);border-radius:var(--radius);color:var(--ivory);padding:.55rem .75rem;font-size:.875rem;transition:border-color var(--d) var(--ease),box-shadow var(--d) var(--ease)}
.foot__form-card .field input::placeholder,.foot__form-card .field textarea::placeholder{color:color-mix(in srgb,var(--gold-light) 40%,transparent)}
.foot__form-card .field input:focus,.foot__form-card .field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in oklab,var(--gold) 30%,transparent);outline:none}
.foot__form-card .field textarea{min-height:4.25rem;resize:vertical}
.foot__form-card .form__ack{background:rgba(255,255,255,0.08);border-color:var(--gold);color:var(--ivory)}
.foot__legal{margin-top:var(--s-6);padding-top:var(--s-4);border-top:var(--hairline) solid color-mix(in oklab,var(--gold-deep) 60%,transparent);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-3);color:var(--gold-light)}
.foot__legal p{max-width:60ch;font-size:.825rem;line-height:1.6}
.foot__endorse-wrap{text-align:right}
@media (max-width:768px){.foot__endorse-wrap{text-align:left}}
.endorse{font-family:var(--f-sub);font-weight:500;font-size:var(--t-nav);letter-spacing:var(--track-sub);text-transform:uppercase;color:var(--gold)}

/* ------------------------------------------------------ division themes -- */
main[data-theme="sinema"]{background:var(--ivory);color:var(--ink)}
main[data-theme="sinema"] .t-title,main[data-theme="sinema"] .card__title{color:var(--espresso)}
main[data-theme="sinema"] .muted{color:var(--gold-deep)}
main[data-theme="sinema"] .rule{border-top-color:var(--gold)}
main[data-theme="sinema"] .pull{border-color:var(--gold)}
main[data-theme="sinema"] .frame{background:var(--gold-light)}
main[data-theme="sinema"] .link{border-bottom-color:var(--gold-deep)}
main[data-theme="sinema"] .link:hover{border-bottom-color:var(--espresso)}
main[data-theme="sinema"] :focus-visible{outline-color:var(--gold-deep)}

main[data-theme="watches"]{background:var(--ivory);color:var(--ink)}
main[data-theme="watches"] .t-title,main[data-theme="watches"] .t-section,main[data-theme="watches"] .card__title{color:var(--espresso)}
main[data-theme="watches"] .muted{color:var(--gold-deep)}
main[data-theme="watches"] .rule{border-top-color:var(--gold)}
main[data-theme="watches"] .pull{border-color:var(--gold)}
main[data-theme="watches"] .frame{background:var(--gold-light)}
main[data-theme="watches"] .link{border-bottom-color:var(--gold-deep)}
main[data-theme="watches"] .link:hover{border-bottom-color:var(--espresso)}
main[data-theme="watches"] .field input,main[data-theme="watches"] .field select,main[data-theme="watches"] .field textarea{border-bottom-color:var(--gold-deep);color:var(--ink)}
main[data-theme="watches"] .field input:focus,main[data-theme="watches"] .field select:focus,main[data-theme="watches"] .field textarea:focus{border-bottom-color:var(--espresso)}
main[data-theme="watches"] .form__ack{border-top-color:var(--gold)}
main[data-theme="watches"] :focus-visible{outline-color:var(--gold-deep)}

/* ---------------------------------------------------------- the marks -- */
.bar__mark img{height:40px;width:40px;border-radius:0}
.foot__emblem{width:96px;height:auto}
.foot__wordmark{width:220px;height:auto;margin-top:var(--s-2)}
/* living mark: one slow breath on entry, transform and opacity only, never a glow */
.mark-live{animation:mark-in 1400ms var(--ease) both}
@keyframes mark-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mark-live{animation:none}}