/* ==========================================================
   EDITORIAL LAYER — "imperfection is the new luxury"
   Sits on top of styles.css. Same beige, same wine, same
   Montserrat + Imperial Script. Caveat is used only for
   handwritten notes.
   ========================================================== */
:root {
  --wine: #581228;
  --wine-deep: #2e0a17;
  --beige: #f3ece0;
  --beige-2: #e9e0cf;
  --tape: rgba(219, 203, 172, .82);
  --hand: "Imperial Script", cursive;
  --script: "Imperial Script", cursive;
  --wobble-radius: 255px 18px 225px 16px / 16px 225px 18px 255px;
}

/* ---------- scanned paper + grain over everything ---------- */
body { background-color: var(--beige); }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9990; }
body::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27420%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.035%27%20numOctaves%3D%275%27%20seed%3D%273%27/%3E%3CfeDiffuseLighting%20lighting-color%3D%27%23fff%27%20surfaceScale%3D%271.4%27%3E%3CfeDistantLight%20azimuth%3D%2745%27%20elevation%3D%2758%27/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27/%3E%3C/svg%3E"); background-size: 420px; opacity: .33; mix-blend-mode: multiply; }
body::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.25%200%200%200%200%20.12%200%200%200%200%20.14%200%200%200%20.14%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"); background-size: 200px; opacity: .55; mix-blend-mode: multiply; }

.paper { background-color: var(--beige); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27420%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.035%27%20numOctaves%3D%275%27%20seed%3D%273%27/%3E%3CfeDiffuseLighting%20lighting-color%3D%27%23fff%27%20surfaceScale%3D%271.4%27%3E%3CfeDistantLight%20azimuth%3D%2745%27%20elevation%3D%2758%27/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27/%3E%3C/svg%3E"); background-size: 420px; background-blend-mode: multiply; }
.torn-top { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2040%20L0%2011%20L11%2018%20L20%2016%20L35%205%20L52%205%20L68%206%20L77%2013%20L100%207%20L112%2018%20L137%2017%20L152%2025%20L161%2023%20L174%207%20L184%2011%20L207%208%20L226%2018%20L240%2016%20L249%205%20L261%2019%20L277%2011%20L295%2014%20L309%2021%20L329%209%20L348%2016%20L371%2020%20L385%2026%20L395%2013%20L416%207%20L433%205%20L453%2021%20L472%2023%20L485%2019%20L504%2017%20L520%2022%20L545%2014%20L565%205%20L586%2018%20L612%2022%20L625%2012%20L645%204%20L661%208%20L671%205%20L693%207%20L705%2013%20L729%206%20L745%2016%20L769%2022%20L793%2010%20L808%2012%20L832%2025%20L843%208%20L855%209%20L872%2017%20L884%204%20L900%2012%20L918%2025%20L939%2015%20L958%2019%20L967%2024%20L989%2023%20L1011%2013%20L1026%206%20L1046%205%20L1055%209%20L1066%2011%20L1075%204%20L1085%206%20L1100%205%20L1124%2018%20L1134%2010%20L1149%2012%20L1159%2023%20L1185%2014%20L1200%206%20L1200%2040%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") top / 100% 34px no-repeat, linear-gradient(#000, #000) 0 33px / 100% calc(100% - 33px) no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2040%20L0%2011%20L11%2018%20L20%2016%20L35%205%20L52%205%20L68%206%20L77%2013%20L100%207%20L112%2018%20L137%2017%20L152%2025%20L161%2023%20L174%207%20L184%2011%20L207%208%20L226%2018%20L240%2016%20L249%205%20L261%2019%20L277%2011%20L295%2014%20L309%2021%20L329%209%20L348%2016%20L371%2020%20L385%2026%20L395%2013%20L416%207%20L433%205%20L453%2021%20L472%2023%20L485%2019%20L504%2017%20L520%2022%20L545%2014%20L565%205%20L586%2018%20L612%2022%20L625%2012%20L645%204%20L661%208%20L671%205%20L693%207%20L705%2013%20L729%206%20L745%2016%20L769%2022%20L793%2010%20L808%2012%20L832%2025%20L843%208%20L855%209%20L872%2017%20L884%204%20L900%2012%20L918%2025%20L939%2015%20L958%2019%20L967%2024%20L989%2023%20L1011%2013%20L1026%206%20L1046%205%20L1055%209%20L1066%2011%20L1075%204%20L1085%206%20L1100%205%20L1124%2018%20L1134%2010%20L1149%2012%20L1159%2023%20L1185%2014%20L1200%206%20L1200%2040%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") top / 100% 34px no-repeat, linear-gradient(#000, #000) 0 33px / 100% calc(100% - 33px) no-repeat; padding-top: 34px; }

/* ---------- handwriting, doodles, tape ---------- */
.hnote { font-family: var(--hand); font-weight: 600; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.05; color: var(--wine); transform: rotate(var(--rot, -5deg)); display: inline-block; }
.hnote--light { color: var(--beige); }
.hnote--abs { position: absolute; z-index: 6; pointer-events: none; }
.doodle { display: inline-block; color: var(--wine); pointer-events: none; line-height: 0; }
.doodle--abs { position: absolute; z-index: 5; }
.doodle svg { width: 100%; height: auto; overflow: visible; }
.doodle path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1); }
.doodle.is-drawn path { stroke-dashoffset: 0; }
.doodle--light { color: var(--beige); }
.tape { position: absolute; width: 112px; height: 30px; background: var(--tape); z-index: 4; box-shadow: 0 1px 2px rgba(0,0,0,.1);
  clip-path: polygon(2% 8%, 10% 0, 22% 9%, 35% 1%, 50% 7%, 66% 0, 80% 8%, 92% 1%, 100% 10%, 98% 92%, 88% 100%, 74% 91%, 58% 100%, 42% 92%, 27% 100%, 12% 91%, 0 98%); }

/* ---------- imperfect lettering ---------- */
[data-wobble] .ltr { display: inline-block; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); transition: transform .9s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--i) * 18ms); }
[data-wobble].is-wob-pre .ltr { transform: translateY(.45em) rotate(calc(var(--r, 0deg) * 4)); opacity: 0; }
[data-wobble] .ltr { opacity: 1; transition-property: transform, opacity; }
[data-wobble] .ltr:hover { transform: translateY(-.08em) rotate(calc(var(--r, 0deg) * -2)); color: var(--wine); transition-delay: 0s; }

/* ---------- oversized type ---------- */
.mega { display: inline-block; white-space: nowrap; line-height: .82; letter-spacing: -.02em; font-weight: 800; text-transform: uppercase; pointer-events: none; user-select: none; will-change: transform; }
.mega--script { font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1; }
.mega--outline { color: transparent; -webkit-text-stroke: 1.5px currentColor; }
.mega-wrap { overflow: hidden; position: relative; }

