@font-face{font-family:'Proxima Soft Complete';font-weight:400;font-style:normal;font-display:swap;
  src:url('https://sophicly.b-cdn.net/Fonts%20for%20Sophicly%20Website/Proxima%20Soft/ProximaSoft-Regular.woff2') format('woff2')}
@font-face{font-family:'Proxima Soft Complete';font-weight:600;font-style:normal;font-display:swap;
  src:url('https://sophicly.b-cdn.net/Fonts%20for%20Sophicly%20Website/Proxima%20Soft/ProximaSoft-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Playfair Display Complete';font-weight:400;font-style:italic;font-display:swap;
  src:url('https://sophicly.b-cdn.net/Fonts%20for%20Sophicly%20Website/Playfair%20Display/playfairdisplay-italic-webfont.woff2') format('woff2')}

#swf-week{
  --xs:4px; --sm:8px; --md:12px; --lg:16px; --xl:24px;
  --bg:#151617; --surface:#1c1d1f; --raised:#242628; --border:#2e3033;
  --ink:#f4f5f6; --muted:#7f868c; --teal:#51dacf; --purple:#5333ed;

  /* ── their measured constants ─────────────────────────────────────────────────────────── */
  --tile:400ms;                              /* their 0.4s                                   */
  --entrance:cubic-bezier(0.22, 1, 0.36, 1); /* ⭐ theirs is (0.21,1,0.34,1) — the same curve */
  --open:300ms;                              /* their 0.3s                                   */
  --standard:cubic-bezier(0.4, 0, 0.2, 1);
}

#swf-week *{box-sizing:border-box}
#swf-week{background:var(--bg)}
#swf-week{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Proxima Soft Complete',system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
#swf-week h1, #swf-week h2, #swf-week h3, #swf-week p{margin:0;padding:0}

#swf-week .intro{padding:clamp(28px,6vh,64px) clamp(20px,5vw,80px) clamp(16px,3vh,32px)}
#swf-week .intro__eyebrow{font-size:12px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}
#swf-week .intro h1{margin-top:var(--md);font-family:'Playfair Display Complete',Georgia,serif;
  font-style:italic;font-weight:400;font-size:clamp(30px,4.4vw,56px);line-height:1.1;max-width:20ch}
#swf-week .intro p{margin-top:var(--lg);max-width:56ch;color:var(--muted);font-size:clamp(15px,1.5vw,18px);line-height:1.5}

#swf-week .pl{display:grid;grid-template-columns:1fr 420px;gap:clamp(24px,4vw,64px);
  padding:clamp(24px,5vh,56px) clamp(20px,5vw,80px) clamp(48px,10vh,120px);align-items:start}
@media (max-width:1023.98px){ #swf-week .pl{grid-template-columns:1fr} }

#swf-week .pl__list{border-top:1px solid var(--border)}
#swf-week .pl__row{position:relative;border-bottom:1px solid var(--border);overflow:hidden}
#swf-week /* ⭐ THEIR TILE. Rest is -100%; the script writes ±101% for whichever edge the cursor crossed. */
.pl__tile{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--raised);
  transform:translateY(-100%);will-change:transform;
  transition:transform var(--tile) var(--entrance)}
#swf-week .pl__btn{position:relative;z-index:1;width:100%;display:flex;align-items:baseline;gap:var(--lg);
  padding:clamp(16px,2.4vh,26px) var(--lg);background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer}
#swf-week .pl__btn:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
#swf-week .pl__n{font-size:11px;letter-spacing:.24em;color:var(--muted);flex:none;width:3ch}
#swf-week .pl__name{font-family:'Playfair Display Complete',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(20px,2.2vw,30px);line-height:1.15}
#swf-week .pl__role{margin-left:auto;font-size:13px;color:var(--muted)}
#swf-week .pl__ico{flex:none;width:18px;height:18px;color:var(--muted);
  transition:transform var(--open) var(--standard)}
