/* =====================================================================
   RARITY — "Maison de Rarity" / Carousel Boutique
   Shared design system for the /mlp/ Rarity general thread site.
   Couture editorial × Neocities charm.  All static, Neocities-ready.
   ===================================================================== */

:root{
  --ink:#0e0a14;            /* near-black plum ground            */
  --ink-2:#160f24;          /* gradient partner                 */
  --plum:#1d1430;           /* deep plum panel                  */
  --plum-2:#2a1d45;         /* lifted plum                      */
  --indigo:#3a2a63;
  --diamond:#9ec7ef;        /* diamond blue accent              */
  --diamond-deep:#6f9fd6;
  --gold:#d8be86;           /* champagne gold                   */
  --gold-soft:#e7d6ab;
  --ivory:#f4eee6;          /* warm ivory text                  */
  --ivory-dim:#c7bcd2;      /* dimmed lilac-ivory               */
  --marsh:#f3dfe6;          /* marshmallow blush                */
  --line:rgba(216,190,134,.22);   /* gold hairline              */
  --line-soft:rgba(216,190,134,.14);

  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", "Century Gothic", "Futura", system-ui, sans-serif;

  --maxw:1280px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  color:var(--ivory);
  background:
    radial-gradient(140% 80% at 50% -10%, rgba(58,42,99,.45), transparent 60%),
    linear-gradient(180deg,var(--ink),var(--ink-2));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0; font-weight:400;}
p{margin:0;}

/* ---------- type helpers ---------- */
.serif{font-family:var(--serif);}
.italic{font-style:italic;}
.kicker{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.kicker.blue{color:var(--diamond);}
.dim{color:var(--ivory-dim);}
.center{text-align:center;}

/* ---------- diamonds (cutie mark motif) ---------- */
.diamond{
  display:inline-block; width:.55em; height:.55em; background:var(--diamond);
  transform:rotate(45deg); vertical-align:middle;
  box-shadow:0 0 9px rgba(158,199,239,.55);
}
.diamond.g{background:var(--gold); box-shadow:0 0 9px rgba(216,190,134,.5);}
.diamonds{display:inline-flex; gap:7px; align-items:center;}
.diamonds .diamond:nth-child(2){width:.7em; height:.7em;}

/* ---------- hairline rule ---------- */
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); border:0; margin:0;}
.rule.soft{background:linear-gradient(90deg,transparent,var(--line),transparent);}

/* ---------- striped placeholder ---------- */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(158,199,239,.07) 0 10px, rgba(158,199,239,0) 10px 20px),
    linear-gradient(180deg,#211735,#171024);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:rgba(216,190,134,.62);
}
.ph::after{
  content:attr(data-ph);
  font-family:"Courier New", ui-monospace, monospace; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; text-align:center; padding:10px; line-height:1.5;
}
.ph.blush{background:repeating-linear-gradient(135deg, rgba(243,223,230,.5) 0 10px, rgba(243,223,230,.32) 10px 20px); color:#7a5566;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); background:var(--gold-soft); padding:14px 28px; display:inline-block;
  border:0; cursor:pointer; transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{background:var(--ivory); transform:translateY(-2px);}
.btn.ghost{background:transparent; color:var(--gold-soft); border:1px solid rgba(216,190,134,.5);}
.btn.ghost:hover{background:rgba(216,190,134,.12); color:var(--ivory);}
.btn.blue{background:var(--diamond);}
.btn.blue:hover{background:#bcd9f6;}

/* =====================================================================
   SITE CHROME  (injected by site.js into #site-header / #site-footer)
   ===================================================================== */

/* marquee strip */
.marquee{
  background:var(--gold-soft); color:var(--ink);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  overflow:hidden; white-space:nowrap; padding:7px 0; position:relative;
}
.marquee__track{display:inline-block; padding-left:100%; animation:marquee 26s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-100%);}}
@media (prefers-reduced-motion: reduce){
  .marquee__track{animation:none; padding-left:0; text-align:center; display:block;}
}

/* masthead */
.masthead{
  max-width:var(--maxw); margin:0 auto; padding:26px 40px 18px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
.brand{line-height:1;}
.brand__name{font-family:var(--serif); font-style:italic; font-size:54px; letter-spacing:.01em;}
.brand__sub{font-family:var(--serif); font-style:italic; font-size:18px; color:var(--diamond); margin-top:2px;}
.masthead__meta{text-align:right; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim);}
.masthead__meta .vol{color:var(--gold);}

/* nav */
.nav{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(14,10,20,.55); backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:40;
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
}
.nav a{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim);
  padding:15px 16px; position:relative; transition:color .16s ease;
}
.nav a:hover{color:var(--ivory);}
.nav a.active{color:var(--gold);}
.nav a.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:9px; height:1px; background:var(--gold);
}
.nav a .diamond{width:5px; height:5px; margin-right:7px; opacity:.6;}

