/* ============================================================
   undressed.socials — "what we do" layout proposals (home)
   per-layout composition + entrance. colours come from the
   active pair (currentColor / --surface / --text), no new hues.
   ============================================================ */

.wwd { margin-top: var(--gap-6); }

/* 11 · stack — swiss-ordered ruled list, kinetic oversized words.
   gutter number · giant word · calm fixed descriptor column. */
.wwd-stack { margin-top: var(--gap-6); perspective: 1300px; perspective-origin: 50% 38%; }
.wwd-stack-row {
  display: grid;
  grid-template-columns: clamp(34px, 4vw, 64px) minmax(0, 1fr) clamp(150px, 17vw, 230px);
  align-items: center; gap: clamp(20px, 3vw, 56px);
  padding: clamp(6px, 1vw, 14px) 0;
}
.wwd-stack-num {
  font-family: var(--font-body); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: clamp(12px, 1vw, 14px); letter-spacing: .14em; opacity: .5;
  align-self: center;
}
.wwd-stack-word {
  font-family: var(--font-display); font-weight: 900; text-transform: lowercase;
  letter-spacing: -.035em; line-height: .92; font-size: clamp(44px, 9vw, 132px);
  white-space: nowrap;
  transition: color .35s ease, -webkit-text-stroke-color .35s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.wwd-stack-word.fill-solid { color: var(--text); }
.wwd-stack-word.fill-muted { color: color-mix(in srgb, var(--text) 56%, var(--surface)); }
.wwd-stack-word.fill-soft  { color: color-mix(in srgb, var(--text) 38%, var(--surface)); }
.wwd-stack-word.fill-outline { color: transparent; -webkit-text-stroke: 1.6px var(--text); text-stroke: 1.6px var(--text); }
/* hover: word resolves to full solid + nudges right; descriptor reveals in its own column */
.wwd-stack-row:hover .wwd-stack-word { color: var(--text); -webkit-text-stroke-color: transparent; transform: translateX(clamp(6px, 1vw, 16px)); }
.wwd-stack-desc {
  font-family: var(--font-body); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.4;
  letter-spacing: .01em; text-transform: lowercase;
  opacity: 0; align-self: center; text-align: right;
  transform: translateX(-8px); transition: opacity .35s ease, transform .35s ease;
}
.wwd-stack-row:hover .wwd-stack-desc { opacity: .92; transform: none; }
/* depth-gallery reveal: each row floats forward from the back, one after another
   (staggered by Reveal's per-row delay). */
.wwd-stack .reveal {
  transform: translateY(64px) translateZ(-360px) scale(.9) rotateX(7deg);
  transform-origin: 50% 100%; transform-style: preserve-3d;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.72,.2,1);
  will-change: transform, opacity;
}
.wwd-stack .reveal.in { transform: none; }
.anim-off .wwd-stack .reveal { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .wwd-stack .reveal { transform: none !important; transition: none; } }
@media (hover: none) {
  .wwd-stack-desc { opacity: .6; transform: none; }
}
@media (max-width: 820px) {
  .wwd-stack-row { grid-template-columns: 26px minmax(0,1fr); column-gap: 16px; row-gap: 2px; padding: var(--gap-2) 0; }
  .wwd-stack-word { white-space: normal; }
  .wwd-stack-desc { grid-column: 2; text-align: left; opacity: .55; transform: none; }
}

/* scroll-jack hold: the hero (first paragraph) pins for ~0.7 screen, then
   releases so the page scrolls on normally to the next paragraph. */