#swf-week .pl__row.is-open .pl__ico{transform:rotate(-180deg)}

#swf-week /* DEVIATION D — open in CSS, #swf-week closed by the script. A dead script leaves a readable list. */
.pl__panel{position:relative;z-index:1;overflow:hidden}
#swf-week .pl__panel p{padding:0 var(--lg) var(--xl) calc(3ch + var(--lg) + var(--lg));max-width:62ch;
  color:var(--muted);font-size:15px;line-height:1.6}
#swf-week .pl.is-live .pl__panel{height:0;transition:height var(--open) var(--standard)}

#swf-week .pl__stage{position:sticky;top:clamp(16px,4vh,40px)}
#swf-week .pl__frame{position:relative;aspect-ratio:4/5;border-radius:3px;overflow:hidden;
  border:0;background:var(--surface)}   /* BRAND.md: no hairline on a tile — surface contrast */
#swf-week /* ⛔ their photographs are theirs — a labelled placeholder field per row, #swf-week each visibly different */
.pl__art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display Complete',Georgia,serif;font-style:italic;font-size:96px;
  color:var(--ink)}
#swf-week .pl__art span{opacity:.10}
/* WD-533 — the prototype's "PLACEHOLDER IMAGE" stamp is gone with its markup: it is demo
   scaffolding, the same class of thing as the lead-in spacer that became the black gap. The tile
   keeps its hue wash and its big numeral, which is a finished look and needs no photograph. */
#swf-week .pl__cap{margin-top:var(--md);font-size:13px;color:var(--muted)}
@media (max-width:1023.98px){ #swf-week .pl__stage{position:static} }

/* ⭐ WD-557 — THE STAGE STOPS BEING A 4:5 PORTRAIT ONCE IT IS STACKED. Their aspect-ratio is right
   in the two-column desktop layout, where the frame sits BESIDE the list and its height is free.
   Below 1024px the grid collapses to one column, so that same 4:5 becomes ~424px of height stacked
   UNDER five rows — measured as most of the takeover's remaining overflow, and the substance of
   Neil's "it's going beyond the viewport a bit".
   ⚠️ NOT display:none. The frame still updates when a row is tapped (the script calls preview()
   on open), so it is doing real work on touch — it only needs to stop being portrait-shaped.
   Stated deviation from the port, forced by the container (#13). */
@media (max-width:1023.98px){
  #swf-week .pl__frame{aspect-ratio:auto;height:clamp(120px,20vh,170px)}
}

/* ══ WD-651b · LIGHT THEME (Neil, 2026-09-02: "Yes, do it"). THE MECHANISM IS funnel.css's OWN (lines 211–260):
   light is the site DEFAULT (a first-time visitor has no data-theme at all), so the light values sit under the
   three light selectors and out-rank the bare root; then dark is RE-ASSERTED explicitly, because a stale
   `class="light"` can sit on <html> while `data-theme="dark"` is set (funnel.css 3118). The VALUES are
   funnel.css's measured Risen light palette (WD-386: #ffffff ground · #f7f7f8 base · #efefef raised · #555555
   ink 7.46:1 · #636363 soft 6.01:1 · #4D76FD accent · #5333ed purple), written out because this section is not
   inside `.swf` and cannot inherit the `--swf-*` tokens. Same numbers, one source, cited. ══ */
html[data-theme='light'] #swf-week, html.light #swf-week, html:not([data-theme='dark']):not(.dark):not(.dark-mode) #swf-week { --bg:#ffffff; --surface:#f7f7f8; --raised:#efefef; --border:#e3e4e8; --ink:#555555; --muted:#636363; --teal:#4D76FD; --purple:#5333ed; }
html[data-theme='dark'] #swf-week, html.dark #swf-week, html.dark-mode #swf-week { --bg:#151617; --surface:#1c1d1f; --raised:#242628; --border:#2e3033; --ink:#f4f5f6; --muted:#7f868c; --teal:#51dacf; --purple:#5333ed; }