/* ============================================================
   The Brown Print — shared site styles
   Loaded after css/tokens.css on every page except the gate.
   Components: type roles, buttons, section head, statement,
   CTA, service hero, tiles + albums, dialogs (viewer, menu,
   enquiry), nav, footer. Page CSS only adds what is unique.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-synthesis:none;text-rendering:optimizeLegibility}
body{background:var(--c-bg);color:var(--c-text);font:400 var(--fs-body)/var(--lh-body) var(--f-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--c-accent);color:var(--c-bg)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
/* width:100% stops .wrap shrink-wrapping inside grid/flex heroes. */
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--page-margin)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ TYPE ROLES ============ */
.label{font:700 var(--fs-label)/1.4 var(--f-body);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-accent)}
.meta{font:500 var(--fs-label)/1.6 var(--f-body);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--c-muted);font-variant-numeric:tabular-nums}
.script{display:block;font:italic 400 var(--fs-script)/1.15 var(--f-voice);letter-spacing:-.01em;
  text-transform:none;color:var(--c-accent);transform:rotate(-2deg)}
/* The accent word: Archivo italic, gold. */
h1 em,h2 em,h3 em,.statement em{font-style:italic;color:var(--c-accent)}

/* ============ REVEAL ============ */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
[data-reveal-delay="3"]{transition-delay:.3s}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 32px;
  font:700 var(--fs-label)/1.3 var(--f-body);letter-spacing:var(--tr-label);text-transform:uppercase;text-align:center;
  color:var(--c-text);border:1.5px solid var(--c-line-strong);border-radius:var(--r-pill);
  transition:background-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease)}
.btn:hover{background:var(--c-text);border-color:var(--c-text);color:var(--c-bg)}
.btn--primary{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-bg)}
.btn--sm{min-height:44px;padding:0 22px}
.btn .arr{transition:transform var(--dur-ui) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn .left{font:italic 400 var(--fs-small)/1 var(--f-voice);letter-spacing:0;text-transform:none;opacity:.75}
.btn[disabled]{opacity:.5;cursor:wait}
.icon-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1.5px solid var(--c-line-strong);background:rgb(10 9 8/.6);color:var(--c-text);
  transition:background-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease)}
.icon-btn:hover{background:var(--c-text);border-color:var(--c-text);color:var(--c-bg)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skip{position:fixed;left:var(--edge);top:12px;z-index:var(--z-toast);transform:translateY(-200%)}
.skip:focus{transform:none}

/* ============ SECTIONS ============ */
main>section{padding-block:var(--section)}
main>section+section{padding-top:0}
main>.statement{padding-block:var(--section-lg)}
main>.band{padding-top:var(--section);background:var(--c-surface);border-block:1px solid var(--c-line)}
main>section+.cta{padding-top:var(--section)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3) var(--sp-5);flex-wrap:wrap;
  padding-bottom:var(--sp-5);border-bottom:1px solid var(--c-line);margin-bottom:var(--head-gap)}
.section-head h2{font:400 var(--fs-h2)/var(--lh-head) var(--f-display);letter-spacing:var(--tr-caps);text-transform:uppercase}
.section-head p{font-size:var(--fs-small);line-height:1.6;color:var(--c-muted);max-width:44ch}

.statement{text-align:center}
.statement p{font:400 var(--fs-statement)/var(--lh-quote) var(--f-voice);letter-spacing:var(--tr-voice);max-width:24ch;margin-inline:auto}

.cta{text-align:center}
.cta .label{display:block;margin-bottom:var(--sp-5);text-indent:var(--tr-label)}
.cta h2{font:400 var(--fs-xl)/1 var(--f-voice);letter-spacing:var(--tr-voice);max-width:18ch;margin-inline:auto}
.cta .wrap>.btn{margin-top:var(--sp-7)}
.actions{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-7)}

