/* =========================================================
   Jelly-style portfolio — MOBILE build
   ========================================================= */

:root{
  --paper:#F8F8F8;             /* tuned so the grained result lands on the reference's rendered paper */
  --ink:#0A0A0A;
  --ink-soft:#171717;
  --ink-kw:#1A1E25;
  --muted:rgba(10,10,10,.42);
  --purple:#7239FA;
  --purple-ink:#5526D6;
  --cyan:#80E4EA;              /* sampled from the reference card fill */
  --black:#121212;
  --note-pink:#F03D7A;
  --note-green:#9BE86B;

  --tab-home:#C9B8FF;
  --tab-work:#E8E2A0;
  --tab-about:#9FB6C4;
  --tab-play:#AEC98E;
  --tab-contact:#F0A9A9;

  --maxw:480px;
  --pad:16px;                  /* real content gutter */
  --font-body:"Epilogue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-eyebrow:"Archivo Black","Arial Black",system-ui,sans-serif;
  --font-head:"Archivo Black","Arial Black",system-ui,sans-serif;
  --font-mono:"Courier Prime",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --font-hand:"Gochi Hand","Comic Sans MS",cursive;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}

/* The desk. On a phone the column fills the screen and this never shows; on a
   wider window it frames the page the same way the case-study sheets are framed. */
body{
  font-family:var(--font-body);
  color:var(--ink);
  background-color:#1C1C1C;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Faint paper grain. `multiply` only darkens, so at .45 it was dragging the
   whole page ~24 levels below the reference's paper. soft-light perturbs around
   the base instead of pulling it down, so the texture reads without the shift. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:url("../assets/textures/grain.svg") 0 0/220px 220px;
  opacity:.5;mix-blend-mode:soft-light;
}
.shell>*{position:relative;z-index:2}

/* one centred mobile column on any screen — the sheet laid on the desk */
.shell{
  max-width:var(--maxw);margin-inline:auto;position:relative;overflow:clip;
  background:var(--paper);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
}

img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  height:55px;padding:0 var(--pad);      /* measured: hero starts at y=55 */
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,.12);
}
.menu-btn{
  width:44px;height:44px;margin-left:-8px;background:none;border:0;position:relative;
}
.menu-btn span{
  position:absolute;left:8px;width:28px;height:2.5px;background:var(--ink);border-radius:2px;
  transition:transform .28s ease,opacity .2s ease;
}
.menu-btn span:nth-child(1){top:15px}
.menu-btn span:nth-child(2){top:22px}
.menu-btn span:nth-child(3){top:29px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.wordmark{
  font-family:var(--font-head);
  font-size:21px;letter-spacing:-.02em;line-height:1;
  transform:scaleY(1.06);
  display:flex;align-items:flex-start;gap:1px;
}
.wordmark i{
  font-family:"Lovers Quarrel","Brush Script MT",cursive;
  font-size:19px;font-style:normal;
  align-self:flex-end;transform:translateY(4px) rotate(-6deg);
  color:var(--ink);
}

/* ---------- slide-down menu ---------- */
.menu{
  position:fixed;inset:0;z-index:45;
  max-width:var(--maxw);margin-inline:auto;   /* stay inside the column, not the whole window */
  background:var(--paper);
  padding:96px 24px var(--pad);
  display:flex;flex-direction:column;gap:18px;
  transform:translateY(-102%);
  transition:transform .42s cubic-bezier(.6,.02,.2,1);
}
.menu.open{transform:translateY(0)}
.menu a{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--ink);
  font-family:var(--font-body);font-weight:600;font-size:34px;line-height:1.1;
  letter-spacing:-.02em;
}
.menu .dot{width:13px;height:13px;border-radius:3px;flex:none}
.menu a:nth-child(1) .dot{background:var(--tab-home)}
.menu a:nth-child(2) .dot{background:var(--tab-work)}
.menu a:nth-child(3) .dot{background:var(--tab-about)}
.menu a:nth-child(4) .dot{background:var(--tab-play)}
.menu a:nth-child(5) .dot{background:var(--tab-contact)}

