/* Blondie Edit. One stylesheet for the whole site. Fonts are hosted here, no third party requests. */
@font-face{ font-family:'Tinos'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/tinos-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Tinos'; font-style:italic; font-weight:400; font-display:swap; src:url('assets/fonts/tinos-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Tinos'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/tinos-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Tinos'; font-style:italic; font-weight:700; font-display:swap; src:url('assets/fonts/tinos-700-italic.woff2') format('woff2'); }
@font-face{ font-family:'Pinyon Script'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/pinyon-script-400-normal.woff2') format('woff2'); }
:root{
  --pink:#EFC3CF; --pink-l:#F6DCE3; --pink-d:#DDA3B6; --rose:#B4657E; --ink:#141014; --white:#fff; --ivory:#F8F1EC;
  --ti:'Times New Roman',Tinos,Times,serif; --pi:'Pinyon Script','Snell Roundhand',cursive;
  --ease:cubic-bezier(.22,1,.36,1); --dur:.9s; --nav-h:52px;
  /* silver foil flecks, streaked vertically, layered over the pink paper */
  --foil:
    repeating-linear-gradient(92deg, rgba(255,255,255,0) 0 7px, rgba(255,255,255,.22) 7px 8px, rgba(255,255,255,0) 8px 19px, rgba(214,208,214,.28) 19px 20px, rgba(255,255,255,0) 20px 33px),
    radial-gradient(rgba(255,255,255,.85) .9px, transparent 1.3px),
    radial-gradient(rgba(226,222,228,.8) 1.1px, transparent 1.5px),
    radial-gradient(rgba(190,182,190,.55) .8px, transparent 1.2px);
}
.col.name::before, .fold .card::before{ background-size:auto, 9px 13px, 17px 23px, 29px 31px, auto; }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 8px); -webkit-text-size-adjust:100%; }
body{ background:var(--pink); color:var(--ink); font-family:var(--ti); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img{ display:block; max-width:100%; }
a{ color:inherit; -webkit-tap-highlight-color:transparent; }
::selection{ background:var(--ink); color:var(--white); }
.wrap{ max-width:1400px; margin:0 auto; padding:0 clamp(18px,4.5vw,64px); }

/* ---------- reveals ---------- */
.js-motion .rv{ transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease), clip-path var(--dur) var(--ease); }
.js-motion .rv:not(.is-in).rv-up{ transform:translateY(28px); opacity:.001; }
.js-motion .rv:not(.is-in).rv-left{ transform:translateX(-36px); opacity:.001; }
.js-motion .rv:not(.is-in).rv-right{ transform:translateX(36px); opacity:.001; }
.js-motion .rv:not(.is-in).rv-scale{ transform:scale(.94); opacity:.001; }
.js-motion .rv:not(.is-in).rv-clip{ clip-path:inset(0 0 100% 0); }
.js-motion .rv.rv-clip{ clip-path:inset(0 0 0 0); }
.js-motion .rv-stagger > .rv{ transition-delay:calc(var(--i,0) * 70ms); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv,.rv:not(.is-in){ transition:none !important; transform:none !important; opacity:1 !important; clip-path:none !important; }
  *{ animation:none !important; }
}

/* ---------- stars: white, black outline, used sparingly ---------- */
.st{ position:absolute; pointer-events:none; z-index:2; }
.st svg{ display:block; width:100%; height:auto; fill:var(--white); stroke:var(--ink); stroke-width:1.2; stroke-linejoin:round; }
.stars{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.stars .st{ transform:translateY(calc((var(--p,.5) - .5) * var(--d,80) * -1px)) rotate(calc((var(--p,.5) - .5) * var(--r,24deg))); transition:transform .2s linear; }
.tw{ animation:pulse var(--tw,6s) ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.7 } }