.hero-jack { position: relative; height: 175vh; }
.hero-pin { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.anim-off .hero-jack { height: auto; }
.anim-off .hero-pin { position: static; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .hero-jack { height: auto; } .hero-pin { position: static; min-height: 0; } }

/* image-free "get undressed" — peeling colour bars reveal the headline */
.strip-stage { position: relative; height: 210vh; margin: var(--gap-6) 0; }
.strip-sticky { position: sticky; top: 0; height: 100vh; overflow: clip; display: flex; flex-direction: column; justify-content: center; }
.strip-content { position: relative; z-index: 1; }
.strip-word { font-size: clamp(56px, 13vw, 200px); }
.strip-bars { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.strip-bar { position: absolute; left: -1px; right: -1px; background: var(--text); will-change: transform; }
.anim-off .strip-stage, .reduce-strip .strip-stage { height: auto; margin: var(--gap-6) 0; }
.anim-off .strip-sticky { position: static; height: auto; }
.anim-off .strip-bars { display: none; }
.anim-off .strip-content { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .strip-stage { height: auto; }
  .strip-sticky { position: static; height: auto; }
  .strip-bars { display: none; }
  .strip-content { opacity: 1 !important; transform: none !important; }
}

/* image-free "get undressed" — the head pins while packages scroll up beneath */
.fill-stage { position: relative; margin: var(--gap-6) 0 0; }
.fill-pin { position: sticky; top: clamp(76px, 11vh, 104px); z-index: 1; }
.fill-flow { position: relative; z-index: 2; margin-top: clamp(48px, 8vh, 120px); padding-bottom: var(--gap-4); }
.fill-head { font-size: clamp(56px, 13vw, 220px); line-height: .86; text-align: left; }
.fill-head .fr-pre { color: var(--text); }
.fill-head .fr-ch {
  display: inline-block; color: transparent;
  -webkit-text-stroke: 2px var(--text); text-stroke: 2px var(--text);
  transition: color .3s ease, -webkit-text-stroke-color .3s ease, transform .3s ease;
}
.fill-head .fr-ch.on { color: var(--text); -webkit-text-stroke-color: transparent; }
.fill-sub { font-family: var(--font-body); font-weight: 400; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; margin-top: var(--gap-4); max-width: 46ch; }
.anim-off .fill-stage { margin: var(--gap-6) 0 0; }
.anim-off .fill-pin { position: static; }
.anim-off .fill-flow { margin-top: var(--gap-5); }
.anim-off .fill-head .fr-ch { color: var(--text); -webkit-text-stroke-color: transparent; }
.anim-off .fill-sub { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fill-pin { position: static; }
  .fill-flow { margin-top: var(--gap-5); }
  .fill-head .fr-ch { color: var(--text); -webkit-text-stroke-color: transparent; }
  .fill-sub { opacity: 1 !important; }
}

/* image-free founder id block (meet linda) */
.about-portrait { width: 100%; }
.id-block { background: color-mix(in srgb, var(--text) 7%, transparent); aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(22px, 3vw, 40px); }
.id-mono { font-family: var(--font-display); font-weight: 900; line-height: .78; font-size: clamp(90px, 15vw, 220px); }
.id-meta { display: flex; flex-direction: column; gap: 5px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .82; }
.hands-row--solo { display: block; max-width: 62ch; }
.wwd h4 {
  font-family: var(--font-body); font-weight: 700; text-transform: lowercase;
  letter-spacing: -.005em; font-size: clamp(20px, 2vw, 26px); margin: 0 0 6px;
}
.wwd-card p, .wwd-split-item p, .wwd-poster-cell p, .wwd-quad-cell p, .wwd-zig-item p {
  margin: 0; font-size: clamp(15px, 1.45vw, 18px); line-height: 1.5; opacity: .9;
}
.usp-open { font-weight: 600; }
.usp-lead { max-width: 56ch; }

/* ============================================================
   COHESIVE HOME TYPE SYSTEM
   one section scaffold everywhere: kicker → heading → sub → body.
   ============================================================ */
.h-sec {
  font-family: var(--font-display); font-weight: 900; text-transform: lowercase;
  letter-spacing: -.025em; line-height: .9; font-size: clamp(34px, 4.6vw, 64px); margin: 0;
}
.h-sub {
  font-family: var(--font-body); font-weight: 700; text-transform: lowercase;
  letter-spacing: -.01em; line-height: 1.1; font-size: clamp(20px, 2.2vw, 28px); margin: 0;
}
.sec-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; max-width: 60ch; }

/* heading reveal — three motions, chosen by body.hm-* (Tweak: Heading motion).
   default wipe = an upward mask reveal, the brand's “undress” gesture. */
.rv-head { opacity: 1; transform: none; }
.rv-head .h-sec { will-change: clip-path, transform, opacity; }
body.hm-wipe .rv-head .h-sec { clip-path: inset(0 0 110% 0); transition: clip-path .85s cubic-bezier(.76,0,.24,1); }
body.hm-wipe .rv-head.in .h-sec { clip-path: inset(-14% 0 -14% 0); }
body.hm-rise .rv-head .h-sec { opacity: 0; transform: translateY(.5em); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
body.hm-rise .rv-head.in .h-sec { opacity: 1; transform: none; }
body.hm-fade .rv-head .h-sec { opacity: 0; transition: opacity .85s ease; }
body.hm-fade .rv-head.in .h-sec { opacity: 1; }
.anim-off .rv-head .h-sec { clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none; }
@media (prefers-reduced-motion: reduce) { .rv-head .h-sec { clip-path: none !important; opacity: 1 !important; transform: none !important; } }

.subhead-lg {
  font-family: var(--font-body); font-weight: 700; text-transform: lowercase;
  letter-spacing: -.01em; font-size: clamp(26px, 3.4vw, 44px); line-height: 1; margin: 0;
}

/* 01 · cards */
.wwd-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: var(--gap-5); }
.wwd-card { background: color-mix(in srgb, var(--text) 7%, transparent); padding: 24px 20px 28px; position: relative; }
.wwd-card .wwd-idx { font-size: 12px; letter-spacing: .2em; opacity: .55; }
.wwd-card h4 { margin-top: 14px; }
.wwd-cards .reveal { transform: translateY(34px); }
@media (max-width: 900px) { .wwd-cards-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .wwd-cards-grid { grid-template-columns: 1fr; } }

/* 02 · index / ledger */
.wwd-ledger { margin-top: var(--gap-5); display: flex; flex-direction: column; gap: var(--gap-4); }
.wwd-led-row { display: grid; grid-template-columns: 60px minmax(120px, .3fr) 1fr; gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: 0; }
.wwd-led-n { font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 2vw, 26px); opacity: .5; }
.wwd-led-name { font-family: var(--font-display); font-weight: 900; text-transform: lowercase; letter-spacing: -.02em; font-size: clamp(26px, 3.4vw, 46px); line-height: .95; }
.wwd-led-desc { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; opacity: .9; }
.wwd-ledger .reveal { transform: translateX(-44px); }
.wwd-usp-close { margin-top: var(--gap-5); }
@media (max-width: 720px) { .wwd-led-row { grid-template-columns: 44px 1fr; } .wwd-led-desc { grid-column: 2; } }