/* ---------- shared section rhythm ---------- */
section{padding:56px var(--pad);position:relative}
/* Painted display heading.
   Reference measures 419x158 on a 375 column (2.65:1) — a chunky, wide,
   hand-lettered mass that bleeds off both edges. Anton is the closest metric
   match of the available faces (3.10:1 natural); scaleY closes the rest.
   Letters are split into spans by main.js and scattered below. */
.brush{
  font-family:"Anton","Arial Narrow",var(--font-head);
  color:rgba(114,57,250,.92);
  font-size:36.8vw;
  line-height:.82;letter-spacing:-.005em;text-transform:uppercase;white-space:nowrap;
  transform:rotate(-2.5deg) scaleY(1.24);
  filter:url(#f-brush);
  margin:0 0 .2em -13.6%;width:max-content;
  overflow:visible;
}
.brush span{display:inline-block}

/* Painted heading supplied as real artwork.
   Sized by percentage of the section's content box (not vw) so the bleed stays
   proportional inside .shell's 480px cap instead of exploding on wide screens.
   Height comes from the image's own 2.344:1 ratio — never stretched to fit. */
.painted{
  width:121.8%;
  margin:0 0 8px -14.5%;
  line-height:0;
  position:relative;z-index:2;
}
.painted img{width:100%;height:auto;display:block}

/* Per-letter scatter on a 6-cycle so it works for any heading length.
   Uneven baselines + rotations are what separate hand-lettering from type. */
.brush span:nth-child(6n+1){transform:rotate(-4deg) translateY(-4px) scaleY(1.05)}
.brush span:nth-child(6n+2){transform:rotate(3deg)  translateY(5px)  scaleX(1.05)}
.brush span:nth-child(6n+3){transform:rotate(-2deg) translateY(-7px)}
.brush span:nth-child(6n+4){transform:rotate(5deg)  translateY(3px)  scaleY(1.09)}
.brush span:nth-child(6n+5){transform:rotate(-3deg) translateY(-2px) scaleX(1.03)}
.brush span:nth-child(6n+6){transform:rotate(2deg)  translateY(6px)}

/* torn-paper divider (uses the svg as an alpha mask) */
.torn{height:24px;border:0;padding:0}
.torn::before{
  content:"";display:block;height:100%;
  -webkit-mask:url("../assets/graphics/torn-edge.svg") center/100% 100% no-repeat;
          mask:url("../assets/graphics/torn-edge.svg") center/100% 100% no-repeat;
}
.torn.dark::before{background:var(--black)}
.torn.grey::before{background:#E7E3DA}

/* ---------- hero ---------- */
/* measured hero: y 55→813 (758 tall); eyebrow at 96, display at 129, keywords at 235 */
.hero{padding-top:41px;padding-bottom:70px;text-align:center;overflow:visible}
.eyebrow{
  font-family:var(--font-eyebrow);font-weight:900;
  font-size:14px;letter-spacing:-.02em;line-height:1;
  color:var(--ink);
}
.ransom{
  margin:19px 0 0;
  font-weight:400;line-height:1;color:var(--ink);
  font-size:clamp(2rem,12.2vw,3.3rem);   /* sized for 10 letters on a 390 column */
  white-space:nowrap;letter-spacing:-.035em;
  display:flex;justify-content:center;align-items:baseline;gap:0;
}
/* Hero word supplied as real artwork. Height comes from the image's own
   6.257:1 ratio — never stretched. Sized to the content box; the padding in the
   source file is trimmed off, so this is ink edge to ink edge. */
.ransom-img{
  width:100%;margin:19px 0 0;line-height:0;
}
.ransom-img img{width:100%;height:auto;display:block}

/* ---- CSS ransom lettering: retained as a fallback ----
   Unused while the hero word is artwork. To revert, swap the <picture> back for
   the ten <span> letters and these rules take over again. */
.ransom span{display:inline-block}
.ransom span:nth-child(1){font-family:"Chokokutai",system-ui;font-size:1em}
.ransom span:nth-child(2){font-family:"Pirata One",serif;font-size:.95em}
.ransom span:nth-child(3){font-family:"Sevillana",cursive;font-size:1.04em;transform:translateY(.03em)}
.ransom span:nth-child(4){font-family:"Grenze Gotisch","Jacquard 24",serif;font-weight:700;font-size:1em}
.ransom span:nth-child(5){font-family:"Jacquard 24",system-ui;font-size:1.1em;transform:translateY(-.02em)}
.ransom span:nth-child(6){font-family:"Jim Nightshade",cursive;font-size:1.08em}
.ransom span:nth-child(7){font-family:"Jacques Francois Shadow",serif;font-size:.86em;transform:translateY(-.02em)}
.ransom span:nth-child(8){font-family:"Lovers Quarrel",cursive;font-size:1.3em;transform:translateY(.04em)}
.ransom span:nth-child(9){font-family:"Rosaline","Lovers Quarrel",cursive;font-size:1em;transform:translateY(.03em)}
.ransom span:nth-child(10){font-family:"Pirata One",serif;font-size:.97em}

/* tag row — small, wide-tracked, ✦ set BETWEEN items rather than around them */
.tags{
  list-style:none;
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  margin-top:24px;
  font-size:12.5px;font-weight:500;line-height:1.6;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-kw);
}
.tags li+li::before{
  content:"✦";
  margin:0 .62em 0 .5em;
  color:var(--purple);font-size:.9em;letter-spacing:0;
}

/* The hero's second voice: a statement, not a caption. Second-largest type on
   the page, and deliberately far above body size so the hierarchy reads
   eyebrow → word → tags → statement. */
.hero-line{
  max-width:15ch;margin:38px auto 0;
  font-size:clamp(25px,7.2vw,30px);line-height:1.16;
  font-weight:700;letter-spacing:-.03em;
  color:var(--ink);text-wrap:balance;
}

/* ---------- draggable stickers ---------- */
.sticker{
  position:absolute;z-index:5;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
  animation:float 6s ease-in-out infinite;
}
.sticker:active{cursor:grabbing}
.sticker.moved{animation:none}
.sticker.dragging{animation:none;filter:drop-shadow(0 14px 22px rgba(0,0,0,.28));z-index:20}
@keyframes float{50%{transform:translateY(-10px) rotate(3deg)}}

.s-gummy{width:48px;left:calc(50% + 30px);bottom:7px}    /* rides down with the tightened hero */
.s-bear2{width:46px;right:44px;bottom:58px;animation-delay:-2s}
.s-workdice{width:40px;left:66px;top:262px;animation-delay:-3.4s}
.s-dice{width:48px;left:12px;top:auto;bottom:22%;animation-delay:-1.4s}
.s-star{width:52px;right:12px;bottom:18px;animation-delay:-3s}
.s-smiley{width:72px;left:50%;margin-left:-36px;right:auto;top:auto;bottom:-32px;animation-delay:-2.5s}

/* ---------- work / browse ---------- */
/* The approach heading overhangs ~123px up out of the panel below, so the work
   section needs bottom room for it to land in — otherwise it sits on the last
   row of folder labels. */
.work{overflow:visible;padding-top:8px;padding-bottom:128px}
/* measured grid: cells 111x95, column gap 15px, row pitch ~135px, 2-1-2-1 */
.folders{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  /* row gap carries the 26px the artwork now protrudes above each folder,
     otherwise the next row's photos sit on the previous row's labels */
  gap:22px 15px;margin-top:17px;position:relative;z-index:2;
}
.folders li{width:111px}
.folders li:nth-child(3n){width:100%;display:flex;justify-content:center}
.folders a{
  text-decoration:none;color:var(--ink-kw);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:12px;font-weight:400;line-height:14.4px;
}
.folder{position:relative;width:111px;height:95px;overflow:visible}
.folder img{position:absolute;inset:0;width:100%;height:100%;z-index:2}
/* the artwork sits DOWN in the pocket — only its top edge clears the folder
   front, the way a photo tucked into a real folder reads */
/* sits higher and taller than before so a readable amount of the artwork clears
   the folder's front panel — at -9px only a ~25px sliver was visible */
.folder .thumb{
  position:absolute;left:11px;right:11px;top:-4px;height:62px;border-radius:2px;z-index:1;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  background:linear-gradient(135deg,#ddd,#aaa);
  transform:rotate(-3deg);
}
/* Second sheet peeking out behind the front photo. It lives on .folder rather
   than as .thumb::after because .thumb sets z-index (making it a stacking
   context), and inside one a negative-z-index pseudo paints ABOVE the parent's
   background — so as ::after it covered the very photo it should sit behind. */
.folder::before{
  content:"";position:absolute;left:16px;right:6px;top:-8px;height:58px;
  border-radius:2px;z-index:0;
  background:#e2e1da center center/cover;
  transform:rotate(5deg);
  box-shadow:0 2px 5px rgba(0,0,0,.16);
}
/* lined-paper stack bleeding off the right edge — matches the reference's mass */
.grid-scrap{
  position:absolute;right:-58px;top:150px;width:150px;z-index:1;
  opacity:.75;transform:rotate(6deg);pointer-events:none;
}
/* Real work peeking out of each pocket — one piece per category, so the grid
   previews what's inside rather than showing six identical coloured cards. */
.folder .thumb{background-size:cover;background-position:center center}
.folder .thumb.t1{background-image:url("../assets/image/kesarii-site.webp")}          /* web & digital */
.folder .thumb.t2{background-image:url("../assets/image/post02forthesky.jpeg")}       /* graphic & visual */
.folder .thumb.t3{background-image:url("../assets/video/ai-fashion-video-poster.webp")} /* ai & video */
.folder .thumb.t4{background-image:url("../assets/image/howitmakessense.jpeg")}       /* marketing & seo */
.folder .thumb.t5{background-image:url("../assets/image/backpack.webp")}              /* strategy & ideas */
.folder .thumb.t6{background-image:url("../assets/image/ai-agents.webp")}             /* experiments */

/* second sheet in each pocket — a different piece from the same folder */
.folders li:nth-child(1) .folder::before{background-image:url("../assets/image/duplicate-finder.webp")}
.folders li:nth-child(2) .folder::before{background-image:url("../assets/video/ai-skincare-campaign-poster.webp")}
.folders li:nth-child(3) .folder::before{background-image:url("../assets/image/seepastthenoise.jpeg")}
.folders li:nth-child(4) .folder::before{background-image:url("../assets/image/newsminusthenoise.jpeg")}
.folders li:nth-child(5) .folder::before{background-image:url("../assets/image/mug.webp")}
.folders li:nth-child(6) .folder::before{background-image:url("../assets/image/nyks-tribal-youth.png")}

/* ---------- approach ---------- */
/* measured: panel is flat #E7E7E7, 444px tall, hatch barely perceptible.
   Heading is pulled out of flow and straddles the top edge (see .approach .brush),
   so the 75px inset is what puts the first item 75px down like the reference. */
.approach{
  text-align:center;position:relative;
  padding:75px var(--pad);
  background-color:#E7E7E7;
  /* graph-paper ruling under the existing 45° hatch — the panel reads as a page
     torn from a notebook rather than a flat grey band. Kept very low contrast
     so it's texture, not pattern. */
  background-image:
    repeating-linear-gradient(45deg,rgba(0,0,0,.022) 0 1.5px,transparent 1.5px 15px),
    repeating-linear-gradient(0deg,rgba(10,10,10,.030) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(10,10,10,.030) 0 1px,transparent 1px 26px);
}

/* desk objects holding the page down */
.approach .clip{
  position:absolute;left:14px;top:-26px;width:40px;z-index:6;
  transform:rotate(-13deg);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.22));
  pointer-events:none;
}
.approach .tape{
  position:absolute;right:-18px;top:26px;width:112px;z-index:6;
  transform:rotate(24deg);
  pointer-events:none;
}
/* Painted heading straddling the panel's top edge — only ~16px sits inside, the
   rest overhangs into the section above. Width is a % of the section (its
   containing block) so the bleed stays proportional; height comes from the
   artwork's own 3:1 ratio, never stretched. */