/* ---------- buttons & labels feel hand-made ---------- */
.btn { border-radius: var(--wobble-radius) !important; border-width: 2px !important; transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s, border-radius .6s; }
.btn:hover { border-radius: 18px 225px 16px 255px / 225px 16px 255px 18px !important; transform: rotate(-1.5deg) scale(1.04); }
.section-label { font-weight: 700; letter-spacing: .3em; }
.section-label::before { height: 2px; border-radius: 2px; transform: rotate(-4deg); }
.cursor-dot { border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; border-width: 2px; }
.progress span { background: var(--wine); height: 3px; }

/* ==========================================================
   HOME
   ========================================================== */
.hero-stage { position: relative; }
.hero-stage .hnote--abs { left: clamp(1rem, 6vw, 5rem); bottom: 4.5rem; --rot: -7deg; }
.hero-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; background: var(--beige); z-index: 3; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2040%20L0%2011%20L11%2018%20L20%2016%20L35%205%20L52%205%20L68%206%20L77%2013%20L100%207%20L112%2018%20L137%2017%20L152%2025%20L161%2023%20L174%207%20L184%2011%20L207%208%20L226%2018%20L240%2016%20L249%205%20L261%2019%20L277%2011%20L295%2014%20L309%2021%20L329%209%20L348%2016%20L371%2020%20L385%2026%20L395%2013%20L416%207%20L433%205%20L453%2021%20L472%2023%20L485%2019%20L504%2017%20L520%2022%20L545%2014%20L565%205%20L586%2018%20L612%2022%20L625%2012%20L645%204%20L661%208%20L671%205%20L693%207%20L705%2013%20L729%206%20L745%2016%20L769%2022%20L793%2010%20L808%2012%20L832%2025%20L843%208%20L855%209%20L872%2017%20L884%204%20L900%2012%20L918%2025%20L939%2015%20L958%2019%20L967%2024%20L989%2023%20L1011%2013%20L1026%206%20L1046%205%20L1055%209%20L1066%2011%20L1075%204%20L1085%206%20L1100%205%20L1124%2018%20L1134%2010%20L1149%2012%20L1159%2023%20L1185%2014%20L1200%206%20L1200%2040%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") top / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2040%20L0%2011%20L11%2018%20L20%2016%20L35%205%20L52%205%20L68%206%20L77%2013%20L100%207%20L112%2018%20L137%2017%20L152%2025%20L161%2023%20L174%207%20L184%2011%20L207%208%20L226%2018%20L240%2016%20L249%205%20L261%2019%20L277%2011%20L295%2014%20L309%2021%20L329%209%20L348%2016%20L371%2020%20L385%2026%20L395%2013%20L416%207%20L433%205%20L453%2021%20L472%2023%20L485%2019%20L504%2017%20L520%2022%20L545%2014%20L565%205%20L586%2018%20L612%2022%20L625%2012%20L645%204%20L661%208%20L671%205%20L693%207%20L705%2013%20L729%206%20L745%2016%20L769%2022%20L793%2010%20L808%2012%20L832%2025%20L843%208%20L855%209%20L872%2017%20L884%204%20L900%2012%20L918%2025%20L939%2015%20L958%2019%20L967%2024%20L989%2023%20L1011%2013%20L1026%206%20L1046%205%20L1055%209%20L1066%2011%20L1075%204%20L1085%206%20L1100%205%20L1124%2018%20L1134%2010%20L1149%2012%20L1159%2023%20L1185%2014%20L1200%206%20L1200%2040%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") top / 100% 100% no-repeat; }