/* footer — big "lifestyle" quote, with credit | webring details beneath */
.foot{border-top:1px solid var(--line); margin-top:80px; background:rgba(13,9,18,.6);}
.foot__quote{max-width:var(--maxw); margin:0 auto; padding:66px 40px 30px; text-align:center;}
.foot__quote q{display:block; font-family:var(--serif); font-style:italic; font-size:clamp(32px,5vw,58px); line-height:1.08; quotes:none; color:var(--ivory);}
.foot__quote-by{display:block; margin-top:20px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);}
.foot__quote-by .diamonds{margin-right:10px; transform:translateY(1px);}
.foot__quote-by .diamond{width:5px; height:5px;}
.foot__inner{max-width:var(--maxw); margin:0 auto; padding:24px 40px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:34px; border-top:1px solid var(--line-soft);}
.foot__credit{flex:0 0 auto;}
.foot__credit a{font-family:var(--serif); font-style:italic; font-size:19px; color:var(--gold); letter-spacing:.01em;}
.foot__credit a:hover{color:var(--ivory);}
.foot__credit .sub{display:block; font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(199,188,210,.5); margin-top:5px;}
.foot__divider{flex:1 1 auto; height:1px; background:linear-gradient(90deg, var(--line), transparent);}
.foot__ring{flex:0 0 auto; width:300px; max-width:46%;}
.mlpring{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end;}
.webring{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.webring .ph{width:88px; height:31px; flex:0 0 auto;}

/* override the external onionring.css so the widget reads on our dark footer */
#mlpring{background:transparent !important; color:var(--ivory) !important; width:100%;}
#mlpring table{background:rgba(29,20,48,.6) !important; border:1px solid var(--line) !important; border-collapse:separate !important; margin:0 0 0 auto !important; width:100% !important;}
#mlpring td{color:var(--ivory) !important; background:transparent !important; font-family:var(--sans) !important; font-size:11px !important; letter-spacing:.06em !important; line-height:1.55 !important; text-shadow:none !important; padding:10px 14px !important; text-align:center !important; vertical-align:middle !important;}
#mlpring a{color:var(--gold) !important; text-shadow:none !important; text-decoration:none !important; transition:color .16s ease;}
#mlpring a:hover{color:var(--ivory) !important;}
#mlpring img{display:inline-block !important; vertical-align:middle !important;}

/* =====================================================================
   LAYOUT PRIMITIVES
   ===================================================================== */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
.section{padding:64px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:30px;}
.section-head .title{font-family:var(--serif); font-style:italic; font-size:46px; line-height:1;}
.section-head .link{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); white-space:nowrap;}
.section-head .link:hover{color:var(--ivory);}

/* page hero (interior pages) */
.page-hero{padding:54px 0 34px; border-bottom:1px solid var(--line-soft);}
.page-hero h1{font-family:var(--serif); font-style:italic; font-size:clamp(54px,9vw,104px); line-height:.86; margin-top:10px;}
.page-hero .lede{max-width:560px; margin-top:18px; color:var(--ivory-dim); font-size:16px; line-height:1.8;}

/* =====================================================================
   HOME — magazine grid of big image buttons
   ===================================================================== */
.hero{padding:46px 0 30px;}
.hero h1{font-family:var(--serif); font-style:italic; font-size:clamp(64px,12vw,128px); line-height:.84; letter-spacing:-.01em; margin-top:8px;}
.hero .lede{max-width:520px; margin-top:20px; color:var(--ivory-dim); font-size:16px; line-height:1.8;}

.mag{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px;
}
.tile{
  position:relative; overflow:hidden; border:1px solid var(--line);
  display:flex; align-items:flex-end; text-decoration:none; color:var(--ivory);
  background:linear-gradient(180deg,#211735,#171024);
}
.tile .tile__ph{position:absolute; inset:0;}
.tile__grad{position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,10,20,0) 35%, rgba(14,10,20,.82) 100%); z-index:1;}
.tile__body{position:relative; z-index:2; padding:20px 22px; width:100%;}
.tile__num{font-size:10px; letter-spacing:.28em; color:var(--gold); text-transform:uppercase;}
.tile__name{font-family:var(--serif); font-style:italic; font-size:30px; line-height:1; margin-top:4px;}
.tile__desc{font-size:12px; color:var(--ivory-dim); margin-top:6px; opacity:0; max-height:0; transition:opacity .25s ease, max-height .25s ease;}
.tile:hover .tile__desc{opacity:1; max-height:60px;}
.tile__arrow{position:absolute; top:16px; right:18px; z-index:2; color:var(--gold); font-size:18px; opacity:0; transform:translateY(-4px); transition:.22s ease;}
.tile:hover .tile__arrow{opacity:1; transform:translateY(0);}
.tile:hover{border-color:rgba(216,190,134,.55);}
.tile .tile__ph.ph::after{opacity:.55;}
/* spans */
.tile.tall{grid-row:span 2;}
.tile.wide{grid-column:span 2;}
.tile.big{grid-column:span 2; grid-row:span 2;}