/* 03 · split */
.wwd-split { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(32px, 5vw, 80px); margin-top: var(--gap-5); align-items: start; }
.wwd-split-left { position: sticky; top: 96px; }
.wwd-split-right { display: flex; flex-direction: column; }
.wwd-split-item { padding: clamp(14px, 2vw, 22px) 0; }
.wwd-split-item:first-child { padding-top: 0; }
.wwd-split-right .reveal { transform: translateY(30px); }
@media (max-width: 820px) { .wwd-split { grid-template-columns: 1fr; } .wwd-split-left { position: static; } }

/* 04 · rows */
.wwd-rows { margin-top: var(--gap-5); display: flex; flex-direction: column; gap: var(--gap-4); }
.wwd-row { display: grid; grid-template-columns: minmax(160px, .32fr) 1fr; gap: clamp(20px, 4vw, 64px); align-items: baseline; padding: 0; }
.wwd-row-name { font-family: var(--font-display); font-weight: 900; text-transform: lowercase; letter-spacing: -.02em; font-size: clamp(28px, 3.6vw, 52px); line-height: .92; }
.wwd-row-desc { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.55; opacity: .9; max-width: 50ch; }
.wwd-rows .reveal { transform: translateX(-40px); }
@media (max-width: 640px) { .wwd-row { grid-template-columns: 1fr; gap: 8px; } }

/* 05 · poster */
.wwd-poster { margin-top: var(--gap-5); text-align: center; }
.wwd-poster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,1.5vw,18px); margin: var(--gap-5) 0; text-align: left; }
.wwd-poster-cell { padding: clamp(22px, 3vw, 38px); background: color-mix(in srgb, var(--text) 7%, transparent); }
.wwd-poster-usp { max-width: 58ch; margin: 0 auto; }
.wwd-poster .reveal { transform: scale(.93); }
@media (max-width: 560px) { .wwd-poster-grid { grid-template-columns: 1fr; } }

