/* openroar — SKETCH BLEND (2026-07-08, IDA). vision-first + minimalist
   editorial, made immersive through borderless hand-drawn sketch elements
   that melt into the cream page. Layered on top of tokens.css / v10.css /
   guided.css — this file only adds what those don't already cover: the
   exact cream, the new hero, the "what it is" beat, the editorial pride
   roster and the "where we're from" moment. Nothing here removes the gate,
   the install tracks, the support/pixel-wall or the join form — those keep
   their markup, their copy and their JS hooks untouched. */

/* ============ THE CREAM, EXACTLY ============
   AG-approved: the sketches were drawn on this exact cream, so a plain
   <img> with no card/border/shadow sits flush on the page with no visible
   edge. Only the light theme — dark theme keeps its own token set, and the
   sketch portraits simply are not used against it. */
.oros:not([data-or-theme="dark"]){ --bg:#F6F2E6; }

/* ============ DE-FRAME the sketch portraits reused in the existing
   functional chapters (gate / listen / install) — same borderless language
   as the hero and the pride roster, instead of the old photo-card look. ============ */
.solo-avatar,
.listen-face img,
.onb-guide img{
  border-radius:0;
  box-shadow:none;
  border:none;
  background:none;
}

/* ============ HERO — mark, vision, two quiet links ============ */
.hero-sketch-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; max-width:680px; margin:0 auto; }
.hero-mark{ width:34px; height:auto; opacity:.92; }
.hero-vision{
  font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.012em;
  font-size:clamp(32px,6.8vw,58px); line-height:1.16; margin:0; max-width:17ch;
  color:var(--ink);
}
.hero-subline{
  font-family:'Inter',system-ui,sans-serif; font-weight:400;
  font-size:clamp(15px,1.9vw,18px); line-height:1.55; margin:0; max-width:42ch;
  color:var(--ink-2); text-wrap:balance;
}
.hero-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px; margin-top:2px; }
.hero-link{
  font-family:'Fraunces',serif; font-style:italic; font-size:15.5px; color:var(--ink-2);
  padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.hero-link:hover{ color:var(--accent-deep); border-color:var(--accent-deep); }

/* the two loft windows — soft, low-key, flanking the vision on desktop;
   a small quiet pair beneath it on mobile. Plain <img>, no card. */
.hero-windows{ position:relative; z-index:1; display:flex; justify-content:center; align-items:center; gap:16px; margin-top:8px; }
.hero-window{ width:42%; max-width:180px; height:auto; opacity:.9; }
@media (min-width:900px){
  .hero-windows{ position:absolute; inset:0; margin:0; justify-content:space-between; align-items:center; padding:0 10px; pointer-events:none; z-index:1; }
  .hero-window{ width:min(22vw,230px); max-width:none; opacity:.8; filter:saturate(.94); }
  .hero-window-left{ transform:translateY(calc(-2% + var(--drift,0px))) rotate(-1.3deg); }
  .hero-window-right{ transform:translateY(calc(3% + var(--drift,0px))) rotate(1deg); }
}

/* ============ WINDOW LIGHT (2026-07-08) — the two loft windows read as real
   openings in the cream wall, not flat cut-outs. Two moves, both in-palette:
   (1) a soft radial feather on each window's own edge so its paper boundary
   dissolves into the cream exactly like the margin decor already does — this
   removes the faint rectangle the sketches carry and makes them sit ON the
   wall, not on a panel; (2) a gentle warm golden luminance, contained inside
   that feather, so the glass reads as lit without ever printing a box. No
   frame, no card, no rectangle. */
.hero-window{
  filter:saturate(.99)
    drop-shadow(0 2px 14px rgba(214,168,86,.18))
    drop-shadow(0 0 34px rgba(232,192,120,.12));
  -webkit-mask-image:radial-gradient(ellipse 74% 86% at 50% 47%, #000 60%, transparent 96%);
  mask-image:radial-gradient(ellipse 74% 86% at 50% 47%, #000 60%, transparent 96%);
}
.origin-window img{
  filter:drop-shadow(0 2px 14px rgba(214,168,86,.16))
    drop-shadow(0 0 30px rgba(232,192,120,.11));
  -webkit-mask-image:radial-gradient(ellipse 76% 86% at 50% 47%, #000 60%, transparent 96%);
  mask-image:radial-gradient(ellipse 76% 86% at 50% 47%, #000 60%, transparent 96%);
}
.join-sketch-window{ filter:drop-shadow(0 4px 24px rgba(214,168,86,.14)); }

/* ============ "WHAT IT IS" — a short honest beat, not a full chapter ============ */
.beat{ position:relative; padding:56px 20px; max-width:640px; margin:0 auto; }
.beat-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.07em; text-transform:lowercase; color:var(--accent-deep); margin:0 0 12px; }
.beat p{ font-size:clamp(15.5px,3.8vw,17.5px); line-height:var(--lh-body); color:var(--ink-2); max-width:56ch; margin:0; }
.beat-office{
  width:110px; height:250px; margin:26px 0 0 auto;
  background-image:url("../assets/sketch/office.png");
  background-repeat:no-repeat; background-size:460% auto; background-position:97% 30%;
  opacity:.92;
}
@media (min-width:900px){
  .beat{ max-width:900px; padding:88px 40px; display:flex; align-items:flex-start; gap:64px; justify-content:space-between; }
  .beat-copy{ max-width:58ch; }
  .beat-office{ margin:8px 0 0; flex:none; width:140px; height:300px; }
}

/* ============ MEET THE PRIDE — editorial, alternating, generous ============ */
.pride-rows{ display:flex; flex-direction:column; gap:52px; margin-top:40px; }
.pride-row{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.pride-portrait{ width:100%; max-width:220px; height:auto; }
.pride-text{ max-width:40ch; }
.pride-name{ font-family:'Fraunces',serif; font-weight:600; font-size:19px; margin:0 0 2px; color:var(--ink); }
.pride-role{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.05em; text-transform:lowercase; color:var(--faint); margin:0 0 10px; }
.pride-line{ font-family:'Fraunces',serif; font-style:italic; font-size:16px; line-height:1.5; color:var(--ink-2); margin:0; }
@media (min-width:760px){
  .pride-rows{ gap:64px; }
  .pride-row{ flex-direction:row; align-items:center; text-align:left; gap:44px; justify-content:center; }
  .pride-row:nth-child(even){ flex-direction:row-reverse; }
  .pride-portrait{ flex:0 0 220px; max-width:220px; }
  .pride-text{ flex:0 1 380px; }
}

/* ============ WHERE WE'RE FROM — a small poetic moment ============ */
.origin{ padding:72px 20px; max-width:760px; margin:0 auto; text-align:center; }
.origin-windows{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin:6px 0 30px; }
.origin-window{ margin:0; flex:0 1 220px; }
.origin-window img{ width:100%; max-width:220px; height:auto; display:block; margin:0 auto; transform:translateY(var(--drift,0px)); }
.origin-window figcaption{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; color:var(--faint); text-transform:lowercase; margin-top:10px; }
.origin-line{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(16px,3.6vw,19px); line-height:1.5; color:var(--ink-2); max-width:52ch; margin:0 auto; }
@media (min-width:700px){ .origin-windows{ gap:52px; } }

/* ============ OFFICE MARGIN DECOR (2026-07-08, STEF; opacity pass v2) ============
   AG: "can be more, not just the window but also details left and right so
   it really feels like an office." Borderless sketch pieces (bookshelf,
   plant ×2, pendant ×2, books+cup, desklamp), tucked into the page gutters
   alongside the existing hero windows — same treatment as those: plain
   <img>, multiply blend, a radial mask so each melts into the cream with no
   rectangle seam, pointer-events:none, low z-index so it never sits over
   content or a click target.

   v1 shipped these at .4–.46, which read as ghostly on a flat screenshot —
   AG: "it's shit, what is this picture." Opacity raised to .74–.85 here so
   the room is unmistakably furnished at a glance; multiply blend still does
   the work of keeping ink/shadow areas dark without ever printing a flat
   rectangle, and the feathered radial mask is untouched, so the melt into
   cream is identical, just stronger.

   Desktop-only (enabled at min-width:1024px), for two reasons: (1) AG's own
   brief — vision/subline stay the clear focus, and mobile has no margin to
   put anything in; (2) arithmetic — .chapter-inner.wide (900px cap) only
   clears a *reliable* gutter once available width - 900 leaves real room;
   below ~1024px that gutter is too thin for any of these pieces to sit in
   without grazing the actual copy. Verified against .chapter's own box
   model (chapter padding 20px<900px, 40px≥900px; chapter-inner max 640/900,
   margin:0 auto) at 900 / 1024 / 1280 / 1440 before picking sizes+insets, so
   every piece keeps a real cream margin around it at 1024px, not just 1440. */

.hero-extras{ display:none; }
.hero-extra-pendant,
.beat-bookshelf,
.pride-plant,
.gate-pendant,
.listen-bookscup,
.install-desklamp{ display:none; }

@media (min-width:1024px){
  .hero-extras{
    position:absolute; inset:0; margin:0; display:flex; justify-content:space-between;
    align-items:flex-end; padding:0 2.4% 3%; pointer-events:none; z-index:0;
  }
  .hero-extra{
    width:min(9vw,110px); height:auto; opacity:.8; mix-blend-mode:multiply; filter:saturate(.94);
    -webkit-mask-image:radial-gradient(ellipse 64% 64% at 50% 55%, #000 42%, transparent 86%);
    mask-image:radial-gradient(ellipse 64% 64% at 50% 55%, #000 42%, transparent 86%);
  }
  .hero-extra-chair{ transform:translateY(var(--drift,0px)) rotate(-2deg); }
  .hero-extra-plant{ transform:translateY(var(--drift,0px)) rotate(2deg); }

  /* one more piece (AG: room should feel furnished from every edge, not just
     the bottom corners): a small ceiling pendant hanging top-centre, in the
     headroom above the mark/vision block left by .chapter's vertical
     centring — never touches the text column (max-width:680px) below it. */
  .hero-extra-pendant{
    display:block; position:absolute; z-index:0; pointer-events:none;
    left:50%; top:3.5%; width:min(5vw,64px); height:auto; opacity:.74;
    mix-blend-mode:multiply; transform:translateY(var(--drift,0px)) translateX(-50%) rotate(-1deg);
    -webkit-mask-image:radial-gradient(ellipse 58% 76% at 50% 36%, #000 42%, transparent 88%);
    mask-image:radial-gradient(ellipse 58% 76% at 50% 36%, #000 42%, transparent 88%);
  }

  /* .beat is centred (margin:0 auto) inside full-width <main>, so its own
     horizontal centre coincides with the viewport's — the classic
     "translateX(-50vw)" break-out lets the bookshelf reach the true left
     page margin without restructuring .beat's existing flex children. */
  .beat-bookshelf{
    display:block; position:absolute; z-index:0; pointer-events:none;
    left:50%; top:50%; width:min(7vw,90px); height:auto; opacity:.8;
    mix-blend-mode:multiply;
    transform:translate(calc(-50vw + 40px), calc(-50% + var(--drift,0px))) rotate(-1.5deg);
    -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 46%, transparent 88%);
    mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 46%, transparent 88%);
  }

  .pride-plant{
    display:block; position:absolute; z-index:0; pointer-events:none;
    right:2.2%; top:56%; width:min(7vw,95px); height:auto; opacity:.78;
    mix-blend-mode:multiply; transform:translateY(calc(-50% + var(--drift,0px))) rotate(1.5deg);
    -webkit-mask-image:radial-gradient(ellipse 64% 64% at 50% 50%, #000 46%, transparent 88%);
    mask-image:radial-gradient(ellipse 64% 64% at 50% 50%, #000 46%, transparent 88%);
  }

  .gate-pendant{
    display:block; position:absolute; z-index:0; pointer-events:none;
    right:5%; top:1%; width:min(6vw,84px); height:auto; opacity:.74;
    mix-blend-mode:multiply; transform:translateY(var(--drift,0px));
    -webkit-mask-image:radial-gradient(ellipse 58% 74% at 50% 40%, #000 42%, transparent 88%);
    mask-image:radial-gradient(ellipse 58% 74% at 50% 40%, #000 42%, transparent 88%);
  }

  .listen-bookscup{
    display:block; position:absolute; z-index:0; pointer-events:none;
    left:3.6%; bottom:9%; width:min(11vw,140px); height:auto; opacity:.8;
    mix-blend-mode:multiply; transform:translateY(var(--drift,0px)) rotate(-1.5deg);
    -webkit-mask-image:radial-gradient(ellipse 66% 60% at 50% 50%, #000 46%, transparent 88%);
    mask-image:radial-gradient(ellipse 66% 60% at 50% 50%, #000 46%, transparent 88%);
  }

  .install-desklamp{
    display:block; position:absolute; z-index:0; pointer-events:none;
    right:3.6%; top:44%; width:min(7vw,92px); height:auto; opacity:.76;
    mix-blend-mode:multiply; transform:translateY(calc(-50% + var(--drift,0px))) rotate(2deg);
    -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 46%, transparent 88%);
    mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 46%, transparent 88%);
  }
}

/* ============ MOBILE SAFETY — nothing wider than the viewport, 320–430px ============ */
@media (max-width:430px){
  .hero-window{ max-width:150px; }
  .beat-office{ width:92px; height:210px; }
  .pride-portrait{ max-width:190px; }
}

/* ============ JOIN — cream close, no more dark loft photo ============
   The final chapter used to be the old full-bleed rendered loft photograph
   (office_full_sidescroll_C_savannah.webp) under a dark scrim with
   light-on-dark type — the one other spot still fighting the cream/sketch
   world. It's now a plain .chapter--paper section like every other chapter:
   cream ground, dark-on-cream ink (inherited for free from .chapter--paper),
   with one borderless sketch — the savannah loft window, the same asset the
   hero and "where we're from" already use — melted into the page corner via
   multiply so it never reads as a photo card. Copy, form, turnstile hook and
   #join-nudge are untouched. */
.join-sketch-chapter{ position:relative; }
.join-sketch-window{
  position:absolute; z-index:0; pointer-events:none;
  width:min(46vw,300px); height:auto;
  right:-4%; bottom:-2%;
  opacity:.5; mix-blend-mode:multiply; transform:translateY(var(--drift,0px));
  /* the sketch's own paper tone doesn't exactly match the page cream, so a
     plain multiply still left a faint rectangle seam — feather the whole
     edge to transparent so it fades into the page instead of ending in a
     visible box. */
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 45%, #000 50%, transparent 90%);
  mask-image:radial-gradient(ellipse 72% 72% at 50% 45%, #000 50%, transparent 90%);
}
@media (max-width:640px){
  /* FIX (2026-07-09 QA): right:-8% pushed the box ~30px past the viewport edge
     at 320-390px, reading as a cut-off decoration. Keep it flush inside so the
     feathered sketch sits fully on-screen. */
  .join-sketch-window{ width:48vw; max-width:200px; right:0; bottom:auto; top:4%; opacity:.4; }
}
@media (min-width:900px){
  .join-sketch-window{ width:min(26vw,340px); right:2%; bottom:-4%; opacity:.56; }
}

/* the join chapter is cream now, same as the footer beneath it — the old
   dark-to-light seam fade (written for the removed photo+scrim) would leave
   a stray brown smudge over cream; neutralise it. */
footer.g-foot::before{ background:none; }