/* compact editorial hero (home) — stacks on mobile, goes horizontal on desktop */
.home-hero{padding:30px 0 26px;}
.home-hero__lead h1{font-family:var(--serif); font-style:italic; font-size:clamp(52px,9vw,92px); line-height:.86; margin-top:8px;}
.home-hero__intro{margin-top:18px;}
.home-hero .lede{max-width:520px; color:var(--ivory-dim); font-size:16px; line-height:1.75;}
.home-hero__btns{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;}
.mag-wrap{padding-bottom:20px;}

/* =====================================================================
   NO-SCROLL HOME  — lock to one 1920×1080-friendly screen on desktop.
   Only engages when the viewport is genuinely desktop-sized; smaller
   screens fall through to the normal scrolling stack below.
   ===================================================================== */
@media (min-width:1000px) and (min-height:680px){
  body[data-page="home"]{height:100vh; overflow:hidden; display:flex; flex-direction:column;}
  body[data-page="home"] .wrap{max-width:1640px; margin-left:auto; margin-right:auto; padding-left:30px; padding-right:30px; box-sizing:border-box;}

  body[data-page="home"] #site-header{flex:0 0 auto;}
  body[data-page="home"] main{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
  body[data-page="home"] #site-footer{flex:0 0 auto;}

  /* slim chrome */
  body[data-page="home"] .marquee{padding:6px 0;}
  body[data-page="home"] .masthead{padding:16px 40px 12px;}
  body[data-page="home"] .brand__name{font-size:42px;}
  body[data-page="home"] .brand__sub{font-size:16px;}
  body[data-page="home"] .nav a{padding:12px 16px;}

  /* horizontal hero band */
  body[data-page="home"] .home-hero{display:flex; align-items:flex-end; justify-content:space-between; gap:48px; padding:22px 0 18px;}
  body[data-page="home"] .home-hero__lead h1{font-size:clamp(46px,5vw,76px); margin-top:4px;}
  body[data-page="home"] .home-hero__intro{margin-top:0; max-width:560px;}
  body[data-page="home"] .home-hero .lede{font-size:14.5px; line-height:1.6; margin-left:auto; text-align:right;}
  body[data-page="home"] .home-hero__btns{justify-content:flex-end; margin-top:14px;}

  /* grid band matches the "Dare to dazzle" header's width so the boxes
     line up under it — a tidy 2×2 of destinations. */
  body[data-page="home"] .mag-wrap{flex:1 1 auto; min-height:0; padding-bottom:18px; width:100%; max-width:870px;}
  body[data-page="home"] .mag{height:100%; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); grid-auto-rows:unset;}
  body[data-page="home"] .tile.big{grid-column:auto; grid-row:auto;}
  body[data-page="home"] .tile.wide{grid-column:auto; grid-row:auto;}
  body[data-page="home"] .tile.tall{grid-column:auto; grid-row:auto;}

  /* slim footer (grand quote hidden on home only) */
  body[data-page="home"] .foot{margin-top:0;}
  body[data-page="home"] .foot__quote{display:none;}
  body[data-page="home"] .foot__inner{padding:12px 40px;}

  /* ---------------------------------------------------------------
     INTERIOR PAGES — lock to one screen; long content lives in an
     internal .page-scroll box so the PAGE never scrolls, only it.
     --------------------------------------------------------------- */
  body.interior{height:100vh; overflow:hidden; display:flex; flex-direction:column;}
  body.interior .wrap{max-width:1500px;}
  body.interior #site-header{flex:0 0 auto;}
  body.interior main{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
  body.interior #site-footer{flex:0 0 auto;}

  /* slim chrome */
  body.interior .marquee{padding:6px 0;}
  body.interior .masthead{padding:14px 40px 10px;}
  body.interior .brand__name{font-size:40px;}
  body.interior .brand__sub{font-size:15px;}
  body.interior .nav a{padding:11px 16px;}

  /* slim page hero (fixed band) */
  body.interior .page-hero{flex:0 0 auto; padding:20px 0 16px;}
  body.interior .page-hero h1{font-size:clamp(40px,5vw,62px); line-height:.9;}
  body.interior .page-hero .lede{margin-top:9px; font-size:14px; line-height:1.6; max-width:760px;}

  /* the internal scroll region */
  body.interior .page-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:6px;}
  body.interior .page-scroll .section{padding:22px 0;}
  body.interior .page-scroll > .section:first-child{padding-top:18px;}
  body.interior .page-scroll > .section:last-child{padding-bottom:30px;}

  /* tidy scrollbar */
  body.interior .page-scroll::-webkit-scrollbar{width:10px;}
  body.interior .page-scroll::-webkit-scrollbar-thumb{background:rgba(216,190,134,.3); border-radius:10px;}
  body.interior .page-scroll::-webkit-scrollbar-track{background:rgba(216,190,134,.06);}
  body.interior .page-scroll{scrollbar-width:thin; scrollbar-color:rgba(216,190,134,.35) rgba(216,190,134,.06);}

  /* slim footer */
  body.interior .foot{margin-top:0;}
  body.interior .foot__quote{display:none;}
  body.interior .foot__inner{padding:12px 40px;}

  /* archive: fixed left rail + self-scrolling greentext list */
  body.interior[data-page="collections"] main > .archive-cols{flex:1 1 auto; min-height:0; height:100%; padding:18px 0 0;}
  body.interior[data-page="collections"] .archive-cols{grid-template-columns:330px 1fr; align-items:stretch;}
  body.interior[data-page="collections"] .archive-rail{min-height:0;}
  body.interior[data-page="collections"] .archive-main{min-height:0;}
  body.interior[data-page="collections"] #greentext-list{flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:8px;}
  body.interior[data-page="collections"] #greentext-list::-webkit-scrollbar{width:9px;}
  body.interior[data-page="collections"] #greentext-list::-webkit-scrollbar-thumb{background:rgba(216,190,134,.3); border-radius:9px;}

  /* guest book: fixed sign-card on the left; only the signatures scroll.
     grid-template-rows pins the single row to the frame height so the
     form can never push the page past one screen — it compacts to fit. */
  body.interior[data-page="guestbook"] main > .gb-section{flex:1 1 auto; min-height:0; height:100%; padding:16px 0 0;}
  body.interior[data-page="guestbook"] .gb{height:100%; min-height:0; grid-template-rows:minmax(0,1fr); align-items:stretch; gap:26px;}
  body.interior[data-page="guestbook"] .gb__form{align-self:stretch; display:flex; flex-direction:column; min-height:0; padding:16px 18px; overflow-y:auto;}
  body.interior[data-page="guestbook"] .gb__form h4{font-size:20px; margin-bottom:0;}
  body.interior[data-page="guestbook"] .gb__form > p.dim{display:none;}
  body.interior[data-page="guestbook"] .gb__form .field{margin-top:7px;}
  body.interior[data-page="guestbook"] .gb__form .field label{margin-bottom:3px;}
  body.interior[data-page="guestbook"] .gb__form textarea{min-height:54px; height:54px;}
  /* the live preview is redundant with the signatures wall on one screen */
  body.interior[data-page="guestbook"] .gb__form .field--preview{display:none;}
  body.interior[data-page="guestbook"] .gb__form .gb__submit{margin-top:10px;}
  body.interior[data-page="guestbook"] .gb__entries-col{display:flex; flex-direction:column; min-height:0;}
  body.interior[data-page="guestbook"] #gb-entries{flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:8px;}
  body.interior[data-page="guestbook"] .gb__form::-webkit-scrollbar{width:9px;}
  body.interior[data-page="guestbook"] .gb__form::-webkit-scrollbar-thumb{background:rgba(216,190,134,.3); border-radius:9px;}
  body.interior[data-page="guestbook"] #gb-entries::-webkit-scrollbar{width:9px;}
  body.interior[data-page="guestbook"] #gb-entries::-webkit-scrollbar-thumb{background:rgba(216,190,134,.3); border-radius:9px;}
}

