/* About: "Dusk". Dark warm theme from the about palette tokens (plum, peach, coral) inside the locked neon-theatre system:
   dark stage, glass panels lit from behind by neon tubes, media as glowing screens. Signature: the dusk wheat field (js/sig-about.js).
   Owned by the About page only. 390px first. Nothing under 14px, nothing under weight 400. */

body.page-about{
  --tube:#FF6F61;--tube2:#FFA17E;--violet:#B58CFF;--stage:#120B19;--stage2:#1A1224;
  --paper:var(--th-bg);--ink:var(--th-text);--mute:var(--th-mute);--rule:rgba(255,255,255,.16);--card:var(--th-bg2);--green:#FFA17E;--green-d:#FFA17E;
  --rim-a:rgba(255,255,255,.5);--rim-b:rgba(255,255,255,.07);--rim-c:rgba(255,111,97,.55);
  --m:120px;background:var(--stage);color:var(--th-text)}
@media (max-width:1100px){body.page-about{--m:48px}}
@media (max-width:760px){body.page-about{--m:20px}}

/* ---- chrome ---- */
body.page-about .top{background:rgba(18,11,25,.95);border-bottom:1px solid rgba(255,111,97,.4);box-shadow:0 1px 18px -6px rgba(255,111,97,.55);-webkit-backdrop-filter:none;backdrop-filter:none}
body.page-about .mark{background:var(--tube2)}
body.page-about .btn{background:var(--tube2);border-color:var(--tube2);color:var(--th-accent-ink)}
body.page-about .btn:hover{background:#FFC2A8;border-color:#FFC2A8;color:var(--th-accent-ink)}
body.page-about .nav a.book{background:var(--tube2);color:var(--th-accent-ink)}
body.page-about .nav a:hover{background:rgba(255,255,255,.1)}
body.page-about .nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--tube)}
body.page-about .menu-btn,body.page-about .top-r a.pl{color:var(--th-text)}
body.page-about :focus-visible{outline-color:var(--tube2)}
body.page-about .txt-link,body.page-about .or a{color:var(--tube2)}
body.page-about .sticky{background:rgba(18,11,25,.97)}
body.page-about .foot{background:#0C0713;color:var(--th-text);border-top:1px solid rgba(255,111,97,.4)}
body.page-about .foot a{color:var(--th-text)}
body.page-about .foot strong{color:var(--th-text)}

/* ---- type colour ---- */
body.page-about h1,body.page-about h2{color:var(--th-text)}
body.page-about h1 em,body.page-about h2 em{color:var(--th-sig)}
body.page-about .lede,body.page-about .pg-head .lede{color:var(--th-mute)}
body.page-about .eyebrow,body.page-about .sec-head p.eyebrow{color:var(--tube2)}
body.page-about .eyebrow b{color:var(--th-text)}
body.page-about .eyebrow b::after{content:none!important}
body.page-about .ab-note{margin:var(--sp-5) 0 0;font-size:var(--fs-small);color:var(--th-mute);max-width:44ch}

/* ---- sections, neon tube dividers ---- */
body.page-about main>section{position:relative;border:0}
body.page-about .ab-sec{background:var(--stage)}
body.page-about .ab-frames,body.page-about .ab-prom{background:var(--stage2)}
body.page-about main>section:not(.pg-head)::before{
  content:"";position:absolute;z-index:2;top:0;left:var(--m);right:var(--m);height:3px;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0,var(--tube) 9%,#FFD9CF 50%,var(--tube) 91%,transparent 100%);
  box-shadow:0 0 5px var(--tube),0 0 16px rgba(255,111,97,.65),0 0 40px rgba(255,111,97,.4);opacity:.92}
body.page-about .ab-frames::before,body.page-about .ab-cta::before{background:linear-gradient(90deg,transparent 0,var(--tube2) 9%,#FFEBDD 50%,var(--tube2) 91%,transparent 100%);box-shadow:0 0 5px var(--tube2),0 0 16px rgba(255,161,126,.65),0 0 40px rgba(255,161,126,.4)}
body.page-about .ab-prom::before{background:linear-gradient(90deg,transparent 0,var(--violet) 9%,#E8DAFF 50%,var(--violet) 91%,transparent 100%);box-shadow:0 0 5px var(--violet),0 0 16px rgba(181,140,255,.6),0 0 40px rgba(181,140,255,.35)}
@media (prefers-reduced-motion:no-preference){body.page-about main>section::before{animation:ab-breathe 7s ease-in-out infinite}}
@keyframes ab-breathe{0%,100%{opacity:.78}50%{opacity:1}}

/* ---- the stage behind each panel group: saturated light the glass frosts ---- */
body.page-about .ab-sec{padding-block:calc(var(--b)*2) calc(var(--b)*2.25)}
@media (min-width:768px){body.page-about .ab-sec{padding-block:calc(var(--b)*3)}}
body.page-about .ab-stage{position:relative;isolation:isolate}
body.page-about .ab-stage::before{content:"";display:block;position:absolute;z-index:-1;pointer-events:none;inset:-20px calc(var(--m)*-1);
  background:radial-gradient(ellipse 58% 52% at 28% 42%,rgba(255,111,97,.62),transparent 74%),radial-gradient(ellipse 50% 55% at 80% 64%,rgba(140,90,200,.7),transparent 76%),var(--stage);
  -webkit-mask-image:linear-gradient(transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(transparent,#000 56px,#000 calc(100% - 56px),transparent)}
body.page-about .ab-frames .ab-stage::before,body.page-about .ab-prom .ab-stage::before{background:radial-gradient(ellipse 58% 52% at 70% 40%,rgba(255,161,126,.5),transparent 74%),radial-gradient(ellipse 50% 55% at 20% 70%,rgba(140,90,200,.66),transparent 76%),var(--stage2)}
@media (min-width:768px){body.page-about .ab-stage::before{inset:-28px calc(var(--m)*-.55)}}
html.lite body.page-about .ab-stage::before{background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(255,111,97,.38),transparent 76%),var(--stage)}

/* ---- glass, dark plum, lit rim ---- */
body.page-about .glass{background:var(--glass-fill);border-color:var(--glass-border)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:767px){html:not(.lite) body.page-about .glass:not(.over){background:color-mix(in srgb,#150D1E var(--glass-phone),transparent)}}
}
html.lite body.page-about .glass{background:var(--glass-solid);box-shadow:var(--glass-hi),0 0 18px -6px rgba(255,111,97,.5)}
body.page-about .glass .panel-k{color:var(--tube2);opacity:1}
body.page-about .glass h2 em,body.page-about .glass h3 em{color:var(--th-sig)}

/* ---- hero ---- */
body.page-about .ab-head{background:
  linear-gradient(to top,var(--stage),transparent 90px),
  radial-gradient(circle var(--blob) at 8% 16%,var(--th-glow1),transparent),
  radial-gradient(circle var(--blob) at 100% 40%,var(--th-glow2),transparent),var(--th-bg);isolation:isolate}
body.page-about .ab-ph figcaption,body.page-about .mt figcaption{color:var(--th-text);font-weight:600}
body.page-about .ab-ph .mt-v,body.page-about .mt-v{border-radius:16px;background:#0C0713;
  box-shadow:0 0 0 1px rgba(255,111,97,.6),0 0 22px -4px rgba(255,111,97,.5),0 18px 40px -22px rgba(0,0,0,.9)}

/* ---- team ---- */
body.page-about .ab-team .team{display:grid;grid-template-columns:1fr;gap:var(--sp-5);margin-top:var(--sp-6)}
body.page-about .tm{grid-column:auto;display:flex;flex-direction:column;gap:var(--sp-2)}
body.page-about .tm .panel-k{margin:var(--sp-3) 0 0}
body.page-about .tm .panel-h{margin:0}
body.page-about .tm .panel-p{margin:0;max-width:34ch}
@media (min-width:768px){body.page-about .ab-team .team{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ab-port{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse 70% 80% at 50% 45%,#3A2147,#150D1E 78%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ab-cam .vf{position:absolute;inset:14px;pointer-events:none;filter:drop-shadow(0 0 6px #FF6F61);
  background:
   linear-gradient(#FF6F61,#FF6F61) 0 0/30px 3px,linear-gradient(#FF6F61,#FF6F61) 0 0/3px 30px,
   linear-gradient(#FF6F61,#FF6F61) 100% 0/30px 3px,linear-gradient(#FF6F61,#FF6F61) 100% 0/3px 30px,
   linear-gradient(#FF6F61,#FF6F61) 0 100%/30px 3px,linear-gradient(#FF6F61,#FF6F61) 0 100%/3px 30px,
   linear-gradient(#FF6F61,#FF6F61) 100% 100%/30px 3px,linear-gradient(#FF6F61,#FF6F61) 100% 100%/3px 30px;background-repeat:no-repeat}
.ab-cam .rec{position:absolute;left:28px;top:26px;display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--font-text);letter-spacing:.08em;color:#FFE3DA}
.ab-cam .rec i{width:10px;height:10px;border-radius:50%;background:#FF4B3E;box-shadow:0 0 10px #FF4B3E}
@media (prefers-reduced-motion:no-preference){.ab-cam .rec i{animation:ab-rec 1.6s steps(2,jump-none) infinite}}
@keyframes ab-rec{50%{opacity:.25}}
.ab-cam b{font:700 clamp(64px,22vw,112px)/1 var(--font-display);letter-spacing:.02em;color:#FFE9E2;
  text-shadow:0 0 6px rgba(255,111,97,.95),0 0 22px rgba(255,111,97,.75),0 0 54px rgba(255,111,97,.5)}
.neon-open{font:400 clamp(60px,20vw,104px)/1 var(--font-poster);letter-spacing:.07em;color:#FFF1E6;padding:.08em .32em .02em;
  border:4px solid #FFA17E;border-radius:20px;
  text-shadow:0 0 5px #FFA17E,0 0 20px #FFA17E,0 0 46px rgba(255,161,126,.7);
  box-shadow:0 0 8px #FFA17E,inset 0 0 12px rgba(255,161,126,.7),0 0 44px rgba(255,161,126,.45)}
@media (prefers-reduced-motion:no-preference){.neon-open{animation:ab-flick 9s steps(1,end) infinite}}
@keyframes ab-flick{0%,86%,90%,100%{opacity:1}87%{opacity:.45}88%{opacity:1}89%{opacity:.55}}

/* ---- signature: dusk wheat field ---- */
.fld-sec{background:var(--stage);padding:calc(var(--b)*2.5) 0 0;position:relative}
.fld-sec .eyebrow{margin-bottom:var(--sp-5)}
.fld-wrap{position:relative;width:min(100% - 40px,1320px);margin:0 auto}
.fld{position:relative;overflow:hidden;border-radius:22px;height:clamp(440px,118vw,600px);background:#2A1730;touch-action:pan-y;cursor:crosshair;
  box-shadow:0 0 0 1px rgba(255,111,97,.65),0 0 28px -4px rgba(255,111,97,.55),0 0 80px -20px rgba(255,111,97,.5),0 24px 50px -24px rgba(0,0,0,.9)}
.fld-poster,.fld canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fld-poster{height:100%!important;transform:translate(var(--tx,0),var(--ty,0)) scale(1.03);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fld canvas{opacity:0;touch-action:pan-y}
.fld.is-live canvas{opacity:1;transition:opacity .9s ease}
.fld-gust{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity .4s;
  background:radial-gradient(circle 170px at var(--gx,50%) var(--gy,62%),rgba(255,176,128,.55),rgba(255,111,97,.18) 55%,transparent 80%)}
.fld.is-fb.is-gust .fld-gust{opacity:1}
.fld-hint{position:absolute;right:14px;top:14px;margin:0;padding:8px 14px;border-radius:999px;background:rgba(18,11,25,.94);border:1px solid rgba(255,161,126,.7);
  font:700 14px/1 var(--font-text);letter-spacing:.01em;color:#FFE9E2;pointer-events:none;transition:opacity .6s}
.fld.is-touched .fld-hint{opacity:0}
.fld-cap{margin-top:var(--sp-4);max-width:none}
.fld-cap .panel-h{font-size:var(--h2);line-height:1.18}
.fld-cap .panel-h em{display:block}
.fld-cap .panel-p{max-width:30ch}
@media (min-width:768px){
  .fld{height:clamp(520px,50vw,700px)}
  .fld-cap{position:absolute;left:28px;bottom:28px;margin:0;width:min(380px,calc(100% - 56px))}
  .fld-cap .panel-h{font-size:clamp(1.875rem,1.4rem + 1.4vw,2.75rem)}
}
@media (min-width:1100px){.fld-wrap{width:min(100% - var(--m)*2,1320px)}}
.fld-sec+.ab-sec{margin-top:calc(var(--b)*1.5)}
/* no-WebGL and reduced-motion still frame: the poster is the designed picture, so it must be crisp */
.fld.is-fb .fld-hint{opacity:1}

/* ---- frames: a wall of glowing screens ---- */
body.page-about .wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:var(--sp-6)}
.wl{position:relative;margin:0;grid-column:span 1}
.wl.w-a,.wl.w-d,.wl.w-g{grid-column:1/-1}
.wl-i{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:1/1;background:#0C0713;
  box-shadow:0 0 0 1px rgba(255,161,126,.55),0 0 22px -4px rgba(255,111,97,.45),0 16px 34px -20px rgba(0,0,0,.9)}
.wl.w-a .wl-i,.wl.w-d .wl-i,.wl.w-g .wl-i{aspect-ratio:3/2}
.wl img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;display:block}
.wl figcaption{position:absolute;left:10px;bottom:10px;margin:0}
.wl figcaption b{display:inline-block;padding:7px 12px;border-radius:999px;background:rgba(18,11,25,.94);color:#FFF1EA;font:700 14px/1.1 var(--font-text)}
@media (min-width:768px){
  body.page-about .wall{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;grid-auto-rows:clamp(210px,24vw,330px)}
  .wl{height:100%}.wl-i{height:100%;aspect-ratio:auto!important}
  .wl.w-a{grid-column:span 7}.wl.w-b{grid-column:span 5}
  .wl.w-c,.wl.w-d,.wl.w-e{grid-column:span 4}
  .wl.w-f{grid-column:span 5}.wl.w-g{grid-column:span 7}
  .wl figcaption{left:14px;bottom:14px}
}

/* ---- on the shoot ---- */
body.page-about .mont{gap:14px}
body.page-about .mt{margin:0}
body.page-about .mt figcaption{margin-top:12px;font-size:var(--fs-small)}

/* ---- promises ---- */
body.page-about .vals{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-top:var(--sp-6)}
body.page-about .val.glass,body.page-about .val.glass:nth-child(2){grid-column:auto;min-height:0;border:1px solid var(--glass-border);color:var(--glass-text);display:flex;flex-direction:column;gap:var(--sp-2)}
body.page-about .val.glass{background:var(--glass-fill)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:767px){html:not(.lite) body.page-about .val.glass{background:color-mix(in srgb,#150D1E var(--glass-phone),transparent)}}
}
html.lite body.page-about .val.glass{background:var(--glass-solid)}
body.page-about .val.glass p,body.page-about .val.glass:nth-child(2) p{color:var(--glass-mute)}
/* three promises, three distinct beats: coral / cream / plum, each its own accent so they don't read as one repeated card */
body.page-about .val.glass:nth-child(1){--acc:var(--tube);border-top:3px solid var(--acc)}
body.page-about .val.glass:nth-child(2){--acc:#F3E6C9;border-top:3px solid var(--acc)}
body.page-about .val.glass:nth-child(3){--acc:var(--violet);border-top:3px solid var(--acc)}
body.page-about .val b,body.page-about .val:nth-child(2) b{background:var(--acc);color:#2A1208;width:44px;height:44px;border-radius:50%;
  box-shadow:0 0 10px var(--acc),0 0 24px color-mix(in srgb,var(--acc) 60%,transparent);font:700 18px/1 var(--font-display)}
body.page-about .val .panel-h{margin:var(--sp-2) 0 0}
@media (min-width:768px){body.page-about .vals{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}}

/* ---- closing line ---- */
body.page-about .ab-cta{background:var(--stage)}
body.page-about .ab-cta .cta-r span{color:var(--th-mute)}

/* ---- reduced motion: nothing hidden, nothing gated; the still frame is the picture ---- */
@media (prefers-reduced-motion:reduce){
  .js .pg-rv{opacity:1;transform:none;transition:none}
  .fld-poster{transition:none}
  .fld.is-live canvas{transition:none}
}
@media (forced-colors:active){.fld-hint,.wl figcaption b{border:1px solid CanvasText}}