/* ============ SERVICE HERO (one centred template) ============ */
.hero{position:relative;isolation:isolate;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:var(--c-raised)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.08) brightness(.6)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgb(10 9 8/.65) 0%,rgb(10 9 8/.15) 40%,rgb(10 9 8/.94) 100%)}
.slides img{opacity:0;transform:scale(1.05);transition:opacity 2s ease-in-out}
.slides img.on{opacity:1;animation:kenburns 10s linear forwards}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.12)}}
.hero .inner{text-align:center;padding-block:calc(var(--nav-h) + var(--sp-7)) clamp(48px,9vh,110px)}
.hero .label{display:block;margin-bottom:var(--sp-4);text-indent:var(--tr-label)}
.hero h1{font:400 var(--fs-display)/var(--lh-display) var(--f-display);letter-spacing:var(--tr-display);
  text-transform:uppercase;text-shadow:0 4px 60px rgb(0 0 0/.6)}
/* Display size is for one-word titles; a phrase steps down one level. */
.hero h1.phrase{font-size:var(--fs-xl);line-height:.95}
.hero h1 .script{margin-top:.25em;text-shadow:none}
.hero .lead{max-width:52ch;margin:var(--sp-5) auto 0;font-size:var(--fs-lead);color:var(--c-text-2);text-shadow:0 1px 14px rgb(0 0 0/.7)}
.hero .stats{display:flex;justify-content:center;gap:var(--sp-3) clamp(28px,6vw,90px);flex-wrap:wrap;margin-top:var(--sp-6);color:var(--c-text-2)}
.hero .stats b{font-weight:700;color:var(--c-text)}
.hero .whois{position:absolute;right:var(--edge);bottom:var(--sp-5);color:var(--c-text-2);text-shadow:0 1px 14px rgb(0 0 0/.8)}

/* ============ TILES + ALBUMS ============ */
.tile{position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--r-md);background:var(--c-raised)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(246 243 237/.06);pointer-events:none}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-media) var(--ease)}
/* Zoom only on tiles that open something. */
:is(a,button).tile:hover :is(img,video){transform:scale(1.04)}
.tile .cap{position:absolute;inset:auto 0 0;z-index:2;padding:var(--sp-4);text-align:left;color:var(--c-text-2);
  background:linear-gradient(to top,rgb(10 9 8/.85),transparent);
  opacity:0;transform:translateY(8px);transition:opacity var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease)}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
.filmtag{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  font:700 var(--fs-label)/1 var(--f-body);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--c-text);
  background:rgb(10 9 8/.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:1px solid var(--c-line-strong);border-radius:var(--r-pill);padding:6px 11px}
.filmtag i{width:6px;height:6px;border-radius:50%;background:var(--c-red)}

.album+.album{margin-top:calc(var(--list-gap) / 2);padding-top:calc(var(--list-gap) / 2);border-top:1px solid var(--c-line)}
.album-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3) var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.album-head h3{margin-top:var(--sp-3);font:400 var(--fs-title)/var(--lh-head) var(--f-voice);letter-spacing:var(--tr-voice)}
.album-head>.meta{text-align:right}
.strip-scroll{display:flex;gap:var(--grid-gap);overflow-x:auto;padding-bottom:var(--sp-3);
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgb(198 166 103/.5) transparent}
.shot{flex:0 0 auto;width:auto;height:clamp(240px,34vw,420px);scroll-snap-align:start}
.shot img,.shot video{width:auto;max-width:none;aspect-ratio:3/2}
.album .hint{margin-top:var(--sp-2)}
.card{background:var(--c-raised);border:1px solid var(--c-line);border-radius:var(--r-md);padding:clamp(24px,2.6vw,32px)}
.more{margin-top:var(--head-gap);text-align:center}

/* ============ DIALOGS ============ */
dialog{max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:0;border:0;
  background:var(--c-scrim);color:var(--c-text);overscroll-behavior:contain}