/* =====================================================================
   ARCHIVE — two-column: fixed rail + scrollable greentext stacks
   ===================================================================== */
.archive-cols{display:grid; grid-template-columns:340px 1fr; gap:34px; align-items:start;}
.archive-rail{display:flex; flex-direction:column; gap:13px;}
.archive-feature{height:190px; border:1px solid var(--line-soft); background:#171024; overflow:hidden; position:relative;}
.archive-feature img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.archive-rail .btn{align-self:flex-start;}
.archive-panel{margin-top:4px;}
.archive-panel__label{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:9px;}
.archive-main{display:flex; flex-direction:column;}

/* pull-quote band */
.quote-band{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:60px 0; text-align:center;
}
.quote-band q{font-family:var(--serif); font-style:italic; font-size:clamp(30px,4.5vw,54px); line-height:1.1; quotes:none;}
.quote-band .by{display:block; margin-top:20px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);}

/* swatch / now-playing row */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.swatch{background:var(--marsh); color:#3a2238; padding:30px 32px; display:flex; flex-direction:column; justify-content:center; min-height:200px;}
.swatch .no{font-size:10px; letter-spacing:.3em; text-transform:uppercase;}
.swatch .nm{font-family:var(--serif); font-style:italic; font-size:42px; line-height:1; margin:6px 0;}
.swatch .meta{font-size:11px; letter-spacing:.08em;}
.panel{border:1px solid var(--line); background:rgba(29,20,48,.55); padding:30px 32px; display:flex; flex-direction:column; justify-content:center; gap:8px;}
.panel .nm{font-family:var(--serif); font-style:italic; font-size:32px;}

/* =====================================================================
   CARDS (collections / archive / lookbook / screening)
   ===================================================================== */
.grid{display:grid; gap:18px;}
.grid.c2{grid-template-columns:repeat(2,1fr);}
.grid.c3{grid-template-columns:repeat(3,1fr);}
.grid.c4{grid-template-columns:repeat(4,1fr);}

.card{border:1px solid var(--line-soft); background:rgba(29,20,48,.4); transition:border-color .2s ease, transform .2s ease;}
.card:hover{border-color:rgba(216,190,134,.5); transform:translateY(-3px);}
.card .ph{height:230px; border:0; border-bottom:1px solid var(--line-soft);}
.card__body{padding:16px 18px 20px;}
.card__meta{display:flex; justify-content:space-between; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);}
.card__title{font-family:var(--serif); font-style:italic; font-size:24px; margin:6px 0 4px; line-height:1.1;}
.card__sub{font-size:13px; color:var(--ivory-dim);}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.tag{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-dim); border:1px solid var(--line-soft); padding:4px 9px;}

