/* =========================================================
   Taylor Hawkins — v4 "scrapbook cards" theme
   soft gradient desk · white rounded cards · huge maroon type ·
   crisp un-rotated collage tiles you can bring to the front
   ========================================================= */
:root{
  --maroon:#111111;
  --ink:#141414;
  --muted:#9a8f8c;
  --display:"Bowlby One","Arial Black",sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --hand:"Gaegu","Comic Sans MS",cursive;
  --gap:clamp(18px,3vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.v4{margin:0;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:#cfdbe6;
  background-image:
    radial-gradient(42% 30% at 0% 32%,rgba(236,104,78,.75),transparent 70%),
    radial-gradient(38% 32% at 100% 56%,rgba(240,142,104,.7),transparent 70%),
    radial-gradient(30% 22% at 12% 78%,rgba(232,120,96,.45),transparent 70%),
    linear-gradient(180deg,#d9e3ec,#c9d7e3 50%,#d6e0ea);
  background-attachment:fixed;padding:clamp(14px,3vw,48px) clamp(10px,2.4vw,40px)}
.v4 a{color:inherit}
.v4 img,.v4 video{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- cards ---------- */
.card{position:relative;max-width:1240px;margin:0 auto var(--gap);background:#fff;border:1.5px solid var(--maroon);border-radius:22px;
  box-shadow:0 1px 2px rgba(58,19,16,.12),0 18px 44px rgba(58,19,16,.14);container-type:inline-size}
.card.clip{overflow:hidden}
.pad{padding:clamp(18px,3cqw,40px)}

/* ---------- nav (inside the first card) ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,2.4cqw,30px) 0}
.nav .mark{width:44px;display:block;transition:transform .35s cubic-bezier(.2,.9,.3,1.6)}
.nav .mark:hover{transform:rotate(-12deg) scale(1.1)}
.nav .mark img{width:100%;height:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(12px,2cqw,28px);font-size:12.5px}
.nav a{text-decoration:none}
.nav a[aria-current],.nav a:hover{text-decoration:underline;text-underline-offset:3px}
.sub{display:flex;justify-content:space-between;gap:16px;padding:14px clamp(16px,2.4cqw,30px) 0;font-size:11.5px;color:var(--muted)}

/* ---------- giant type ---------- */
.giant{font-family:var(--display);font-weight:400;color:var(--maroon);text-transform:uppercase;line-height:.8;letter-spacing:-.015em;margin:0;
  padding:0 clamp(10px,1.6cqw,20px);white-space:nowrap;text-align:center}
.giant.hero{font-size:19.4cqw;margin-top:2cqw}
.giant.page{font-size:var(--gs,14cqw);margin-top:2cqw}

/* ---------- collage board (all units in cqw, so nothing overflows the card) ---------- */
.bwrap{container-type:inline-size;position:relative}
.board{position:relative;width:100%;height:var(--bh)}
.hero-board{margin-top:-7.5cqw}
.tile{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z,2);padding:0;border:0;background:none;cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4),filter .3s;text-decoration:none;color:inherit;font:inherit;display:block}
.tile>img,.tile>video{width:100%;height:auto;display:block;box-shadow:0 1px 2px rgba(0,0,0,.18),0 10px 22px rgba(0,0,0,.14)}
.tile.cut>img{box-shadow:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18)) drop-shadow(0 12px 14px rgba(0,0,0,.16))}
.tile:hover,.tile:focus-visible{transform:translateY(-.5cqw);outline:none}
.tile:focus-visible>*{outline:2px solid var(--maroon);outline-offset:3px}
.tile.front{transform:translateY(-.6cqw) scale(1.02)}
.tile .tag{position:absolute;left:0;bottom:-2.1cqw;font-size:max(10px,.95cqw);white-space:nowrap;opacity:0;transition:opacity .25s;color:var(--maroon)}
.tile:hover .tag,.tile.front .tag{opacity:1}
.hint{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:11.5px;color:var(--muted);padding:0 clamp(16px,2.4cqw,30px)}
.hint b{font-family:var(--hand);font-weight:700;font-size:1.25rem;color:var(--maroon)}
/* hand-written note + arrow */
.note{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:20;font-family:var(--hand);font-weight:700;color:var(--ink);font-size:max(15px,1.9cqw);line-height:1.02;text-transform:uppercase;pointer-events:none}
.note svg{width:9cqw;height:auto;display:block;margin-bottom:.4cqw;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.paper{background:#f4ecd6;padding:1.6cqw 1.8cqw 2cqw;box-shadow:0 1px 2px rgba(0,0,0,.16),0 10px 20px rgba(0,0,0,.12)}
.paper p{margin:0;font-family:var(--hand);font-weight:700;font-size:max(14px,1.7cqw);line-height:1.05;color:var(--maroon)}
.paper small{display:block;margin-top:.8cqw;font-family:var(--body);font-size:max(10px,.9cqw);color:#7d6a64;text-transform:uppercase;letter-spacing:.06em}
.lab{display:block;margin-top:.6cqw;font-size:max(10px,.95cqw);color:var(--maroon);text-align:center}
.lab b{font-weight:700}

/* phone frame (only true vertical reels) */
.phone{position:relative;margin:0;aspect-ratio:9/19;padding:2.7%;border-radius:17%/8%;background:linear-gradient(135deg,#6b6c71 0%,#1c1c1e 22%,#0a0a0b 55%,#3b3c40 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28),inset 0 0 0 4px #0a0a0b,0 2px 3px rgba(0,0,0,.28),0 16px 26px rgba(0,0,0,.2)}
.phone .screen{position:relative;width:100%;height:100%;border-radius:14.5%/6.9%;overflow:hidden;background:#000;display:flex;flex-direction:column;padding-top:10.6%;isolation:isolate}
.phone .screen::before{content:"";position:absolute;inset:-14%;background:var(--poster) center/cover no-repeat;filter:blur(26px) saturate(1.15);transform:scale(1.1);z-index:0}
.phone video,.phone .screen img{position:relative;z-index:1;display:block;width:100%;flex:1;min-height:0;object-fit:contain}
.phone .isl{position:absolute;z-index:4;top:2.7%;left:50%;width:28%;height:3.4%;transform:translateX(-50%);border-radius:99px;background:#000;pointer-events:none}
.phone .vb{position:absolute;width:1.3%;border-radius:2px;background:linear-gradient(90deg,#2b2b2e,#4a4b4f)}
.phone .v1{left:-.9%;top:15%;height:3.4%}.phone .v2{left:-.9%;top:20.5%;height:6.4%}.phone .pw{right:-.9%;top:23%;height:9.5%}

/* ---------- project intro (brand pages) ---------- */
.intro{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,5cqw,70px);padding:clamp(26px,5cqw,64px) clamp(20px,4.5cqw,60px) clamp(26px,4cqw,50px)}
.intro .eyebrow{font-size:11px;letter-spacing:.06em;color:var(--muted);margin:0 0 6px}
.intro h1{font-family:var(--body);font-weight:700;font-size:clamp(1.4rem,2.3cqw,1.9rem);line-height:1.15;margin:0;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.intro .client{font-size:12.5px;margin:6px 0 0}
.intro .copy p{margin:0 0 .9em;font-size:13.5px;line-height:1.6;max-width:56ch}
.intro .copy .svc{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.strip{display:flex;gap:6px;height:clamp(200px,30cqw,380px);overflow-x:auto;scrollbar-width:thin;border-radius:0 0 20px 20px}
.strip>*{height:100%;width:auto;flex:none;object-fit:contain;background:#f3eeee}
.strip video{background:#000}

/* ---------- portfolio list ---------- */
.rows{padding:0 clamp(16px,2.4cqw,30px) clamp(16px,2.4cqw,30px)}
.row{display:grid;grid-template-columns:minmax(180px,1fr) 2.6fr;gap:clamp(14px,3cqw,40px);padding:clamp(16px,2.4cqw,28px) 0;border-top:1px solid rgba(58,19,16,.18);text-decoration:none;align-items:center}
.row:first-child{border-top:0}
.row h3{margin:0;font-family:var(--body);font-weight:700;font-size:clamp(1.15rem,1.8cqw,1.5rem);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.row p{margin:6px 0 0;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.row .strip{border-radius:10px;height:clamp(120px,15cqw,200px);overflow-x:auto}
.row .strip>*{transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
.row:hover .strip>*{transform:translateY(-4px)}
.row:hover h3{color:#c2452d}

/* ---------- archive ---------- */
.archive .gallery{margin:0 0 clamp(26px,4cqw,46px)}
.archive h2{font-family:var(--body);font-weight:700;font-size:15px;margin:0 0 14px;display:flex;justify-content:space-between;border-bottom:1px solid rgba(58,19,16,.18);padding-bottom:10px}
.archive h2 span:last-child{font-weight:400;color:var(--muted);font-size:12px}
.archive .reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,40vw),1fr));gap:clamp(14px,2cqw,26px)}
.archive .vcards{display:flex;flex-wrap:wrap;gap:clamp(14px,2cqw,26px);margin-top:20px;align-items:flex-start}
.archive .vcard{margin:0;width:min(240px,44vw)}
.archive .vcard.wide{width:min(520px,100%)}
.archive .vcard video{width:100%;height:auto;border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.14);background:#000;cursor:pointer}
.archive .masonry{columns:4 200px;column-gap:clamp(12px,1.6cqw,20px)}
.archive .masonry img{width:100%;height:auto;margin:0 0 clamp(12px,1.6cqw,20px);break-inside:avoid;box-shadow:0 1px 2px rgba(0,0,0,.14),0 8px 18px rgba(0,0,0,.1)}
.archive video{cursor:pointer}

/* ---------- about ---------- */
.about-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5cqw,70px)}
.about-text h2{font-family:var(--body);font-weight:700;font-size:clamp(1.3rem,2.2cqw,1.8rem);margin:0 0 10px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.about-text p{margin:0 0 .9em;font-size:14px;line-height:1.65;max-width:58ch}
.about-text mark{background:linear-gradient(transparent 58%,rgba(236,104,78,.38) 58%);color:inherit;font-weight:600}
.faves{list-style:none;margin:0;padding:0;border-top:1px solid rgba(58,19,16,.18)}
.faves li{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid rgba(58,19,16,.18);font-size:13.5px}
.faves li span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.faves a{text-underline-offset:3px}
.roles{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.roles li{border:1.5px solid var(--maroon);border-radius:99px;padding:3px 12px;font-size:12px;color:var(--maroon)}

/* ---------- prev / next + footer ---------- */
.pn{display:flex;justify-content:space-between;gap:16px}
.pn a{text-decoration:none;font-weight:700;font-size:clamp(1rem,1.6cqw,1.3rem)}
.pn a small{display:block;font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.pn a:hover{text-decoration:underline;text-underline-offset:4px}
.pn a:last-child{text-align:right}
.foot{text-align:center;padding:clamp(20px,4vw,50px) 0 10px;max-width:1240px;margin:0 auto}
.foot .word{font-family:var(--display);font-size:clamp(3rem,9vw,7rem);color:var(--maroon);line-height:.8;text-transform:uppercase;letter-spacing:-.01em;display:block;text-decoration:none}
.foot p{margin:14px 0 0;font-size:12px;color:#5a4744}
.foot p a{text-underline-offset:3px}

/* entrance */
.js .tile,.js .note{opacity:0;translate:0 2cqw;transition:opacity .6s,translate .7s cubic-bezier(.2,.9,.3,1.3),transform .35s cubic-bezier(.2,.9,.3,1.4)}
.js .in .tile,.js .in .note{opacity:1;translate:0 0}

/* ---------- small screens: the collage becomes a tidy two-column stack ---------- */
@media (max-width:760px){
  body.v4{font-size:14px}
  .nav ul{gap:12px;font-size:12px}
  .sub{flex-direction:column;gap:2px}
  .hero-board{margin-top:-6cqw}
  .board{height:auto!important;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 14px 18px;align-items:start}
  .tile,.note{position:relative;left:auto!important;top:auto!important;width:auto!important}
  .tile .tag{position:static;opacity:1;display:block;margin-top:4px;font-size:11px}
  .note{grid-column:1/-1;font-size:18px}
  .note svg{display:none}
  .intro,.about-text{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .pn{flex-direction:column}.pn a:last-child{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .tile,.js .note{opacity:1;translate:none;transition:none}
}

/* ---------- about: "…speaking" columns (second reference) ---------- */
.speak{display:grid;grid-template-columns:1fr .8fr 1.2fr;gap:clamp(18px,4cqw,56px);padding-top:clamp(20px,3cqw,40px)}
.speak h2,.lbl2{font-family:var(--body);font-weight:600;font-size:12.5px;color:#b4aaa7;margin:0 0 16px}
.speak p{margin:0 0 1em;font-size:13.5px;line-height:1.55}
.speak b{font-weight:700}
.nums{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:13.5px}
.nums b{font-weight:700}
.favs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2.4cqw,30px)}
.fv .dot{display:grid;place-items:center;width:clamp(64px,7cqw,90px);aspect-ratio:1;border-radius:50%;background:#f4ecd6;overflow:hidden;margin-bottom:12px;border:1.5px solid rgba(58,19,16,.15)}
.fv .dot img{width:78%;height:78%;object-fit:contain}
.fv p{margin:0}
.fv .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#b4aaa7}
.fv .t{font-weight:700;font-size:14px;margin:4px 0 2px}
.fv .s{font-size:12.5px;color:#5a4744}
.fv a{text-underline-offset:3px}
.cfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11.5px;border-top:1px solid rgba(58,19,16,.12);margin-top:clamp(10px,2cqw,24px)}
.soc{display:flex;gap:10px}
.soc a{width:34px;height:34px;border-radius:50%;background:#111;display:grid;place-items:center;transition:transform .25s}
.soc a:hover{transform:translateY(-2px)}
.soc svg{width:17px;height:17px;fill:#fff}
@media (max-width:760px){.speak{grid-template-columns:1fr}.favs{grid-template-columns:1fr 1fr}}

/* ======== full-bleed white (no cards, no borders) ======== */
body.v4{background:#fff;background-image:none;padding:0}
.card{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:#fff}
.card+.card{border-top:1px solid rgba(58,19,16,.12)}
.card.clip{overflow:visible}
.strip{border-radius:0}
.nav{padding:20px clamp(18px,3vw,44px) 0}
.sub,.hint{padding-left:clamp(18px,3vw,44px);padding-right:clamp(18px,3vw,44px)}
.rows{padding-left:clamp(18px,3vw,44px);padding-right:clamp(18px,3vw,44px)}
.foot{max-width:none;padding:clamp(30px,5vw,70px) clamp(18px,3vw,44px) 26px;border-top:1px solid rgba(58,19,16,.12)}
.fbrands{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;font-size:12.5px;margin-bottom:18px;color:#5a4744}
.fbrands a{text-underline-offset:3px}
/* portfolio dropdown */
.dd details{position:relative}
.dd summary{list-style:none;cursor:pointer}
.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:" \25BE";font-size:.8em}
.dd summary[aria-current],.dd summary:hover{text-decoration:underline;text-underline-offset:3px}
.dd details>ul{position:absolute;right:0;top:calc(100% + 10px);z-index:200;background:#fff;border:1px solid rgba(58,19,16,.18);border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.12);padding:8px;display:grid;gap:2px;min-width:220px;list-style:none}
.dd details>ul a{display:block;padding:7px 10px;border-radius:8px;white-space:nowrap}
.dd details>ul a:hover{background:#f6efe9;text-decoration:none}
/* about extras */
.tile.polar>img{background:#fff;padding:5% 5% 16%;box-shadow:0 1px 2px rgba(0,0,0,.2),0 12px 24px rgba(0,0,0,.16)}
.scrib{font-size:max(22px,3.4cqw)!important;text-transform:none!important;color:var(--maroon)!important;transform:rotate(-6deg)}
.ring{width:100%!important;height:auto;animation:spin 24s linear infinite;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}
@keyframes spin{to{transform:rotate(360deg)}}
.socially{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3.4cqw,46px)}
.sp{text-decoration:none;color:inherit;display:block}
.sp .dot.logo{width:clamp(70px,7.5cqw,96px);background:#fff;margin-bottom:14px}
.sp .dot.logo img{width:74%;height:74%;object-fit:contain}
.sp p{margin:0 0 10px;font-size:13px;line-height:1.55}
.sp b{font-size:13px}
.sp:hover b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.socially{grid-template-columns:1fr}.dd details>ul{right:-40px}}
@media (prefers-reduced-motion:reduce){.ring{animation:none}}
.sp .dot{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1.5px solid rgba(58,19,16,.15);width:clamp(70px,7cqw,92px);background:#fff;margin-bottom:14px}
.sp .dot img{width:72%;height:72%;object-fit:contain}
/* the giant lettering must never sit on top of the nav */
.nav{position:relative;z-index:300}
.giant{position:relative;z-index:1;pointer-events:none}

/* ======== softer + crisper ======== */
.tile>img,.tile>video{border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 26px rgba(0,0,0,.10)}
.tile.cut>img{border-radius:0;box-shadow:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.10)) drop-shadow(0 10px 14px rgba(0,0,0,.10))}
.tile.polar>img{border-radius:6px}
.tile:hover,.tile:focus-visible,.tile.front{transform:none}
.tile:hover>img,.tile:hover>video,.tile.front>img,.tile.front>video{box-shadow:0 2px 4px rgba(0,0,0,.10),0 18px 34px rgba(0,0,0,.14)}
.tile.cut:hover>img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.12)) drop-shadow(0 16px 20px rgba(0,0,0,.14))}
.tile{cursor:grab;touch-action:pan-y}
.tile.dragging{cursor:grabbing}
.tile .phone{border-radius:17%/8%}
.strip{gap:10px;padding:0 clamp(18px,3vw,44px) 4px;height:clamp(200px,28cqw,360px)}
.strip>*{border-radius:12px;background:#f6f2f0}
.row .strip{padding:0}
.archive .masonry img,.archive .vcard video{border-radius:12px}
.paper{border-radius:6px}
.note .ring{border-radius:50%}
/* home: stickers around the name */
.home-board .giant.hero{position:absolute;left:0;right:0;top:50%;transform:translateY(-55%);margin:0}
.stk>img{transform:rotate(var(--r,0deg))}
.hero-card .hint{padding-bottom:22px}
.hero-card .hint a{text-underline-offset:3px}
/* poke-me intro */
.poke{display:none}
.js .intro .poke{display:grid;position:fixed;inset:0;z-index:900;place-content:center;justify-items:center;gap:14px;background:#fff}
.poke button{background:none;border:0;padding:0;cursor:pointer;width:clamp(140px,16vw,210px);animation:pokebob 1.8s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(0,0,0,.14))}
.poke button img{width:100%;height:auto;display:block}
.poke button:hover{animation-duration:.5s}
@keyframes pokebob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.poke p{margin:0;font-family:var(--display);font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:.04em;text-transform:uppercase;color:var(--maroon)}
.poke-bar{width:120px;height:4px;border-radius:9px;background:rgba(58,19,16,.12);overflow:hidden}
.poke-bar i{display:block;height:100%;width:0;background:var(--maroon);border-radius:9px;animation:pokeload 2.6s linear forwards}
@keyframes pokeload{to{width:100%}}
.js .intro .hero-card .giant,.js .intro .hero-card .nav,.js .intro .hero-card .sub,.js .intro .hero-card .hint{opacity:0}
@media (max-width:760px){
  .home-board{display:block!important;height:var(--bh)!important;padding:0}
  .home-board .tile{position:absolute!important;left:var(--x)!important;top:var(--y)!important;width:var(--w)!important}
  .home-board .giant.hero{font-size:19.4cqw}
}
@media (prefers-reduced-motion:reduce){.poke button,.poke-bar i{animation:none}}

/* home: big name on top, stickers clustered over its bottom half */
.home-board .giant.hero{top:0;transform:none}
/* free-form cut-outs: no rectangles on hover/focus, the shadow follows the shape */
.tile.cut>img,.tile.cut:hover>img,.tile.cut.front>img,.tile.cut:focus-visible>img{box-shadow:none!important;border-radius:0!important;background:none}
.tile.cut:hover>img,.tile.cut.front>img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.12)) drop-shadow(0 16px 20px rgba(0,0,0,.14))}
.tile:focus-visible>*{outline:none}
.tile.cut:focus-visible>img{filter:drop-shadow(0 0 2px #111111) drop-shadow(0 10px 14px rgba(0,0,0,.14))}
.tile{-webkit-tap-highlight-color:transparent}
.hero-card .bwrap{margin-top:2cqw}

/* typing intro: letters flicker through fonts, then lock into TAYLOR */
#typeName span{display:inline-block;text-align:center}
#typeName span.cyc{color:#c6f24a}
#typeName span.lock{animation:lockin .35s cubic-bezier(.2,.9,.3,1.6)}
@keyframes lockin{0%{transform:scale(1.18)}100%{transform:scale(1)}}
.js .loading #typeName span{visibility:hidden}
.js .loading #typeName span.on{visibility:visible}
.js .loading .home-board .tile{opacity:0}
.js .loading .hero-card .nav,.js .loading .hero-card .sub,.js .loading .hero-card .hint{opacity:0}

/* home: centre the name + sticker cluster in the first screen */
.hero-card .bwrap{margin-top:max(2vw,calc((100svh - 150px - var(--bhv)) / 2))}

.nav{justify-content:flex-end}

/* brand archive: one mixed masonry of videos + posts */
.mixhead{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);border-bottom:1px solid rgba(58,19,16,.14);padding-bottom:10px;margin-bottom:clamp(16px,2.4cqw,28px)}
.mixhead span:first-child{font-weight:700;color:var(--ink);font-size:14px}
.mix{columns:4 220px;column-gap:clamp(14px,1.8cqw,24px);margin-bottom:clamp(30px,4cqw,56px)}
.mix .mi{margin:0 0 clamp(14px,1.8cqw,24px);break-inside:avoid}
.mix .mi img,.mix .mi .vc{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 24px rgba(0,0,0,.10);background:#f6f2f0}
.mix .mi .vc{background:#000;cursor:pointer}
.mix .mi .phone{width:86%;margin:0 auto}
@media (max-width:760px){.mix{columns:2 140px}}
.hero-card .bwrap{margin-top:max(5vh,calc((100svh - 40px - var(--bhv)) / 2))}

/* home collage: posts as white-bordered die-cut cards, plus a live phone */
.home-board .tile.card>img{border:.45cqw solid #fff;border-radius:.9cqw;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,.10),0 10px 22px rgba(0,0,0,.14)}
.home-board .tile.ph .phone{width:100%;transform:rotate(var(--r,0deg))}
.home-board .tile.ph{cursor:grab}

/* home collage: softer, rounder, calmer */
.home-board .tile.rnd>img{border-radius:1.3cqw}
.home-board .tile.card>img{border-radius:1.1cqw;border-width:.4cqw}
.home-board .tile.cut>img{filter:drop-shadow(0 1px 1px rgba(40,20,15,.10)) drop-shadow(0 8px 14px rgba(40,20,15,.10))}
.home-board .tile.card>img{box-shadow:0 1px 2px rgba(40,20,15,.08),0 8px 18px rgba(40,20,15,.10)}
.home-board .tile.cut:hover>img{filter:drop-shadow(0 2px 2px rgba(40,20,15,.12)) drop-shadow(0 14px 22px rgba(40,20,15,.14))}
.home-board .tile.ph .phone{border-radius:17%/8%}

/* about: single summary paragraph */
.aboutp{max-width:68ch;margin:0 auto}
.aboutp p{font-size:clamp(17px,1.45vw,21px);line-height:1.6;margin:0}
@media (max-width:760px){
  [data-page=about] .board .tile.cut{justify-self:center}
  [data-page=about] .board .tile.cut>img{width:auto!important;max-width:100%;max-height:150px;margin:0 auto}
}
/* about paragraph spans the same width as the ABOUT ME title */
.aboutp{max-width:none;width:75.8cqw;margin:0 auto;padding-left:0;padding-right:0;box-sizing:border-box}
.aboutp p{font-size:clamp(18px,1.75cqw,34px);line-height:1.55;text-wrap:pretty}
@media (max-width:760px){.aboutp{width:auto;padding-left:18px;padding-right:18px}}
/* client blurbs: larger, easier to read */
.sp .dot.logo{width:clamp(88px,9cqw,132px);margin-bottom:18px}
.sp p{font-size:clamp(16px,1.3cqw,21px);line-height:1.55;margin:0 0 14px}
.sp b{font-size:clamp(16px,1.3cqw,21px)}
.lbl2{font-size:clamp(14px,1.1cqw,17px)}
.socially{row-gap:clamp(36px,4.5cqw,64px)}
/* Remi Wolf: pink vinyl slides out of the Mud sleeve */
.vrec{position:absolute;aspect-ratio:1;pointer-events:none}
.vrec .front{position:relative;z-index:2;width:100%;height:auto;display:block;border-radius:.4cqw;box-shadow:0 1px 2px rgba(40,20,15,.1),0 8px 18px rgba(40,20,15,.16)}
.vrec .vin{position:absolute;left:4%;top:4%;width:92%;aspect-ratio:1;z-index:1;animation:vslide4 9s cubic-bezier(.65,0,.3,1) infinite}
.vrec .vin svg{width:100%;height:100%;display:block;animation:spin 4s linear infinite;filter:drop-shadow(0 4px 8px rgba(40,20,15,.18))}
@keyframes vslide4{0%,10%{transform:translateX(0)}30%,68%{transform:translateX(58%)}88%,100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.vrec .vin{animation:none;transform:translateX(58%)}.vrec .vin svg{animation:none}}
@media (max-width:760px){.vrec{position:relative;width:62%!important;margin-right:30%}}
/* Ditto: hops and wiggles */
.dto{position:absolute;pointer-events:none}
.dto .dt-sq{transform-origin:50% 100%;animation:dittoJump 2.6s cubic-bezier(.3,0,.3,1) infinite;position:relative;z-index:1}
.dto .dt-sq img{width:100%;height:auto;display:block;animation:dittoWiggle 1.3s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 4px 8px rgba(40,20,15,.16))}
.dto .dsh{position:absolute;left:14%;right:14%;bottom:-4%;height:.9cqw;border-radius:50%;background:rgba(40,20,15,.22);filter:blur(4px);animation:dsh 2.6s cubic-bezier(.3,0,.3,1) infinite}
@keyframes dittoJump{0%,40%,100%{transform:translateY(0) scale(1.06,.9)}8%{transform:translateY(0) scale(.92,1.1)}20%{transform:translateY(-34%) scale(.94,1.08)}32%{transform:translateY(0) scale(1.1,.88)}36%{transform:translateY(0) scale(.97,1.03)}}
@keyframes dittoWiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes dsh{0%,40%,100%{transform:scaleX(1);opacity:.8}20%{transform:scaleX(.55);opacity:.35}}
@media (prefers-reduced-motion:reduce){.dto .dt-sq,.dto .dt-sq img,.dto .dsh{animation:none}}
@media (max-width:760px){.dto{position:relative;width:45%!important;margin:10px auto 0}}
/* about paragraph as a die-cut paper sticker */
.aboutp{padding-top:clamp(28px,3cqw,48px);padding-bottom:clamp(28px,3cqw,48px)}
.aboutp p{font-size:clamp(15px,1.3cqw,22px);line-height:1.6;background:#f4ecd6;color:var(--ink);
  padding:clamp(20px,2.6cqw,44px) clamp(22px,3.2cqw,54px);border:clamp(7px,.75cqw,12px) solid #fff;border-radius:clamp(14px,1.5cqw,24px);
  box-shadow:0 1px 2px rgba(40,20,15,.10),0 12px 28px rgba(40,20,15,.14);transform:rotate(-.8deg)}
@media (max-width:760px){.aboutp p{transform:none}}
/* About: the bio is a paper sticker inside the collage; tap brings it forward */
.tile.bio{text-align:left;cursor:pointer}
.bio .bio-in{display:block;font-family:var(--body);font-size:max(14px,1.12cqw);line-height:1.55;color:var(--ink);text-transform:none;font-weight:400;
  background:#f4ecd6;padding:1.8cqw 2.2cqw;border:.7cqw solid #fff;border-radius:1.4cqw;
  box-shadow:0 1px 2px rgba(40,20,15,.10),0 10px 24px rgba(40,20,15,.14);transform:rotate(-1deg);transition:box-shadow .3s}
.bio .bio-in b{font-weight:700}
.tile.bio:hover .bio-in,.tile.bio.front .bio-in{box-shadow:0 2px 4px rgba(40,20,15,.12),0 18px 34px rgba(40,20,15,.18)}
@media (max-width:760px){.tile.bio{grid-column:1/-1}.bio .bio-in{transform:none;padding:18px 20px;border-width:8px;border-radius:16px;font-size:16px}}
/* bio sticker: bubblegum pink so it pops */
.bio .bio-in{background:#ff8cc6;color:#111111;font-size:max(15px,1.3cqw);line-height:1.5;padding:2cqw 2.4cqw}
.bio .bio-in b{font-weight:800}
@media (max-width:760px){.bio .bio-in{font-size:17px;padding:20px 22px}}
/* bio sticker: electric lime instead of pink */
.bio .bio-in{background:#c6f24a}

/* loading only: HAWKINS types in under TAYLOR, then drops away */
#typeName .last{position:absolute;left:0;right:0;top:100%;margin-top:.12em;font-style:normal;font-size:.62em;display:flex;justify-content:center;pointer-events:none}
#typeName .last.gone{display:none}
html:not(.js) #typeName .last{display:none}
/* TAYLOR / HAWKINS: grainy ink + offset print shadow */
#typeName span{--ink-c:var(--maroon);background:url(/img/grain.png) 0 0/180px 180px,var(--ink-c);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;filter:drop-shadow(.022em .03em 0 #c6f24a) drop-shadow(0 .06em .07em rgba(40,20,15,.22))}
#typeName span.cyc{--ink-c:#c6f24a;filter:drop-shadow(.022em .03em 0 #111111) drop-shadow(0 .06em .07em rgba(40,20,15,.22))}
#typeName .last span{--ink-c:var(--maroon)}
#typeName .last span.cyc{--ink-c:#c6f24a}
/* lighter treatment: soft shadow only, no lime outline */
#typeName span,#typeName span.cyc{filter:drop-shadow(0 .035em .05em rgba(40,20,15,.16))}
/* give each letter's textured fill room so round glyphs (the O) aren't clipped */
#typeName span{padding:.06em .1em;margin:-.06em -.1em;box-sizing:border-box}
/* grain via mask (no background-clip): solid ink with faint light speckles */
#typeName span{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--ink-c);
  -webkit-mask-image:url(/img/grain-mask.png);mask-image:url(/img/grain-mask.png);-webkit-mask-size:200px 200px;mask-size:200px 200px}
/* home: hand-drawn arrow from TAYLOR to the nickname */
.home-board .tay-arrow{--x:91.2cqw;--y:12.5cqw;--w:5cqw;z-index:9}
.home-board .tay-arrow svg{width:100%;stroke-width:3.2;margin:0}
.home-board .tay-nick{--x:82.5cqw;--y:28.6cqw;--w:13cqw;margin:0;z-index:9;font-size:max(13px,1.75cqw);line-height:1.05;transform:rotate(-4deg)}
@media (max-width:760px){.home-board .tay-arrow svg{display:block}}
.js .loading .home-board .note{opacity:0}
.home-board .tay-arrow{--x:91.5cqw;--y:12cqw;--w:5cqw}
.home-board .tay-nick{--x:85.5cqw;--y:29.3cqw;--w:12cqw}