/* ============================================================================
   colesmithism — Cole Smith
   A bio link, built like one. ~90% of the traffic is a phone and most of it
   never scrolls, so the column is 520px wide everywhere and the follow
   buttons sit above the fold. Deep charcoal ground, one hot accent, Anton
   for the shout and Archivo for everything else.
   Single-theme on purpose: the page is a lit sign, not a document.
   ============================================================================ */

:root{
  --ground:#0A0910;          /* obsidian, a hair of violet in it */
  --line:#2E2942;
  --text:#F2EEE4;            /* warm ivory, not white */
  --dim:#9E98AE;
  --gold:#D8A84A;            /* the whole accent budget goes here */

  --display:"Anton","Haettenschweiler","Arial Narrow",sans-serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --col:520px;
  --pad:clamp(20px,5.5vw,28px);
  --r:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--gold);color:var(--ground)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

.skip{position:fixed;top:10px;left:10px;z-index:200;background:var(--gold);color:var(--ground);
  padding:11px 16px;border-radius:8px;font-weight:700;font-size:13px;
  transform:translateY(-180%);transition:transform .2s var(--ease)}
.skip:focus{transform:none}

/* ---- atmosphere: film grain + a slow wordmark crawl behind everything ---- */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the molten field. app.js draws it; without WebGL the ground shows through. */
#fx{position:fixed;inset:0;z-index:0;pointer-events:none}
#fx canvas{display:block;width:100%;height:100%}
/* darkens as you scroll so the reading sections aren't fighting the field */
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--ground);
  opacity:var(--scrim,.40);transition:opacity .12s linear}

/* ---- the column ---- */
.col{position:relative;z-index:3;width:100%;max-width:var(--col);margin:0 auto;
  padding:clamp(26px,7vw,44px) var(--pad) 56px;
  display:flex;flex-direction:column;gap:clamp(34px,8vw,46px)}

/* ---------------------------------------------------------------------------
   IDENTITY — above the fold, every time
   --------------------------------------------------------------------------- */
.id{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.id::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;height:172%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(4,3,9,.93) 0%,rgba(4,3,9,.80) 46%,rgba(4,3,9,.40) 68%,transparent 84%)}
.id__pic{margin:0 0 18px;width:clamp(96px,26vw,116px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;position:relative;
  box-shadow:0 0 0 2px var(--gold),0 0 0 7px rgba(216,168,74,.16),0 16px 40px rgba(0,0,0,.5)}
.id__pic img{width:100%;height:100%;object-fit:cover;object-position:center}

.id__name{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(46px,14vw,68px);line-height:.9;letter-spacing:-.005em;text-wrap:balance;
  text-shadow:0 2px 34px rgba(0,0,0,.72)}

.id__handle{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--gold)}
.live{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.js .live{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.id__bio{margin-top:14px;color:var(--dim);font-size:15.5px;line-height:1.55;max-width:33ch}

/* ---------------------------------------------------------------------------
   LINKS — the entire job of the page
   --------------------------------------------------------------------------- */
.links{display:flex;flex-direction:column;gap:11px}

.lnk{position:relative;display:flex;align-items:center;gap:15px;
  min-height:68px;padding:14px 18px;border-radius:var(--r);
  background:rgba(21,19,31,.56);border:1px solid rgba(255,255,255,.09);color:var(--text);
  -webkit-backdrop-filter:blur(15px) saturate(155%);backdrop-filter:blur(15px) saturate(155%);
  overflow:hidden;isolation:isolate;
  transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}

/* sheen sweeps across on hover */
.lnk::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.10) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s var(--ease)}
.lnk:hover::after,.lnk:focus-visible::after{transform:translateX(120%)}

.lnk__g{width:26px;height:26px;flex:none;color:var(--gold);
  transition:transform .3s var(--ease)}
