/* Single case study (04-case). Page-specific rules only; .crumbs .meta .mods
   .yield .fieldnote.lean-r .np .hang .peg .print .tape come from components.css. */

.case-hero{background:linear-gradient(#F6F2E8, #EFE4CF);padding-bottom:2rem}
.case-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
.case-hero .h1{margin-top:1rem;max-width:22ch}

/* ---- the annotated screen ---- */
.board{position:relative;background:linear-gradient(#EFE4CF, var(--gold));padding:clamp(2rem,6vh,4rem) clamp(18px,4.5vw,56px) clamp(3rem,8vh,5rem)}
.board .wrap{max-width:1240px}
/* wide screens: the hand labels live in the margins either side of the desk */
.desk{--labw:13rem;--labgap:1.4rem;position:relative;margin:0 auto;max-width:min(1000px, calc(100% - 2 * (var(--labw) + var(--labgap))))}
.desk .shot{position:relative}
.desk .print{position:relative;margin:0;padding:8px;background:#fff;box-shadow:0 24px 60px rgba(30,37,32,.22), 0 1px 0 rgba(30,37,32,.25);transform:rotate(-.6deg)}
.desk .print::before{content:"";display:block;height:16px;background:#EFEAE0;border-bottom:1px solid rgba(30,37,32,.15);background-image:radial-gradient(circle at 9px 8px, #C9C1B0 2.4px, transparent 2.8px),radial-gradient(circle at 20px 8px, #C9C1B0 2.4px, transparent 2.8px),radial-gradient(circle at 31px 8px, #C9C1B0 2.4px, transparent 2.8px)}
.desk .print img{display:block;width:100%;height:auto}
.desk .tape{position:absolute;top:-10px;width:70px;height:22px;background:rgba(214,178,120,.65);z-index:3}
.desk .tape.l{left:8%;transform:rotate(-5deg)}.desk .tape.r{right:8%;transform:rotate(4deg)}
/* a phone as the lead screen: narrow desk, phone frame, notes out to the sides */
.desk.is-phone{max-width:300px}
.desk.is-phone .print{border-radius:22px;padding:9px}
.desk.is-phone .print::before{content:none}
.desk.is-phone .print img{border-radius:14px}
.desk.is-phone .tape.l{left:-6%}.desk.is-phone .tape.r{right:-6%}
.desk.is-phone .anno{inset:-3.9% -40%}
.anno{position:absolute;inset:-6% -12% -10% -12%;pointer-events:none;z-index:4}
.anno svg{width:100%;height:100%;display:block;overflow:visible}
.anno .pen{fill:none;stroke:#B5532E;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900}
.anno .pen.thin{stroke-width:1.8}
/* targeted strokes (board.php): the layer tilts with the print; the numbers
   only show when the labels drop under the desk as a numbered list */
.anno.dyn{transform:rotate(-.6deg)}
.anno .num{display:none}
.anno .num circle{fill:#FBF8F0;stroke:#B5532E;stroke-width:1.6}
.anno .num text{font-family:var(--mono);font-size:13px;fill:#B5532E}
.labs{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none;z-index:4}
.lab{position:absolute;top:var(--y,0%);width:var(--labw);font-family:var(--hand);color:var(--earth-text);font-size:1.05rem;line-height:1.4;opacity:0;transform:translateY(6px)}
.lab.side-l{right:calc(100% + var(--labgap));text-align:right}
.lab.side-r{left:calc(100% + var(--labgap));text-align:left}
.lab small{display:block;font-family:var(--hand);font-weight:300;color:var(--ink-2);font-size:1.05em;line-height:1.2;margin-top:.15em}
@supports (animation-timeline: view()){
  .anno .pen{animation:drawp linear both;animation-timeline:view();animation-range:entry 40% cover 55%}
  .anno .pen.a2{animation-range:entry 60% cover 65%}
  .anno .pen.a3{animation-range:entry 80% cover 75%}
  .labs .lab{animation:labin linear both;animation-timeline:view();animation-range:cover 30% cover 45%}
  .labs .lab.a2{animation-range:cover 45% cover 58%}
  .labs .lab.a3{animation-range:cover 58% cover 70%}
  @keyframes drawp{to{stroke-dashoffset:0}}
  @keyframes labin{to{opacity:1;transform:none}}
}
@supports not (animation-timeline: view()){
  .anno .pen{animation:drawp 2.2s cubic-bezier(.4,0,.2,1) 1s forwards}.anno .pen.a2{animation-delay:2.2s}.anno .pen.a3{animation-delay:3.4s}
  .labs .lab{animation:labin 1s ease 2.2s forwards}.labs .lab.a2{animation-delay:3.4s}.labs .lab.a3{animation-delay:4.6s}
  @keyframes drawp{to{stroke-dashoffset:0}}@keyframes labin{to{opacity:1;transform:none}}
}

@media (max-width:1024px){
  .board{overflow:hidden}
  .desk{max-width:1000px}
  .anno .pen.thin{display:none}
  .anno .num{display:block}
  .labs{position:static;display:grid;gap:.7rem;margin:2rem auto 0;max-width:40rem;counter-reset:lab}
  .labs .lab{position:relative;top:auto;left:auto;right:auto;width:auto;text-align:left;padding-left:2.2rem;font-size:1rem;counter-increment:lab}
  .labs .lab::before{content:counter(lab);position:absolute;left:0;top:.1rem;width:1.5rem;height:1.5rem;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;line-height:1}
  .desk.is-phone .labs{max-width:none;width:min(40rem,calc(100vw - 2 * var(--gutter, 18px)));margin-left:50%;translate:-50% 0}
}

/* ---- Given / Planted / Shipped ---- */
.wpn{background:linear-gradient(var(--gold), #E1CDA9)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
.step{position:relative;background:#FBF8F0;padding:1.6rem 1.4rem 1.8rem;border-radius:3px;box-shadow:0 10px 26px rgba(30,37,32,.10), 0 1px 0 rgba(30,37,32,.15)}
.step:nth-child(1){transform:rotate(-.6deg)}.step:nth-child(2){transform:rotate(.4deg) translateY(8px)}.step:nth-child(3){transform:rotate(-.3deg)}
.step .k{margin-bottom:.6rem}
.wpn h2.k{font-weight:400}
.step h3{font-family:var(--display);font-weight:var(--dw);font-size:1.35rem;letter-spacing:var(--dls);text-transform:var(--dcase);margin-bottom:.6rem}
.step p{color:var(--ink-2);font-size:.95rem}
.step p + p{margin-top:.6rem}
.step ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--ink-2);font-size:.95rem}
.step li{margin-bottom:.3rem}
.step li::marker{color:var(--earth)}

/* ---- the other screens on a short line ---- */
.shortline{position:relative;background:linear-gradient(#E1CDA9, #DCC6A0);padding:clamp(4rem,9vh,6rem) clamp(18px,4.5vw,56px) clamp(3rem,8vh,5rem);overflow:hidden}
.shortline .wrap{position:relative}
.sline{position:absolute;left:-2%;right:-2%;top:3.2rem;height:60px;z-index:0;pointer-events:none}
.sline path{fill:none;stroke:#2F5BFF;stroke-width:2.2;stroke-linecap:round}
.spoles{position:absolute;inset:0;pointer-events:none;z-index:0}
.spole{position:absolute;bottom:-2rem;width:9px;height:100%;background:linear-gradient(90deg,#8A6A3C,#C9A46A 45%,#7A5A30);border-radius:3px;transform-origin:bottom}
.gal{display:grid;grid-template-columns:var(--gal,.75fr 1fr 1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:start;padding-top:3.6rem;position:relative;z-index:1}
.gal .hang{transition:transform .5s}
.gal .hang:hover,.gal .hang:focus-visible{transform:rotate(0) translateY(-8px)}
.gal .print.phone{width:min(62%,190px)}
.gal .hang .tag b{font-family:var(--hand);font-weight:300;font-size:1.05rem;color:var(--ink-2);line-height:1.2;letter-spacing:normal;text-transform:none}

/* ---- yields, story, next/prev ---- */
.yields{background:linear-gradient(#DCC6A0, var(--gold-2))}
.yields .wrap{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,calc((100% - 2.8rem) / 3)));justify-content:center;gap:1.4rem}
.story{background:var(--gold-2)}
.story .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.story .p{margin-top:1rem}
.fieldnote .k{margin:1rem 0 0}
.nextprev{background:linear-gradient(var(--gold-2), #B89A72)}
/* deepest tan: kickers in full ink (5.9:1), hover in the band em (3.3:1, large bold) */
.nextprev .k{color:var(--ink)}
.nextprev .np:hover b{color:var(--band-em)}

@media (max-width:900px){.story .wrap{grid-template-columns:1fr}.steps,.yields .wrap,.gal{grid-template-columns:1fr}.yields .wrap{justify-content:stretch}.step{transform:none !important}.gal .print.phone{width:min(50%,190px)}.desk.is-phone{max-width:52vw}}
@media (prefers-reduced-motion: reduce){.hang{animation:none}.gal .hang{transition:none}.anno .pen{animation:none;stroke-dashoffset:0}.labs .lab{animation:none;opacity:1;transform:none}}

/* ---- arrival ---- */
.desk .print{translate:0 40px;rotate:2deg;opacity:0;animation:land 1s cubic-bezier(.22,1.2,.36,1) .4s both}
@keyframes land{to{translate:0 0;rotate:-.6deg;opacity:1}}
.desk .tape{opacity:0;transform-origin:center;animation:press .5s cubic-bezier(.34,1.56,.64,1) 1.3s both}
@keyframes press{from{opacity:0;scale:1.4}to{opacity:1;scale:1}}
.case-hero .rv{opacity:0;translate:0 14px;animation:up .9s cubic-bezier(.2,.7,.2,1) .1s both}
@media (prefers-reduced-motion: reduce){.desk .print,.desk .tape,.case-hero .rv{animation:none;opacity:1;translate:0 0;scale:1}}