/* ---------- mouse: sparkle trail, card tilt, cover parallax ---------- */
.spark{ position:fixed; z-index:70; pointer-events:none; width:16px; height:16px; margin:-8px 0 0 -8px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2C56.5 26 74 43.5 98 50C74 56.5 56.5 74 50 98C43.5 74 26 56.5 2 50C26 43.5 43.5 26 50 2Z' fill='white' stroke='%23141014' stroke-width='5'/></svg>") center/contain no-repeat;
  animation:spark .95s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes spark{ 0%{ transform:translate(0,0) scale(.35) rotate(0); opacity:0 } 15%{ opacity:1 } 100%{ transform:translate(var(--dx,0px),var(--dy,-46px)) scale(1) rotate(var(--rot,40deg)); opacity:0 } }
.tilt{ transform-style:preserve-3d; will-change:transform; }
.tilt.is-tilting{ transition:none !important; }
.fold .st{ transition:transform .35s ease-out; }

/* ==================================================================
   COVER  (her textures: shimmer on the name panel, croc on the folders)
   ================================================================== */
.rail{ display:flex; align-items:stretch; height:100svh; min-height:560px; padding:clamp(10px,1.6vw,22px) clamp(10px,1.6vw,22px) 0; background:#E9C5D1; overflow:hidden; }
.col.name{
  position:relative; flex:0 0 clamp(230px,40%,600px); z-index:5; overflow:hidden; border-radius:22px 22px 0 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:clamp(28px,4vw,56px) clamp(16px,2.4vw,32px);
  background:#E9C6D3;
  box-shadow:10px 0 30px -20px rgba(58,26,32,.5);
}
.col.name::after{ content:""; position:absolute; inset:-8%; z-index:0; background:url("assets/img/tx_empire.jpg") center 30%/cover no-repeat; }
.col.name::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 35%,rgba(236,196,210,.16) 100%); }
.wm{ position:relative; z-index:3; padding:clamp(18px,2.6vw,34px) clamp(10px,2vw,28px); }
.wm::before{ content:""; position:absolute; inset:-6% -8%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.62), rgba(255,255,255,.34) 55%, rgba(255,255,255,0) 100%); }
.wm .b{ font-family:var(--pi); font-size:clamp(54px,7.2vw,126px); line-height:.8; color:var(--rose); margin-bottom:-.05em; }
.wm .e{ font-weight:700; font-size:clamp(50px,6.6vw,116px); line-height:.9; letter-spacing:.07em; text-transform:uppercase; padding-left:.07em; }
.wm .rule{ width:clamp(70px,7vw,140px); height:1.5px; background:var(--ink); margin:clamp(16px,1.8vw,30px) auto clamp(12px,1.4vw,20px); }
.wm .a{ font-style:italic; font-size:clamp(23px,2.6vw,48px); line-height:1; letter-spacing:.36em; padding-left:.36em; }
.name .tag{ position:absolute; left:0; right:0; bottom:clamp(20px,3vw,44px); z-index:3; font-size:clamp(10px,.8vw,13px); letter-spacing:.3em; text-transform:uppercase; color:var(--ink); line-height:2.1; text-shadow:0 0 10px rgba(255,255,255,.95), 0 0 2px rgba(255,255,255,.95); }

