/* ============================================================
   GIFTED OBSESSION — shared design tokens + core components
   One connected body of work: film (offscripteli) · music · apparel · OBSY
   ============================================================ */

:root{
  /* brand primaries — red/yellow/green, high-contrast, not muted.
     --yellow is sampled directly from the approved GO mark asset. */
  --red:#e8262a;
  --yellow:#ffc800;
  --green:#2cae4e;

  /* neutrals — raw paper + deep maroon (not soft/pastel, not flat near-black) */
  --ink:#1e0a0c;         /* primary dark bg — deep oxblood maroon */
  --ink-2:#301214;        /* lifted panel bg on dark — slightly lighter maroon */
  --paper:#f6f1e4;       /* light bg (paper/scrapbook base) */
  --paper-2:#ece4d1;      /* lifted panel bg on paper */
  --bone:#f5efe0;        /* body text on dark */
  --bone-dim:#b9ad98;      /* secondary text on dark */
  --muted:#8f8577;        /* tertiary / meta text */
  --line:rgba(245,239,224,0.14);
  --line-2:rgba(245,239,224,0.07);
  --line-onpaper:rgba(20,18,16,0.12);

  /* type */
  --display:"Syne",sans-serif;                /* bold geometric headline face, GO-recolored */
  --serif:"Fraunces",Georgia,serif;           /* editorial serif, secondary */
  --blackletter:"UnifrakturMaguntia",serif;    /* quote module */
  --body:"Hanken Grotesk",system-ui,sans-serif; /* clean, legible body */
  --mono:"Syne Mono",ui-monospace,monospace;   /* labels / eyebrows */

  --focus:2px solid var(--yellow);
  --sec:15vh; /* unified vertical section rhythm — carried over from prior audit */
}

/* ---------- base ---------- */
.go-reset{box-sizing:border-box;}
.go-reset *{box-sizing:border-box;}

/* ---------- GO stamp / mark (mask technique: one asset, any brand color) ---------- */
.go-mark{
  display:inline-block;
  aspect-ratio:1/1; /* mask has no intrinsic size — without this, height collapses to 0 */
  -webkit-mask-image:url("go-mark-sm.png");
  mask-image:url("go-mark-sm.png");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  background:var(--yellow);
}
.go-mark.c-red{background:var(--red);}
.go-mark.c-yellow{background:var(--yellow);}
.go-mark.c-green{background:var(--green);}

/* wordmark — use the real hand-lettered PNG lockup as-is */
.go-wordmark{display:block;width:100%;height:auto;}

/* ---------- GO ticker — stamped repeating motif, marquee, CSS-only loop ---------- */
.go-ticker{
  position:relative; overflow:hidden; width:100%;
  background:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 0;
}
.go-ticker.on-paper{background:var(--paper); border-color:var(--line-onpaper);}
.go-ticker-track{
  display:flex; align-items:center; gap:40px; width:max-content;
  animation:go-scroll 26s linear infinite;
  will-change:transform;
}
.go-ticker:hover .go-ticker-track{animation-play-state:paused;}
.go-ticker .go-mark{width:78px;height:78px;flex:none;background:var(--bone);}
@keyframes go-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){
  .go-ticker-track{animation:none;}
}

/* ---------- Quote module — a color-washed photo, blackletter type, reusable ----------
   Not a flat fill: a real photo desaturated + tinted with mix-blend-mode so the
   texture stays visible underneath the color. Markup:
   <figure class="quote-module red">
     <img class="qm-bg" src="..." alt="" />
     <div class="qm-tint"></div>
     <div class="qm-grain"></div>
     <blockquote><p>…</p><cite>…</cite></blockquote>
   </figure>
*/
.quote-module{
  position:relative; overflow:hidden;
  padding:calc(var(--sec) * 0.8) 7vw;
  display:flex; justify-content:center; text-align:center;
  background:var(--ink);
}
.quote-module .qm-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(0.45) contrast(1.18) brightness(0.72);
}
.quote-module .qm-tint{position:absolute; inset:0; mix-blend-mode:multiply;}
.quote-module.red .qm-tint{background:var(--red);}
.quote-module.yellow .qm-tint{background:var(--yellow);}
.quote-module.green .qm-tint{background:var(--green);}
.quote-module .qm-scrim{position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 50%,rgba(10,8,6,0.15),rgba(10,8,6,0.55));}
.quote-module .qm-grain{position:absolute; inset:0; opacity:0.16; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.quote-module blockquote{max-width:40ch; margin:0 auto; position:relative; z-index:1;}
.quote-module p{
  font-family:var(--blackletter); font-weight:400;
  font-size:clamp(28px,4.4vw,58px); line-height:1.15; margin:0 0 24px;
  color:var(--paper); text-wrap:balance;
}
.quote-module cite{
  font-family:var(--mono); font-style:normal; font-size:12px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--paper); opacity:0.85;
}