.intro { position: relative; overflow: visible; padding-top: clamp(2rem, 5vw, 4rem) !important; min-height: min(92vh, 860px); align-items: flex-start !important; }
.intro__inner { position: relative; z-index: 2; }
.hero__name { font-size: min(10.8vw, 11.5rem) !important; line-height: .92 !important; color: var(--wine) !important; margin: .2rem 0 1.4rem -.04em !important; white-space: nowrap; }
.hero__eyebrow { display: inline-block; font-weight: 700 !important; letter-spacing: .32em !important; color: var(--beige) !important; background: var(--wine); padding: .45rem .9rem .4rem; transform: rotate(-2deg); border-radius: 3px; }
.hero__tagline { max-width: 52%; line-height: 1.9 !important; }
.hero__statement { max-width: 15ch !important; font-size: clamp(2rem, 5vw, 4.2rem) !important; font-weight: 300; line-height: 1 !important; }
.hero__statement em { display: block; margin-top: .2em; font-size: 1.2em !important; transform: rotate(-3deg); transform-origin: left; }
.hero__note { margin-top: 1.4rem; }
.orbit { position: absolute; right: max(0px, calc((100vw - var(--max)) / 2 - 3rem)); top: clamp(13rem, 19vw, 17rem); width: min(46vw, 620px); height: min(44vw, 580px); z-index: 1; cursor: grab; touch-action: pan-y; }
.orbit:active { cursor: grabbing; }
.orbit canvas { width: 100% !important; height: 100% !important; display: block; }
.orbit .hnote--abs { left: 4%; bottom: 6%; --rot: -8deg; }
.orbit__fallback { position: absolute; inset: 18% 22%; object-fit: cover; border: 10px solid #fff; transform: rotate(4deg); box-shadow: 0 30px 50px -30px rgba(0,0,0,.5); }
@media (max-width: 900px) {
  .hero__tagline { max-width: none; }
  .intro { min-height: 0; flex-direction: column; }
  .orbit { position: relative; right: auto; top: auto; width: 100%; height: 88vw; max-height: 460px; margin-top: 1rem; }
}

/* marquee → tilted wine ribbon */
.marquee { background: var(--wine) !important; border: 0 !important; transform: rotate(-2.4deg) scale(1.04); margin: 2.5rem 0 3.5rem; padding: 1.5rem 0 !important; box-shadow: 0 18px 40px -24px rgba(46,10,23,.8); position: relative; z-index: 3; }
.marquee__track span { color: var(--beige) !important; font-size: clamp(2.4rem, 4.6vw, 3.8rem) !important; }
.marquee__star { color: #a9c4d6 !important; }

/* about → scanned print */
.about { position: relative; overflow: hidden; }
.about__media { border-radius: 2px !important; border: 12px solid #fff; overflow: visible !important; rotate: -3deg; box-shadow: 0 34px 60px -32px rgba(45,45,45,.55) !important; }
.about__media img { border-radius: 0 !important; }
.about__media figcaption { border-radius: 2px !important; }
.about__media .tape { top: -16px; left: 50%; transform: translateX(-50%) rotate(-4deg); }
.about__lead { font-size: clamp(1.9rem, 3.4vw, 3rem) !important; line-height: 1.08 !important; font-weight: 300; }
.about__lead em { font-family: var(--script); font-style: normal; font-size: 1.5em; line-height: .6; }
.about__list li { border-bottom-style: dashed !important; }
.about .mega-wrap { position: absolute; left: 0; right: 0; top: 1.5rem; z-index: -1; color: var(--wine); opacity: .055; }

/* work → full-bleed wine with paper prints */
.work#work { position: relative; background: var(--wine); color: var(--beige); max-width: none !important; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2)); padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2)); padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: clamp(5rem, 10vw, 8rem); }
.work#work::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 34px; background: var(--beige); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2040%20L0%2011%20L11%2018%20L20%2016%20L35%205%20L52%205%20L68%206%20L77%2013%20L100%207%20L112%2018%20L137%2017%20L152%2025%20L161%2023%20L174%207%20L184%2011%20L207%208%20L226%2018%20L240%2016%20L249%205%20L261%2019%20L277%2011%20L295%2014%20L309%2021%20L329%209%20L348%2016%20L371%2020%20L385%2026%20L395%2013%20L416%207%20L433%205%20L453%2021%20L472%2023%20L485%2019%20L504%2017%20L520%2022%20L545%2014%20L565%205%20L586%2018%20L612%2022%20L625%2012%20L645%204%20L661%208%20L671%205%20L693%207%20L705%2013%20L729%206%20L745%2016%20L769%2022%20L793%2010%20L808%2012%20L832%2025%20L843%208%20L855%209%20L872%2017%20L884%204%20L900%2012%20L918%2025%20L939%2015%20L958%2019%20L967%2024%20L989%2023%20L1011%2013%20L1026%206%20L1046%205%20L1055%209%20L1066%2011%20L1075%204%20L1085%206%20L1100%205%20L1124%2018%20L1134%2010%20L1149%2012%20L1159%2023%20L1185%2014%20L1200%206%20L1200%2040%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") top / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2040%20L0%2011%20L11%2018%20L20%2016%20L35%205%20L52%205%20L68%206%20L77%2013%20L100%207%20L112%2018%20L137%2017%20L152%2025%20L161%2023%20L174%207%20L184%2011%20L207%208%20L226%2018%20L240%2016%20L249%205%20L261%2019%20L277%2011%20L295%2014%20L309%2021%20L329%209%20L348%2016%20L371%2020%20L385%2026%20L395%2013%20L416%207%20L433%205%20L453%2021%20L472%2023%20L485%2019%20L504%2017%20L520%2022%20L545%2014%20L565%205%20L586%2018%20L612%2022%20L625%2012%20L645%204%20L661%208%20L671%205%20L693%207%20L705%2013%20L729%206%20L745%2016%20L769%2022%20L793%2010%20L808%2012%20L832%2025%20L843%208%20L855%209%20L872%2017%20L884%204%20L900%2012%20L918%2025%20L939%2015%20L958%2019%20L967%2024%20L989%2023%20L1011%2013%20L1026%206%20L1046%205%20L1055%209%20L1066%2011%20L1075%204%20L1085%206%20L1100%205%20L1124%2018%20L1134%2010%20L1149%2012%20L1159%2023%20L1185%2014%20L1200%206%20L1200%2040%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") top / 100% 100% no-repeat; transform: scaleY(-1); }
.work#work .section-label { color: #a9c4d6; }
.work#work .section-label::before { background: #a9c4d6; }
.work#work .work__title { color: var(--beige); font-size: clamp(2.4rem, 6vw, 5.2rem) !important; line-height: 1 !important; font-weight: 300; }
.work#work .work__title em { color: #a9c4d6; font-family: var(--script); font-style: normal; font-size: 1.25em; }
.work#work .card__index { color: #a9c4d6; }
.work#work .card__name { color: var(--beige); }
.work#work .card__desc { color: rgba(246,245,242,.72); }
.work#work .btn--ghost { color: var(--beige); border-color: var(--beige); }
.work#work .btn--ghost:hover { background: var(--beige); color: var(--wine); }
.work#work .mega-wrap { color: #a9c4d6; opacity: .9; margin: 0 calc(-1 * max(var(--gutter), calc((100vw - var(--max)) / 2))) 2.5rem; }
.work#work .hnote--abs { right: max(var(--gutter), calc((100vw - var(--max)) / 2)); top: clamp(9rem, 18vw, 15rem); }

.cards:not(.cards--hm) .card__media { border-radius: 2px !important; border: 10px solid #fff; overflow: visible !important; box-shadow: 0 30px 50px -30px rgba(0,0,0,.6); transition: transform .7s cubic-bezier(.34,1.56,.64,1), box-shadow .5s !important; transform-style: preserve-3d; }
.cards:not(.cards--hm) .card__media > img { overflow: hidden; }
.cards:not(.cards--hm) .card:nth-child(4n+1) .card__media { transform: rotate(-2.5deg); }
.cards:not(.cards--hm) .card:nth-child(4n+2) .card__media { transform: rotate(2deg) translateY(1.5rem); }
.cards:not(.cards--hm) .card:nth-child(4n+3) .card__media { transform: rotate(1.4deg); }
.cards:not(.cards--hm) .card:nth-child(4n) .card__media { transform: rotate(-1.8deg) translateY(1.5rem); }
.cards:not(.cards--hm) .card:hover .card__media { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) scale(1.02); }
.cards:not(.cards--hm) .card__media::before { content: ""; position: absolute; top: -16px; left: 50%; width: 104px; height: 28px; background: var(--tape); transform: translateX(-50%) rotate(-3deg); z-index: 3; }
.cards:not(.cards--hm) .card:nth-child(even) .card__media::before { left: auto; right: -26px; top: 6px; transform: rotate(38deg); }
.card__badge { border-radius: 3px !important; transform: rotate(-3deg); font-weight: 700 !important; }
.card__img { border-radius: 0 !important; }

/* feature → scanned paper sheet */
.feature { padding-top: clamp(5rem, 10vw, 8rem) !important; }
.feature__inner { background: var(--beige-2) !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27420%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.035%27%20numOctaves%3D%275%27%20seed%3D%273%27/%3E%3CfeDiffuseLighting%20lighting-color%3D%27%23fff%27%20surfaceScale%3D%271.4%27%3E%3CfeDistantLight%20azimuth%3D%2745%27%20elevation%3D%2758%27/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27/%3E%3C/svg%3E") !important; background-size: 420px !important; background-blend-mode: multiply; color: var(--ink) !important; border-radius: 3px !important; transform: rotate(-1deg); box-shadow: 0 40px 70px -40px rgba(45,45,45,.6); overflow: visible !important; }
.feature__inner::before { content: none !important; }
.feature__inner .tape:nth-of-type(1) { top: -15px; left: 8%; transform: rotate(-6deg); }
.feature__inner .tape:nth-of-type(2) { top: -12px; right: 6%; transform: rotate(5deg); }
.feature .section-label--light { color: var(--wine) !important; }
.feature .section-label--light::before { background: var(--wine) !important; }
.feature__title { color: var(--ink); font-size: clamp(2.4rem, 6vw, 5rem) !important; max-width: 14ch !important; line-height: 1 !important; }
.feature__script { color: var(--wine); transform: rotate(-3deg); transform-origin: left; margin-top: .2em; }
.feature__body { color: var(--ink-soft) !important; }
.feature .btn--light { background: var(--wine) !important; color: var(--beige) !important; border-color: var(--wine) !important; }
.feature .btn--light:hover { background: var(--wine-deep) !important; }
.feature .doodle--abs { right: 7%; top: 18%; width: clamp(110px, 16vw, 200px); }
@media (max-width: 760px) { .feature .doodle--abs { position: relative; right: auto; top: auto; display: block; margin: 0 0 1rem; width: 120px; } }

/* footer → deep wine, giant sign-off */
.footer { background: var(--wine-deep) !important; color: var(--beige) !important; position: relative; overflow: hidden; padding-top: clamp(4rem, 9vw, 7rem) !important; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 34px; background: var(--beige); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2040%20L0%2011%20L11%2018%20L20%2016%20L35%205%20L52%205%20L68%206%20L77%2013%20L100%207%20L112%2018%20L137%2017%20L152%2025%20L161%2023%20L174%207%20L184%2011%20L207%208%20L226%2018%20L240%2016%20L249%205%20L261%2019%20L277%2011%20L295%2014%20L309%2021%20L329%209%20L348%2016%20L371%2020%20L385%2026%20L395%2013%20L416%207%20L433%205%20L453%2021%20L472%2023%20L485%2019%20L504%2017%20L520%2022%20L545%2014%20L565%205%20L586%2018%20L612%2022%20L625%2012%20L645%204%20L661%208%20L671%205%20L693%207%20L705%2013%20L729%206%20L745%2016%20L769%2022%20L793%2010%20L808%2012%20L832%2025%20L843%208%20L855%209%20L872%2017%20L884%204%20L900%2012%20L918%2025%20L939%2015%20L958%2019%20L967%2024%20L989%2023%20L1011%2013%20L1026%206%20L1046%205%20L1055%209%20L1066%2011%20L1075%204%20L1085%206%20L1100%205%20L1124%2018%20L1134%2010%20L1149%2012%20L1159%2023%20L1185%2014%20L1200%206%20L1200%2040%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") top / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201200%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2040%20L0%2011%20L11%2018%20L20%2016%20L35%205%20L52%205%20L68%206%20L77%2013%20L100%207%20L112%2018%20L137%2017%20L152%2025%20L161%2023%20L174%207%20L184%2011%20L207%208%20L226%2018%20L240%2016%20L249%205%20L261%2019%20L277%2011%20L295%2014%20L309%2021%20L329%209%20L348%2016%20L371%2020%20L385%2026%20L395%2013%20L416%207%20L433%205%20L453%2021%20L472%2023%20L485%2019%20L504%2017%20L520%2022%20L545%2014%20L565%205%20L586%2018%20L612%2022%20L625%2012%20L645%204%20L661%208%20L671%205%20L693%207%20L705%2013%20L729%206%20L745%2016%20L769%2022%20L793%2010%20L808%2012%20L832%2025%20L843%208%20L855%209%20L872%2017%20L884%204%20L900%2012%20L918%2025%20L939%2015%20L958%2019%20L967%2024%20L989%2023%20L1011%2013%20L1026%206%20L1046%205%20L1055%209%20L1066%2011%20L1075%204%20L1085%206%20L1100%205%20L1124%2018%20L1134%2010%20L1149%2012%20L1159%2023%20L1185%2014%20L1200%206%20L1200%2040%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") top / 100% 100% no-repeat; transform: scaleY(-1); }
.footer-mega { display: block; text-align: center; margin: 0 -2vw clamp(2.5rem, 5vw, 4rem); color: #a9c4d6; }
.footer-mega:hover { color: var(--beige); }
.footer-mega small { display: block; font-family: var(--hand); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--beige); transform: rotate(-3deg); margin-top: .5rem; }

/* ==========================================================
   INNER PAGES
   ========================================================== */
.page-hero { position: relative; }
.page-hero__index { display: inline-block; background: var(--wine); color: var(--beige) !important; padding: .45rem .85rem .4rem; transform: rotate(-2deg); border-radius: 3px; }
.page-hero__title { font-size: clamp(3.4rem, 12vw, 11rem) !important; line-height: .95 !important; color: var(--wine) !important; margin: 1.4rem 0 1.6rem -.03em !important; }
.page-hero__sub { font-size: clamp(1.25rem, 2.4vw, 1.9rem) !important; line-height: 1.25 !important; color: var(--ink) !important; font-weight: 300 !important; max-width: 30ch !important; }
.page-hero__meta { border-top: 2px dashed rgba(88, 18, 40,.35) !important; }
.page-hero .hnote--abs { right: var(--gutter); top: 9.5rem; }
.page-hero .doodle--abs { right: calc(var(--gutter) + 1rem); top: 13rem; width: 70px; }
@media (max-width: 760px) { .page-hero .hnote--abs { position: relative; right: auto; top: auto; margin-top: 1.4rem; } .page-hero .doodle--abs { display: none; } }

.gallery .shot, .figure .shot { border-radius: 2px !important; border: 9px solid #fff; box-shadow: 0 22px 40px -28px rgba(0,0,0,.6); transition: rotate .6s cubic-bezier(.34,1.56,.64,1), scale .6s cubic-bezier(.34,1.56,.64,1), opacity .6s !important; overflow: visible !important; }
.gallery .shot img, .figure .shot img { border-radius: 0 !important; }
.gallery .shot:nth-child(6n+1) { rotate: -1.6deg; }
.gallery .shot:nth-child(6n+2) { rotate: 1.2deg; }
.gallery .shot:nth-child(6n+4) { rotate: -.8deg; }
.gallery .shot:nth-child(6n+5) { rotate: 2deg; }
.gallery .shot:nth-child(5n+3)::before { content: ""; position: absolute; top: -14px; left: 50%; width: 96px; height: 26px; background: var(--tape); transform: translateX(-50%) rotate(-4deg); z-index: 3; }
.gallery .shot:hover, .figure .shot:hover { rotate: 0deg; scale: 1.02; z-index: 4; }
.shot::after { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50% !important; }

.reel { border: 8px solid #fff; border-radius: 2px !important; box-shadow: 0 24px 40px -28px rgba(0,0,0,.6); }
.reel:nth-child(odd) { transform: rotate(-1.2deg); }
.reel:nth-child(even) { transform: rotate(1.2deg) translateY(.8rem); }
.embed { border-radius: 2px !important; border: 10px solid #fff; }
.rich .lead { font-size: clamp(1.4rem, 2.6vw, 2.1rem) !important; font-weight: 300; line-height: 1.25 !important; }
.figure figcaption strong { font-family: var(--hand); font-size: 1.7rem; color: var(--wine); font-weight: 600; letter-spacing: 0; text-transform: none; }
.figure figcaption strong::before { content: none !important; }

.pnav { border-top: 2px dashed rgba(88, 18, 40,.35) !important; }
.pnav a { font-family: var(--script); font-size: clamp(2rem, 5vw, 3.6rem) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; line-height: 1.1; color: var(--wine) !important; transition: transform .5s cubic-bezier(.34,1.56,.64,1) !important; }
.pnav a:hover { transform: rotate(-2deg) translateY(-3px); }
.pnav__label { font-family: "Inter", sans-serif; font-weight: 700; color: var(--ink-soft); }

/* case studies */
.cs-point { background: #fff; padding: 1.4rem 1.4rem 1.6rem !important; border-top: 0 !important; box-shadow: 0 18px 34px -26px rgba(0,0,0,.6); position: relative; }
.cs-point:nth-child(1) { transform: rotate(-2deg); }
.cs-point:nth-child(2) { transform: rotate(1.5deg) translateY(1rem); background: #f7dbe3; }
.cs-point:nth-child(3) { transform: rotate(-.8deg); }
.cs-point::before { content: ""; position: absolute; top: -13px; left: 50%; width: 90px; height: 26px; background: var(--tape); transform: translateX(-50%) rotate(-3deg); }
.cs-slider__track { border-radius: 2px !important; outline: 10px solid #fff; }
.cs-slider__arrow { border-radius: var(--wobble-radius) !important; }

/* contact */
.contact { position: relative; }
.contact__title { font-size: clamp(3rem, 8.5vw, 7.6rem) !important; line-height: .98 !important; font-weight: 300; }
.contact__script { color: var(--wine); display: inline-block; transform: rotate(-3deg); }
.form { background: #fff; background-image: repeating-linear-gradient(transparent 0 2.3rem, rgba(88, 18, 40,.16) 2.3rem calc(2.3rem + 1px)); padding: clamp(1.8rem, 4vw, 3rem) !important; transform: rotate(-1deg); box-shadow: 0 36px 60px -36px rgba(0,0,0,.55); position: relative; border-radius: 2px; }
.form .tape { top: -15px; left: 10%; transform: rotate(-5deg); }
.field input, .field textarea { background: transparent !important; border-radius: 0 !important; }
.contact .hnote--abs { right: var(--gutter); top: 10rem; }
@media (max-width: 760px) { .contact .hnote--abs { position: relative; right: auto; top: auto; margin: 0 0 1.5rem; } }

@media (prefers-reduced-motion: reduce) {
  [data-wobble] .ltr, .doodle path { transition: none !important; }
  .doodle path { stroke-dashoffset: 0; }
  [data-wobble].is-wob-pre .ltr { opacity: 1; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
}

@media (max-width: 600px) { .hero__name { white-space: normal; font-size: 19vw !important; line-height: .95 !important; } }

[data-wobble] .w { margin-right: .14em; }
[data-wobble] .w:last-child { margin-right: 0; }
.pnav a, .marquee__track span, .about__lead em { word-spacing: .22em; }
.mega--script { word-spacing: .06em; }
html { overflow-x: clip; } .feature { overflow: hidden; padding-bottom: clamp(4rem, 8vw, 6rem); }


/* ==========================================================
   MOODBOARD PASS — oxblood · coffee · soft steel blue · cream
   DM Serif Display for editorial headlines (Maison Rouge feel),
   Imperial Script for flourishes, Montserrat for small text.
   ========================================================== */
:root {
  --oxblood: #581228;
  --coffee: #200c0b;
  --steel: #a9c4d6;
  --cream: #f3ece0;
  --olive: #847949;
  --serif-d: "DM Serif Display", Georgia, serif;
}
body { background-color: var(--cream); }
::selection { background: var(--steel); color: var(--coffee); }

/* ---------- HERO: phrase + button over the living print ---------- */
.hero-print { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--coffee); color: var(--cream); display: grid; place-items: center; isolation: isolate; }
.hero-print__canvas, .hero-print__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-print__canvas { z-index: 0; display: block; }
.hero-print__fallback { z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, rgba(0,0,0,.18) 2px 3px, transparent 3px 26px),
    radial-gradient(60% 55% at 70% 35%, rgba(169,196,214,.75), transparent 70%),
    radial-gradient(55% 60% at 25% 70%, #5e1530, transparent 70%),
    radial-gradient(80% 80% at 50% 50%, #3a0c1c, #200c0b); }
.print-on .hero-print__fallback { display: none; }
.hero-print::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(70% 60% at 50% 55%, rgba(32,12,11,.42), transparent 75%); }
.hero-print__inner { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); max-width: 1200px; }
.hero-print__label { display: inline-flex; align-items: center; gap: .9rem; font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; font-weight: 500; color: rgba(243,236,224,.85); margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.hero-print__label i { width: 46px; height: 1px; background: rgba(243,236,224,.6); }
.hero-print__title { font-family: var(--serif-d); font-weight: 400; line-height: .92; margin: 0; }
.hero-print__line { display: block; text-transform: uppercase; font-size: clamp(2.8rem, 9.4vw, 8.8rem); letter-spacing: -.01em; }
.hero-print__script { display: block; font-family: var(--script); font-size: clamp(3.6rem, 12vw, 11rem); line-height: .9; color: var(--steel); margin-top: -.08em; word-spacing: .12em; text-shadow: 0 10px 40px rgba(32,12,11,.35); }
.hero-print__sub { margin: clamp(1.2rem, 3vw, 1.8rem) 0 clamp(2rem, 4vw, 2.8rem); font-size: clamp(.8rem, 1.3vw, .95rem); letter-spacing: .3em; text-transform: uppercase; color: rgba(243,236,224,.82); }
.hero-print__btn { display: inline-flex; align-items: center; gap: .9rem; padding: 1.05rem 2.2rem; border: 1px solid rgba(243,236,224,.75); border-radius: 999px; font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; color: var(--cream); background: rgba(32,12,11,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), gap .45s var(--ease); }
.hero-print__btn:hover { background: var(--cream); color: var(--oxblood); border-color: var(--cream); gap: 1.4rem; }
.hero-print .hero-stage__scroll { z-index: 3; }
/* entrance */
@media (prefers-reduced-motion: no-preference) {
  .hero-print__label, .hero-print__line, .hero-print__script, .hero-print__sub, .hero-print__btn { opacity: 0; transform: translateY(26px); animation: heroIn 1.3s var(--ease) forwards; }
  .hero-print__line { animation-delay: .15s; }
  .hero-print__script { animation-delay: .4s; filter: blur(8px); animation-name: heroInBlur; }
  .hero-print__sub { animation-delay: .7s; }
  .hero-print__btn { animation-delay: .9s; }
}
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroInBlur { to { opacity: 1; transform: none; filter: blur(0); } }
/* the torn edge from the editorial layer now cuts into cream */
.hero-stage::after { background: var(--cream) !important; z-index: 3; }

/* ---------- type: DM Serif Display headlines ---------- */
.work__title, .feature__title, .about__lead, .contact__title, .card__name, .page-hero__sub, .rich .lead, .cs-point h3 { font-family: var(--serif-d) !important; font-weight: 400 !important; letter-spacing: -.005em; }
.work#work .work__title, .feature__title, .contact__title { text-transform: none; }
.mega:not(.mega--script) { font-family: var(--serif-d); font-weight: 400; letter-spacing: -.01em; }
.hero__tagline { font-weight: 500 !important; }
.hero__eyebrow { background: var(--oxblood) !important; }

/* ---------- color: oxblood + steel blue ---------- */
.work#work { background: var(--oxblood) !important; }
.marquee { background: var(--coffee) !important; }
.marquee__star { color: var(--steel) !important; }
.feature__inner { background-color: #dfe8ee !important; }
.feature__script { color: var(--oxblood) !important; }
.footer { background: var(--coffee) !important; }
.footer-mega { color: var(--steel) !important; }
.footer-mega:hover { color: var(--cream) !important; }
.card__badge { background: var(--cream) !important; color: var(--oxblood) !important; }

/* fluted-glass shimmer on photo hover (Maison Rouge detail) */
.card__media::after, .shot::before { pointer-events: none; }
.cards:not(.cards--hm) .card__media > img + *, .card__media .fluted { display: none; }
.card__media { isolation: isolate; }
.cards:not(.cards--hm) .card__media .card__img { transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.cards:not(.cards--hm) .card:hover .card__media .card__img { filter: saturate(1.05) contrast(1.03); }
.flute { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, rgba(255,255,255,0) 1px 9px, rgba(0,0,0,.12) 9px 10px, rgba(0,0,0,0) 10px 22px);
  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.card:hover .flute, .shot:hover .flute { opacity: 1; }
@media (max-width: 600px) { .hero-print__label span:first-child, .hero-print__label i { display: none; } .hero-print__label { letter-spacing: .24em; } .hero-print__line { font-size: 13.5vw; } .hero-print__script { font-size: 19vw; } }


/* ---------- connected lettering (hero) ---------- */
.hero-print__inner { text-align: left !important; width: 100%; max-width: 1240px !important; }
.hp { position: relative; display: block; font-family: var(--serif-d); font-weight: 400; text-transform: uppercase; line-height: .9; color: var(--cream); letter-spacing: -.005em; margin: 0 0 clamp(2rem, 4vw, 3rem); visibility: hidden; }
.hp.is-laid { visibility: visible; }
.hp-row { display: block; white-space: nowrap; position: relative; }
.hp-i { color: transparent; }
.hp-aside { position: absolute; font-family: "Inter", sans-serif; text-transform: none; font-size: max(13px, calc(var(--hp-fs, 120px) * .1)); line-height: 1.3; letter-spacing: .01em; font-weight: 400; color: rgba(243,236,224,.88); white-space: nowrap; }
.hp-row--3 { height: 1.12em; text-transform: none; }
.hp-script { position: absolute; top: -.05em; font-family: var(--script); font-size: 1.18em; line-height: 1; color: var(--steel); white-space: nowrap; text-shadow: 0 10px 40px rgba(32,12,11,.35); }
.hp-stem { position: absolute; background: var(--cream); border-radius: 1px; transform-origin: 50% 0; }
.hp-spark { position: absolute; width: max(18px, calc(var(--hp-fs, 120px) * .17)); height: max(18px, calc(var(--hp-fs, 120px) * .17)); transform: translate(-50%, -50%); color: var(--cream); }
.hp-spark svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.hp-spark--a { color: var(--oxblood); }
.hp-spark--a svg { filter: drop-shadow(0 0 0 var(--cream)); }
.hp-spark--a::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--cream); z-index: -1; }
.hero-print__label { margin-bottom: clamp(1.4rem, 3vw, 2.2rem) !important; }
@media (prefers-reduced-motion: no-preference) {
  .hp.is-laid .hp-row { opacity: 0; transform: translateY(30px); animation: heroIn 1.2s var(--ease) forwards; }
  .hp.is-laid .hp-row--2 { animation-delay: .15s; }
  .hp.is-laid .hp-row--3 { animation-delay: .5s; filter: blur(8px); animation-name: heroInBlur; }
  .hp.is-laid .hp-stem { transform: scaleY(0); animation: stemGrow 1.4s cubic-bezier(.7,0,.2,1) .55s forwards; }
  .hp.is-laid .hp-spark { opacity: 0; animation: sparkIn .9s cubic-bezier(.34,1.56,.64,1) forwards; }
  .hp.is-laid .hp-spark--a { animation-delay: 1.2s; }
  .hp.is-laid .hp-spark--b { animation-delay: 1.75s; }
  .hp-spark svg { animation: sparkSpin 14s linear infinite; }
}
@keyframes stemGrow { to { transform: scaleY(1); } }
@keyframes sparkIn { from { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(-90deg); } to { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } }
@keyframes sparkSpin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .hp-aside { font-size: 11px; } }
.hp-row--2 { display: inline-block; }
.hp-spark { width: max(22px, calc(var(--hp-fs, 120px) * .26)) !important; height: max(22px, calc(var(--hp-fs, 120px) * .26)) !important; color: var(--cream) !important; }
.hp-spark--a::before { inset: 38%; background: var(--oxblood); z-index: 1; }
.hp-spark--a svg { filter: none; }
.hero-print { grid-template-columns: minmax(0, 1fr); } .hero-print__inner { min-width: 0; }

/* ==========================================================
   CLEAN & STRAIGHT PASS — no tape, no tilts, Inter + DM Serif
   ========================================================== */
body { font-family: "Inter", system-ui, sans-serif; }
.hnote { font-weight: 400 !important; font-size: clamp(1.7rem, 2.8vw, 2.4rem) !important; line-height: 1 !important; }

/* hero spacing: nothing touches */
.hp-row--3 { margin-top: .22em; }
.hp-aside { font-family: "Inter", sans-serif; }

/* no tape, anywhere */
.tape, .cards:not(.cards--hm) .card__media::before, .gallery .shot::before, .cs-point::before { display: none !important; content: none !important; }

/* photos sit straight */
.cards:not(.cards--hm) .card__media,
.cards:not(.cards--hm) .card:nth-child(n) .card__media { transform: none !important; border: 0 !important; border-radius: 4px !important; overflow: hidden !important; box-shadow: 0 30px 60px -36px rgba(0,0,0,.6) !important; transition: transform .6s var(--ease), box-shadow .6s var(--ease) !important; }
.cards:not(.cards--hm) .card:hover .card__media { transform: translateY(-6px) !important; }
.gallery .shot, .figure .shot { rotate: 0deg !important; scale: 1 !important; border: 0 !important; border-radius: 4px !important; overflow: hidden !important; }
.reel, .reel:nth-child(odd), .reel:nth-child(even) { transform: none !important; border: 0 !important; border-radius: 4px !important; }
.embed { border: 0 !important; border-radius: 4px !important; }
.cs-point, .cs-point:nth-child(n) { transform: none !important; }
.card__badge { transform: none !important; }

/* about: words left, portrait right */
.about__grid--flip { grid-template-columns: 1.1fr .9fr !important; align-items: center !important; }
.about__media { rotate: 0deg !important; border: 0 !important; border-radius: 4px !important; overflow: hidden !important; aspect-ratio: 4 / 5; box-shadow: 0 34px 60px -38px rgba(32,12,11,.55) !important; }
.about__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.about__lead { font-size: clamp(2rem, 3.8vw, 3.3rem) !important; }
.about__lead em { font-size: 1.35em !important; color: var(--oxblood); }
@media (max-width: 760px) {
  .about__grid--flip { grid-template-columns: 1fr !important; }
  .about__grid--flip .about__media { order: -1; max-width: 420px; }
}

/* case studies: bold moving fog */
.feature__inner { background: #22070f !important; background-image: none !important; transform: none !important; color: var(--cream) !important; border-radius: 6px !important; overflow: hidden !important; box-shadow: 0 50px 90px -50px rgba(32,12,11,.8) !important; min-height: clamp(480px, 64vh, 680px); display: flex; flex-direction: column; justify-content: center; }
.feature__fog { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.feature__inner > *:not(.feature__fog) { position: relative; z-index: 1; }
.feature .section-label--light { color: var(--steel) !important; }
.feature .section-label--light::before { background: var(--steel) !important; }
.feature__title { color: var(--cream) !important; font-size: clamp(2.8rem, 7vw, 6.4rem) !important; max-width: 12ch !important; line-height: .98 !important; }
.feature__script { color: var(--steel) !important; transform: none !important; margin-top: .12em; font-size: 1.05em; }
.feature__body { color: rgba(243,236,224,.85) !important; max-width: 40ch !important; }
.feature .btn--light { background: var(--steel) !important; color: var(--coffee) !important; border-color: var(--steel) !important; }
.feature .btn--light:hover { background: var(--cream) !important; border-color: var(--cream) !important; color: var(--oxblood) !important; }
.about__lead em { font-size: 1.12em !important; line-height: 1 !important; white-space: nowrap; }
.feature__inner { align-items: flex-start; } .feature .btn--light { width: auto !important; align-self: flex-start; }
.footer-mega { margin-left: 0 !important; margin-right: 0 !important; overflow: hidden; }
.hp-i { display: inline-block; width: .52em; text-align: center; overflow: hidden; vertical-align: bottom; }

/* ==========================================================
   SOFT TRANSITIONS — no hard/torn edges between sections
   ========================================================== */
.hero-stage::after, .work#work::before, .work#work::after, .footer::before {
  -webkit-mask: none !important; mask: none !important; transform: none !important; content: "" !important;
  position: absolute; left: 0; right: 0; pointer-events: none;
}
/* hero melts into cream */
.hero-stage::after { top: auto !important; bottom: 0 !important; height: clamp(140px, 24vh, 260px) !important; z-index: 2 !important;
  background: linear-gradient(to bottom, rgba(243,236,224,0) 0%, rgba(243,236,224,.35) 45%, rgba(243,236,224,.85) 80%, var(--cream) 100%) !important; }
/* Selected Work: cream → plum → cream */
.work#work { padding-top: clamp(9rem, 18vw, 14rem) !important; padding-bottom: clamp(9rem, 18vw, 14rem) !important; }
.work#work > * { position: relative; z-index: 1; }
.work#work::before { top: -1px !important; height: clamp(160px, 22vh, 280px) !important; z-index: 0;
  background: linear-gradient(to bottom, var(--cream) 0%, rgba(243,236,224,.6) 35%, rgba(243,236,224,0) 100%) !important; }
.work#work::after { bottom: -1px; height: clamp(160px, 22vh, 280px); z-index: 0;
  background: linear-gradient(to top, var(--cream) 0%, rgba(243,236,224,.6) 35%, rgba(243,236,224,0) 100%); }
/* footer rises out of cream */
.footer { padding-top: clamp(8rem, 16vw, 12rem) !important; }
.footer > * { position: relative; z-index: 1; }
.footer::before { top: -1px !important; height: clamp(160px, 22vh, 260px) !important; z-index: 0;
  background: linear-gradient(to bottom, var(--cream) 0%, rgba(243,236,224,.55) 40%, rgba(243,236,224,0) 100%) !important; }

/* eased fades: no visible start line */
.work#work::before, .footer::before { background: linear-gradient(to bottom, rgba(243,236,224,1) 0%, rgba(243,236,224,0.985) 10%, rgba(243,236,224,0.94) 20%, rgba(243,236,224,0.86) 30%, rgba(243,236,224,0.74) 40%, rgba(243,236,224,0.58) 50%, rgba(243,236,224,0.42) 60%, rgba(243,236,224,0.27) 70%, rgba(243,236,224,0.14) 80%, rgba(243,236,224,0.05) 90%, rgba(243,236,224,0) 100%) !important; top: 0 !important; }
.work#work::after { background: linear-gradient(to top, rgba(243,236,224,1) 0%, rgba(243,236,224,0.985) 10%, rgba(243,236,224,0.94) 20%, rgba(243,236,224,0.86) 30%, rgba(243,236,224,0.74) 40%, rgba(243,236,224,0.58) 50%, rgba(243,236,224,0.42) 60%, rgba(243,236,224,0.27) 70%, rgba(243,236,224,0.14) 80%, rgba(243,236,224,0.05) 90%, rgba(243,236,224,0) 100%) !important; bottom: 0 !important; }
.hero-stage::after { background: linear-gradient(to top, rgba(243,236,224,1) 0%, rgba(243,236,224,0.985) 10%, rgba(243,236,224,0.94) 20%, rgba(243,236,224,0.86) 30%, rgba(243,236,224,0.74) 40%, rgba(243,236,224,0.58) 50%, rgba(243,236,224,0.42) 60%, rgba(243,236,224,0.27) 70%, rgba(243,236,224,0.14) 80%, rgba(243,236,224,0.05) 90%, rgba(243,236,224,0) 100%) !important; }
.footer { margin-top: 0 !important; }
/* feather section edges so sub-pixel rounding never draws a hairline */
.hero-stage { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 6px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 6px), transparent 100%); }
.work#work { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%); }
.footer { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6px); mask-image: linear-gradient(to bottom, transparent 0, #000 6px); }

/* ==========================================================
   ONE CONTINUOUS SURFACE — the page colour changes with scroll
   (no fade bands, no edges). Sections are transparent; the
   body colour eases between cream, plum-cherry and coffee.
   ========================================================== */
html, body { background-color: var(--page-bg, var(--cream)) !important; transition: background-color .9s cubic-bezier(.4,0,.2,1); }
.hero-stage::after, .work#work::before, .work#work::after, .footer::before { content: none !important; display: none !important; }
.hero-stage, .work#work, .footer { -webkit-mask-image: none !important; mask-image: none !important; }
.work#work, .footer { background: transparent !important; }
.work#work { padding-top: clamp(6rem, 12vw, 9rem) !important; padding-bottom: clamp(6rem, 12vw, 9rem) !important; }
.footer { padding-top: clamp(5rem, 10vw, 8rem) !important; }
/* the hero print dissolves into the page as you scroll past it */
.hero-print { background: transparent !important; }
.hero-print__canvas, .hero-print__fallback, .hero-print::before { opacity: var(--hero-fade, 1); }
.hero-print__canvas, .hero-print__fallback { transform: scale(calc(1 + (1 - var(--hero-fade, 1)) * .06)); transform-origin: 50% 30%; }
/* hero text leaves with its print */
.hero-print__inner, .hero-print .hero-stage__scroll { opacity: var(--hero-fade, 1); }
/* spotlight: sections that don't belong to the current colour step back */
main > section, .marquee { transition: opacity .8s cubic-bezier(.4,0,.2,1); }
html[data-surface="plum"] main > section:not(#work),
html[data-surface="plum"] .marquee,
html[data-surface="cream"] main > section#work,
html[data-surface="coffee"] main > section:not(.hero-print),
html[data-surface="coffee"] .marquee { opacity: .14; }
.footer { transition: opacity .8s cubic-bezier(.4,0,.2,1); } html[data-surface="cream"] .footer, html[data-surface="plum"] .footer { opacity: .2; }
@media (max-width: 760px) { .work#work .hnote--abs, .hero-stage .hnote--abs, .orbit .hnote--abs { position: relative !important; display: block; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 0 1.2rem; } }

/* ==========================================================
   POLAROIDS — the 3D ring, on its own, centered and large
   ========================================================== */
.intro { min-height: 0 !important; padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
.hero__tagline { max-width: none !important; }
.polaroids { position: relative; text-align: center; padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.polaroids__label { font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; font-weight: 600; color: var(--oxblood); display: inline-flex; align-items: center; gap: .8rem; }
.polaroids__label::before, .polaroids__label::after { content: ""; width: 34px; height: 1px; background: var(--oxblood); opacity: .6; }
.polaroids__hint { font-family: var(--script); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--oxblood); margin: .4rem 0 0; line-height: 1; }
.polaroids .orbit { position: relative !important; right: auto !important; top: auto !important; left: auto !important;
  width: min(1400px, 100%) !important; height: clamp(440px, 72vh, 760px) !important; max-height: none !important; margin: 0 auto !important; }
@media (max-width: 760px) {
  .polaroids .orbit { height: clamp(380px, 118vw, 560px) !important; }
}
.about__body { margin-bottom: clamp(1.6rem, 3vw, 2.4rem) !important; }
/* footer sign-off line: bigger, clearer */
.footer-mega small { font-family: var(--script) !important; font-size: clamp(2.2rem, 4.6vw, 4rem) !important; line-height: 1.1 !important; color: var(--cream) !important; opacity: 1 !important; transform: none !important; margin-top: clamp(.6rem, 1.4vw, 1.2rem) !important; letter-spacing: .01em; word-spacing: .12em; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.br-m { display: none; } @media (max-width: 600px) { .br-m { display: inline; } }
/* no stripes: plain contact sheet, no fluted overlay on photos */
.form { background-image: none !important; background-color: #fbf9f5 !important; }
.flute { display: none !important; }
/* Selected Work: phrase line, note sits under the heading */
.work#work .mega-wrap { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.work__note { display: block; position: static !important; transform: none !important; margin: -1rem 0 clamp(2rem, 4vw, 3rem); color: var(--steel) !important; }

/* Selected Work heading, bigger */
.work#work .work__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.work#work .work__title { font-size: clamp(3.2rem, 8.4vw, 8rem) !important; line-height: .98 !important; max-width: 15ch; }
.work__note { margin-top: .6rem !important; }

/* hand-drawn Puerto Rico beside San Juan */
.pr-map { display: inline-block !important; width: 2.6em; vertical-align: middle; margin-left: .3em; color: var(--oxblood); line-height: 0 !important; position: relative; top: -.05em; }
.pr-map svg { width: 100%; height: auto; overflow: visible; }
.pr-map path { fill: none; stroke: currentColor; stroke-width: 1.7px !important; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.pr-map .pr-dot { fill: currentColor; transform-origin: 204px 22px; animation: prPulse 2.4s ease-in-out infinite; }
@keyframes prPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pr-map .pr-dot { animation: none; } }
/* room for the island beside "San Juan, Puerto Rico." */
@media (min-width: 761px) { .about__grid--flip { grid-template-columns: 1.3fr .8fr !important; } }
.about__lead { font-size: clamp(1.9rem, 3.3vw, 3rem) !important; }
.about__lead .sj { white-space: nowrap; }
.about__lead em { font-size: 1.05em !important; }
.pr-map { width: 2.3em !important; }
.pr-map .pr-dot { transform-origin: 209px 21px !important; }
@media (max-width: 600px) { .about__lead .sj { white-space: normal; } }

/* Puerto Rico from real coastline data (Natural Earth 1:10m): thin, detailed line */
.pr-map { width: 2.6em !important; }
.pr-map path { stroke-width: 1.05px !important; }
.pr-map .pr-dot { transform-origin: 229.4px 15.7px !important; }

/* iPhone: the hero title must always show on first load */
.hero-print { height: 100vh; height: 100svh; }
.hero-print__inner { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.hp { -webkit-animation: hpFailsafe 0s 1.6s forwards; animation: hpFailsafe 0s 1.6s forwards; }
@keyframes hpFailsafe { to { visibility: visible; } }
.hp-row { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* ==========================================================
   MOBILE HERO — clean stacked title on phones (<=600px).
   Desktop keeps the JS-composed connected lettering untouched;
   hero.js adds .is-plain on phones and clears its inline styles.
   ========================================================== */
@media (max-width: 600px) {
  .hero-print__inner { text-align: center !important; }
  .hp.is-plain { font-size: clamp(2.3rem, 13.2vw, 3.6rem) !important; text-align: center; margin: 0 auto clamp(1.6rem, 6vw, 2.4rem); }
  .hp.is-plain .hp-row { position: static; white-space: normal; text-align: center; height: auto; display: block; }
  .hp.is-plain .hp-word { display: inline; }
  .hp.is-plain .hp-i { color: inherit; }                 /* show the real "I" */
  .hp.is-plain .hp-stem { display: none !important; }     /* hide the vertical stroke */
  .hp.is-plain .hp-row--2 { padding-left: 0 !important; }
  .hp.is-plain .hp-row--3 { margin-top: .12em; }
  .hp.is-plain .hp-script { position: static; display: inline; top: 0; font-size: 1em; white-space: normal; }
  .hp.is-plain .hp-script--l { margin-right: .3em; }
  .hp.is-plain .hp-aside { position: static; display: block; margin: .8em auto 0; text-align: center; font-size: 13px !important; line-height: 1.4; white-space: normal; color: rgba(243,236,224,.82); }
}