/* filter chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
.chip{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-dim);
  border:1px solid var(--line); padding:9px 16px; cursor:pointer; background:transparent; transition:.16s ease;}
.chip:hover{color:var(--ivory);}
.chip.active{background:var(--gold-soft); color:var(--ink); border-color:var(--gold-soft);}

/* archive list (greentexts) */
.story{display:grid; grid-template-columns:64px 1fr auto; gap:22px; align-items:center;
  padding:22px 4px; border-bottom:1px solid var(--line-soft); transition:.18s ease;}
.story:hover{background:rgba(42,29,69,.35); padding-left:14px;}
.story__no{font-family:var(--serif); font-style:italic; font-size:34px; color:var(--gold);}
.story__title{font-family:var(--serif); font-style:italic; font-size:28px; line-height:1.05;}
.story__by{font-size:12px; color:var(--ivory-dim); margin-top:4px; letter-spacing:.04em;}
.story__stats{text-align:right; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim);}
.story__stats b{color:var(--diamond); font-weight:500;}

/* lookbook masonry */
.masonry{columns:4; column-gap:14px;}
.masonry .frame{break-inside:avoid; margin-bottom:14px; border:1px solid var(--line-soft); background:#171024; display:block; position:relative; overflow:hidden; cursor:pointer;}
.masonry .frame .ph{border:0;}
.masonry .frame img{width:100%; height:auto; display:block; opacity:0; transition:opacity .5s ease, transform .5s ease;}
.masonry .frame img.loaded{opacity:1;}
.masonry .frame:hover img{transform:scale(1.045);}
.masonry .frame::after{content:""; position:absolute; inset:0; border:1px solid rgba(216,190,134,0); transition:border-color .2s ease; pointer-events:none;}
.masonry .frame:hover::after{border-color:rgba(216,190,134,.6);}
.lookbook-credit{text-align:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(199,188,210,.55); margin-top:36px;}
.lookbook-credit a{color:var(--gold);}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(8,6,12,.93); display:flex; align-items:center; justify-content:center; padding:48px; opacity:0; pointer-events:none; transition:opacity .25s ease;}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox__img{max-width:88vw; max-height:84vh; box-shadow:0 24px 70px rgba(0,0,0,.65); border:1px solid var(--line);}
.lightbox__close{position:absolute; top:18px; right:26px; font-size:34px; color:var(--gold); cursor:pointer; background:none; border:0; line-height:1;}
.lightbox__close:hover{color:var(--ivory);}
.lightbox__src{position:absolute; bottom:18px; left:0; right:0; text-align:center; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim);}
.lightbox__src a{color:var(--gold);}
.lightbox__nav{position:absolute; top:50%; transform:translateY(-50%); font-size:34px; color:var(--gold); cursor:pointer; background:none; border:0; padding:14px 20px; user-select:none;}
.lightbox__nav:hover{color:var(--ivory);}
.lightbox__nav.prev{left:8px;}
.lightbox__nav.next{right:8px;}
@media (max-width:720px){ .lightbox__nav{font-size:26px; padding:10px;} }

/* screening room */
.reel{position:relative;}
.reel .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3;}
.reel .play span{width:58px; height:58px; border-radius:50%; border:1px solid var(--gold);
  background:rgba(14,10,20,.55); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:18px; transition:.2s ease;}
.reel:hover .play span{background:var(--gold); color:var(--ink); transform:scale(1.08);}