.approach .painted{
  position:absolute;left:50%;top:0;
  width:108%;max-width:none;margin:0;
  transform:translate(-50%,-88%);
}

/* retained fallback: the CSS-lettered version of this heading */
.approach .brush{
  position:absolute;left:50%;top:0;
  transform:translate(-50%,-84%) rotate(-2.5deg) scaleY(1.24);
  margin:0;width:max-content;max-width:none;
  font-size:23.8vw;
}
.approach::before,.approach::after{
  content:"";position:absolute;left:0;right:0;height:20px;background:#E4E1DA;
  -webkit-mask:url("../assets/graphics/torn-edge.svg") center/100% 100% no-repeat;
          mask:url("../assets/graphics/torn-edge.svg") center/100% 100% no-repeat;
}
.approach::before{top:-17px}
.approach::after{bottom:-17px;transform:scaleY(-1)}
/* item pitch measured at ~82px: 27.3 (name) + 2 + 19.5 (tagline) + 33 gap */
.steps{list-style:none;max-width:36ch;margin:0 auto}
.steps li{padding:0}
.steps li+li{margin-top:33px}
.steps h3{
  font-family:var(--font-body);font-weight:400;
  font-size:21px;line-height:27.3px;letter-spacing:-.21px;
  text-transform:none;color:#171717;
}
.steps li:nth-child(3) h3{font-weight:700}
.steps p{
  font-size:15px;line-height:19.5px;letter-spacing:-.15px;
  color:rgba(23,23,23,.6);margin-top:2px;
}

