/* Portfolio: the clothesline (03-portfolio). Page-specific rules only;
   .hang/.peg/.print/.hang .tag/.signs/.sign/.cta come from components.css. */

/* ---- the line section ---- */
.line-pin{position:relative}
.line-sec{position:sticky;top:0;background:linear-gradient(#F6F2E8 0%, #E9DDC3 30%, #E6D6B8 100%);padding:0;overflow:hidden;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
.line-sec .head{padding:clamp(2rem,5vh,3.5rem) clamp(18px,4.5vw,56px) 0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2rem;align-items:end;position:relative;z-index:4}
.line-sec .head .h1{font-size:clamp(2rem,4.4vw,3.8rem)}
.line-sec .signs{margin-top:1.2rem}
.count{font-family:var(--hand);color:var(--earth-text);font-size:1.15rem;text-align:right}
.count small{display:block;font-family:var(--hand);font-weight:300;color:var(--ink-2);font-size:1.05em}

/* the hillside behind the line; layers drift with the rail's scrollLeft (--sx) */
.hills{position:absolute;inset:0;z-index:0;pointer-events:none}
.hills svg{width:100%;height:100%;display:block}
.hills .i{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.hills .it{fill:none;stroke:var(--ink);stroke-width:.9;stroke-linecap:round;opacity:.6}
.hills .w{mix-blend-mode:multiply}
.hills .far{transform:translateX(calc(var(--sx,0px)*-.06))}
.hills .mid{transform:translateX(calc(var(--sx,0px)*-.12))}
.hills .near{transform:translateX(calc(var(--sx,0px)*-.22))}
.sunw{position:absolute;right:8%;top:6%;width:22vw;height:22vw;max-width:260px;max-height:260px;border-radius:50%;background:radial-gradient(closest-side, rgba(255,240,200,.95), rgba(255,220,150,.35) 60%, transparent);filter:blur(14px);z-index:0;pointer-events:none}

/* ---- the rail ---- */
.rail{position:relative;z-index:3;overflow-x:auto;overflow-y:hidden;scroll-snap-type:none;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:9rem clamp(18px,4.5vw,56px) 2rem;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.string{position:absolute;left:0;top:0;height:100%;z-index:1;pointer-events:none}
.string path{fill:none;stroke:#2F5BFF;stroke-width:2.2;stroke-linecap:round}
.string .shadow{stroke:rgba(30,37,32,.18);stroke-width:3;transform:translateY(3px)}
.poles{position:absolute;inset:0;z-index:2;pointer-events:none}
.pole{position:absolute;bottom:0;width:10px;height:88%;background:linear-gradient(90deg,#8A6A3C,#C9A46A 45%,#7A5A30);border-radius:3px;transform:rotate(var(--pr,2deg));transform-origin:bottom;box-shadow:2px 0 4px rgba(30,37,32,.15)}
.pole::before{content:"";position:absolute;left:-2px;right:-2px;top:14%;height:3px;background:#5A4020;border-radius:2px}
.track{display:flex;gap:clamp(2.2rem,4vw,4rem);width:max-content;align-items:flex-start;position:relative;z-index:3;padding-inline:8vw}
.rail .hang{scroll-snap-align:center;width:clamp(240px,26vw,380px)}
.rail .hang.phone-w{width:clamp(150px,14vw,200px)}
/* phones keep the tag width but the print is capped to the landscape prints' height, so the line stays one screen tall */
.rail .hang.phone-w .print{width:auto}
.rail .hang.phone-w .print img{width:auto;max-height:280px}
.hang.hide{display:none}
.hang img{-webkit-user-drag:none;user-select:none}
.hang .note{position:absolute;z-index:5;left:50%;top:calc(100% + .6rem);transform:translateX(-50%) rotate(-2deg);width:min(280px,80vw);text-align:center;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;font-size:1rem;line-height:1.35;text-shadow:0 0 4px rgba(246,242,232,.95),0 0 10px rgba(246,242,232,.9),0 0 18px rgba(246,242,232,.8)}
.hang:hover .note,.hang:focus-visible .note{opacity:1;transform:translateX(-50%) rotate(-2deg) translateY(4px)}
.hang .note small{font-size:.95em}
.rail-foot{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:end;padding:0 clamp(18px,4.5vw,56px) 1.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);gap:1rem}
.rail-foot .which{font-family:var(--hand);font-size:1.1rem;color:var(--earth-text);letter-spacing:0;text-transform:none}
.rail-foot .hint{display:flex;align-items:center;gap:.6rem}
.rail-foot .hint i{display:block;width:34px;height:1px;background:currentColor;opacity:.6;animation:slide 2.2s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-6px);opacity:.2}50%{opacity:.8}100%{transform:translateX(6px);opacity:.2}}
.mistc{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mistc i{position:absolute;display:block;border-radius:50%;background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,.4) 55%, rgba(255,255,255,0));filter:blur(22px);opacity:.55;will-change:transform;animation:fogdrift var(--d,40s) ease-in-out infinite alternate}
.mistc i:nth-child(1){left:-10%;top:56%;width:60%;height:26%;--d:44s}.mistc i:nth-child(2){left:50%;top:60%;width:64%;height:24%;--d:52s}.mistc i:nth-child(3){left:20%;top:72%;width:70%;height:22%;--d:48s}

/* ---- the index ---- */
.harvest{background:linear-gradient(#E6D6B8, #C9AE83)}
.harvest .head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;margin-bottom:1.6rem}
.rowsw{border-top:1px solid rgba(30,37,32,.25)}
.rowi{display:grid;grid-template-columns:2.4rem minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:1rem;align-items:baseline;padding:.8rem 0;border-bottom:1px dashed rgba(30,37,32,.3);text-decoration:none;font-size:.93rem;color:var(--ink-2);transition:padding-left .3s}
.rowi:hover{padding-left:.5rem}
.rowi:hover .nm{text-decoration:underline;text-decoration-color:var(--earth);text-decoration-thickness:1.5px;text-underline-offset:3px}
.rowi .n{font-family:var(--mono);font-size:.72rem;color:#3A423C}
.rowi .nm{font-family:var(--display);font-weight:var(--dw);font-size:1.02rem;letter-spacing:var(--dls);text-transform:var(--dcase);color:var(--ink)}
.rowi .sc,.rowi .yl{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#3A423C}
.rowi .tt{color:var(--ink)}
.rowi .yr{font-family:var(--mono);font-size:.72rem;color:#3A423C;white-space:nowrap;min-width:6.6em;text-align:right}
.rowi.hide{display:none}

/* ---- CTA ---- */
.oaf-portfolio .cta{background:linear-gradient(#C9AE83, #B89A72)}
/* the deepest tan: kickers go full ink (ink-2 is 3.2:1 here, ink 5.9:1); the rows' mono is #3A423C (4.9:1 at #C9AE83) */
.oaf-portfolio .cta .k{color:var(--ink)}

@media (max-width:900px){.line-sec .head,.harvest .head{grid-template-columns:1fr}.count{text-align:left}.rowi{grid-template-columns:2rem 1fr 1fr}.rowi .tt,.rowi .yl{display:none}.rail .hang{width:min(72vw,300px)}.rail .hang.phone-w{width:44vw}.rail{padding-top:7rem}.rowi .yr{min-width:0;text-align:left}.rail .hang.phone-w .print img{max-height:240px}}
@media (max-width:760px){.rail-foot{align-items:center}.rail-foot .hint{display:none}.rail-foot .which{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rail-foot #pos{white-space:nowrap}}
@media (prefers-reduced-motion: reduce){.hang,.rail-foot .hint i,.mistc i{animation:none}.hang:hover .peg,.hang:focus-visible .peg{animation:none}.hang.dip{translate:0 0 !important;transition:none}.hang .note,.rowi,.flyer,.fly-veil{transition:none}}

/* ===== arrivals: string draws on, poles rise, prints drop in ===== */
.string path{stroke-dasharray:var(--len,4000);stroke-dashoffset:var(--len,4000);transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
.string.on path{stroke-dashoffset:0}
.pole{transform:rotate(var(--pr,2deg)) scaleY(0);transition:transform .8s cubic-bezier(.34,1.4,.64,1)}
.poles.on .pole{transform:rotate(var(--pr,2deg)) scaleY(1)}
.poles.on .pole:nth-child(2){transition-delay:.12s}.poles.on .pole:nth-child(3){transition-delay:.24s}.poles.on .pole:nth-child(4){transition-delay:.36s}
/* the pre-arrival hidden state only when JS can bring them in */
@media (scripting: enabled){
  .rail .hang{translate:0 -130vh;opacity:0}
  .line-sec .head .rv{opacity:0;translate:0 14px;transition:opacity 1s ease .3s, translate 1s cubic-bezier(.2,.7,.2,1) .3s}
  .line-sec .head .rv.in{opacity:1;translate:0 0}
}
.rail.on .hang{animation:dropin 1s cubic-bezier(.34,1.45,.64,1) calc(1.1s + var(--i,0)*.11s) both, sway 5.6s ease-in-out var(--d) infinite alternate;opacity:1}
@keyframes dropin{from{translate:0 -130vh}to{translate:0 0}}
.hang:hover,.hang:focus-visible{animation-play-state:paused,paused}
.hang:hover .peg,.hang:focus-visible .peg{animation:wob .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes wob{0%{transform:rotate(0)}30%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}100%{transform:rotate(0)}}
.hang.dip{translate:0 7px !important;transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
.rail.on .hang.dip{animation-play-state:paused,running}

/* ===== print to case: the flyer (click -> lift to the top -> navigate) ===== */
.flyer{position:fixed;z-index:81;left:0;top:0;margin:0;padding:6px;background:#fff;box-shadow:0 24px 60px rgba(30,37,32,.24);transform-origin:0 0;will-change:transform;pointer-events:none;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.flyer.browser::before{content:"";display:block;height:14px;background:#EFEAE0;border-bottom:1px solid rgba(30,37,32,.15);background-image:radial-gradient(circle at 8px 7px, #C9C1B0 2.2px, transparent 2.6px),radial-gradient(circle at 18px 7px, #C9C1B0 2.2px, transparent 2.6px),radial-gradient(circle at 28px 7px, #C9C1B0 2.2px, transparent 2.6px)}
.flyer img{display:block;width:100%;height:auto}
.flyer.phone{border-radius:20px;padding:8px}.flyer.phone img{border-radius:12px}
.flyer .tape{opacity:0;transition:opacity .3s .45s}
.flyer.taped .tape{opacity:1}
.fly-veil{position:fixed;inset:0;z-index:80;background:linear-gradient(#F6F2E8, #EFE4CF);opacity:0;transition:opacity .5s;pointer-events:none}
.fly-veil.on{opacity:1}

@media (prefers-reduced-motion: reduce){.rail .hang{translate:0 0;opacity:1;animation:none}.rail.on .hang{animation:none}.string path{transition:none;stroke-dashoffset:0}.pole{transition:none;transform:rotate(var(--pr,2deg)) scaleY(1)}.line-sec .head .rv{opacity:1;translate:0 0}}