.fold{
  display:block; position:relative; flex:1 1 0; min-width:0; text-decoration:none; color:inherit;
  margin-left:clamp(-44px,-3.2vw,-18px); margin-top:clamp(18px,3vh,34px);
  height:calc(100% + 60px);
  filter:drop-shadow(-12px 0 20px rgba(58,26,32,.28));
  transition:transform .5s var(--ease);
}
.fold:nth-of-type(1){ z-index:6;  --c:rgba(236,178,198,.62); --stamp:#A34C72; --paper:#F4CEDB; }
.fold:nth-of-type(2){ z-index:7;  --c:rgba(226,160,185,.6); --stamp:#98446A; --paper:#F4CEDB; }
.fold:nth-of-type(3){ z-index:8;  --c:rgba(215,142,172,.58); --stamp:#8E3D62; --paper:#F4CEDB; }
.fold:nth-of-type(4){ z-index:9;  --c:rgba(204,124,158,.56); --stamp:#843659; --paper:#F4CEDB; }
.fold:nth-of-type(5){ z-index:10; --c:rgba(192,106,144,.54); --stamp:#7A2F50; --paper:#F4CEDB; }
.fold .card{ position:absolute; inset:0; border-radius:26px 26px 0 0; overflow:hidden;
  background:#D8A0B6 url("assets/img/tx_croc.jpg") center/cover; }
.fold .card::before{ content:""; position:absolute; inset:0; background:var(--c); }
.fold .paper{ position:absolute; z-index:2; top:12px; left:clamp(96px,9.6vw,136px); width:clamp(34px,3.4vw,52px); bottom:0; border-radius:2px 2px 0 0;
  background:linear-gradient(118deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,.34) 48%, rgba(255,255,255,0) 66%, rgba(255,255,255,.58) 100%), var(--paper);
  box-shadow:-3px 0 8px -3px rgba(58,26,32,.22), inset 1px 0 0 rgba(255,255,255,.6); }
.fold .sheen{ z-index:3; }
.fold .sheen{ position:absolute; inset:0; border-radius:26px 26px 0 0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 48%,transparent 66%);
  transition:opacity .5s ease, transform 1s var(--ease); transform:translateX(-40%); }
.fold .lab{ position:absolute; z-index:4; top:2.5%; bottom:4%; left:clamp(18px,2.2vw,36px); display:flex; align-items:center; justify-content:center; }
.fold .lab span{ display:block; writing-mode:vertical-rl; font-family:var(--ti); font-weight:700; text-transform:uppercase; letter-spacing:.15em; font-size:clamp(27px,4.7vh,54px); line-height:1; white-space:nowrap; color:var(--stamp); opacity:.86; mix-blend-mode:multiply; text-shadow:1px 1px 0 rgba(255,255,255,.28), -1px -1px 0 rgba(60,20,40,.42), 0 0 1px rgba(60,20,40,.3); }
.fold .st{ position:absolute; }
/* a folder slides up out of the drawer; it never lifts over its neighbours */
.fold:hover,.fold:focus-visible{ transform:translateY(-34px); }
.fold:hover .sheen{ opacity:1; transform:translateX(45%); }
.fold:focus-visible{ outline:3px solid var(--ink); outline-offset:-3px; }
@media (prefers-reduced-motion:reduce){ .fold:hover{ transform:none; } }

/* ---------- nav ---------- */
.slimnav{ position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:50; background:rgba(246,220,227,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--pink-d);
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 clamp(18px,4.5vw,64px);
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.4,0,.2,1); }
.slimnav.is-visible{ transform:none; }
.slimnav .brand{ display:flex; align-items:baseline; gap:8px; text-decoration:none; }
.slimnav .brand b{ font-family:var(--pi); font-weight:400; font-size:26px; color:var(--rose); line-height:1; }
.slimnav .brand i{ font-style:normal; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.slimnav .links{ display:flex; gap:clamp(12px,2.2vw,32px); }
.slimnav .links a{ position:relative; text-decoration:none; font-size:12px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.slimnav .links a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.slimnav .links a.is-active::after{ transform:scaleX(1); }

/* ==================================================================
   SECTIONS: each on one of her textures, softened by a pink veil
   ================================================================== */
section.sec{ position:relative; padding:clamp(64px,9vw,124px) 0 clamp(70px,9vw,130px); background-position:center; background-size:cover; }
section.sec::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:var(--veil); }
section.sec > .wrap{ position:relative; z-index:3; }
#story{ background-image:url("assets/img/tx_paper.jpg"); --veil:linear-gradient(180deg,rgba(248,241,236,.6),rgba(246,225,231,.56)); }
#about,#work{ background-image:url("assets/img/tx_mosaic.jpg"); --veil:linear-gradient(180deg,rgba(248,232,237,.62),rgba(244,212,221,.66)); }
#edits{ background-image:url("assets/img/tx_empire.jpg"); background-position:center 20%; --veil:linear-gradient(180deg,rgba(247,236,239,.8),rgba(246,228,233,.72) 60%,rgba(247,236,239,.84)); }
#projects{ background-image:url("assets/img/tx_sequin.jpg"); --veil:linear-gradient(180deg,rgba(246,228,233,.78),rgba(242,214,223,.8)); }
#connect{ background-image:url("assets/img/tx_empire.jpg"); background-position:center 30%; --veil:linear-gradient(90deg,rgba(247,236,239,.9) 0%,rgba(247,236,239,.72) 45%,rgba(247,236,239,.28) 100%); }

.dotband{ position:relative; height:46px; overflow:hidden; border-top:1px solid var(--pink-d); border-bottom:1px solid var(--pink-d); background:var(--white); }
.dotband i{ position:absolute; inset:-4px; background:radial-gradient(var(--pink-d) 3.1px, transparent 3.5px) 0 0/17px 17px; }
.dotband i.f1{ background:radial-gradient(var(--rose) 3.1px, transparent 3.5px) 0 0/17px 17px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 16%,transparent 24%); mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 16%,transparent 24%);
  -webkit-mask-size:300% 100%; mask-size:300% 100%; animation:sweep 7s linear infinite; }
.dotband i.f2{ background:radial-gradient(var(--ink) 2.4px, transparent 2.8px) 0 0/17px 17px; opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 11%,transparent 18%); mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 11%,transparent 18%);
  -webkit-mask-size:300% 100%; mask-size:300% 100%; animation:sweep 11s linear infinite -4s; }
