/* ---------- FONTS ----------------------------------------------------------
   Upload the three files in Squarespace (Design ▸ Custom CSS ▸ Manage Custom
   Files), then replace each PLACEHOLDER url() below with the link Squarespace
   gives you. JetBrains Mono loads from Google and needs no upload.
--------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Upload each font once (Design ▸ Custom CSS ▸ Manage Custom Files).
   Replace the ENTIRE placeholder string with the URL Squarespace returns.
   If you upload a .ttf keep format('truetype'); if .woff2, change to format('woff2'). */
@font-face{
  font-family:'Druk';
  src:url('REPLACE_WITH_DRUK_HEAVY_FILE_URL') format('truetype');
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Canela';
  src:url('REPLACE_WITH_CANELA_ITALIC_FILE_URL') format('truetype');
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------- TOKENS -------------------------------------------------------- */
:root{
  --magenta:#e0145e;
  --black:#0a0a0a;
  --fg:#f0ece5;          /* off-white text on dark */
  --dim:#888278;         /* muted mono */
  --ink:#0a0a0a;         /* text on white cover */
  --ink-dim:#8a8782;

  --pad: clamp(22px, 5vw, 80px);     /* responsive side padding */
  --hair-d: rgba(240,236,229,0.18);  /* hairline on dark */
  --hair-l: rgba(10,10,10,0.18);     /* hairline on white */
}

/* ---------- RESET (scoped) ------------------------------------------------ */
#file-250626 *{ box-sizing:border-box; margin:0; padding:0; }
#file-250626{
  font-family:'JetBrains Mono',monospace;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:var(--black);
  width:100%;
  overflow-x:hidden;
}
#file-250626 a{ color:inherit; text-decoration:none; }

/* ---------- SECTION SHELL ------------------------------------------------- */
#file-250626 .sec{ position:relative; padding-left:var(--pad); padding-right:var(--pad); }
#file-250626 .z-white{ background:#ffffff; color:var(--ink); }
#file-250626 .z-black{ background:var(--black); color:var(--fg); }

/* section header — chapter divider */
#file-250626 .hdr{
  display:flex; justify-content:space-between; align-items:center;
  font-size:clamp(10px,1.1vw,13px); letter-spacing:0.09em; text-transform:uppercase;
  padding:clamp(26px,3.4vw,40px) 0 clamp(12px,1.4vw,18px);
}
#file-250626 .hdr .l{ display:flex; align-items:baseline; gap:6px; white-space:nowrap; min-width:0; }
#file-250626 .hdr .mk{ font-weight:700; }
#file-250626 .hdr .sl{ opacity:0.5; }
#file-250626 .hdr .ds{
  font-family:'Canela',serif; font-style:italic;
  font-size:clamp(12px,1.3vw,16px); letter-spacing:0; text-transform:none;
}
#file-250626 .hdr.on-white{ border-bottom:1px solid var(--ink); }
#file-250626 .hdr.on-black{ border-bottom:1px solid var(--hair-d); }

/* ---------- THE MELT (white → black, static band) ------------------------- */
#file-250626 .melt{
  height:clamp(140px,18vw,240px); width:100%;
  background:linear-gradient(to bottom,#ffffff 0%, var(--black) 100%);
}

/* ============================================================
   01 · INVITATION  (the threshold — full authority)
   ============================================================ */
#file-250626 .invite{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
#file-250626 .invite .stage{ position:relative; flex:1; display:flex; flex-direction:column; padding-bottom:clamp(40px,5vw,80px); }

#file-250626 .invite .big18{
  position:absolute; right:-2vw; top:clamp(180px,24vw,260px);
  font-family:'Druk',sans-serif; line-height:0.78; letter-spacing:-0.04em;
  font-size:clamp(330px,52vw,660px); color:#f1f1f1; z-index:0; pointer-events:none;
  user-select:none;
}
#file-250626 .invite .hero{
  position:relative; z-index:1; font-family:'Druk',sans-serif;
  font-size:clamp(72px,11vw,160px); line-height:0.84; text-transform:uppercase;
  letter-spacing:-0.008em; margin-top:clamp(90px,12vw,160px);
}
#file-250626 .invite .slash{
  position:relative; z-index:1; font-family:'Canela',serif; font-style:italic;
  font-size:clamp(20px,2.4vw,34px); margin-top:clamp(8px,1vw,14px);
}
#file-250626 .invite .breach{
  position:relative; z-index:1; font-family:'Canela',serif; font-style:italic;
  font-size:clamp(20px,2.3vw,32px); line-height:1.34; margin-top:clamp(26px,3vw,40px);
  max-width:620px;
}
#file-250626 .invite .data{
  position:relative; z-index:1; margin-top:auto; border-top:1px solid var(--ink);
  display:flex; flex-direction:column;
}
#file-250626 .invite .drow{ padding:14px 0; border-bottom:1px solid var(--hair-l); }
#file-250626 .invite .drow:last-child{ border-bottom:none; }
#file-250626 .invite .dl{ font-size:clamp(9px,0.9vw,11px); letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:5px; }
#file-250626 .invite .dv{ font-family:'Druk',sans-serif; font-size:clamp(25px,3vw,34px); text-transform:uppercase; line-height:1; }
#file-250626 .invite .dsub{ font-size:clamp(10px,1vw,12px); margin-top:5px; }

