/* ── Korean Cowboy — design system + motion ──────────────────────────── */
:root{
  --accent:#E34234;            /* cinnabar — driven by Tweaks */
  --sec-leather:#6f5d50;       /* Working Experiences brown — driven by Tweaks */
  --sec-primary:#48392f;       /* Journal brown — driven by Tweaks */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-wipe:cubic-bezier(.7,0,.2,1);
}
html{ scroll-behavior:smooth; }
body{ background:#fbf9f4; color:#1b1c19; overflow-x:hidden; }

/* section browns (Tweakable) — scoped so the button's hover:bg-primary is untouched */
section.bg-leather{ background-color:var(--sec-leather) !important; }
#journal.bg-primary{ background-color:var(--sec-primary) !important; }

.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  vertical-align:middle;
}
.vertical-text{ writing-mode:vertical-rl; text-orientation:mixed; }
.editorial-rule{ height:1px; background:#432a1e; opacity:.2; width:100%; }

/* ── Aged paper texture (light sections) ─────────────────────────────── */
/* Three layers: scattered speckle flecks (on the element, blended onto the
   cream), plus a fine fibrous grain + soft mottled stain (pseudo-elements). */
.paper{
  position:relative;
  background-image:var(--speckle-dark);
  background-size:var(--speckle-size, 640px 640px);
  background-blend-mode:multiply;
  /* Perf: the texture below uses blend modes (background-blend-mode + two
     mix-blend-mode overlays). On a tall section the GPU otherwise re-blends
     against the backdrop every scroll frame. `isolation` makes the blend a
     self-contained group, and (on pointer/desktop widths) promoting the
     section to its own composited layer lets the browser rasterize the
     blended texture ONCE and just translate it while scrolling. Visually
     identical — the section background is opaque. */
  isolation:isolate;
}
/* Layer-promote only where a mouse scrolls a tall page; skip on small/touch
   screens to avoid the extra GPU-memory cost of large backing stores. */
@media (min-width:768px){
  .paper{ transform:translateZ(0); }
}
.paper > *{ position:relative; z-index:1; }
.paper::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:multiply;
  opacity:.11;
}
.paper::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%3E%3Cfilter%20id='s'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.016'%20numOctaves='3'%20seed='7'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23s)'/%3E%3C/svg%3E");
  background-size:640px 640px;
  mix-blend-mode:multiply;
  opacity:.09;
}
.cinematic-overlay{ background:linear-gradient(to bottom,rgba(27,28,25,.34),rgba(27,28,25,.05) 40%,rgba(27,28,25,0)); }
.wide-track{ letter-spacing:.4em; }

/* ── Floating left scrollspy nav (adaptive tone, set by JS) ──────────── */
#scrollspy .ss-link{ display:flex; align-items:center; gap:12px; cursor:pointer; text-decoration:none; }
#scrollspy .ss-tick{ display:block; width:16px; height:1px; background:#fff; opacity:.45; transition:width .4s var(--ease-out), opacity .4s ease, background .4s ease; flex:none; }
#scrollspy .ss-label{
  font-family:'Source Sans 3'; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; opacity:.45; white-space:nowrap;
  transition:opacity .4s ease, transform .4s var(--ease-out), color .4s ease;
}
#scrollspy .ss-link:hover .ss-tick{ width:26px; opacity:.85; }
#scrollspy .ss-link:hover .ss-label{ opacity:.85; }
#scrollspy .ss-link.active .ss-tick{ width:36px; opacity:1; }
#scrollspy .ss-link.active .ss-label{ opacity:1; }

/* right side accent */
#side-accent{ color:#fff; transition:color .4s ease; }
#side-accent .sa-rule{ background:rgba(255,255,255,.25); transition:background .4s ease; }

/* over LIGHT (cream) sections: flip the floating accents to dark ink */
[data-sidetone="light"] #scrollspy .ss-tick{ background:#241f1b; }
[data-sidetone="light"] #scrollspy .ss-label{ color:#241f1b; }
[data-sidetone="light"] #side-accent{ color:#241f1b; }
[data-sidetone="light"] #side-accent .sa-rule{ background:rgba(36,31,27,.3); }

/* ── Dark charcoal footer ────────────────────────────────────────────── */
.paper-dark{
  position:relative;
}
.paper-dark > *{ position:relative; z-index:1; }

/* footer dark text — flip the brown/dark tokens to light, keep cinnabar accents */
#contact.paper-dark .text-primary{ color:#f4f0ea !important; }
#contact.paper-dark .text-on-surface-variant{ color:rgba(244,240,234,.72) !important; }
#contact.paper-dark .text-primary\/30{ color:rgba(244,240,234,.3) !important; }
#contact.paper-dark .editorial-rule{ background:#fff !important; opacity:.14 !important; }

/* ── Working Experiences as white rice paper (#experiences) ──────────── */
#experiences .text-white{ color:#241f1b !important; }       /* heading + names */
#experiences .text-white\/80{ color:#5e544b !important; }    /* quotes */
#experiences .text-white\/60{ color:#7a6f64 !important; }    /* COLLABORATOR REVIEWS */
#experiences .text-white\/50{ color:#8a7e72 !important; }    /* roles */
#experiences .bg-white\/5{ background:rgba(40,32,26,.045) !important; }   /* cards */
#experiences .bg-white\/10{ background:rgba(40,32,26,.08) !important; }   /* avatar wells */

/* ── Fluid ink hero shader ───────────────────────────────────────────── */
.hero-ink-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
[data-herofx="ink"] .hero-bg-slot{ display:none; }
[data-herofx="off"] .hero-ink-canvas{ display:none; }

/* ── Hero surface: charcoal (dark) / rice paper (light) ──────────────── */
/* The light/dark toggle ONLY affects the hero. Speckle flecks scatter on the
   surface — dark flecks on cream paper, light flecks on charcoal. */