dialog::backdrop{background:none}
dialog[open]{animation:dlg-in var(--dur-ui) var(--ease)}
@keyframes dlg-in{from{opacity:0}}
html:has(dialog[open]){overflow:hidden}

/* Media viewer (concert, social) */
.viewer[open]{display:grid;place-items:center}
.viewer-media img,.viewer-media video{max-width:min(1400px,94vw);max-height:80vh;width:auto;height:auto;border-radius:var(--r-md);box-shadow:var(--shadow-modal)}
.viewer-cap{margin-top:var(--sp-4);text-align:center;color:var(--c-text-2)}
.viewer-cap b{color:var(--c-text);font-weight:700}
.viewer .icon-btn{position:fixed;z-index:1}
.viewer .x{top:max(24px,env(safe-area-inset-top));right:var(--page-margin)}
.viewer .prev,.viewer .next{top:50%;transform:translateY(-50%)}
.viewer .prev{left:var(--page-margin)}
.viewer .next{right:var(--page-margin)}

/* ============ TOPNAV ============ */
.topnav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  padding:max(16px,env(safe-area-inset-top)) var(--edge) 16px;
  background:linear-gradient(to bottom,rgb(10 9 8/.75),transparent)}
/* Solid layer fades in after 24px of scroll (js/site.js), so text never runs under text. */
.topnav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgb(10 9 8/.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-line);transition:opacity var(--dur-ui) var(--ease)}
.topnav.solid::before{opacity:1}
.brand{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.brand img{width:40px;height:40px}
.brand .word{font:400 20px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transform:translateY(1px)}
.topnav ul{display:flex;align-items:center;gap:clamp(16px,2vw,32px);list-style:none}
.topnav ul a{display:block;position:relative;padding:12px 0;font:700 var(--fs-nav)/1 var(--f-body);letter-spacing:var(--tr-nav);
  text-transform:uppercase;color:var(--c-muted);transition:color var(--dur-fast) var(--ease)}
.topnav ul a::after{content:"";position:absolute;left:0;bottom:6px;width:0;height:1px;background:var(--c-accent);transition:width var(--dur-ui) var(--ease)}
.topnav ul a:hover{color:var(--c-text)}
.topnav ul a:hover::after,.topnav ul a.on::after{width:100%}
.topnav ul a.on{color:var(--c-accent)}
.topnav .btn{margin-left:var(--sp-2)}
.menu-btn{display:none;place-items:center;width:48px;height:48px;border:1.5px solid var(--c-line-strong);border-radius:50%;background:rgb(10 9 8/.5)}
.menu-btn .bars{display:flex;flex-direction:column;gap:5px}
.menu-btn .bars span{display:block;width:18px;height:2px;background:var(--c-text)}
@media(max-width:1023px){
  .topnav ul{display:none}
  .menu-btn{display:grid}
  .topnav::before{opacity:1}
  .brand .word{font-size:clamp(13px,4.2vw,20px)}
}

/* Mobile menu (<dialog>) */
.mobmenu[open]{display:flex;align-items:safe center;justify-content:center;overflow-y:auto}
.mobmenu ul{list-style:none;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,3vh,24px);padding:96px 20px 48px;text-align:center}
.mobmenu a{font:400 clamp(40px,11vw,68px)/.95 var(--f-display);text-transform:uppercase;color:var(--c-text);transition:color var(--dur-fast) var(--ease)}
.mobmenu a:hover,.mobmenu a.on{color:var(--c-accent)}
.mobmenu .btn{margin-top:var(--sp-4)}
.mob-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:var(--page-margin)}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--c-line);background:var(--c-surface);padding:var(--sp-8) 0 max(var(--sp-6),env(safe-area-inset-bottom))}
.foot-main{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:var(--sp-6) var(--card-gap);padding-bottom:var(--sp-7);border-bottom:1px solid var(--c-line)}
footer .brand{font:400 20px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--c-text)}
.foot-tag{margin-top:var(--sp-5);color:var(--c-muted);font-size:var(--fs-small);max-width:44ch}
.foot-col{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start;min-width:0}
.foot-h{margin-bottom:var(--sp-2);font:700 var(--fs-label)/1.4 var(--f-body);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-accent)}
.foot-col a{padding:4px 0;color:var(--c-text-2);font-size:var(--fs-small);overflow-wrap:anywhere;transition:color var(--dur-fast) var(--ease)}
.foot-col a:hover{color:var(--c-accent)}
.foot-loc,.foot-base small{font:500 var(--fs-label)/1.6 var(--f-body);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--c-muted)}
.foot-base{padding-top:var(--sp-5)}
@media(max-width:767px){
  footer{padding-top:var(--sp-7)}
  .foot-main{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .foot-tag{display:none}
}

/* ============ ENQUIRY FORM (js/enquiry.js) ============ */
.enq[open]{display:grid;place-items:center;overflow-y:auto}
.enq-card{position:relative;width:min(760px,100% - 2 * var(--page-margin));margin:6vh auto;padding:clamp(24px,4vw,48px);
  background:var(--c-raised);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-modal)}