@keyframes sweep{ from{ -webkit-mask-position:-120% 0; mask-position:-120% 0 } to{ -webkit-mask-position:220% 0; mask-position:220% 0 } }

.lock{ margin-bottom:clamp(26px,4vw,56px); }
.lock .s{ display:block; font-family:var(--pi); font-size:clamp(34px,4.6vw,64px); line-height:.9; color:var(--rose); margin-left:.06em; }
.lock .g{ font-weight:400; font-size:clamp(52px,10vw,152px); line-height:.86; letter-spacing:-.01em; text-transform:uppercase; text-wrap:balance; }
.lock .r{ width:min(100%,520px); height:1px; background:var(--ink); margin-top:clamp(14px,1.8vw,22px); }
.eyebrow{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--rose); }

/* ---------- ABOUT: the ink skyline runs behind the photo ---------- */
.skyband{ position:absolute; left:0; right:0; z-index:2; pointer-events:none; mix-blend-mode:multiply; opacity:.62;
  background:url("assets/img/tx_skyline.jpg") center bottom/auto 100% repeat-x; }
#about .skyband{ bottom:0; height:min(30%,270px); opacity:.5; }
.about{ display:grid; grid-template-columns:minmax(230px,.85fr) 1.15fr; gap:clamp(22px,4vw,64px); align-items:start; }
.folio{ position:relative; min-height:400px; }
.folio span{ position:absolute; right:0; bottom:0; writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--pi); font-size:clamp(64px,8vw,128px); line-height:1; color:var(--rose); white-space:nowrap; }
.portrait{ position:relative; perspective:900px; }
.portrait .fr{ position:relative; overflow:hidden; transform-style:preserve-3d; transition:transform .5s var(--ease); box-shadow:0 20px 44px -26px rgba(58,26,32,.6); }
.portrait img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 22%; transition:transform .6s var(--ease); }
.portrait .fr::after{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s ease; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 42%); }
.portrait:hover .fr::after{ opacity:1; }
.portrait:hover img{ transform:scale(1.04); }
.copy p{ max-width:52ch; margin-bottom:16px; }
.copy .eyebrow{ margin-bottom:18px; display:block; }
.glance{ list-style:none; margin:clamp(20px,2.6vw,30px) 0 0; max-width:52ch; border-top:1px solid var(--ink); }
.glance li{ display:flex; gap:18px; align-items:baseline; padding:11px 0; border-bottom:1px solid rgba(20,16,20,.25); transition:padding-left .35s var(--ease), color .35s ease; }
.glance li:hover{ padding-left:10px; color:var(--rose); }
.glance em{ font-style:italic; flex:0 0 clamp(84px,9vw,110px); color:var(--rose); }