@media (min-width:820px){
  #file-250626 .invite .data{ flex-direction:row; gap:0; }
  #file-250626 .invite .drow{
    flex:1; padding:22px 28px 22px 0; margin-right:28px;
    border-bottom:none; border-right:1px solid var(--hair-l);
  }
  #file-250626 .invite .drow:last-child{ border-right:none; margin-right:0; }
}

/* ============================================================
   INTERIOR (black file) — shared
   ============================================================ */

/* POSTMARK note */
@media (min-width:900px){
    #file-250626 .pm-grid .ihero{ flex:0 0 auto; }
  #file-250626 .pm-grid .prose{ align-self:center; }
}

/* EARMARK data + links */
#file-250626 .table{ margin-top:clamp(28px,3.4vw,0px); border-top:1px solid var(--fg); }
#file-250626 .trow{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:clamp(13px,1.6vw,18px) 0; border-bottom:1px solid rgba(240,236,229,0.20);
  font-size:clamp(10px,1.2vw,14px); letter-spacing:0.13em; text-transform:uppercase;
}
#file-250626 .trow .k{ color:var(--dim); }
#file-250626 .stream{ margin-top:clamp(26px,3vw,30px); border-top:1px solid var(--fg); }
#file-250626 .stream a{
  display:flex; justify-content:space-between; align-items:center;
  font-size:clamp(12px,1.4vw,16px); letter-spacing:0.14em; text-transform:uppercase;
  padding:clamp(16px,2vw,20px) 0; border-bottom:1px solid rgba(240,236,229,0.20);
  transition:padding-left .35s ease, color .35s ease;
}
#file-250626 .stream a:hover{ padding-left:10px; color:#fff; }
@media (min-width:900px){
    #file-250626 .em-grid .ihero{ flex:0 0 auto; }
  #file-250626 .em-grid .em-col{ max-width:600px; align-self:center; }
}

/* BOOKMARK pending */

/* section bottom breathing room */
#file-250626 .pad-b{ padding-bottom:clamp(110px,16vw,220px); }


/* ============================================================
   INTERIOR BLACK FILE — unified layout (mobile = desktop, expanded)
   ghost number left / object title right on one spine / content below title
   ============================================================ */
#file-250626 .ifile{
  display:grid;
  grid-template-columns: 1fr;            /* mobile: single channel */
  padding-top: clamp(30px,3.4vw,56px);
}
#file-250626 .ifile .num{
  grid-row:1; grid-column:1;
  font-family:'Druk',sans-serif; line-height:0.8; letter-spacing:-0.04em;
  font-size:clamp(150px,20vw,285px);          /* -5% applied (max 300→285) */
  color:rgba(240,236,229,0.07);               /* DIR 4: quiet, identical both formats */
  user-select:none; pointer-events:none;
  align-self:start;
}
#file-250626 .ifile .obj{ grid-row:1; grid-column:1; align-self:start; }  /* title shares the number's band */
#file-250626 .ifile .obj .ihero{
  font-family:'Druk',sans-serif; text-transform:uppercase; letter-spacing:-0.008em;
  font-size:clamp(80px,13vw,150px); line-height:0.84;
}
/* content sits BELOW the title, locked to the title spine */
#file-250626 .ifile .content{ grid-column:1; margin-top:clamp(26px,3vw,40px); }

/* POSTMARK note — DIR 6: readable, not texture */
#file-250626 .prose{
  font-family:'Canela',serif; font-style:italic;
  font-size:clamp(21px,2.5vw,34px); line-height:1.46; max-width:620px;
}
/* EARMARK metadata + links — DIR 7: subordinate to PLAY BACK */
#file-250626 .table{ border-top:1px solid var(--fg); max-width:560px; }
#file-250626 .stream{ margin-top:clamp(26px,3vw,30px); border-top:1px solid var(--fg); max-width:560px; }
/* BOOKMARK — DIR 8/9 */
#file-250626 .slash-line{ font-family:'Canela',serif; font-style:italic; font-size:clamp(19px,2.1vw,28px); margin-top:clamp(16px,2vw,22px); }
#file-250626 .bm-table{ border-top:1px solid var(--fg); max-width:560px; margin-top:clamp(28px,3vw,40px); }

/* ----- DESKTOP: same structure, more room. Number moves to its own left zone,
   title + content lock to a shared spine in the right zone. DIR 1,2,5,13 ----- */
@media (min-width:900px){
  #file-250626 .ifile{
    grid-template-columns: minmax(220px, 30%) 1fr;
    column-gap: clamp(48px,5vw,70px);
  }
  #file-250626 .ifile .num{ grid-column:1; grid-row:1; justify-self:start; }
  #file-250626 .ifile .obj{ grid-column:2; grid-row:1; }     /* title = right zone, the spine */
  #file-250626 .ifile .content{ grid-column:2; grid-row:2; } /* content below title, same spine */
  #file-250626 .ifile .num{ align-self:start; }
}

/* reveal-on-scroll (respects reduced motion) */
#file-250626 .reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s ease; }
#file-250626 .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  #file-250626 .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   Hide Squarespace template chrome site-wide so the file runs
   full-bleed (carried over from the prior build — proven on this site).
   ============================================================ */
.header,
#header,
.header-announcement-bar-wrapper,
.sqs-announcement-bar-dropzone,
#footer-sections,
.footer-sections,
footer.sections { display:none !important; }