/* =====================================================================
   SKETCH WALL (interactive)
   ===================================================================== */
.sketch{display:grid; grid-template-columns:1fr 250px; gap:22px; align-items:start;}
.sketch__stage{border:1px solid var(--line); background:#fbf7f0; position:relative;}
#sketchpad{display:block; width:100%; height:auto; background:#fbf7f0; cursor:crosshair; touch-action:none;}
.sketch__hint{position:absolute; top:12px; left:14px; font-family:var(--serif); font-style:italic; font-size:18px; color:#b9a07a; pointer-events:none;}
.tools{border:1px solid var(--line); background:rgba(29,20,48,.5); padding:20px;}
.tools h4{font-family:var(--serif); font-style:italic; font-size:22px; margin-bottom:14px;}
.tools .label{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:16px 0 8px;}
.palette{display:grid; grid-template-columns:repeat(5,1fr); gap:8px;}
.palette .sw{aspect-ratio:1; border:2px solid transparent; cursor:pointer; position:relative;}
.palette .sw.sel{border-color:var(--ivory); box-shadow:0 0 0 2px var(--ink);}
.palette .sw[title]:hover::after{content:attr(title); position:absolute; bottom:105%; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:9px; letter-spacing:.1em; text-transform:uppercase; background:#000; color:var(--gold); padding:3px 6px; z-index:5;}
.sizes{display:flex; gap:8px;}
.sizes button{flex:1; background:transparent; border:1px solid var(--line); color:var(--ivory-dim); padding:8px 0; cursor:pointer;}
.sizes button.sel{background:var(--gold-soft); color:var(--ink); border-color:var(--gold-soft);}
.swatch-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-top:24px;}
.pinned{border:1px solid var(--line-soft); background:#fbf7f0; padding:6px;}
.pinned img{width:100%; height:90px; object-fit:cover;}
.pinned .nm{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#7a5566; padding:6px 2px 2px; text-align:center;}

/* =====================================================================
   GUEST BOOK
   ===================================================================== */
.gb{display:grid; grid-template-columns:340px 1fr; gap:34px; align-items:start;}
.gb__form{border:1px solid var(--line); background:rgba(29,20,48,.5); padding:26px;}
.gb__form h4{font-family:var(--serif); font-style:italic; font-size:26px; margin-bottom:6px;}
.field{margin-top:16px;}
.field label{display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:7px;}
.field__hint{color:var(--ivory-dim); letter-spacing:.04em; text-transform:none; font-size:11px;}
.field input,.field textarea,.field select{
  width:100%; background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--ivory);
  font-family:var(--sans); font-size:14px; padding:11px 13px; resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--gold);}

/* fabric / thread swatch pickers */
.swatch-pick{display:flex; flex-wrap:wrap; gap:8px;}
.swatch-pick .sw{width:30px; height:30px; padding:0; border:1px solid rgba(244,238,230,.25); cursor:pointer; position:relative; transition:transform .12s ease;}
.swatch-pick .sw:hover{transform:translateY(-2px);}
.swatch-pick .sw.sel{box-shadow:0 0 0 2px var(--ink), 0 0 0 3px var(--gold);}
.swatch-pick .sw[title]:hover::after{
  content:attr(title); position:absolute; bottom:118%; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  background:#000; color:var(--gold); padding:3px 6px; z-index:5; pointer-events:none;
}

/* entries — couture “fabric” cards with “thread” ink */
.gb__entry{padding:18px 22px; margin-bottom:12px; border:1px solid var(--line-soft); background:var(--plum-2); color:var(--ivory);}
.gb__entry .top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:7px;}
.gb__entry .who{font-family:var(--serif); font-style:italic; font-size:22px; color:inherit;}
.gb__entry .when{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:inherit; opacity:.6; white-space:nowrap;}
.gb__entry .msg{font-size:14.5px; color:inherit; line-height:1.65;}
.gb__empty{padding:30px 2px; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ivory-dim);}