.runner{ position:relative; overflow:hidden; margin-top:clamp(40px,5vw,72px); }
.runner .track{ display:flex; gap:10px; width:max-content; animation:run 46s linear infinite; }
.runner:hover .track{ animation-play-state:paused; }
.runner img{ width:clamp(150px,20vw,260px); aspect-ratio:3/4; object-fit:cover; }
@keyframes run{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .runner .track{ animation:none; } .runner{ overflow-x:auto; } }

/* ---------- EXPERIENCE: Empire State in glitter, NYC ticket stamp ---------- */
.empire{ position:absolute; right:0; top:0; bottom:0; width:min(46%,560px); z-index:1; pointer-events:none;
  background:url("assets/img/tx_empire.jpg") center top/cover no-repeat; opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%); mask-image:linear-gradient(90deg,transparent,#000 40%); }
.ticket{ position:absolute; right:clamp(18px,4.5vw,64px); top:clamp(60px,8vw,110px); width:clamp(90px,10vw,150px); z-index:3; transform:rotate(7deg); opacity:.9; pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(58,26,32,.25)); }
.tl{ position:relative; margin-top:clamp(20px,3vw,34px); padding-left:clamp(20px,3vw,34px); max-width:760px; }
.tl::before{ content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--pink-d); }
.job{ position:relative; padding:0 0 clamp(26px,3.4vw,40px); }
.job:last-child{ padding-bottom:0; }
.job::before{ content:""; position:absolute; left:calc(-1 * clamp(20px,3vw,34px)); top:9px; width:11px; height:11px; border-radius:50%; background:var(--ivory); border:1.6px solid var(--rose); transition:background .4s ease, transform .4s var(--ease); }
.job:first-child::before{ background:var(--rose); }
.job:hover::before{ background:var(--rose); transform:scale(1.25); }
.job h3{ font-weight:400; font-size:clamp(21px,2.2vw,28px); line-height:1.15; }
.job .co{ color:var(--rose); font-style:italic; font-size:17px; margin-top:2px; }
.job .when{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); opacity:.6; margin-top:7px; }
.job p{ margin-top:10px; max-width:62ch; }
.sub{ margin-top:16px; padding-left:18px; border-left:1px solid var(--pink-d); }
.sub h4{ font-weight:400; font-size:19px; }
.sub .when{ margin-top:4px; }
.sub p{ margin-top:7px; }
.sub div + div{ margin-top:18px; }
.appstrip{ position:relative; overflow:hidden; margin-top:clamp(40px,5vw,68px); border-top:1px solid var(--pink-d); border-bottom:1px solid var(--pink-d); padding:16px 0; }
.appstrip .track{ display:flex; gap:12px; width:max-content; animation:run 38s linear infinite; }
.appstrip:hover .track{ animation-play-state:paused; }
.appstrip b{ font-weight:400; white-space:nowrap; border:1px solid var(--rose); border-radius:999px; padding:9px 20px; font-size:15px; background:rgba(255,255,255,.85); transition:background .3s, color .3s; }
.appstrip b:hover{ background:var(--rose); color:var(--white); }
@media (prefers-reduced-motion:reduce){ .appstrip .track{ animation:none; } .appstrip{ overflow-x:auto; } }