/* THINK → MAKE → SHIP reads as a spine, so the names are tracked capitals and
   carry equal weight — emphasising one stage would break the sequence. */
.spine h3,
.spine li:nth-child(3) h3{
  text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;font-size:19px;
}
.spine p{max-width:30ch;margin-inline:auto}

/* Hand-drawn arrow between stages. The spine is literally THINK → MAKE → SHIP,
   so this draws the arrow that's already in the model — it earns its place by
   showing the sequence, not by filling the gap. */
.spine li{position:relative}
.spine li+li{margin-top:64px}
.spine li:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-56px;
  width:26px;height:35px;margin-left:-13px;
  background:url("../assets/stickers/arrow-down.svg") center/contain no-repeat;
  opacity:.75;
}
.spine li:nth-child(even)::after{transform:scaleX(-1) rotate(4deg)}

/* ---------- belief statement ----------
   Bookend to the hero. The air ABOVE is load-bearing — it's what separates the
   statement from the section before and lets it land. Below it needs less: the
   CTA that follows is the resolution, not a new subject, so a smaller beat
   keeps them reading as a pair. */
.belief{
  padding:96px var(--pad) 60px;
  text-align:center;
}
.belief p{
  max-width:16ch;margin-inline:auto;
  font-size:clamp(26px,7.6vw,32px);line-height:1.22;
  font-weight:700;letter-spacing:-.03em;
  color:var(--ink);text-wrap:balance;
}
.belief p+p{margin-top:12px}

