/* =========================================================================
   Circle Square Production — main.css
   Design tokens · reset · base typography · layout primitives
   Design DNA: independent Indian film house. Warm "paper" base + noir
   cinematic bands, with a signature spectral gradient sampled from the
   CSP camera mark used as the one recurring accent.
   ========================================================================= */

/* -------------------------------------------------- Tokens -------------- */
:root {
  /* Ink & surfaces */
  --ink:        #141210;   /* primary text on light                */
  --ink-soft:   #4a433b;   /* secondary text on light              */
  --ink-faint:  #8a8177;   /* captions / meta on light             */
  --paper:      #faf7f1;   /* warm bone base                       */
  --paper-2:    #f2 ebe0;  /* subtle alt band                      */
  --line:       #e4ddd0;   /* hairlines on light                   */
  --white:      #ffffff;

  --noir:       #0e0d0c;   /* dark cinematic band                  */
  --noir-2:     #171512;   /* raised dark surface                  */
  --noir-line:  #2c2822;   /* hairlines on dark                    */
  --paper-dim:  #d8cfc0;   /* muted text on dark                   */
  --paper-mut:  #9a9184;   /* faint text on dark                   */

  /* Signature accent — a single warm brass/amber drawn from the poster's
     saffron palette. Deliberately monochromatic (no multi-colour gradient). */
  --sp-red:  #9a5620;   /* deep amber   */
  --sp-org:  #b87a2f;   /* brass        */
  --sp-gold: #e0ad63;   /* light gold (for dark backgrounds) */
  --sp-mag:  #a86326;   /* mid amber    */
  --sp-ind:  #6f4416;   /* umber        */
  --spectrum: linear-gradient(90deg, #935120 0%, #b87a2f 52%, #d9a459 100%);
  --spectrum-tilt: linear-gradient(130deg, #814717 0%, #b87a2f 55%, #dcab63 100%);

  /* Functional accent (AA-legible link/focus colour) */
  --accent:     #955320;
  --accent-ink: #834817;

  /* Type */
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body:    "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "Space Mono", ui-monospace, "Courier New", monospace;

  --fs-hero:   clamp(2.9rem, 8.5vw, 6.4rem);
  --fs-h1:     clamp(2.4rem, 6vw, 4.6rem);
  --fs-h2:     clamp(1.9rem, 4.4vw, 3.3rem);
  --fs-h3:     clamp(1.3rem, 2.6vw, 1.9rem);
  --fs-name:   clamp(1.9rem, 4.6vw, 3.4rem);
  --fs-lead:   clamp(1.12rem, 1.9vw, 1.5rem);
  --fs-body:   1.0625rem;
  --fs-sm:     0.9rem;
  --fs-label:  0.74rem;

  /* Space & shape */
  --container:   1240px;
  --container-n: 1080px;   /* narrow (editorial measure)          */
  --gutter:      clamp(1.25rem, 5vw, 4.5rem);
  --band:        clamp(4.5rem, 9vw, 8.5rem);   /* vertical section pad */
  --radius:      4px;
  --radius-lg:   10px;

  --shadow-sm: 0 2px 10px rgba(20,18,16,.06);
  --shadow-md: 0 18px 50px -22px rgba(20,18,16,.35);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.55);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .5s;
}

/* correct the accidental space typo above */
:root { --paper-2: #f2ebe0; }

/* -------------------------------------------------- Reset -------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul, ol { padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* -------------------------------------------------- Type base --------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.02;
  letter-spacing: -.02em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }
p { text-wrap: pretty; }
strong { font-weight: 600; }
::selection { background: var(--sp-mag); color: #fff; }

/* Kicker / slate label — recurring "film-slate" metadata treatment */
.kicker {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.kicker::before {
  content: "";
  width: 2.4rem; height: 2px;
  background: var(--spectrum);
  flex: none;
}
.kicker--bare::before { display: none; }

/* Slate section number: "01 / TEAM" */
.slate {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.slate b { color: var(--ink); font-weight: 700; }

/* -------------------------------------------------- Layout ------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-n); }

.band { padding-block: var(--band); position: relative; }
.band--paper  { background: var(--paper); color: var(--ink); }
.band--paper2 { background: var(--paper-2); color: var(--ink); }
.band--noir   { background: var(--noir); color: var(--paper); }
.band--noir h1,.band--noir h2,.band--noir h3,.band--noir h4 { color: #fff; }
.band--noir .kicker { color: var(--paper-dim); }
.band--noir .slate { color: var(--paper-mut); }
.band--noir .slate b { color: #fff; }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem,4vw,3.4rem); }
.section-head h2 { margin-top: .55rem; }

/* film-grain / spectral hairline top of page */
.spectral-bar {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  background: var(--spectrum);
  transform-origin: left;
}

/* Reveal-on-scroll (progressive; visible by default without JS) */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Utility */
.sr-only { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 300;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius);
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.band--noir :focus-visible { outline-color: var(--sp-gold); }