/* ---------- EDITS ---------- */
.edits{ display:grid; grid-template-columns:minmax(250px,320px) 1fr; gap:clamp(24px,4vw,64px); align-items:start; }
.phonewrap{ position:sticky; top:calc(var(--nav-h) + 24px); }
.phone{ display:block; width:100%; max-width:320px; text-decoration:none; color:var(--ink); background:#111; border-radius:48px; padding:12px; box-shadow:0 30px 60px -22px rgba(40,10,25,.5), 0 0 0 2px #2a2a2a inset; transition:transform .5s var(--ease); }
.phone:hover{ transform:translateY(-8px); }
.phone:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; }
.scr{ position:relative; background:#fff; border-radius:37px; overflow:hidden; aspect-ratio:9/19.2; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; font-size:11px; line-height:1.3; color:#111; }
.isl{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:82px; height:23px; background:#111; border-radius:999px; z-index:3; }
.ig{ padding:42px 14px 0; }
.ig .hdr{ display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:15px; margin-bottom:12px; }
.ig .hdr i{ font-style:normal; font-weight:400; font-size:18px; line-height:1; }
.ig .top{ display:flex; align-items:center; gap:14px; }
.ig .av{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex:none; padding:2px; background:linear-gradient(45deg,#f9c8d4,#c4788f); }
.ig .av img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; border-radius:50%; border:2px solid #fff; }
.ig .stats{ display:flex; flex:1; justify-content:space-around; text-align:center; }
.ig .stats b{ display:block; font-size:14px; } .ig .stats span{ font-size:10.5px; }
.ig .nm{ font-weight:700; font-size:12px; margin-top:10px; }
.ig .bio{ font-size:10.5px; line-height:1.45; }
.ig .bio .at{ color:#00376b; }
.ig .btns{ display:flex; gap:6px; margin:10px 0 12px; }
.ig .btns span{ flex:1; text-align:center; border-radius:7px; padding:6px 0; font-weight:600; font-size:10.5px; background:#efefef; }
.ig .btns span:first-child{ background:var(--pink); }
.ig .hl{ display:flex; gap:12px; margin-bottom:10px; }
.ig .hl div{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9px; }
.ig .hl div img{ width:42px; height:42px; border-radius:50%; object-fit:cover; border:1.5px solid #ddd; padding:1.5px; background:#fff; }
.ig .tabs{ display:flex; justify-content:space-around; border-top:1px solid #e6e6e6; padding:7px 0 5px; font-size:13px; }
.ig .tabs i{ font-style:normal; opacity:.35; } .ig .tabs i:first-child{ opacity:1; }
.ig .gr{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; margin:0 -14px; }
.ig .gr img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.ig .hb{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:110px; height:4px; border-radius:999px; background:#111; }
.phonecap{ text-align:center; font-style:italic; font-size:14px; letter-spacing:.06em; color:var(--rose); margin-top:14px; }

.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.5vw,16px); }
.tile{ display:block; position:relative; text-decoration:none; color:inherit; background:var(--white); padding:6px; box-shadow:0 14px 30px -18px rgba(40,10,25,.5); transition:transform .45s var(--ease), box-shadow .45s; }
.tile:hover,.tile:focus-visible{ transform:translateY(-6px) scale(1.02); box-shadow:0 22px 38px -20px rgba(40,10,25,.5); }
.tile:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.tile .ph{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.tile .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.tile:hover .ph img{ transform:scale(1.06); }
.ov{ position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; justify-content:center; padding-bottom:14px;
  background:linear-gradient(180deg,rgba(20,16,20,0) 45%,rgba(20,16,20,.62) 100%); opacity:0; transition:opacity .4s ease; }
.tile:hover .ov,.tile:focus-visible .ov,.collab:hover .ov,.collab:focus-visible .ov{ opacity:1; }
.ov span{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#fff; }
.bar{ display:flex; align-items:center; gap:14px; padding:11px 5px 5px; font-size:13.5px; color:var(--rose); }
.bar span{ display:inline-flex; align-items:center; gap:6px; }
.bar svg{ width:14px; height:14px; fill:var(--rose); }

/* ---------- BRAND WORK: six real covers ---------- */
.collabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,22px); }
.collab{ display:block; text-decoration:none; color:inherit; background:var(--white); padding:7px; box-shadow:0 16px 32px -20px rgba(40,10,25,.5); transition:transform .45s var(--ease), box-shadow .45s; }
.collab:hover,.collab:focus-visible{ transform:translateY(-8px); box-shadow:0 28px 44px -20px rgba(40,10,25,.55); }
.collab:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.collab .ph{ position:relative; aspect-ratio:4/5; overflow:hidden; display:grid; place-items:center; text-align:center; padding:20px; background:#EFDCE2 url("assets/img/tx_paper.jpg") center/cover; }
.collab .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,center); transition:transform .7s var(--ease); }
.collab:hover .ph img{ transform:scale(1.06); }
.collab .ph .plate{ position:relative; z-index:1; font-size:clamp(17px,1.9vw,26px); line-height:1.2; letter-spacing:.03em; }
.collab .cap{ padding:12px 5px 4px; font-size:15px; line-height:1.5; }
.collab .bar{ padding-top:6px; }

/* ---------- FIT PROJECTS: real covers, names cropped by the frame ---------- */
.projgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2.2vw,26px); }
.proj{ display:block; text-decoration:none; color:inherit; overflow:hidden; box-shadow:0 16px 34px -22px rgba(40,10,25,.45); transition:transform .45s var(--ease), box-shadow .45s; background:var(--white); padding:7px; }
.proj:hover,.proj:focus-visible{ transform:translateY(-8px); box-shadow:0 30px 48px -22px rgba(40,10,25,.5); }
.proj:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.proj .vis{ position:relative; aspect-ratio:16/8; overflow:hidden; display:grid; place-items:center; text-align:center; padding:26px; background:#F1DCE2; }
.proj .vis img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,center top); transition:transform .7s var(--ease); }
.proj:hover .vis img{ transform:scale(1.04); }
.proj .stella{ position:absolute; inset:0; display:grid; place-items:center; padding:24px;
  background:#EFE7E0 url("assets/img/tx_paper.jpg") center/cover; }
.proj .stella::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(243,236,229,.86),rgba(238,226,222,.86)); }
.proj .stella div{ position:relative; }
.proj .stella b{ display:block; font-weight:400; font-size:clamp(20px,2.4vw,36px); letter-spacing:.06em; text-transform:uppercase; line-height:1.05; }
.proj .stella i{ display:inline-block; font-style:normal; margin-top:12px; padding:6px 12px; border:1px solid var(--ink); font-size:clamp(10px,1vw,13px); letter-spacing:.2em; text-transform:uppercase; }
.proj .go{ position:absolute; left:0; right:0; bottom:0; padding:22px 10px 12px; text-align:center; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,rgba(20,16,20,0),rgba(20,16,20,.6)); opacity:0; transition:opacity .4s ease; }
.proj:hover .go,.proj:focus-visible .go{ opacity:1; }

/* ---------- CONNECT ---------- */
.connect{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,64px); align-items:center; }
.rows{ border-top:1px solid var(--ink); max-width:560px; }
.row{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:19px 4px; text-decoration:none; font-size:clamp(22px,2.6vw,34px); line-height:1; transition:padding-left .4s var(--ease); }
.row:hover{ padding-left:12px; }
.row::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(1); transform-origin:left; }
.js-motion .row:not(.is-in)::after{ transform:scaleX(0); }
.js-motion .row::after{ transition:transform .9s var(--ease); transition-delay:calc(var(--i,0) * 160ms); }
.row small{ font-size:14px; font-style:italic; color:var(--rose); letter-spacing:.04em; }
.row span.ar{ transition:transform .4s var(--ease); }
.row:hover span.ar{ transform:translateX(8px); }
.solo img{ width:100%; aspect-ratio:4/5; object-fit:cover; box-shadow:0 24px 48px -26px rgba(58,26,32,.6); }
.foot{ margin-top:clamp(40px,6vw,72px); padding-top:16px; border-top:1px solid var(--ink); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; letter-spacing:.06em; }