.enq-x{position:absolute;top:16px;right:16px}
.enq-card>.label{display:block;padding-right:56px}
.enq-title{margin:var(--sp-3) 0 var(--sp-6);padding-right:40px;font:500 var(--fs-h2)/1.05 var(--f-voice);letter-spacing:var(--tr-voice)}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-4)}
.enq-f{display:flex;flex-direction:column;gap:var(--sp-2)}
.enq-f.full{grid-column:1/-1}
.enq-f label{font:600 var(--fs-label)/1.3 var(--f-body);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--c-text-2)}
.enq-f :is(input,select,textarea){width:100%;min-height:48px;padding:12px 14px;font:400 16px/1.4 var(--f-body);color:var(--c-text);
  background:var(--c-bg);border:1px solid var(--c-line-strong);border-radius:var(--r-md);transition:border-color var(--dur-fast) var(--ease)}
.enq-f textarea{min-height:112px;resize:vertical}
.enq-f :is(input,select,textarea):focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent)}
.enq-f select{appearance:none;padding-right:36px;
  background:var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C6A667' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center}
.enq-f input::-webkit-calendar-picker-indicator{filter:invert(.85)}
.enq-f [aria-invalid="true"]{border-color:var(--c-error)}
.enq-f .err{font-size:var(--fs-label);color:var(--c-error)}
.enq-f .err:empty{display:none}
.enq-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.enq-actions{margin-top:var(--sp-6);display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.enq-note{font-size:var(--fs-label);color:var(--c-muted)}
.enq-note a{color:var(--c-text-2);text-decoration:underline;text-underline-offset:2px}
.enq-done{text-align:center;padding:clamp(20px,4vw,40px) 0}
.enq-done .ok{width:64px;height:64px;margin:0 auto var(--sp-5);border-radius:50%;border:1.5px solid var(--c-accent);display:grid;place-items:center}
.enq-done .ok svg{width:26px;height:26px;stroke:var(--c-accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.enq-done .big{font:italic 400 clamp(24px,3.4vw,36px)/1.25 var(--f-voice)}
.enq-done .big b{color:var(--c-accent);font-weight:500}
.enq-done p{margin-top:var(--sp-4);font-size:var(--fs-small);color:var(--c-muted)}

/* ============ RESPONSIVE ============ */
@media(max-width:767px){
  .hero .whois{display:none}
  .album-head{flex-direction:column;align-items:flex-start}
  .album-head>.meta{text-align:left}
  /* Strips show 82% of a frame so the next one peeks in. */
  .shot{width:82%;height:auto}
  .shot img,.shot video{width:100%;height:auto}
  .viewer .prev,.viewer .next{top:auto;bottom:max(20px,env(safe-area-inset-bottom));transform:none}
  .enq-grid{grid-template-columns:1fr}
  .enq-card{margin:var(--sp-4) auto}
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}