/* 06 · ticker */
.wwd-ticker { margin-top: var(--gap-3); border-top: 2px solid currentColor; }
.wwd-tick { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: clamp(8px, 1.4vw, 20px) 0; border-bottom: 2px solid currentColor; }
.wwd-tick-name { font-family: var(--font-display); font-weight: 900; text-transform: lowercase; letter-spacing: -.03em; line-height: .9; font-size: clamp(40px, 8vw, 118px); }
.wwd-tick-desc { font-size: clamp(14px, 1.35vw, 18px); line-height: 1.45; opacity: .85; max-width: 32ch; text-align: right; flex: 0 1 32ch; }
.wwd-ticker .reveal { transform: translateX(-7%); }
@media (max-width: 680px) { .wwd-tick { flex-direction: column; align-items: flex-start; gap: 6px; } .wwd-tick-desc { text-align: left; } }

/* 07 · quad */
.wwd-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border: 2px solid currentColor; margin-top: var(--gap-5); background: currentColor; }
.wwd-quad-cell { background: var(--surface); padding: clamp(28px, 4vw, 56px); min-height: clamp(160px, 20vh, 240px); position: relative; }
.wwd-quad-cell .wwd-idx { position: absolute; top: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px); font-size: 12px; letter-spacing: .2em; opacity: .5; }
.wwd-quad .reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), clip-path .7s cubic-bezier(.76,0,.24,1); clip-path: inset(0 100% 0 0); }
.wwd-quad .reveal.in { clip-path: inset(0 0 0 0); }
@media (max-width: 560px) { .wwd-quad { grid-template-columns: 1fr; } }

/* 08 · statement */
.wwd-statement { margin-top: var(--gap-5); }
.wwd-statement .bigstatement { font-size: clamp(28px, 4.4vw, 62px); line-height: 1.16; max-width: 22ch; }
.wwd-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 32px); margin-top: var(--gap-5); border-top: 2px solid currentColor; padding-top: var(--gap-4); }
.wwd-cap-name { display: block; font-family: var(--font-body); font-weight: 700; text-transform: lowercase; font-size: clamp(17px, 1.7vw, 22px); }
.wwd-cap-desc { display: block; font-size: 13px; line-height: 1.45; opacity: .8; margin-top: 6px; }
.wwd-statement .wwd-cap.reveal { transform: translateY(24px); }
@media (max-width: 680px) { .wwd-caps { grid-template-columns: 1fr 1fr; } }

/* 09 · zigzag */
.wwd-zig { margin-top: var(--gap-5); display: flex; flex-direction: column; gap: var(--gap-5); }
.wwd-zig-item { max-width: 46ch; }
.wwd-zig-item h4 { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; font-size: clamp(26px, 3.4vw, 46px); line-height: .95; }
.wwd-zig-item.left { align-self: flex-start; text-align: left; }
.wwd-zig-item.right { align-self: flex-end; text-align: right; }
.wwd-zig-usp { margin-top: var(--gap-5); max-width: 58ch; }
.wwd-zig-item.left.reveal { transform: translateX(-44px); }
.wwd-zig-item.right.reveal { transform: translateX(44px); }
@media (max-width: 600px) {
  .wwd-zig-item.right { align-self: flex-start; text-align: left; }
  .wwd-zig-item.right.reveal { transform: translateX(-44px); }
}

/* 10 · minimal */
.wwd-min { list-style: none; margin: var(--gap-5) 0 0; padding: 0; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.wwd-min-item { display: grid; grid-template-columns: minmax(120px, .26fr) 1fr; gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(16px, 2vw, 24px) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.wwd-min-name { font-family: var(--font-body); font-weight: 700; text-transform: lowercase; font-size: clamp(18px, 1.8vw, 24px); }
.wwd-min-desc { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; opacity: .85; }
.wwd-min .reveal { transform: translateY(18px); }
@media (max-width: 600px) { .wwd-min-item { grid-template-columns: 1fr; gap: 4px; } }