/* ---------- note ---------- */
.note{ position:fixed; right:16px; bottom:16px; z-index:40; width:min(300px,calc(100vw - 32px)); background:var(--white); border:1px solid var(--pink-d); padding:18px 20px 16px; box-shadow:0 12px 40px rgba(40,10,25,.18); transform:translateY(24px); opacity:0; pointer-events:none; transition:transform .8s var(--ease), opacity .6s ease; }
.note.is-open{ transform:none; opacity:1; pointer-events:auto; }
.note .s{ font-family:var(--pi); font-size:30px; line-height:.9; color:var(--rose); }
.note p{ font-size:15px; margin:8px 0 12px; }
.note a{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--ink); }
.note button{ position:absolute; top:8px; right:10px; border:0; background:none; font:inherit; font-size:18px; cursor:pointer; color:var(--rose); }

/* ==================================================================
   PHONE  (this is where most people will see it)
   ================================================================== */
@media (max-width:900px){
  .about{ grid-template-columns:1fr; }
  .folio{ min-height:0; order:-1; }
  .folio span{ position:static; writing-mode:horizontal-tb; transform:none; display:block; font-size:clamp(52px,14vw,96px); }
  .edits{ grid-template-columns:1fr; } .phonewrap{ position:static; justify-self:center; width:min(100%,320px); }
  .projgrid,.connect{ grid-template-columns:1fr; }
  .tiles,.collabs{ grid-template-columns:repeat(2,1fr); }
  .empire{ width:60%; opacity:.22; }
  #about .skyband{ top:auto; bottom:0; height:min(26%,200px); }
}
@media (max-width:860px){
  .rail{ flex-direction:column; height:auto; min-height:0; padding:12px; }
  .col.name{ flex:none; padding:44px 20px 78px; border-radius:20px 20px 0 0; }
  .wm .b{ font-size:clamp(60px,18vw,96px); } .wm .e{ font-size:clamp(52px,16vw,84px); } .wm .a{ font-size:clamp(22px,7vw,34px); }
  .fold{ flex:none; height:96px; margin-left:0; margin-top:-16px; filter:drop-shadow(0 -7px 14px rgba(58,26,32,.24)); }
  .fold:hover,.fold:focus-visible{ transform:translateX(12px); }
  .fold .paper{ top:8px; bottom:8px; left:auto; right:14px; width:22%; border-radius:2px; }
  .fold .lab{ top:0; bottom:0; left:0; right:0; justify-content:flex-start; padding-left:24px; }
  .fold .lab span{ writing-mode:horizontal-tb; font-size:clamp(15px,4.3vw,21px); letter-spacing:.17em; }
  .fold .st{ display:none; }
  .slimnav .links{ gap:12px; } .slimnav .links a{ font-size:10.5px; letter-spacing:.08em; }
  .ticket{ width:84px; top:auto; bottom:24px; right:18px; }
  .runner img{ width:clamp(130px,38vw,200px); }
}
@media (max-width:620px){
  body{ font-size:16px; }
  section.sec{ padding:52px 0 60px; }
  .lock{ margin-bottom:22px; }
  .lock .g{ font-size:clamp(46px,15vw,80px); }
  .glance li{ flex-direction:column; gap:2px; } .glance em{ flex:none; }
  .slimnav .links{ display:none; }
  .tiles,.collabs{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .collab .cap{ font-size:13.5px; } .bar{ font-size:12.5px; gap:10px; }
  .tl{ padding-left:22px; } .job h3{ font-size:20px; }
  .row{ font-size:22px; padding:16px 2px; }
  .note{ display:none; }
}
@media (max-width:420px){ .tiles,.collabs{ grid-template-columns:1fr 1fr; } .collab .ph .plate{ font-size:15px; } }