/* ---------- Media grid — scrapbook of real photography/BTS ---------- */
.media-grid{
  display:grid;
  grid-auto-flow:dense;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:14vw;
  gap:3px;
}
.media-grid .cell{
  position:relative; overflow:hidden; background:var(--ink-2);
}
.media-grid .cell img,.media-grid .cell video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.04) contrast(1.02);
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .6s;
}
.media-grid .cell:hover img,.media-grid .cell:hover video{transform:scale(1.05);}
.media-grid .cell.w2{grid-column:span 2;}
.media-grid .cell.h2{grid-row:span 2;}
.media-grid .cell .tag{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--bone); background:rgba(20,18,16,0.55); padding:5px 8px; backdrop-filter:blur(4px);
  opacity:0; transform:translateY(6px); transition:opacity .3s,transform .3s;
}
.media-grid .cell:hover .tag{opacity:1; transform:translateY(0);}
@media (max-width:780px){
  .media-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:44vw;}
}

/* ---------- Wash — a photo carrying the color, not a flat fill.
   High-contrast still, just the texture is a picture instead of a CSS color.
   Markup: <div class="wash red">
             <img class="wash-bg" .../><div class="wash-tint"></div><div class="wash-scrim"></div>
             <div class="wash-content">…</div>
           </div>
*/
.wash{position:relative; overflow:hidden;}
.wash-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(0.3) contrast(1.1);}
.wash-tint{position:absolute; inset:0; mix-blend-mode:multiply;}
.wash.red .wash-tint{background:var(--red);}
.wash.yellow .wash-tint{background:var(--yellow);}
.wash.green .wash-tint{background:var(--green);}
/* readability scrim — the tint alone doesn't guarantee contrast for text sitting on top
   of a busy photo, so quiet the area behind copy without flattening the whole panel */
.wash-scrim{position:absolute; inset:0;}
.wash.red .wash-scrim,.wash.green .wash-scrim{background:linear-gradient(100deg,rgba(10,8,6,0.55) 0%,rgba(10,8,6,0.2) 42%,transparent 68%);}
.wash.yellow .wash-scrim{background:linear-gradient(100deg,rgba(246,241,228,0.7) 0%,rgba(246,241,228,0.32) 42%,transparent 68%);}
.wash-content{position:relative; z-index:1;}
.wash.red .wash-content,.wash.green .wash-content{color:var(--paper);}
.wash.yellow .wash-content{color:var(--ink);}

.block-ink{background:var(--ink); color:var(--bone);}
.block-paper{background:var(--paper); color:var(--ink);}

/* ---------- Gritty blended wordmark — screen-printed onto a photo, not floated over it.
   Base layer + two mis-registered "ghost" copies (hue-shifted, blend-mode screen)
   for the halftone/print-fringe look, plus grain + cinematic grade on the photo beneath.
   Markup: <div class="grit-portrait"><img class="grit-bg"/><div class="grit-scrim"></div>
             <img class="grit-word" src="go-wordmark.png"/>
             <img class="grit-word ghost a" src="go-wordmark.png"/>
             <img class="grit-word ghost b" src="go-wordmark.png"/>
             <div class="grit-grain"></div></div>
*/
.grit-portrait{position:relative; overflow:hidden; background:var(--ink);}
.grit-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:contrast(1.25) saturate(0.75) brightness(0.85) sepia(0.12);}
.grit-scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,8,6,0.05),rgba(10,8,6,0.55) 85%);}
.grit-word{position:absolute; z-index:2; mix-blend-mode:hard-light; opacity:0.95;}
.grit-word.ghost{mix-blend-mode:screen; opacity:0.5;}
.grit-word.ghost.a{filter:hue-rotate(70deg) saturate(3); transform:translate(3px,-2px);}
.grit-word.ghost.b{filter:hue-rotate(190deg) saturate(3); transform:translate(-3px,2px);}
.grit-grain{position:absolute; inset:0; z-index:3; opacity:0.22; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}