/* ---- fabric textures (shared by swatch buttons + entry cards) ---- */
.fab-diamond{
  background-color:#cfe4f7;
  background-image:
    radial-gradient(rgba(255,255,255,.75) 1px, transparent 1.5px),
    radial-gradient(rgba(120,160,205,.28) 1px, transparent 1.5px);
  background-size:7px 7px, 7px 7px;
  background-position:0 0, 3.5px 3.5px;
}
.fab-champagne{
  background-color:#e7d6ab;
  background-image:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%, rgba(170,140,80,.22) 68%, rgba(255,255,255,.45) 100%);
}
.fab-garnet{
  background-color:#5e1f38;
  background-image:
    radial-gradient(120% 90% at 28% 18%, rgba(255,180,205,.22), transparent 55%),
    radial-gradient(110% 110% at 82% 100%, rgba(0,0,0,.5), transparent 60%);
}
.fab-mint{
  background-color:#d3edde;
  background-image:
    repeating-linear-gradient(90deg, rgba(96,170,135,.42) 0 9px, transparent 9px 18px),
    repeating-linear-gradient(0deg, rgba(96,170,135,.42) 0 9px, transparent 9px 18px);
}
.fab-rose{
  background-color:#d98cb3;
  background-image:radial-gradient(rgba(255,255,255,.9) 2.6px, transparent 3.1px);
  background-size:18px 18px;
}
.fab-glitter{
  background-color:#2c220c;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) .6px, transparent 1.7px),
    radial-gradient(circle at 50% 50%, rgba(216,190,134,.9) .6px, transparent 1.7px),
    linear-gradient(135deg, #3a2d12, #241a08);
  background-size:13px 13px, 21px 19px, 100% 100%;
  background-position:0 0, 6px 9px, 0 0;
}

/* =====================================================================
   LINKS / WEBRING
   ===================================================================== */
.linkcol h4{font-family:var(--serif); font-style:italic; font-size:26px; margin-bottom:14px;}
.linklist a{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-soft);
  font-size:14px; color:var(--ivory-dim); transition:.16s ease;}
.linklist a:hover{color:var(--gold); padding-left:8px;}
.linklist a .diamond{width:6px; height:6px;}
.button-wall{display:flex; flex-wrap:wrap; gap:10px;}
.button-wall .ph{width:88px; height:31px;}

/* =====================================================================
   FLOATING MASCOT
   ===================================================================== */
#mascot{position:fixed; right:22px; bottom:22px; z-index:60; width:128px; cursor:pointer; user-select:none;}
#mascot .bubble{
  position:absolute; bottom:100%; right:0; margin-bottom:10px; width:200px;
  background:var(--ivory); color:#2a1d45; font-family:var(--serif); font-style:italic; font-size:16px;
  line-height:1.3; padding:12px 15px; border:1px solid var(--gold);
  box-shadow:0 10px 30px rgba(0,0,0,.4); opacity:0; transform:translateY(6px); transition:.22s ease; pointer-events:none;
}
#mascot .bubble::after{content:""; position:absolute; top:100%; right:26px; border:8px solid transparent; border-top-color:var(--ivory);}
#mascot.show .bubble{opacity:1; transform:translateY(0);}
#mascot .body{
  width:100%; height:auto; display:block;
  transition:transform .3s ease;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
#mascot:hover .body{transform:translateY(-6px) rotate(-2deg);}

/* sparkle cursor particles */
.sparkle{position:fixed; z-index:9999; pointer-events:none; font-size:14px; color:var(--gold);
  text-shadow:0 0 6px rgba(216,190,134,.8); animation:spk .8s ease-out forwards;}
@keyframes spk{0%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  100%{opacity:0; transform:translate(-50%,-90%) scale(.2) rotate(80deg);}}
@media (prefers-reduced-motion: reduce){ .sparkle{display:none;} }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .mag{grid-template-columns:repeat(2,1fr);}
  .masonry{columns:3;}
  .grid.c4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .wrap,.masthead,.nav__inner,.foot__inner,.foot__quote{padding-left:20px; padding-right:20px;}
  .masthead{flex-direction:column; align-items:flex-start; gap:10px;}
  .masthead__meta{text-align:left;}
  .brand__name{font-size:42px;}
  .nav__inner{justify-content:flex-start; gap:0; overflow-x:auto;}
  .nav a{padding:13px 11px; white-space:nowrap;}
  .mag{grid-template-columns:1fr; grid-auto-rows:180px;}
  .tile.wide,.tile.big{grid-column:span 1;}
  .tile.big,.tile.tall{grid-row:span 1;}
  .masonry{columns:2;}
  .grid.c3,.grid.c4,.grid.c2{grid-template-columns:1fr;}
  .duo{grid-template-columns:1fr;}
  .sketch{grid-template-columns:1fr;}
  .gb{grid-template-columns:1fr;}
  .archive-cols{grid-template-columns:1fr;}
  .foot__inner{flex-direction:column; align-items:flex-start; gap:18px;}
  .foot__divider{width:100%; flex:0 0 auto;}
  .foot__ring{max-width:100%;}
  .mlpring{justify-content:flex-start;}
  .story{grid-template-columns:40px 1fr; }
  .story__stats{grid-column:1 / -1; text-align:left;}
  #mascot{width:100px;}
}

/* =====================================================================
   HOME — live "Latest from the floor" (current 4chan thread)
   ===================================================================== */
.floor__loading{text-align:center; color:var(--ivory-dim); font-size:12px; letter-spacing:.16em; text-transform:uppercase; padding:36px 0;}

/* "load on tap" calling card — Collections & Lookbook fetch on click,
   from the visitor's own browser/IP */