.lnk__t{display:flex;flex-direction:column;gap:1px;min-width:0}
.lnk__t b{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.lnk__t i{font-style:normal;font-size:13px;color:var(--dim);line-height:1.3}
.lnk__a{width:20px;height:20px;flex:none;margin-left:auto;color:var(--dim);
  transition:transform .3s var(--ease),color .22s var(--ease)}

.lnk:hover,.lnk:focus-visible{border-color:var(--gold);background:rgba(31,27,46,.68);transform:translateY(-2px)}
.lnk:hover .lnk__g{transform:scale(1.12) rotate(-6deg)}
.lnk:hover .lnk__a{color:var(--gold);transform:translateX(4px)}
.lnk:active{transform:translateY(0) scale(.988)}

/* first link carries the priority — research says top slot does the work */
.lnk--primary{background:var(--gold);border-color:var(--gold);color:var(--ground)}
.lnk--primary .lnk__g,.lnk--primary .lnk__a{color:var(--ground)}
.lnk--primary .lnk__t i{color:rgba(10,9,16,.74)}
.lnk--primary:hover,.lnk--primary:focus-visible{background:#E8BC63;border-color:#E8BC63}
.lnk--primary:hover .lnk__a{color:var(--ground)}

/* staggered entrance */
.js .lnk{opacity:0;transform:translateY(12px)}
.js .lnk.up{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(var(--i,0) * 90ms),transform .5s var(--ease) calc(var(--i,0) * 90ms)}

/* ---- work with me: the other thing people come here to do ---- */
.hire{position:relative;display:flex;align-items:center;gap:15px;margin-top:14px;
  padding:15px 18px;border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:rgba(42,35,23,.56);border:1px solid rgba(216,168,74,.44);color:var(--text);
  -webkit-backdrop-filter:blur(15px) saturate(155%);backdrop-filter:blur(15px) saturate(155%);
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease)}
.hire::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.10) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s var(--ease)}
.hire:hover::after,.hire:focus-visible::after{transform:translateX(120%)}
.hire__g{width:24px;height:24px;flex:none;color:var(--gold);transition:transform .3s var(--ease)}
.hire__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hire__t b{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.hire__t i{font-style:normal;font-size:13px;color:var(--dim);line-height:1.3}
.hire__t em{font-style:normal;font-size:13px;font-weight:600;color:var(--gold);line-height:1.35;
  margin-top:3px;overflow-wrap:anywhere}
.hire__a{width:20px;height:20px;flex:none;margin-left:auto;color:var(--gold);
  transition:transform .3s var(--ease)}
.hire:hover,.hire:focus-visible{border-color:var(--gold);background:rgba(58,48,28,.66);transform:translateY(-2px)}
.hire:hover .hire__g{transform:scale(1.1)}
.hire:hover .hire__a{transform:translateX(4px)}
.hire:active{transform:translateY(0) scale(.99)}
.js .hire{opacity:0;transform:translateY(12px)}
.js .hire.up{opacity:1;transform:none;transition:opacity .5s var(--ease) .28s,transform .5s var(--ease) .28s}

/* ---------------------------------------------------------------------------
   SECTIONS
   --------------------------------------------------------------------------- */
.sec{display:flex;flex-direction:column;gap:16px}
.lbl{font-family:var(--display);text-transform:uppercase;font-size:13px;letter-spacing:.14em;
  color:var(--gold);margin:0}

/* ---- the angle: useful -> undeniable, as type ---- */
.ladder{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:2px 0 18px}
.ladder__a,.ladder__b{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(40px,12.5vw,72px);line-height:.94;letter-spacing:-.008em;display:block}
/* hollow: competent, and see-through */
.ladder__a{color:transparent;-webkit-text-stroke:1.4px var(--dim)}
.ladder__b{position:relative;color:transparent;-webkit-text-stroke:1.4px var(--gold)}
/* the fill. --fill defaults to 100%, so no JS means simply solid gold. */
.ladder__b::after{content:attr(data-word);position:absolute;left:0;top:0;
  color:var(--gold);-webkit-text-stroke:0;
  clip-path:inset(0 calc(100% - var(--fill,100%)) 0 0)}
.ladder__link{width:24px;height:24px;color:var(--gold);opacity:.65;margin:4px 0 2px 3px}
.angle__p{color:var(--dim);font-size:15px;line-height:1.62}

/* ---- the read ---- */
.hit{margin:0;font-size:clamp(19px,5vw,22px);font-weight:700;line-height:1.28;
  letter-spacing:-.015em;text-wrap:balance;
  padding-left:16px;border-left:3px solid var(--line)}
.hit em{font-style:normal;color:var(--gold)}
.aside{color:var(--dim);font-size:14.5px;line-height:1.55}

/* ---- takes ---- */
.takes{display:flex;flex-direction:column;gap:2px}
.takes li{padding:17px 0;border-top:1px solid var(--line)}
.takes li:last-child{border-bottom:1px solid var(--line)}
.takes h3{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.takes p{margin-top:7px;color:var(--dim);font-size:14.5px;line-height:1.55}

/* ---- work ---- */
.work__p{color:var(--dim);font-size:15px;line-height:1.62}
.work__p + .work__p{margin-top:-2px}
.work__p strong{color:var(--text);font-weight:600}
.cta{display:flex;align-items:center;gap:12px;padding:17px 20px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.09);background:rgba(21,19,31,.56);font-weight:600;font-size:15px;line-height:1.35;
  -webkit-backdrop-filter:blur(15px) saturate(155%);backdrop-filter:blur(15px) saturate(155%);
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease)}
.cta__g{width:22px;height:22px;flex:none;color:var(--gold);transition:transform .3s var(--ease)}
.cta__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.cta__t b{font-size:15px;font-weight:700;line-height:1.3}
.cta__t i{font-style:normal;font-size:13px;line-height:1.3;color:var(--dim);
  overflow-wrap:anywhere}