/* ---------- contact ---------- */
.cta-line{
  max-width:20ch;margin:0 auto 34px;text-align:center;
  font-size:clamp(19px,5.2vw,22px);line-height:1.28;
  font-weight:600;letter-spacing:-.02em;text-wrap:balance;
}
/* measured: card 360 wide at x=8, inner content 280 wide starting x=48 */
.contact{overflow:visible;padding:44px 8px 52px}
.card{
  background:var(--cyan);border-radius:18px;padding:40px 40px 96px;position:relative;
  box-shadow:0 22px 44px -26px rgba(0,0,0,.4);
}
.card form{display:flex;flex-direction:column}
.card label{
  display:flex;flex-direction:column;gap:12px;
  font-family:var(--font-mono);font-weight:700;font-size:17px;line-height:20.4px;
  text-transform:lowercase;color:#1A1E25;
  padding-bottom:36px;
}
.card label.msg{font-size:19px;line-height:22.8px;padding-bottom:20px}
.card input,.card textarea{
  font-family:var(--font-mono);font-size:14px;line-height:16.8px;color:#121212;
  background:transparent;border:0;border-bottom:1.5px solid rgba(0,0,0,.5);
  padding:0 0 6px;width:100%;
}
/* inputs sit inset 12px from BOTH edges of the card's content box, not just the left */
.card input{margin-left:12px;width:calc(100% - 24px)}
.card textarea{border:1.5px solid rgba(0,0,0,.5);height:175px;padding:12px;resize:vertical}
.card input::placeholder,.card textarea::placeholder{color:rgba(18,18,18,.55);font-style:italic}
.card input:focus,.card textarea:focus{outline:none;border-color:#121212}
.card button{
  background:#333;color:#fff;border:0;border-radius:7px;
  font-family:var(--font-body);font-weight:500;font-size:14px;
  height:40px;padding:0;margin-top:0;width:100%;
}
/* the stroke sits centred under the button, not tucked in the corner */
.card-brush{
  position:absolute;left:50%;transform:translateX(-50%) rotate(-1.5deg);
  bottom:38px;width:210px;opacity:.95;pointer-events:none;
}

/* ---------- footer ---------- */
/* measured: footer 533px tall; tagline 116px from top, legal block 401px from top */
.footer{
  background:#1C1C1C;color:#F2F0EA;
  padding:116px 22px 82px;position:relative;overflow:visible;margin-top:52px;
  font-family:var(--font-mono);
}
/* Top edge assembly, all INSIDE the footer box (the reference keeps the lip,
   tab and sticky notes within the footer, not overlapping the section above):
   notes poke up at y=2 → tan lip band at y=30 → serrated edge → dark body. */
.footer .folder-lip{
  position:absolute;left:0;right:0;top:30px;height:11px;background:#E8DCA9;z-index:3;
  transform:skewY(-1.4deg);transform-origin:left center;
}
.footer::before{                       /* serrated torn edge just under the lip */
  content:"";position:absolute;left:0;right:0;top:38px;height:16px;background:#1C1C1C;z-index:2;
  -webkit-mask:url("../assets/graphics/torn-edge.svg") center/100% 100% no-repeat;
          mask:url("../assets/graphics/torn-edge.svg") center/100% 100% no-repeat;
}
.footer .tab{
  position:absolute;left:0;top:30px;z-index:4;
  background:#1C1C1C;padding:.42rem 1.1rem;
  border-radius:0 9px 0 0;font-size:.8rem;
}
.footer .note{position:absolute;top:4px;width:22px;height:34px;border-radius:2px;z-index:1}
.footer .note-a{left:34px;background:var(--note-pink);transform:rotate(-9deg)}
.footer .note-b{left:58px;background:var(--note-green);transform:rotate(7deg)}
.footer .tagline{font-size:17px;line-height:20.4px;margin:0 0 31px}
.social-row{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.footer .socials{display:flex;gap:14px;align-items:center}
.footer .socials a{width:24px;height:24px;display:grid;place-items:center}
.footer .socials svg{width:22px;height:22px;fill:currentColor}
/* handwritten note rides up and to the right of the icons, as in the reference */
/* handwritten note beside the social icons — text only, no arrow */
.footer .take{
  display:inline-block;
  font-family:var(--font-hand);font-size:1.15rem;color:#4FD8E8;
  text-transform:uppercase;letter-spacing:.02em;
  transform:rotate(-9deg) translateY(-10px);
  line-height:1.05;max-width:86px;
}
.footer .line{font-size:13px;line-height:21px}
.footer .line a{text-decoration:underline}
.footer .blob{position:absolute;right:0;bottom:150px;width:76px;opacity:.85}
.footer .legal{opacity:.7;font-size:14px;margin-top:103px;text-align:center;line-height:16.8px}

/* ---------- scroll reveal ----------
   Uses the independent `translate` property, NOT `transform`. Several revealed
   elements (.brush headings) carry their own design rotation on `transform`;
   animating transform here would silently overwrite it. These compose. */
.reveal{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;translate:none}
/* ---------- scroll-linked word fill ----------
   main.js sets --lit (0→1) per word from the block's scroll progress, so the
   copy fills from faded to solid as it travels up the viewport. Driving opacity
   (rather than colour) keeps it compositor-only — no repaint per frame — and
   so both hero paragraphs fill identically and settle on the same ink. */
.words span{
  display:inline-block;
  opacity:calc(.16 + var(--lit,0) * .84);

  /* marker-pen sweep, revealed on hover */
  background-image:linear-gradient(rgba(114,57,250,.22),rgba(114,57,250,.22));
  background-repeat:no-repeat;
  background-position:0 62%;
  background-size:0% .78em;
  border-radius:2px;
  transition:background-size .32s cubic-bezier(.2,.7,.2,1);
}

/* pointer devices only — :hover on touch sticks after a tap */
@media (hover:hover) and (pointer:fine){
  .words span:hover{
    background-size:100% .78em;
    opacity:1;
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal,.words span{transition:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}