.load-cta{text-align:center; max-width:540px; margin:34px auto; padding:40px 34px;
  border:1px solid var(--line-soft); background:rgba(29,20,48,.45);
  box-shadow:inset 0 0 60px rgba(0,0,0,.25);}
.load-cta__eyebrow{font-family:var(--sans); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;}
.load-cta__lede{color:var(--ivory-dim); font-size:15px; line-height:1.7; margin:0 auto 24px; max-width:420px;}
.load-cta .btn{font-size:14px;}
.load-cta__note{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(199,188,210,.5); margin-top:16px;}
.floor-feature{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); border:1px solid var(--line); background:rgba(29,20,48,.5); text-decoration:none; color:var(--ivory); overflow:hidden; transition:border-color .2s ease, transform .2s ease;}
.floor-feature:hover{border-color:rgba(216,190,134,.55); transform:translateY(-3px);}
.floor-feature__img{position:relative; min-height:320px; background:#171024;}
.floor-feature__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.floor-feature__live{position:absolute; top:14px; left:14px; z-index:2; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#fff; background:rgba(178,40,80,.9); padding:5px 11px;}
.floor-feature__body{padding:32px 34px; display:flex; flex-direction:column; gap:13px; justify-content:center;}
.floor-feature__title{font-family:var(--serif); font-style:italic; font-size:36px; line-height:1.04;}
.floor-feature__snip{font-size:14px; color:var(--ivory-dim); line-height:1.7;}
.floor-stats{display:flex; flex-wrap:wrap; gap:18px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);}
.floor-feature__body .btn{align-self:flex-start; margin-top:8px;}
.floor-recent{margin-top:16px;}
.floor-recent__label{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-dim); margin-bottom:11px;}
.floor-recent__grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px;}
.floor-recent__grid a{aspect-ratio:1; overflow:hidden; border:1px solid var(--line-soft); background:#171024;}
.floor-recent__grid img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.floor-recent__grid a:hover img{transform:scale(1.08);}

/* embedded media (radio playlist) */
.embed{position:relative; width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--line); margin-top:8px;}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

@media (max-width:720px){
  .floor-feature{grid-template-columns:1fr;}
  .floor-feature__img{min-height:230px;}
  .floor-feature__title{font-size:30px;}
  .floor-recent__grid{grid-template-columns:repeat(3,1fr);}
}

/* =====================================================================
   COLLECTIONS — live current-thread gallery
   ===================================================================== */
.thread-head{display:grid; grid-template-columns:210px 1fr; gap:26px; border:1px solid var(--line); background:rgba(29,20,48,.5); padding:24px; margin-bottom:30px; align-items:center;}
.thread-head__img{position:relative; aspect-ratio:1; background:#171024; overflow:hidden; border:1px solid var(--line-soft);}
.thread-head__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.thread-head__body{display:flex; flex-direction:column; gap:12px;}
.thread-head__title{font-family:var(--serif); font-style:italic; font-size:34px; line-height:1.05;}
.thread-head__snip{font-size:14px; color:var(--ivory-dim); line-height:1.65;}
.thread-head__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:4px;}
.thread-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
.thread-gallery a{aspect-ratio:1; overflow:hidden; border:1px solid var(--line-soft); background:#171024; cursor:pointer;}
.thread-gallery img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease, transform .3s ease;}
.thread-gallery img.loaded{opacity:1;}
.thread-gallery a:hover img{transform:scale(1.08);}
@media (max-width:720px){ .thread-head{grid-template-columns:1fr;} .thread-gallery{grid-template-columns:repeat(3,1fr);} }

/* =====================================================================
   ARCHIVE — greentext reader
   ===================================================================== */
.story{cursor:pointer;}
.reader{position:fixed; inset:0; z-index:200; background:rgba(10,7,16,.975); opacity:0; pointer-events:none; transition:opacity .25s ease;}
.reader.open{opacity:1; pointer-events:auto;}
.reader__scroll{height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.reader__inner{max-width:760px; margin:0 auto; padding:84px 26px 130px;}
.reader__kicker{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;}
.reader__title{font-family:var(--serif); font-style:italic; font-size:38px; line-height:1.06; margin-bottom:28px;}
.reader__body{font-size:16px; line-height:1.85; color:var(--ivory);}
.reader__body p{margin:0 0 5px;}
.reader__body p.g{color:#9ec46a;}
.reader__body p.sep{height:1px; background:var(--line); margin:22px 0; }
.reader__close{position:fixed; top:18px; right:24px; z-index:3; font-size:30px; line-height:46px; text-align:center; color:var(--gold); background:rgba(10,7,16,.8); border:1px solid var(--line); width:48px; height:48px; cursor:pointer;}
.reader__close:hover{color:var(--ivory);}
.reader__nav{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:10px;}