.cta__a{width:19px;height:19px;flex:none;margin-left:auto;color:var(--gold);transition:transform .3s var(--ease)}
.cta:hover{border-color:var(--gold);background:rgba(31,27,46,.68);transform:translateY(-2px)}
.cta:hover .cta__a{transform:translate(3px,-3px)}
.cta:hover .cta__g{transform:scale(1.1)}
.cta:active{transform:translateY(0) scale(.99)}

.foot{display:flex;flex-direction:column;gap:6px;padding-top:8px;
  color:#868196;font-size:12.5px;line-height:1.5}
.foot__mail{color:var(--dim);border-bottom:1px solid rgba(158,152,174,.34);
  padding-bottom:1px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.foot__mail:hover{color:var(--gold);border-color:var(--gold)}

/* ---- scroll reveal ---- */
.js .sec,.js .foot{opacity:0;transform:translateY(16px)}
.js .sec.up,.js .foot.up{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* ---- short phones (SE-class): compress the stack so "Work with me" still
       clears the fold. Nothing is hidden, it just packs tighter. ---- */
@media (max-height:760px){
  .col{gap:clamp(22px,5vw,30px);padding-top:20px}
  .id__pic{width:clamp(74px,19vw,88px);margin-bottom:12px}
  .id__name{font-size:clamp(38px,11.5vw,52px)}
  .id__handle{margin-top:9px}
  .id__bio{margin-top:10px;font-size:14.5px}
  .links{gap:9px}
  .lnk{min-height:58px;padding:11px 16px}
  .lnk__t b{font-size:17px}
  .lnk__t i{font-size:12.5px}
  .hire{margin-top:10px;padding:12px 16px}
  .hire__t b{font-size:17px}
}

/* ---- desktop: same column, more air, the crawl gets room ---- */
@media (min-width:900px){
  .col{padding-top:64px;padding-bottom:80px}
}

/* ---- touch: no hover states to get stuck in ---- */
@media (hover:none){
  .lnk:hover{transform:none;background:rgba(21,19,31,.56);border-color:rgba(255,255,255,.09)}
  .lnk--primary:hover{background:var(--gold);border-color:var(--gold)}
  .lnk:hover .lnk__g{transform:none}
  .lnk:hover .lnk__a{color:var(--dim);transform:none}
  .lnk--primary:hover .lnk__a{color:var(--ground)}
  .lnk::after{display:none}
  .hire::after{display:none}
  .hire:hover{transform:none;background:rgba(42,35,23,.56);border-color:rgba(216,168,74,.44)}
  .hire:hover .hire__g,.hire:hover .hire__a{transform:none}
  .cta:hover{transform:none;background:rgba(21,19,31,.56);border-color:rgba(255,255,255,.09)}
  .cta:hover .cta__a{transform:none}
  .cta:hover .cta__g{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .js .live{animation:none}
  .lnk,.lnk__g,.lnk__a,.cta,.cta__a,.cta__g{transition:none}
  .lnk::after{display:none}
  .js .lnk,.js .hire,.js .sec,.js .foot{opacity:1;transform:none;transition:none}
  .hire::after{display:none}
  .lnk:hover,.hire:hover,.cta:hover{transform:none}
}