.hero-speckle{
  position:absolute; inset:0; pointer-events:none; display:block;
  background-size:var(--speckle-size, 640px 640px); opacity:.9;
}
[data-herofx="off"] .hero-speckle{ display:none; }
/* charcoal (dark) hero: plain charcoal, no flecks */
[data-herosurface="charcoal"] .hero-speckle{ display:none; }
/* charcoal (default): light flecks, screen-blended */
.hero-speckle{
  mix-blend-mode:screen;
  background-image:var(--speckle-light);
}
[data-herosurface="paper"] .hero{ background:#f2f0e9; }
[data-herosurface="paper"] .cinematic-overlay{ background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(120,108,92,.10)); }
/* paper: dark flecks, multiply-blended */
[data-herosurface="paper"] .hero-speckle{
  mix-blend-mode:multiply;
  background-image:var(--speckle-dark);
}
/* paper: hero text flips to dark brown */
[data-herosurface="paper"] .hero h1{ color:#241f1b; }
[data-herosurface="paper"] .hero span.hero-fade{ color:#241f1b; }
[data-herosurface="paper"] .hero .hero-fade span{ color:#3a322c; }
[data-herosurface="paper"] .hero .text-white\/40{ color:rgba(58,50,44,.55) !important; }
[data-herosurface="paper"] .hero .bg-white\/20{ background:rgba(58,50,44,.2) !important; }

/* nav over the hero — follows the hero surface */
[data-herosurface="charcoal"] #nav:not(.nav-solid) .nav-logo{ color:#fff; }
[data-herosurface="paper"]   #nav:not(.nav-solid) .nav-logo{ color:#241f1b; }
[data-herosurface="charcoal"] #nav:not(.nav-solid) .theme-toggle{ color:#fff; }
[data-herosurface="paper"]   #nav:not(.nav-solid) .theme-toggle{ color:#241f1b; }

/* nav scrolled state (restored originals) */
#nav.nav-solid{ background:rgba(251,249,244,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(67,42,30,.08); }
#nav.nav-solid .nav-link{ color:#504440; }
#nav.nav-solid .nav-link:first-of-type{ color:#432a1e; }
#nav.nav-solid .theme-toggle{ color:#432a1e; }

/* theme toggle button */
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; background:transparent; cursor:pointer; transition:color .3s, transform .3s var(--ease-out); }
.theme-toggle:hover{ transform:rotate(-12deg); color:var(--accent); }
.theme-toggle .material-symbols-outlined{ font-size:22px; }

/* Contact Ryan — hand-stamped Korean seal button */
.seal-btn{
  display:inline-block; border:0; cursor:pointer; padding:0;
  width:158px; height:50px;
  background:url("assets/contact-stamp.png") center/contain no-repeat;
  transform:rotate(-1deg);
  transition:transform .3s var(--ease-out), filter .3s ease;
}
.seal-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.seal-btn:hover{ transform:rotate(-1deg) scale(1.05); filter:saturate(1.08) brightness(1.03); }
.seal-btn:active{ transform:rotate(-1deg) scale(.97); }
@media (max-width:767px){ .seal-btn{ width:128px; height:40px; } }
/* Collaborations testimonial cards — brighten text to full white on hover */
.bg-leather .bg-white\/5 h4,
.bg-leather .bg-white\/5 .text-white\/50,
.bg-leather .bg-white\/5 .text-white\/80{ transition:color .45s ease; }
.bg-leather .bg-white\/5:hover .text-white\/50,
.bg-leather .bg-white\/5:hover .text-white\/80{ color:#fff !important; }

/* ── image-slot defaults ─────────────────────────────────────────────── */
.slot{ display:block; width:100%; height:100%; }
.media{ position:relative; overflow:hidden; }
.hero-bg-slot{ width:100%; height:100%; opacity:.55; }

/* ── Hero (eyebrow + subtitle + scroll cue fade-in) ──────────────────── */
.hero-fade{ opacity:0; transform:translateY(14px); }
.hero-fade.in{ opacity:1; transform:none; transition:opacity .9s ease .5s, transform 1s var(--ease-out) .5s; }

.scroll-tick{ animation:tick 1.8s var(--ease-out) infinite; }
@keyframes tick{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ── Scroll reveal (Tweak: data-reveal) ──────────────────────────────── */
.reveal{ opacity:0; transform:translateY(42px); transition:opacity .9s ease, transform 1s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
[data-reveal="clip"] .reveal{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--ease-wipe); }
[data-reveal="clip"] .reveal.in{ clip-path:inset(0 0 0 0); }
[data-reveal="off"] .reveal{ opacity:1!important; transform:none!important; clip-path:none!important; }

/* ── Image hover (Tweak: data-imghover) ──────────────────────────────── */
.media .slot{ transition:filter .9s ease, transform 1.1s var(--ease-out); }

/* grayscale base only on tinted media */
[data-imghover="grayscale"] .media.tint .slot,
[data-imghover="both"]      .media.tint .slot{ filter:grayscale(1) brightness(.97); }
[data-imghover="grayscale"] .group:hover .media.tint .slot,
[data-imghover="both"]      .group:hover .media.tint .slot,
[data-imghover="grayscale"] .media.tint:hover .slot,
[data-imghover="both"]      .media.tint:hover .slot{ filter:grayscale(0) brightness(1); }

/* zoom */
[data-imghover="zoom"] .group:hover .media .slot,
[data-imghover="both"] .group:hover .media .slot,
[data-imghover="zoom"] .media:hover .slot,
[data-imghover="both"] .media:hover .slot{ transform:scale(1.06); }

/* case-link arrow nudge */
.case-card:hover .case-link .material-symbols-outlined{ transform:translateX(8px); }

/* The Designer portrait — swap to a second image on hover (1s fade) */
.portrait-frame{ background:#2a2a2a; }   /* match the section background */
.portrait-base{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  transition:opacity .35s ease;
}
/* on hover the collage replaces the portrait — hide it quickly so it isn't seen behind the gaps */
.group:hover .portrait-base{ opacity:0; }
.portrait-hover{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center;
  opacity:0; transition:opacity 1s var(--ease-out); pointer-events:none; z-index:1;
}
.group:hover .portrait-hover{ opacity:1; }


/* ── Case Study detail overlay (Tweak: data-cstx) ────────────────────── */
.cs{
  position:fixed; inset:0; z-index:200; background:#fbf9f4;
  visibility:hidden; overflow:hidden;
}
[data-cstx="slide"] .cs{ transform:translateY(100%); transition:transform .6s var(--ease-wipe), visibility 0s .6s; }
[data-cstx="slide"] .cs.open{ transform:none; visibility:visible; transition:transform .6s var(--ease-wipe), visibility 0s 0s; }
[data-cstx="fade"]  .cs{ opacity:0; transition:opacity .45s ease, visibility 0s .45s; }
[data-cstx="fade"]  .cs.open{ opacity:1; visibility:visible; transition:opacity .45s ease, visibility 0s 0s; }
[data-cstx="zoom"]  .cs{ opacity:0; transform:scale(1.05); transition:opacity .5s ease, transform .6s var(--ease-out), visibility 0s .6s; }
[data-cstx="zoom"]  .cs.open{ opacity:1; transform:none; visibility:visible; transition:opacity .5s ease, transform .6s var(--ease-out), visibility 0s 0s; }

.cs-scroll{ height:100%; overflow-y:auto; overflow-x:hidden; }
.cs-close{
  position:fixed; top:24px; right:24px; z-index:210;
  width:52px; height:52px; border-radius:999px; border:0;
  background:#241f1b; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,.25); transition:transform .3s var(--ease-out), background .3s;
}
.cs:not(.open) .cs-close{ opacity:0; pointer-events:none; }
.cs-close:hover{ transform:rotate(90deg); background:#432a1e; }
.cs-close .material-symbols-outlined{ font-size:26px; }

/* ── Contact overlay (slides up like a case study) ───────────────────── */
.contact-ov{
  position:fixed; inset:0; z-index:200; background:#fbf9f4;
  visibility:hidden; overflow:hidden;
  transform:translateY(100%); transition:transform .6s var(--ease-wipe), visibility 0s .6s;
}
.contact-ov.open{ transform:none; visibility:visible; transition:transform .6s var(--ease-wipe), visibility 0s 0s; }
html:not(.light) .contact-ov{ background:#17120e; }
.contact-close{ background:#241f1b; }
.contact-ov:not(.open) .contact-close{ opacity:0; pointer-events:none; }
.contact-ov-inner{
  height:100%; width:100%;
  display:flex; align-items:center; justify-content:flex-start;
  padding:0 28px;
}
.contact-ov-card{
  max-width:760px;
  margin:0 auto;
  width:100%;
  padding:0 8px;
}
@media (min-width:768px){ .contact-ov-inner{ padding:0 64px; } }
.contact-ov-title{
  font-size:clamp(40px, 7vw, 92px); line-height:1.02; letter-spacing:-.01em;
  margin:26px 0 0;
}
.contact-ov-lead{
  font-size:clamp(16px, 1.5vw, 19px); line-height:1.7;
  max-width:30em; margin:30px 0 0;
}
.contact-ov-email{
  display:inline-block; margin:44px 0 0;
  font-family:'Playfair Display', serif;
  font-size:clamp(26px, 3.4vw, 44px); line-height:1.1;
  color:var(--ink,#241f1b); text-decoration:none;
  border-bottom:2px solid var(--accent); padding-bottom:4px;
  transition:color .3s ease, border-color .3s ease, opacity .3s ease;
}
html:not(.light) .contact-ov-email{ color:#f4f0ea; }
.contact-ov-email:hover{ color:var(--accent); }
.contact-ov-links{ display:flex; gap:28px; margin-top:28px; }
.contact-ov-link{ color:var(--ink,#241f1b); text-decoration:none; opacity:.6; transition:opacity .3s ease, color .3s ease; border-bottom:1px solid transparent; padding-bottom:2px; }
html:not(.light) .contact-ov-link{ color:#f4f0ea; }
.contact-ov-link:hover{ opacity:1; color:var(--accent); border-bottom-color:var(--accent); }
.contact-ov-foot{ display:flex; align-items:center; gap:16px; margin-top:64px; }
/* staggered reveal on open */
.contact-rise{ opacity:0; transform:translateY(28px); }
.contact-ov.open .contact-rise{
  opacity:1; transform:none;
  transition:opacity .8s ease, transform .9s var(--ease-out);
  transition-delay:calc(.18s + var(--cd,0) * .09s);
}

/* detail layout — reveal-on-open via .cs.open staggering */
.cs-rise{ opacity:0; transform:translateY(34px); }
/* full-bleed media: cancel the container side padding so images span the full container width */
.cs-bleed{ margin-left:-20px; margin-right:-20px; }
@media (min-width:768px){ .cs-bleed{ margin-left:-64px; margin-right:-64px; } }
.cs.open .cs-rise{ opacity:1; transform:none; transition:opacity .8s ease, transform .9s var(--ease-out); }
.cs.open .cs-rise{ transition-delay:calc(.15s + var(--d,0) * .08s); }

/* ── Work History — timeline bullet lists ────────────────────────────── */
.tl-list{ list-style:none; padding:0; }
.tl-list li{ position:relative; padding-left:1.3rem; }
.tl-list li::before{
  content:""; position:absolute; left:0; top:.66em; width:6px; height:1px;
  background:var(--accent);
}

/* ── Working Experiences — artisanal testimonial card stack ──────────── */
.ts-stack{
  position:relative; width:100%; max-width:420px; height:480px;
  perspective:1200px;
}
.ts-card{
  position:absolute; inset:0;
  background:#efe6d6;
  border-radius:2px;
  box-shadow:-2px 6px 22px rgba(62,42,29,.16), 0 1px 2px rgba(62,42,29,.14), inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease, box-shadow .6s ease;
  transform-origin:center bottom;
  cursor:grab; overflow:hidden;
  /* subtle fibrous paper grain */
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='p'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.24%200%200%200%200%200.16%200%200%200%200%200.11%200%200%200%200.06%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23p)'/%3E%3C/svg%3E");
  background-size:300px 300px;
}
.ts-card[data-pos="0"]{ transform:translateY(0) scale(1) rotate(0deg); z-index:5; opacity:1; }
.ts-card[data-pos="1"]{ transform:translateY(-14px) scale(.965) rotate(-2deg); z-index:4; opacity:.9; }
.ts-card[data-pos="2"]{ transform:translateY(-28px) scale(.93) rotate(1.5deg); z-index:3; opacity:.55; }
.ts-card[data-pos="3"]{ transform:translateY(-38px) scale(.9) rotate(-1deg); z-index:2; opacity:0; }
.ts-card[data-pos="4"]{ transform:translateY(-38px) scale(.9) rotate(1deg); z-index:1; opacity:0; }
.ts-card.ts-out{
  transform:translateY(-20px) translateX(120%) rotate(14deg) !important;
  opacity:0 !important; pointer-events:none;
  transition:transform .55s cubic-bezier(.5,0,.8,.2), opacity .45s ease .1s;
}

.ts-content{ position:relative; z-index:2; height:100%; padding:2.6rem 2rem; }
.ts-main{ flex:1; display:flex; flex-direction:column; height:100%; }
.ts-mark{ font-family:'Playfair Display'; font-size:2.4rem; line-height:.7; color:#7c6252; opacity:.5; }
.ts-quote{
  font-family:'Playfair Display'; font-size:1.35rem; line-height:1.42; color:#3e2a1d;
  margin-top:.6rem; flex-grow:1;
}
.ts-quote i{ font-style:italic; }
.ts-footer{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(62,42,29,.16); padding-top:1rem; margin-top:1rem; gap:1rem; }
.ts-id{ display:flex; align-items:center; gap:.85rem; min-width:0; }
.ts-avatar{ width:46px; height:46px; border-radius:999px; overflow:hidden; background:rgba(62,42,29,.1); flex:none; display:block; }
.ts-avatar .slot{ width:100%; height:100%; }
.ts-author{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ts-name{ font-family:'Source Sans 3'; font-size:.95rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#3e2a1d; }
.ts-role{ font-family:'Source Sans 3'; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#7c6252; }
.ts-stamp{
  flex:none; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--accent); border-radius:4px 6px 3px 5px;
  color:var(--accent); font-family:'Noto Serif KR'; font-size:1.2rem; font-weight:700;
  transform:rotate(-6deg); mix-blend-mode:multiply; opacity:.88;
}
/* prev / next navigation under the stack */
.ts-nav{ display:flex; align-items:center; gap:1.2rem; margin-top:1.6rem; }
.ts-arrow{
  width:46px; height:46px; border-radius:999px; border:1px solid rgba(62,42,29,.28);
  background:transparent; color:#3e2a1d; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, color .3s, transform .25s;
}
.ts-arrow:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.ts-arrow:active{ transform:scale(.93); }
.ts-arrow .material-symbols-outlined{ font-size:20px; }
.ts-count{ font-family:'Source Sans 3'; font-size:.7rem; letter-spacing:.22em; color:#7c6252; min-width:62px; text-align:center; }
@media (max-width:520px){
  .ts-stack{ height:440px; }
  .ts-content{ padding:2rem 1.5rem; }
  .ts-quote{ font-size:1.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .ts-card{ transition:opacity .3s ease; }
}

/* ════════════════════════════════════════════════════════════════════════
   CREATIVE OUTLETS — tight 2x2 grid, overlaid captions, Architect-style reveal
   ════════════════════════════════════════════════════════════════════════ */
.co-tile{ position:relative; aspect-ratio:9/16; overflow:hidden; }
.co-tile .media{ position:absolute; inset:0; }
.co-tile .media .slot{ width:100%; height:100%; }
.slot-video{ width:100%; height:100%; object-fit:cover; display:block; }
/* videos always full color, no grayscale tint or hover zoom */
.media.tint .slot-video,
.media .slot-video{ filter:none !important; transform:none !important; }

/* inline text link inside case-study lead/body */
.cs-link{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); transition:opacity .25s ease; }
.cs-link:hover{ opacity:.7; }

/* Episode CTA overlay (e.g. "Watch on TikTok") */
.ep-cta{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-decoration:none;
  background:rgba(20,16,12,.42); color:#fff;
  opacity:1; transition:background .4s ease;
}
.ep-cta:hover{ background:rgba(20,16,12,.62); }
.ep-cta-icon{ font-size:54px; line-height:1; transition:transform .35s var(--ease-out); }
.ep-cta:hover .ep-cta-icon{ transform:scale(1.12); }
.ep-cta-text{
  font-family:'Source Sans 3'; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  border-bottom:1px solid var(--accent); padding-bottom:3px;
}

/* Case studies (cards + detail) + Other Projects archive: never desaturate,
   and let the section background show through transparent image areas */
#case-studies .media.tint .slot,
#other-projects .media.tint .slot,
#cs .media.tint .slot{ filter:none !important; }
#case-studies .media.tint,
#other-projects .media.tint,
#cs .media.tint{ background:transparent !important; }
/* also clear the slot's own internal frame fill so the background
   shows through transparent image areas with no darker rectangle */
#case-studies .media.tint .slot,
#other-projects .media.tint .slot,
#cs .media.tint .slot{ --slot-frame-bg:transparent; }

/* a research-report / screenshot rendered as a clean white card on paper */
#cs .media.tint .slot.slot-card,
#case-studies .media.tint .slot.slot-card{
  --slot-frame-bg:#fff; background:#fff; border-radius:6px; overflow:hidden;
  box-shadow:0 1px 0 rgba(60,45,30,.08), 0 30px 60px -34px rgba(40,28,16,.5);
  outline:1px solid rgba(60,45,30,.08); outline-offset:0;
}

/* ── Native research report (built from study data, in brand palette) ── */
.rp{ background:transparent; border:0; border-radius:8px;
  padding:44px 0 40px; }
.rp-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }
.rp-eyebrow{ display:block; font-family:'Source Sans 3'; font-size:12px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.rp-title{ font-family:'Playfair Display'; font-weight:700; font-size:38px; line-height:1.05; letter-spacing:-.015em;
  color:var(--primary,#231e1a); text-wrap:balance; max-width:18ch; }
.rp-badge{ flex:none; display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:999px;
  border:1.5px solid var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent);
  font-family:'Source Sans 3'; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap; }
.rp-badge .material-symbols-outlined{ font-size:22px; }
.rp-subhead{ font-family:'Noto Serif KR'; font-size:20px; line-height:1.5; color:#5c5247; margin:18px 0 34px; max-width:74ch; }

.rp-body{ display:grid; grid-template-columns:minmax(220px,1fr) 2.3fr; gap:48px; align-items:start; }
.rp-aside{ display:flex; flex-direction:column; gap:26px; }
.rp-aside-label{ display:block; font-family:'Source Sans 3'; font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.rp-aside-body{ font-family:'Noto Serif KR'; font-size:17px; line-height:1.5; color:#4a4138; }
.rp-aside-item.is-accent{ border-left:3px solid var(--accent); padding-left:18px; }
.rp-aside-item.is-accent .rp-aside-label{ color:var(--accent); }

.rp-main{ min-width:0; }
.rp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(60,45,30,.14);
  border:1px solid rgba(60,45,30,.14); border-radius:4px; overflow:hidden; margin-bottom:34px; }
.rp-stat{ background:var(--surface,#fbf7f0); padding:22px 22px 20px; }
.rp-stat-delta{ display:flex; align-items:center; gap:4px; font-family:'Playfair Display'; font-weight:700;
  font-size:38px; line-height:1; letter-spacing:-.02em; color:var(--accent); margin-bottom:14px; }
.rp-stat-dir{ font-size:30px; font-weight:700; }
.rp-stat-move{ display:flex; align-items:center; gap:8px; font-family:'Source Sans 3'; font-size:16px; font-weight:700; color:#3f362d; }
.rp-stat-arrow{ font-size:18px; color:#b3a797; }
.rp-stat-to{ color:var(--accent); }
.rp-stat-note{ font-family:'Source Sans 3'; font-size:13px; color:#8a7f72; margin-top:10px; }

.rp-chart-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.rp-chart-title{ font-family:'Source Sans 3'; font-size:17px; font-weight:700; color:#3f362d; }
.rp-chart-unit{ font-weight:600; color:#9a8e82; margin-left:8px; }
.rp-legend{ display:flex; gap:18px; }
.rp-leg{ display:flex; align-items:center; gap:7px; font-family:'Source Sans 3'; font-size:12px; font-weight:600; color:#6c6155; }
.rp-sw{ width:11px; height:11px; border-radius:2px; display:inline-block; }
.rp-sw-a{ background:#bcb3a6; }
.rp-sw-b{ background:var(--accent); }

.rp-plot{ display:flex; gap:14px; }
.rp-yaxis{ display:flex; flex-direction:column; justify-content:space-between; height:240px;
  font-family:'Source Sans 3'; font-size:11px; font-weight:600; color:#a99e90; text-align:right; padding-bottom:1px; }
.rp-area{ position:relative; flex:1; height:240px;
  background-image:repeating-linear-gradient(to top, rgba(60,45,30,.14) 0 1px, transparent 1px 25%);
  background-position:0 1px; }
.rp-groups{ position:absolute; inset:0; display:flex; }
.rp-group{ flex:1; display:flex; flex-direction:column; }
.rp-bars{ flex:1; display:flex; align-items:flex-end; justify-content:center; gap:14px; padding:0 10px; }
.rp-bar{ position:relative; width:clamp(28px,18%,58px); min-height:2px; }
.rp-bar-a{ background:#bcb3a6; }
.rp-bar-b{ background:var(--accent); }
.rp-bval{ position:absolute; top:-22px; left:0; right:0; text-align:center;
  font-family:'Source Sans 3'; font-size:14px; font-weight:700; color:#3f362d; }
.rp-xlabel{ text-align:center; font-family:'Source Sans 3'; font-size:13px; font-weight:600; color:#6c6155;
  padding-top:12px; border-top:1.5px solid rgba(60,45,30,.22); }
.rp-footnote{ font-family:'Source Sans 3'; font-size:12px; font-style:italic; color:#9a8e82; margin-top:18px; line-height:1.5; }

@media (max-width:880px){
  .rp{ padding:30px 26px; }
  .rp-body{ grid-template-columns:1fr; gap:30px; }
  .rp-title{ font-size:30px; }
  .rp-stats{ grid-template-columns:1fr; }
}

/* ── Case-study problem list (numbered breakdowns) ───────────────────── */
.cs-problems{ margin:8px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:48px 32px; }
.cs-problem{ display:flex; flex-direction:column; }
.cs-problem-n{ font-family:'Playfair Display'; font-size:24px; line-height:1; color:var(--accent); }
.cs-problem-title{ font-family:'Playfair Display'; font-size:22px; line-height:1.2; color:var(--ink,#241f1b); margin:10px 0 8px; }
.cs-problem-text{ font-family:'Noto Serif KR'; font-size:15px; line-height:1.6; color:var(--ink-soft,#5e544b); }
.cs-problem-media{ margin-top:18px; }
@media (max-width:767px){ .cs-problems{ grid-template-columns:1fr; gap:36px; } }

/* ── Case-study matrix (problem → evidence → control vs variant) ─────── */
.cs-matrix{ margin-top:4px; }
.cs-mx-scroll{ overflow-x:auto; }
.cs-mx-table{ width:100%; border-collapse:collapse; font-family:'Source Sans 3'; }
.cs-mx-table th, .cs-mx-table td{ text-align:left; padding:16px 18px; border-bottom:1px solid rgba(40,32,26,.14); vertical-align:top; font-size:14px; line-height:1.45; }
.cs-mx-table thead th{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700; border-bottom:1px solid rgba(40,32,26,.28); }
.cs-mx-rowhead{ font-family:'Playfair Display'; font-size:17px; color:var(--ink,#241f1b); font-weight:600; white-space:nowrap; }
.cs-mx-table td{ color:var(--ink-soft,#5e544b); }
.cs-mx-cv{ width:20%; }
.cs-mx-variant{ color:var(--ink,#241f1b) !important; font-weight:600; }
.cs-mx-table tbody tr:last-child th, .cs-mx-table tbody tr:last-child td{ border-bottom:0; }

.cs-mx-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(40,32,26,.14); border:1px solid rgba(40,32,26,.14); margin-top:28px; }
.cs-mx-stat{ background:var(--surf-paper,#fbf9f4); padding:24px 22px; display:flex; flex-direction:column; gap:6px; }
.cs-mx-stat-v{ font-family:'Playfair Display'; font-size:34px; line-height:1; color:var(--accent); }
.cs-mx-stat-k{ font-family:'Source Sans 3'; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft,#5e544b); }
.cs-mx-caption{ font-family:'Noto Serif KR'; font-size:14px; line-height:1.6; color:var(--ink-soft,#5e544b); margin-top:18px; }
@media (max-width:640px){ .cs-mx-stats{ grid-template-columns:1fr; } .cs-mx-stat-v{ font-size:28px; } }

/* ── Disconnected silos diagram (fragmentation problem) ──────────────── */
.silos{ margin-top:4px; }
.silos-title{ font-family:'Source Sans 3'; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:28px; }
.silos-row{ display:flex; align-items:stretch; gap:0; }
.silo{ flex:1; min-width:0; border:1.5px solid color-mix(in srgb, var(--silo) 55%, transparent); border-radius:8px;
  background:color-mix(in srgb, var(--silo) 6%, transparent); padding:24px 22px 26px; display:flex; flex-direction:column; gap:20px; }
.silo-gap{ width:40px; flex:none; align-self:center; }
.silo-head{ font-family:'Playfair Display'; font-weight:700; font-size:19px; line-height:1.15; letter-spacing:-.01em;
  color:var(--silo); padding-bottom:14px; border-bottom:1px solid color-mix(in srgb, var(--silo) 30%, transparent); text-wrap:balance; }
.silo-body{ display:flex; flex-direction:column; gap:11px; }
.silo-chip{ font-family:'Source Sans 3'; font-size:14px; font-weight:600; color:#4a4138;
  background:color-mix(in srgb, var(--silo) 11%, #fff); border:1px solid color-mix(in srgb, var(--silo) 26%, transparent);
  border-radius:999px; padding:9px 16px; text-align:center; }
.silos-caption{ font-family:'Noto Serif KR'; font-size:18px; line-height:1.5; color:#5c5247; margin-top:26px; max-width:62ch; text-wrap:pretty; }

@media (max-width:720px){
  .silos-row{ flex-direction:column; gap:0; }
  .silo-gap{ width:auto; height:28px; align-self:stretch; }
}

/* Other Projects section is hidden unless the Tweak toggles it on */
html:not([data-showother="true"]) #other-projects{ display:none; }
html:not([data-showother="true"]) #scrollspy .ss-link-other{ display:none; }

/* More Presentations rail is hidden unless the Tweak toggles it on */
html:not([data-showrail="true"]) #pf-rail{ display:none; }
/* dark gradient overlay for legible text */
.co-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:rgba(20,16,12,.5);
  transition:opacity .6s ease;
}
.co-tile:hover .co-overlay{ opacity:.92; }
/* inset border frame that animates to the edge + turns cinnabar (like The Designer) */
.co-frame{
  position:absolute; inset:0; margin:18px; z-index:3; pointer-events:none;
  border:1px solid rgba(255,255,255,.25);
  transition:margin .7s var(--ease-out), border-color .7s ease;
}
.co-tile:hover .co-frame{ margin:0; border-color:var(--accent); }
.co-caption{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:clamp(20px,2.6vw,40px); }
.co-sub{ max-width:36ch; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .6s var(--ease-out); }
.co-tile:hover .co-sub{ opacity:1; transform:none; }
@media (max-width:520px){ .co-sub{ opacity:1; transform:none; } }
.jb-contents a{
  font-family:'Source Sans 3'; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.45); cursor:pointer; transition:color .3s; line-height:1.5;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.jb-contents a:hover{ color:#fff; }
.jb-contents a[data-on="1"]{ color:#fff; border-bottom-color:var(--accent); }

.jb-stage{ perspective:2400px; }
.jb-book{
  position:relative; width:100%; aspect-ratio:1.7 / 1; max-height:660px; margin:0 auto;
  display:flex; background:#f4f0e7;
  border-radius:3px;
  box-shadow:0 40px 80px -28px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.25);
}
.jb-page{
  position:relative; flex:1 1 50%; min-width:0; overflow:hidden;
  background-color:#f7f3ea; color:#241f1b;
  /* white rice-paper pages with subtle scattered speckle flecks */
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='520'%20height='520'%3E%3Cg%20fill='%237a684a'%3E%3Ccircle%20cx='40'%20cy='70'%20r='1.1'%20opacity='0.45'/%3E%3Ccircle%20cx='130'%20cy='300'%20r='0.7'%20opacity='0.3'/%3E%3Ccircle%20cx='210'%20cy='120'%20r='1.5'%20opacity='0.5'/%3E%3Ccircle%20cx='300'%20cy='420'%20r='0.8'%20opacity='0.35'/%3E%3Ccircle%20cx='95'%20cy='460'%20r='1'%20opacity='0.4'/%3E%3Ccircle%20cx='360'%20cy='200'%20r='0.6'%20opacity='0.28'/%3E%3Ccircle%20cx='450'%20cy='330'%20r='1.3'%20opacity='0.5'/%3E%3Ccircle%20cx='180'%20cy='250'%20r='0.6'%20opacity='0.28'/%3E%3Ccircle%20cx='260'%20cy='60'%20r='0.9'%20opacity='0.36'/%3E%3Ccircle%20cx='420'%20cy='90'%20r='0.8'%20opacity='0.34'/%3E%3Ccircle%20cx='70'%20cy='200'%20r='0.7'%20opacity='0.3'/%3E%3Ccircle%20cx='330'%20cy='490'%20r='1.1'%20opacity='0.45'/%3E%3Ccircle%20cx='490'%20cy='180'%20r='0.7'%20opacity='0.3'/%3E%3Ccircle%20cx='150'%20cy='390'%20r='0.9'%20opacity='0.38'/%3E%3Ccircle%20cx='400'%20cy='440'%20r='0.6'%20opacity='0.28'/%3E%3Ccircle%20cx='240'%20cy='340'%20r='1.4'%20opacity='0.45'/%3E%3C/g%3E%3C/svg%3E");
  background-size:300px 300px; background-blend-mode:multiply;
  display:flex; flex-direction:column;
}
.jb-left{ border-radius:3px 0 0 3px; }
.jb-right{ border-radius:0 3px 3px 0; }
/* page shading toward the spine for a bound-book curve */
.jb-left::after, .jb-right::after{
  content:""; position:absolute; top:0; bottom:0; width:14%; pointer-events:none; z-index:3;
}
.jb-left::after{ right:0; background:linear-gradient(to right, rgba(0,0,0,0), rgba(40,30,20,.16)); }
.jb-right::after{ left:0; background:linear-gradient(to left, rgba(0,0,0,0), rgba(40,30,20,.16)); }
/* thin bound spine */
.jb-spine{ width:2px; background:linear-gradient(to bottom, rgba(40,30,20,.05), rgba(40,30,20,.28), rgba(40,30,20,.05)); z-index:4; align-self:stretch; }

/* page inner padding */
.jb-pad{ padding:clamp(20px,3.2vw,52px); display:flex; flex-direction:column; height:100%; }

/* LEFT page: image plate */
.jb-imgwrap{ position:relative; flex:1 1 auto; overflow:hidden; background:#e4ddcf; min-height:0; }
.jb-imgwrap image-slot{ display:block; width:100%; height:100%; }
.jb-platecap{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; }
.jb-num{ font-family:'Noto Serif KR'; font-size:30px; color:var(--accent); line-height:1; }
.jb-date{ font-family:'Source Sans 3'; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#8a7e72; }

/* RIGHT page: title / summary / open */
.jb-eyebrow{ font-family:'Source Sans 3'; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.jb-title{ font-family:'Playfair Display'; font-size:clamp(26px,3.4vw,46px); line-height:1.04; color:#241f1b; letter-spacing:-.01em; }
.jb-summary{ font-family:'Noto Serif KR'; font-size:clamp(14px,1.15vw,17px); line-height:1.7; color:#5e544b; margin-top:18px; }
.jb-open{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; cursor:pointer; padding:14px 0 2px;
  font-family:'Source Sans 3'; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#241f1b;
  border-bottom:1px solid var(--accent);
}
.jb-open .material-symbols-outlined{ color:var(--accent); font-size:18px; transition:transform .3s var(--ease-out); }
.jb-open:hover .material-symbols-outlined{ transform:translateX(5px); }
.jb-foot{ margin-top:18px; font-family:'Source Sans 3'; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#9a8e82; }

/* page content fade between spreads */
.jb-page .jb-pad{ animation:jbFade .5s ease; }
@keyframes jbFade{ from{opacity:0} to{opacity:1} }

/* the turning leaf */
.jb-flip{
  position:absolute; top:0; width:50%; height:100%; z-index:6;
  background:linear-gradient(105deg,#f4f0e7,#ece4d6);
  box-shadow:0 0 30px rgba(0,0,0,.2);
  transform-style:preserve-3d; pointer-events:none; opacity:0; visibility:hidden;
  backface-visibility:hidden;
}

/* ── Flip mode: PAPER TURN (default) ─────────────────────────────────── */
[data-jbflip="turn"] .jb-flip.turn-next{ left:50%; transform-origin:left center; animation:jbTurnNext .66s var(--ease-wipe) forwards; }
[data-jbflip="turn"] .jb-flip.turn-prev{ left:0;   transform-origin:right center; animation:jbTurnPrev .66s var(--ease-wipe) forwards; }
@keyframes jbTurnNext{
  0%{opacity:1;visibility:visible;transform:rotateY(0);box-shadow:-12px 0 30px rgba(0,0,0,.18)}
  100%{opacity:1;visibility:visible;transform:rotateY(-178deg);box-shadow:12px 0 40px rgba(0,0,0,.30)}
}
@keyframes jbTurnPrev{
  0%{opacity:1;visibility:visible;transform:rotateY(0);box-shadow:12px 0 30px rgba(0,0,0,.18)}
  100%{opacity:1;visibility:visible;transform:rotateY(178deg);box-shadow:-12px 0 40px rgba(0,0,0,.30)}
}

/* ── Flip mode: PAGE CURL (leaf curls with a soft highlight) ─────────── */
[data-jbflip="curl"] .jb-flip.turn-next{ left:50%; transform-origin:left center; animation:jbCurlNext .66s var(--ease-out) forwards;
  background:linear-gradient(115deg,#fbf8f1 0%,#f0e8d8 55%,#d9cdb6 100%); border-radius:0 6px 14px 0; }
[data-jbflip="curl"] .jb-flip.turn-prev{ left:0;   transform-origin:right center; animation:jbCurlPrev .66s var(--ease-out) forwards;
  background:linear-gradient(245deg,#fbf8f1 0%,#f0e8d8 55%,#d9cdb6 100%); border-radius:6px 0 0 14px; }
@keyframes jbCurlNext{
  0%{opacity:1;visibility:visible;transform:perspective(1700px) rotateY(0) skewY(0)}
  50%{transform:perspective(1700px) rotateY(-92deg) skewY(-3deg)}
  100%{opacity:1;visibility:visible;transform:perspective(1700px) rotateY(-178deg) skewY(0)}
}
@keyframes jbCurlPrev{
  0%{opacity:1;visibility:visible;transform:perspective(1700px) rotateY(0) skewY(0)}
  50%{transform:perspective(1700px) rotateY(92deg) skewY(3deg)}
  100%{opacity:1;visibility:visible;transform:perspective(1700px) rotateY(178deg) skewY(0)}
}

/* ── Flip mode: SLIDE (pages slide across the spine) ─────────────────── */
[data-jbflip="slide"] .jb-book.jb-anim .jb-left,
[data-jbflip="slide"] .jb-book.jb-anim .jb-right{ animation:jbSlide .64s var(--ease-wipe) both; }
[data-jbflip="slide"] .jb-book[data-dir="next"]{ --sdir:1; }
[data-jbflip="slide"] .jb-book[data-dir="prev"]{ --sdir:-1; }
@keyframes jbSlide{
  0%{ transform:translateX(0); opacity:1; }
  46%{ transform:translateX(calc(var(--sdir,1) * -7%)); opacity:0; }
  54%{ transform:translateX(calc(var(--sdir,1) * 7%)); opacity:0; }
  100%{ transform:translateX(0); opacity:1; }
}

/* ── Flip mode: CROSS-FADE ───────────────────────────────────────────── */
[data-jbflip="fade"] .jb-book.jb-anim .jb-left,
[data-jbflip="fade"] .jb-book.jb-anim .jb-right{ animation:jbCross .62s ease both; }
@keyframes jbCross{ 0%{opacity:1} 46%{opacity:0} 54%{opacity:0} 100%{opacity:1} }

/* slide/fade hide the rotating leaf entirely */
[data-jbflip="slide"] .jb-flip,
[data-jbflip="fade"] .jb-flip{ display:none; }

/* ── Smooth content crossfade under turn/curl (no hard swap flash) ───── */
/* turn & curl: fade the page CONTENT out, swap while hidden, fade back in,
   in step with the leaf — so text never blinks. The leaf rides on top. */
[data-jbflip="turn"] .jb-book.jb-anim .jb-left,
[data-jbflip="turn"] .jb-book.jb-anim .jb-right,
[data-jbflip="curl"] .jb-book.jb-anim .jb-left,
[data-jbflip="curl"] .jb-book.jb-anim .jb-right{ animation:jbContentCross .66s ease both; }
@keyframes jbContentCross{ 0%{opacity:1} 40%{opacity:0} 60%{opacity:0} 100%{opacity:1} }
/* during any flip the per-render pad fade is suppressed (container handles it) */
.jb-pad.jb-nofade{ animation:none !important; }

/* controls */
.jb-controls{ display:flex; align-items:center; justify-content:center; gap:28px; margin-top:32px; }
.jb-nav{
  width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, transform .3s var(--ease-out);
}
.jb-nav:hover{ background:var(--accent); border-color:var(--accent); }
.jb-nav:disabled{ opacity:.3; cursor:default; }
.jb-nav:disabled:hover{ background:transparent; border-color:rgba(255,255,255,.25); }
.jb-indicator{ font-family:'Source Sans 3'; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.55); min-width:64px; text-align:center; }

/* close button (visible only when expanded) */
.jb-close{
  position:absolute; top:14px; right:14px; z-index:8; width:42px; height:42px; border-radius:999px; border:0;
  background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--ease-out);
}
.jb-book.expanded .jb-close{ opacity:1; pointer-events:auto; }
.jb-close:hover{ transform:rotate(90deg); }
.jb-close .material-symbols-outlined{ font-size:22px; }

/* expanded: right page becomes a scrollable full-text reader */
.jb-book.expanded .jb-right .jb-pad{ overflow-y:auto; }
.jb-body{ font-family:'Noto Serif KR'; font-size:15px; line-height:1.8; color:#43392f; margin-top:18px; }
.jb-body p{ margin-bottom:1em; }
.jb-body p:first-child::first-letter{ font-family:'Playfair Display'; font-size:3.2em; line-height:.8; float:left; margin:6px 10px 0 0; color:var(--accent); }

/* mobile: stack to a single page */
@media (max-width:767px){
  .jb-book{ flex-direction:column; aspect-ratio:auto; max-height:none; }
  .jb-spine{ width:100%; height:2px; align-self:auto; background:linear-gradient(to right, rgba(40,30,20,.05), rgba(40,30,20,.28), rgba(40,30,20,.05)); border-radius:0; }
  .jb-left, .jb-right{ border-radius:0; }
  .jb-left::after, .jb-right::after{ display:none; }
  .jb-imgwrap{ aspect-ratio:3/2; flex:none; }
  .jb-flip{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .jb-flip{ animation:none !important; }
  .jb-page .jb-pad{ animation:none !important; }
}

/* ── In-page slide presentation (replaces the Journal book) ──────────── */
.pf-stage{ position:relative; width:100%; overflow:hidden; border-radius:4px;
  background:#f4f0e7; box-shadow:0 40px 90px -34px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.2); }
.pf-canvas{ position:absolute; top:0; left:0; width:1280px; height:720px; transform-origin:top left; }
.pf-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; overflow:hidden;
  background:#f6f2ea; color:#231e1a;
  transition:opacity .55s ease, transform .6s var(--ease-out);
  transform:translateX(calc(var(--park,0) * 64px)); }
.pf-slide.active{ opacity:1; pointer-events:auto; transform:none; z-index:2; }
[data-deckfx="fade"] .pf-slide{ transform:none; }
[data-deckfx="zoom"] .pf-slide{ transform:scale(.9); }
[data-deckfx="zoom"] .pf-slide.active{ transform:none; }
[data-deckfx="push"] .pf-slide{ transform:translateX(calc(var(--park,0) * 100%)); }
[data-deckfx="push"] .pf-slide.active{ transform:none; }

.pf-slide.pf-dark{ background:#2a2a2a; color:#fff; }

/* orange = disorganized, purple = disciplined (from the study) */
.pf-slide{ --pf-orange:#cf6a2a; --pf-purple:#6c54a3; }
.pf-slide.pf-dark{ --pf-orange:#e08a44; --pf-purple:#a08bd6; }

/* compare — optional question + toned before→after */
.pf-question{ font-family:'Playfair Display'; font-weight:600; font-size:34px; line-height:1.18; color:inherit; max-width:24ch; text-wrap:balance; margin-bottom:40px; }
.pf-compare{ display:flex; align-items:center; gap:56px; }
.pf-compare .pf-bignum{ font-size:128px; }
.pf-bignum.pf-from{ color:var(--pf-orange); }
.pf-bignum.pf-to{ color:var(--pf-purple); }
.pf-from-foot{ color:var(--pf-orange)!important; }
.pf-to-foot{ color:var(--pf-purple)!important; }

/* metrics — stacked before→after rows */
.pf-metrics{ display:flex; flex-direction:column; }
.pf-metric{ display:flex; align-items:center; justify-content:space-between; gap:40px;
  padding:20px 0; border-bottom:1px solid rgba(60,45,30,.14); }
.pf-dark .pf-metric{ border-bottom-color:rgba(255,255,255,.14); }
.pf-metric:first-child{ padding-top:6px; }
.pf-metric-label{ font-family:'Noto Serif KR'; font-size:23px; line-height:1.35; color:#3f362d; max-width:30ch; }
.pf-dark .pf-metric-label{ color:rgba(255,255,255,.85); }
.pf-metric-vals{ display:flex; align-items:center; gap:18px; flex:none; }
.pf-metric-from, .pf-metric-to{ font-family:'Playfair Display'; font-weight:700; font-size:46px; line-height:1; letter-spacing:-.02em; }
.pf-metric-from.is-text, .pf-metric-to.is-text{ font-size:26px; font-weight:600; }
.pf-metric-from{ color:var(--pf-orange); }
.pf-metric-to{ color:var(--pf-purple); }
.pf-metric-arrow{ color:#b9ad9c; font-size:30px; }
.pf-dark .pf-metric-arrow{ color:rgba(255,255,255,.4); }

/* versus — two toned columns */
.pf-versus{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.pf-vcol{ border-top:3px solid var(--col); padding-top:20px; }
.pf-tone-orange{ --col:var(--pf-orange); }
.pf-tone-purple{ --col:var(--pf-purple); }
.pf-vhead{ font-family:'Source Sans 3'; font-size:14px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--col); margin-bottom:18px; }
.pf-vitems{ display:flex; flex-direction:column; gap:12px; }
.pf-vitem{ font-family:'Noto Serif KR'; font-size:24px; line-height:1.35; color:#3f362d; }
.pf-dark .pf-vitem{ color:rgba(255,255,255,.85); }
.pf-vitem:last-child{ color:#9a8e82; font-size:19px; }
.pf-dark .pf-vitem:last-child{ color:rgba(255,255,255,.5); }

.pf-pad{ position:absolute; inset:0; padding:96px 112px; display:flex; flex-direction:column; }
.pf-kicker{ font-family:'Source Sans 3'; font-size:16px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); }
.pf-rule{ width:64px; height:2px; background:var(--accent); }
.pf-h1{ font-family:'Playfair Display'; font-weight:600; font-size:56px; line-height:1.08; letter-spacing:-.015em; color:inherit; text-wrap:balance; }
.pf-h2{ font-family:'Playfair Display'; font-weight:600; font-size:44px; line-height:1.1; color:inherit; text-wrap:balance; }
.pf-statement{ font-family:'Playfair Display'; font-weight:500; font-size:50px; line-height:1.18; color:inherit; max-width:20ch; text-wrap:balance; }
.pf-body{ font-family:'Noto Serif KR'; font-size:23px; line-height:1.7; color:#5a4f45; }
.pf-dark .pf-body{ color:rgba(255,255,255,.78); }
.pf-foot{ font-family:'Source Sans 3'; font-size:13px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#9a8e82; }
.pf-dark .pf-foot{ color:rgba(255,255,255,.5); }
.pf-arrow{ color:var(--accent); }
.pf-bignum{ font-family:'Playfair Display'; font-weight:700; font-size:200px; line-height:.86; letter-spacing:-.03em; color:inherit; }

.pf-list{ display:flex; flex-direction:column; gap:18px; }
.pf-li{ display:flex; gap:22px; align-items:baseline; font-family:'Noto Serif KR'; font-size:27px; line-height:1.4; color:#3f362d; }
.pf-dark .pf-li{ color:rgba(255,255,255,.85); }
.pf-li .pf-idx{ font-family:'Source Sans 3'; font-size:14px; font-weight:600; letter-spacing:.18em; color:var(--accent); min-width:30px; flex:none; }

.pf-media{ position:absolute; inset:0; background:#e4ddcf; }
.pf-media image-slot{ display:block; width:100%; height:100%; }
.pf-cap{ position:absolute; left:48px; bottom:44px; z-index:3; display:flex; align-items:center; gap:14px;
  background:rgba(20,16,12,.6); backdrop-filter:blur(4px); padding:12px 22px; border-radius:2px; }
.pf-cap .pf-foot{ color:#fff; }

.pf-split{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; }
.pf-split .pf-half-media{ position:relative; background:#e4ddcf; }
.pf-split .pf-half-media image-slot{ display:block; width:100%; height:100%; }
.pf-split .pf-half-text{ padding:96px 88px; display:flex; flex-direction:column; justify-content:center; gap:24px; }

/* controls */
.pf-controls{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:30px; }
.pf-nav{ width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s; }
.pf-nav:hover{ background:var(--accent); border-color:var(--accent); }
.pf-nav:disabled{ opacity:.3; cursor:default; }

/* ── Video slide (plays inline; deck keeps its nav) ──────────────────── */
.pf-video{ position:absolute; inset:0; background:#000; }
.pf-video-el{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.pf-video-cover{ position:absolute; inset:0; z-index:4; display:flex; align-items:flex-start; cursor:pointer;
  background:linear-gradient(to bottom, rgba(12,9,7,.86) 0%, rgba(12,9,7,.5) 32%, rgba(12,9,7,.12) 62%, rgba(12,9,7,.22) 100%); }
.pf-video-cap{ padding:84px 96px; max-width:62ch; display:flex; flex-direction:column; gap:22px; }
.pf-video-title{ font-family:'Playfair Display'; font-weight:600; font-size:42px; line-height:1.16; letter-spacing:-.01em; color:#fff; text-wrap:balance; }
.pf-video-cta{ display:inline-flex; align-items:center; gap:14px; font-family:'Source Sans 3'; font-size:19px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.85); }
.pf-video-cta .material-symbols-outlined{ font-size:38px; color:var(--accent); }
.pf-video-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  width:112px; height:112px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(216,87,42,.94); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.75); transition:transform .3s var(--ease-out), background .3s; }
.pf-video-play:hover{ transform:translate(-50%,-50%) scale(1.07); background:var(--accent); }
.pf-video-play .material-symbols-outlined{ font-size:62px; margin-left:6px; }
#deck.is-video.playing .pf-video-cover,
#deck.is-video.playing .pf-video-play,
.pf-video-slide.vid-playing .pf-video-cover,
.pf-video-slide.vid-playing .pf-video-play{ display:none; }

/* thumbnail play badge for video presentations */
.pf-thumb-cover.is-video{ justify-content:flex-end; }
.pf-thumb-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:999px; background:rgba(216,87,42,.94); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -8px rgba(0,0,0,.6);
  transition:transform .35s var(--ease-out); }
.pf-thumb:hover .pf-thumb-play{ transform:translate(-50%,-50%) scale(1.12); }
.pf-thumb-play .material-symbols-outlined{ font-size:26px; margin-left:2px; }
.pf-nav:disabled:hover{ background:transparent; border-color:rgba(255,255,255,.25); }
.pf-indicator{ font-family:'Source Sans 3'; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.55); min-width:78px; text-align:center; }
.pf-dots{ display:flex; align-items:center; gap:9px; }
.pf-dot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.25); cursor:pointer; border:0; padding:0; transition:background .3s, transform .3s; }
.pf-dot.on{ background:var(--accent); transform:scale(1.35); }
.pf-dot:hover{ background:rgba(255,255,255,.55); }
#deck:focus{ outline:none; }
#deck:focus-visible{ outline:2px solid var(--accent); outline-offset:8px; border-radius:6px; }

/* ── Thumbnail rail — all presentations ──────────────────────────────── */
.pf-rail{ margin-top:64px; padding-top:40px; border-top:1px solid rgba(255,255,255,.12); }
.pf-rail-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:24px; }
.pf-rail-label{ font-family:'Source Sans 3'; font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.pf-rail-ko{ font-family:'Noto Serif KR'; font-size:13px; letter-spacing:.2em; color:rgba(255,255,255,.22); }
.pf-thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; }

.pf-thumb{ display:flex; flex-direction:column; gap:14px; background:none; border:0; padding:0; cursor:pointer; text-align:left;
  font:inherit; color:inherit; opacity:.7; transition:opacity .35s ease, transform .35s var(--ease-out); }
.pf-thumb:hover{ opacity:1; transform:translateY(-3px); }
.pf-thumb.on{ opacity:1; }
.pf-thumb:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:4px; }

.pf-thumb-cover{ position:relative; aspect-ratio:16/9; border-radius:3px; overflow:hidden;
  background:#f6f2ea; box-shadow:0 18px 38px -22px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.25);
  display:flex; flex-direction:column; justify-content:flex-end; padding:18px 20px;
  transition:box-shadow .35s ease, outline-color .35s ease; outline:2px solid transparent; outline-offset:2px; }
.pf-thumb.on .pf-thumb-cover{ outline-color:var(--accent); box-shadow:0 24px 46px -22px rgba(0,0,0,.8); }
.pf-thumb-cover.is-dark{ background:#2a2a2a; }
.pf-thumb-cover::before{ content:''; position:absolute; top:18px; left:20px; width:30px; height:2px; background:var(--accent); }
.pf-thumb-kick{ font-family:'Source Sans 3'; font-size:9px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.pf-thumb-ttl{ font-family:'Playfair Display'; font-weight:600; font-size:17px; line-height:1.12; letter-spacing:-.01em; color:#231e1a;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pf-thumb-cover.is-dark .pf-thumb-ttl{ color:#fff; }

/* placeholder ("add a presentation") cover */
.pf-thumb-cover.is-empty{ background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px), #201d1a;
  border:1px dashed rgba(255,255,255,.18); justify-content:center; align-items:center; padding:0; }
.pf-thumb-cover.is-empty::before{ display:none; }
.pf-thumb-empty-mark{ font-family:'Source Sans 3'; font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.4); display:flex; flex-direction:column; align-items:center; gap:8px; }
.pf-thumb-empty-mark .material-symbols-outlined{ font-size:26px; color:rgba(255,255,255,.3); }
.pf-thumb:hover .pf-thumb-cover.is-empty{ border-color:var(--accent); }
.pf-thumb:hover .pf-thumb-cover.is-empty .pf-thumb-empty-mark .material-symbols-outlined{ color:var(--accent); }

.pf-thumb-meta{ display:flex; flex-direction:column; gap:4px; }
.pf-thumb-name{ font-family:'Source Sans 3'; font-size:13px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.88); }
.pf-thumb.is-placeholder .pf-thumb-name{ color:rgba(255,255,255,.45); }
.pf-thumb-tag{ font-family:'Source Sans 3'; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4); }

@media (max-width:767px){ .pf-dots{ display:none; } .pf-thumbs{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; } }
@media (prefers-reduced-motion: reduce){
  .pf-slide{ transition:opacity .2s ease; transform:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .hero-fade, .reveal, .cs-rise{ opacity:1!important; transform:none!important; filter:none!important; clip-path:none!important; transition:none!important; }
  .scroll-tick{ animation:none; }
}