:root{
  --bg:#11151f; --ink:#f6efe3; --ink-soft:rgba(246,239,227,.7); --line:rgba(246,239,227,.18);
  --accent:#ffb35c; --paper:#f4ecdc; --paper-ink:#1d1a16;
  --serif:"Bodoni Moda", "Didot", Georgia, serif; --mono:"JetBrains Mono", ui-monospace, monospace; --sans:"Hanken Grotesk", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--accent);color:var(--bg)}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.4s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

nav.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(18px,5vw,64px);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;mix-blend-mode:difference;color:#fff}
nav.top a{text-decoration:none;opacity:.85}
nav.top a:hover{opacity:1}
nav.top .mark{font-family:var(--serif);font-size:20px;letter-spacing:0;text-transform:none;font-style:italic}
nav.top .links{display:flex;gap:clamp(12px,3vw,34px);align-items:center}
.hello-pill{border:1px solid currentColor;padding:9px 16px;border-radius:99px}

.stamp{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:14px;align-items:center;margin-bottom:26px}
.stamp::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:.95}
h2{font-size:clamp(44px,7.6vw,120px)}
h2 em,h3 em{font-style:italic;color:var(--accent)}
p.body{font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:46ch;color:var(--ink-soft);margin-top:22px}

/* ---------- hero ---------- */
.hero{min-height:100vh;padding:20vh clamp(22px,8vw,140px) 12vh;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 90% at 80% 0%,#2a2f4a 0%,#11151f 60%)}
.hero h1{font-size:clamp(44px,11.5vw,210px);line-height:.84;letter-spacing:-.045em}
.hero h1 .row{display:block;white-space:nowrap}
.hero h1 .row:nth-child(2){padding-left:.5em;font-style:italic;color:var(--accent)}
.ch{display:inline-block;will-change:transform;transition:transform 1.6s cubic-bezier(.16,1,.3,1),opacity 1.2s}
.hero-foot{display:flex;gap:40px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-top:7vh}
.hero-foot p{font-size:clamp(19px,1.8vw,26px);line-height:1.45;max-width:34ch}
.hero-foot p b{font-weight:400;font-family:var(--serif);font-style:italic;font-size:1.1em}
.scrollhint{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:10px;align-items:center}
.scrollhint span{display:block;width:46px;height:1px;background:linear-gradient(90deg,var(--ink),transparent);animation:slide 2.2s ease-in-out infinite}
@keyframes slide{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* ---------- the walk ---------- */
#walk{position:relative}
.walk-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.walk-track{display:flex;height:100%;will-change:transform}
.panel{position:relative;flex:0 0 auto;width:max(100vw,1180px);height:100%;overflow-x:visible;overflow-y:clip;
  background:var(--p-bg);color:var(--p-ink);--ink-soft:var(--p-soft);transition:background .6s}
.panel.wide{width:max(150vw,1700px)}
.scene{position:absolute;left:min(620px,42vw);right:0;bottom:0;height:52%;pointer-events:none}
.scene svg{width:100%;height:100%;display:block}
.scene.art{height:64%;left:min(560px,38vw)}
.scene.art img{width:100%;height:100%;object-fit:contain;object-position:right bottom;display:block;opacity:0;transform:translateY(40px) scale(.97);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.panel.seen .scene.art img{opacity:1;transform:none}
.scene .draw{fill:none;stroke:var(--p-line);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000);transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1)}
.scene .fillin{opacity:0;transition:opacity 1.6s 1.2s}
.panel.seen .scene .draw{stroke-dashoffset:0}
.panel.seen .scene .fillin{opacity:1}
.panel-copy{position:absolute;top:0;left:0;height:100%;width:min(560px,44vw);padding:15vh 0 0 clamp(26px,6vw,110px);z-index:2}
.act{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--p-accent)}
.panel h2{font-size:clamp(46px,5.6vw,92px);margin-top:18px;color:var(--p-ink)}
.panel h2 em{color:var(--p-accent)}
.where{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--p-soft);margin-top:18px}
.panel .lede{font-size:clamp(18px,1.6vw,23px);line-height:1.45;margin-top:22px;max-width:34ch}
.lesson{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.5vw,22px);color:var(--p-accent);max-width:32ch}
.beats{position:absolute;z-index:6;top:calc(15vh + 70px);left:min(660px,46vw);right:auto;display:flex;gap:22px;flex-wrap:nowrap;align-items:flex-start}
.panel.wide .beats{left:min(660px,46vw)}
.beat{width:250px;flex-shrink:0;padding:20px 20px 18px;background:var(--paper);color:var(--paper-ink);border-radius:4px;cursor:pointer;text-align:left;border:0;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.6),0 1px 0 rgba(0,0,0,.05);transform:rotate(var(--rot,0deg)) translateY(30px);opacity:0;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s,box-shadow .3s;font-family:var(--sans)}
.panel.seen .beat{opacity:1;transform:rotate(var(--rot,0deg))}
.beat:hover{transform:rotate(0deg) translateY(-6px) scale(1.02);box-shadow:0 28px 60px -24px rgba(0,0,0,.7)}
.beat .vig{display:block;width:150px;height:150px;object-fit:contain;margin:-86px auto 2px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.28));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.beat:hover .vig{transform:translateY(-6px) scale(1.06)}
.clip-vig{display:block;width:220px;height:220px;object-fit:contain;margin:-40px auto 8px;filter:drop-shadow(0 16px 20px rgba(0,0,0,.25))}
.clip-vig[hidden]{display:none}
.beat .y{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#8b5a2b}
.beat h4{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.05;margin-top:8px}
.beat p{font-size:14px;line-height:1.45;margin-top:8px;color:#3b352d}
.beat .more{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8b5a2b}
.beat.ticket{background:linear-gradient(90deg,var(--paper) 0 76%,#e8dcc4 76%);
  -webkit-mask:radial-gradient(circle 9px at 76% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at 76% 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 9px at 76% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at 76% 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.beat.badge{border-radius:18px;background:#1d1a16;color:#f4ecdc}
.beat.badge p{color:rgba(244,236,220,.75)}
.beat.badge .y,.beat.badge .more{color:var(--p-accent)}
.walk-hud{position:absolute;left:clamp(26px,6vw,110px);right:clamp(26px,6vw,110px);bottom:26px;z-index:5;display:flex;align-items:center;gap:18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
.hud-bar{flex:1;height:1px;background:rgba(255,255,255,.3);position:relative}
.hud-bar i{position:absolute;left:0;top:-1px;height:3px;width:0;background:#fff}

/* ---------- plain sections ---------- */
section.plain{padding:18vh clamp(22px,8vw,140px);min-height:80vh;display:flex;flex-direction:column;justify-content:center}
#work-with{background:linear-gradient(180deg,#0e1a24,#11151f)}
.offer{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
@media (max-width:1100px){.offer{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.offer{grid-template-columns:1fr}}
.offer article{padding:28px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.03);transition:transform .4s,border-color .4s}
.offer article:hover{transform:translateY(-4px);border-color:rgba(255,179,92,.6)}
.offer h3{font-size:30px}
.offer p{margin-top:12px;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.proofs{display:flex;flex-wrap:wrap;gap:38px;margin-top:56px}
.proofs div{font-family:var(--serif);font-size:clamp(34px,4vw,58px);line-height:1}
.proofs small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px;max-width:22ch;line-height:1.5}
.now-list{list-style:none;margin-top:44px;display:grid;gap:14px;max-width:880px;counter-reset:n}
.now-list li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.now-list .d{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent);padding-top:4px}
.now-list b{font-family:var(--serif);font-weight:500;font-size:24px;display:block}
.now-list span{color:var(--ink-soft);line-height:1.5;display:block;margin-top:4px}
#hello{background:radial-gradient(90% 70% at 20% 100%,#2b2440,#11151f 70%)}
.reasons{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px;max-width:780px}
.reasons button{font:500 16px var(--sans);color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:99px;padding:13px 20px;cursor:pointer;transition:transform .3s,background .3s,border-color .3s}
.reasons button:hover{transform:translateY(-2px) rotate(-1.5deg);border-color:var(--accent)}
.reasons button.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.sendrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.cta{display:inline-flex;gap:12px;align-items:center;padding:16px 26px;border-radius:99px;text-decoration:none;font-weight:600;font-size:16px;background:var(--ink);color:var(--bg);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cta:hover{transform:translateY(-3px) rotate(-1deg)}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.cta .arr{transition:transform .35s}
.cta:hover .arr{transform:translateX(5px)}
.addr{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--ink-soft);margin-top:24px}
footer{padding:36px clamp(22px,8vw,140px);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line)}

/* ---------- clipping dialog ---------- */
dialog#clip{margin:auto;border:0;border-radius:6px;max-width:min(620px,92vw);padding:0;background:var(--paper);color:var(--paper-ink);box-shadow:0 40px 120px rgba(0,0,0,.6)}
dialog#clip::backdrop{background:rgba(8,10,16,.7);backdrop-filter:blur(4px)}
dialog#clip article{padding:44px 40px 36px;position:relative}
dialog#clip .x{position:absolute;right:16px;top:12px;border:0;background:none;font-size:28px;cursor:pointer;color:#8b5a2b}
.clip-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8b5a2b}
dialog#clip h3{font-size:40px;margin-top:10px}
dialog#clip blockquote{position:relative;margin-top:26px;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.35;padding-top:18px}
dialog#clip blockquote::before{content:"\201C";position:absolute;top:-30px;left:-6px;font-size:80px;line-height:1;color:#8b5a2b;opacity:.5}
dialog#clip blockquote:empty{display:none}
.clip-body{margin-top:18px;font-size:16px;line-height:1.6;color:#3b352d}
.clip-src{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b5a2b}
.clip-src[hidden]{display:none}

/* ---------- phones: the walk becomes a scroll ---------- */
@media (max-width:820px){
  html,body{overflow-x:clip}
  nav.top .links a:first-child{display:none}
  nav.top{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    background:linear-gradient(to bottom,rgba(17,21,31,.82) 0,rgba(17,21,31,.55) 70%,transparent 100%)}
  .scene,.scene.art{left:0}
  .scene.art{height:42vh}
  .panel .beats,.panel.wide .beats{position:static;top:auto;left:auto;right:auto;
    flex-direction:column;align-items:center;flex-wrap:nowrap;
    padding:110px 22px 0;row-gap:100px;column-gap:0;max-width:100%}
  .walk-sticky{position:relative;height:auto;overflow:visible}
  .walk-track{flex-direction:column;transform:none!important}
  .panel,.panel.wide{width:100%;height:auto;min-height:100vh;padding-bottom:48vh}
  .panel-copy{position:relative;width:100%;padding:14vh 22px 0}
  .beat{width:100%;max-width:420px;flex-shrink:1}
  .scene{height:40vh}
  .walk-hud{display:none}
}
@media (prefers-reduced-motion:reduce){
  .grain,.scrollhint span{animation:none}
  .ch,.beat,.scene .draw,.scene .fillin{transition:none}
  .scene .draw{stroke-dashoffset:0}.scene .fillin,.beat,.scene.art img{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- ventures ---- */
.ventures{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:56px}
.venture{display:flex;flex-direction:column;padding:26px;border-radius:22px;background:var(--paper);color:var(--paper-ink);text-decoration:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
a.venture:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.venture.off{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid var(--line)}
.v-logo{height:78px;display:flex;align-items:center}
.v-logo img{max-height:64px;max-width:100%;object-fit:contain}
.v-word{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1}
.v-role{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.venture p{margin-top:10px;font-size:15px;line-height:1.5;flex:1}
.venture.off p{color:var(--ink-soft)}
.v-cta{display:block;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8b5a2b}
.venture.off .v-cta{color:var(--ink-soft);opacity:.7}
@media (max-width:1200px){.ventures{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.ventures{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ventures{grid-template-columns:1fr}}

/* ---- experiments ---- */
.exps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.exp{display:block;text-decoration:none;color:var(--ink)}
.exp-thumb{aspect-ratio:16/10;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#05060c;position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s}
.exp:hover .exp-thumb{transform:scale(1.02);border-color:rgba(255,179,92,.6)}
.exp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.art-photon i{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#000;
  box-shadow:0 0 0 3px rgba(255,214,160,.9),0 0 30px 8px rgba(241,180,108,.75),0 0 90px 30px rgba(241,120,60,.35)}
.art-photon::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:10%;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,220,170,.95),rgba(241,150,70,.55) 55%,transparent);filter:blur(2px);mix-blend-mode:screen}
.art-rooms{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:10px;background:#0d0f18}
.art-rooms i{border-radius:4px;background:hsl(calc(var(--h,0)*1deg) 55% 55%)}
.art-rooms i:nth-child(5n+1){--h:18}.art-rooms i:nth-child(5n+2){--h:42}.art-rooms i:nth-child(5n+3){--h:190}.art-rooms i:nth-child(5n+4){--h:265}.art-rooms i:nth-child(5n){--h:330}
.art-rooms i:nth-child(3n){filter:brightness(.7)}.art-rooms i:nth-child(7n){filter:saturate(.4) brightness(1.2)}
.exp-kind{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.exp h3{font-size:30px;margin-top:6px}
.exp p{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.exp .v-cta{color:var(--accent)}
@media (max-width:980px){.exps{grid-template-columns:1fr}}

/* ---- footer ---- */
.site-foot{padding:80px clamp(22px,8vw,140px) 40px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.f-col{display:flex;flex-direction:column;gap:10px}
.f-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:400;margin-bottom:6px}
.site-foot a{color:var(--ink-soft);text-decoration:none}
.site-foot a:hover{color:var(--accent)}
.f-id .mark{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--ink)}
.f-social{display:flex;gap:18px;margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.f-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.06em}
@media (max-width:820px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.f-grid{grid-template-columns:1fr}}
footer.site-foot{display:block;text-transform:none;letter-spacing:normal;font-family:var(--sans);font-size:15px}

/* ---- awesomage photo on its card ---- */
.v-photo{margin:-26px -26px 18px;height:120px;border-radius:22px 22px 0 0;overflow:hidden}
.v-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}

/* ---- miami life: a full sketchbook page ---- */
.miami{min-height:100vh;padding:12vh clamp(22px,6vw,110px) 10vh;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#f4ead8;color:#2b1d17;--ink-soft:rgba(43,29,23,.72);--line:rgba(43,29,23,.18);position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(120,80,40,.07) 1px,transparent 1.2px),radial-gradient(ellipse at 50% 55%,rgba(255,180,160,.35),transparent 60%);background-size:6px 6px,100% 100%}
.miami-head .stamp{justify-content:center;color:#b0503f}
.miami-head h2{font-size:clamp(46px,7.2vw,118px);line-height:.95;color:#2b1d17;max-width:14ch;margin:0 auto}
.miami-head h2 em{color:#e0507e}
.miami-art{position:relative;margin:3vh 0 3vh;width:min(1180px,100%,96vh)}
.miami-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 52% 52% at 50% 50%,#000 84%,transparent 100%);mask-image:radial-gradient(ellipse 52% 52% at 50% 50%,#000 84%,transparent 100%);transform:rotate(-.6deg);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.miami-art:hover img{transform:rotate(0) scale(1.01)}
.scribble{position:absolute;left:19%;bottom:14%;display:flex;flex-direction:column;align-items:flex-start;color:#e0507e;transform:rotate(-6deg);pointer-events:none}
.scribble span{font:700 clamp(22px,2.4vw,34px) "Caveat",cursive;order:-1;margin-bottom:-6px}
.scribble svg{width:clamp(80px,9vw,130px);height:auto}
.miami-foot{display:grid;grid-template-columns:1.1fr auto;gap:22px 40px;align-items:center;text-align:left;max-width:980px;width:100%}
.miami-foot .body{grid-column:1;color:rgba(43,29,23,.8);font-size:clamp(18px,1.5vw,22px);margin:0}
.miami-foot .spot{grid-column:2;grid-row:1 / span 2;margin:0}
.miami-foot .cta{grid-column:1;justify-self:start;background:#2b1d17;color:#f4ead8}
.spot{display:block;padding:20px 22px;border-radius:18px;background:#fffaf2;color:#2b1d17;text-decoration:none;border:1px solid rgba(43,29,23,.14);
  box-shadow:0 20px 40px -26px rgba(120,40,40,.5);transform:rotate(1.5deg);transition:transform .3s;min-width:280px}
.spot:hover{transform:rotate(0) translateY(-3px)}
.spot span{display:block;font-size:15px;color:rgba(43,29,23,.7)}
.spot b{display:block;font-family:var(--serif);font-weight:500;font-size:28px;margin:4px 0 2px}
.spot .spot-k,.spot .spot-go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b0503f}
.spot .spot-go{margin-top:12px}
@media (max-width:820px){.miami-foot{grid-template-columns:1fr}.miami-foot .spot{grid-column:1;grid-row:auto}.scribble{display:none}}

/* ---- the postcard ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.postcard{margin-top:44px;max-width:980px;perspective:1600px}
.pc-card{display:grid;grid-template-columns:1.25fr 1fr;background:#f6eedd;color:#2b241c;border-radius:6px;min-height:420px;position:relative;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 2px 0 rgba(0,0,0,.05);transform:rotate(-.8deg);transition:transform 1.1s cubic-bezier(.6,-.2,.3,1),opacity 1s .2s;
  background-image:radial-gradient(rgba(120,90,50,.06) 1px,transparent 1px);background-size:5px 5px}
.pc-card::after{content:"";position:absolute;top:28px;bottom:28px;left:55.5%;border-left:1px solid rgba(43,36,28,.25)}
.pc-left{padding:26px 30px 26px 30px;display:flex;flex-direction:column;gap:14px}
.pc-right{padding:26px 28px;display:flex;flex-direction:column;gap:14px;position:relative}
.pc-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8b5a2b;margin-right:8px}
.pc-re{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pc-re button{font:500 13px var(--sans);border:1px solid rgba(43,36,28,.25);background:transparent;color:#2b241c;border-radius:99px;padding:5px 11px;cursor:pointer}
.pc-re button.on{background:#2b241c;color:#f6eedd;border-color:#2b241c}
.pc-left textarea{flex:1;min-height:220px;resize:vertical;border:0;background:transparent;color:#2b241c;outline:none;
  font:italic 22px/32px var(--serif);background-image:linear-gradient(transparent 31px,rgba(43,36,28,.18) 32px);background-size:100% 32px;padding-top:2px}
.pc-left textarea::placeholder{color:rgba(43,36,28,.45)}
.pc-stamps{display:flex;gap:8px;justify-content:flex-end}
.pc-stamps button{width:66px;height:80px;padding:6px;border:0;cursor:pointer;opacity:.6;transition:transform .25s,opacity .25s;
  background:#fffdf7;box-shadow:0 2px 6px rgba(0,0,0,.18);
  background-image:radial-gradient(circle at 50% 50%,#f6eedd 2.4px,transparent 2.8px);background-size:8px 8px;background-position:-4px -4px}
.pc-stamps button img{position:relative}
.pc-stamps button img{display:block;width:100%;height:100%;object-fit:cover;background:#1f2a3a;outline:5px solid #fffdf7}
.pc-stamps button.on{opacity:1;transform:rotate(3deg) scale(1.08)}
.pc-stamps button:hover{opacity:.9}
.pc-postmark{position:absolute;top:92px;right:80px;width:92px;height:92px;border:2px solid rgba(139,90,43,.55);border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:rgba(139,90,43,.8);transform:rotate(-14deg);pointer-events:none}
.pc-postmark i{font-style:normal;font-size:8px;margin-top:3px}
.pc-to{margin-top:74px;font:500 20px/1.35 var(--serif);border-bottom:1px solid rgba(43,36,28,.25);padding-bottom:8px}
.pc-line{display:flex;align-items:baseline;border-bottom:1px solid rgba(43,36,28,.25);padding:6px 0}
.pc-line input{flex:1;min-width:0;border:0;background:transparent;font:18px var(--sans);color:#2b241c;outline:none;padding:4px 0}
.pc-hp{position:absolute;left:-9999px}
.pc-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}
.pc-note{color:var(--ink-soft);font-size:15px}
.pc-note b{color:var(--accent)}
.pc-card.posted{transform:translate(60vw,-30vh) rotate(24deg) scale(.4);opacity:0}
.postcard.sent .pc-card{display:none}
.postcard.sent .pc-foot .cta{display:none}
@media (max-width:760px){
  .pc-card{grid-template-columns:1fr;transform:none}
  .pc-card::after{display:none}
  .pc-right{border-top:1px dashed rgba(43,36,28,.3)}
  .pc-postmark{top:auto;bottom:120px;right:22px;width:74px;height:74px}
  .pc-to{margin-top:10px}
  .pc-stamps{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.pc-card,.pc-card.posted{transition:none}}

/* ---- writing ---- */
#writing[hidden]{display:none}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:44px 0 36px}
.post{display:block;padding:26px;border:1px solid var(--line);border-radius:22px;text-decoration:none;color:var(--ink);transition:transform .4s,border-color .4s}
.post:hover{transform:translateY(-4px);border-color:rgba(255,179,92,.6)}
.post h3{font-size:28px;margin-top:8px}.post p{margin-top:10px;color:var(--ink-soft);font-size:15px;line-height:1.5}
@media (max-width:980px){.posts{grid-template-columns:1fr}}

/* ---- hero: the name, v1 Bodoni display treatment ---- */
.namehero{font-variation-settings:"opsz" 96;font-weight:500;letter-spacing:-.045em;line-height:.84}