/* ============================================================
   rahulds.com — Rahul DS, production artist & print prepress
   ============================================================ */

/* self-hosted faces — no third-party requests, works offline */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"InterVar";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

:root{
  --bg:#0a0a0b;
  --bg-2:#0e0e10;
  --sheet:#fdfdfc;
  --ink:#f4f2ef;
  --ink-2:#adaaa5;
  --ink-3:#8b8884;          /* AA on --bg */
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.055);
  --magenta:#ec008c;        /* process magenta — plate/graphic use */
  --magenta-t:#ff4da6;      /* screen tint — small text use */
  --cyan:#00aeef;           /* process cyan */
  --f-display:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
  --f-sans:"InterVar",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(20px,5vw,72px);
  --maxw:1560px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--magenta);color:#fff}

.skip{position:fixed;left:-999px;top:0;z-index:200;background:#fff;color:#000;padding:10px 16px}
.skip:focus{left:12px;top:12px}
:where(a,button):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* Hover affordance over the work grid only. The system cursor is never
   hidden — this is an accompanying ring, not a cursor replacement. */
.cursor{
  position:fixed;top:0;left:0;z-index:120;pointer-events:none;
  width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;
  border:1px solid var(--magenta);
  opacity:0;transform:scale(.35);
  transition:transform .4s var(--ease),opacity .25s;
}
.cursor span{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta-t);white-space:nowrap;
}
.cursor.is-big{opacity:1;transform:scale(1)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  padding:18px var(--pad);border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,padding .35s;
}
.nav.is-stuck{background:var(--bg);border-bottom-color:var(--line-2);padding-top:12px;padding-bottom:12px}
.nav__in{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav__id{
  display:flex;align-items:center;gap:10px;text-decoration:none;padding:6px 0;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.nav__id .mark{color:var(--magenta);display:flex}
.nav__links{display:flex;align-items:center;gap:clamp(10px,2vw,26px)}
.nav__links a{
  text-decoration:none;font-family:var(--f-mono);font-size:12px;padding:8px 6px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);transition:color .25s;
}
.nav__links a:hover{color:var(--ink)}
.nav__cta{
  color:var(--ink)!important;border:1px solid var(--line);
  padding:9px 16px!important;transition:background .3s,border-color .3s,color .3s!important;
}
.nav__cta:hover{background:var(--ink);color:#0a0a0b!important;border-color:var(--ink)}

/* hamburger + mobile panel ----------------------------------- */
.burger{display:none;width:44px;height:44px;position:relative;flex:none}
.burger span{
  position:absolute;left:12px;width:20px;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}
.burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:760px){
  .burger{display:block}
  .nav__links{
    position:fixed;left:0;right:0;top:0;padding:74px var(--pad) 26px;
    background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;
    transform:translateY(-101%);transition:transform .38s var(--ease);
    z-index:-1;
  }
  .nav__links.is-open{transform:translateY(0)}
  .nav__links a{
    font-size:14px;padding:16px 0;border-bottom:1px solid var(--line-2);
    letter-spacing:.14em;color:var(--ink);
  }
  .nav__links a:last-child{border-bottom:0}
  .nav__cta{
    border:1px solid var(--line)!important;text-align:center;
    margin-top:16px;padding:15px 16px!important;
  }
}


/* ============================ HERO =========================== */
.hero{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(132px,19vh,210px) var(--pad) clamp(56px,8vh,96px);
}
.hero__marks{position:absolute;inset:0;pointer-events:none}
.reg{position:absolute;width:34px;height:34px;color:var(--magenta);opacity:.5}
.reg--tl{top:clamp(88px,13vh,142px);right:var(--pad)}

.die{
  position:absolute;right:calc(var(--pad) + 20px);top:52%;
  transform:translateY(-46%);width:min(42vw,600px);height:auto;opacity:.44;
}
.die__cut path{animation:draw 1.4s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.die__fold{opacity:0;animation:fadein .8s var(--ease) 1.6s forwards}
.die__dim{opacity:0;animation:fadein .8s var(--ease) 2.2s forwards;stroke-opacity:.75}
@keyframes fadein{to{opacity:1}}
.die__t{
  fill:var(--magenta);font-family:var(--f-mono);font-size:7px;letter-spacing:.16em;
  opacity:0;animation:fadein .8s var(--ease) 2.6s forwards;
}
.edge{
  position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);opacity:.55;
}
@media (max-width:900px){.die,.edge{display:none}}
@media (max-width:1080px){.die{width:min(38vw,420px);opacity:.3}}

.eyebrow{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 clamp(24px,4vh,44px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.dot{width:5px;height:5px;background:var(--magenta);display:inline-block}

.hero__h{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.9rem,8.6vw,8.2rem);line-height:.94;letter-spacing:-.022em;
  margin:0 0 clamp(34px,5vh,58px);
}
/* the headline resolves into register on load */
.regword{position:relative;display:inline-block;font-style:italic}
.regword::before,.regword::after{
  content:attr(data-w);position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:screen;opacity:.85;
  animation:toregister 1.5s var(--ease) .35s forwards;
}
.regword::before{color:var(--cyan);--tx:-.055em;--ty:.022em}
.regword::after{color:var(--magenta);--tx:.05em;--ty:-.02em}
.regword span{position:relative}
@keyframes toregister{
  from{transform:translate(var(--tx),var(--ty))}
  to{transform:translate(0,0);opacity:.6}
}

.hero__body{display:grid;gap:18px;max-width:660px}
.hero__body p{margin:0;font-size:clamp(15px,1.15vw,17.5px)}
.hero__body strong{font-weight:600}
.muted{color:var(--ink-2);font-size:15px!important;line-height:1.7}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 24px;border:1px solid var(--line);
  transition:background .3s var(--ease),color .3s,border-color .3s;
}
.btn:hover{border-color:rgba(255,255,255,.34)}
.btn--solid{background:var(--ink);color:#0a0a0b;border-color:var(--ink)}
.btn--solid:hover{background:#fff;border-color:#fff}
.btn .ext{color:var(--ink-3);font-size:10px}
.btn--solid .ext{color:#7a7a7a}

.byline{
  display:flex;align-items:center;gap:clamp(16px,1.6vw,22px);
  margin:0 0 clamp(26px,4.5vh,46px);
}
.byline img{
  width:clamp(96px,8.5vw,128px);height:clamp(96px,8.5vw,128px);
  flex:none;object-fit:cover;filter:grayscale(.18) contrast(1.05);
}
.byline p{margin:0;display:flex;flex-direction:column;gap:7px}
.byline b{
  font-family:var(--f-display);font-weight:400;line-height:1;
  font-size:clamp(1.5rem,2.1vw,2rem);
}
.byline span{
  font-family:var(--f-mono);font-size:clamp(10.5px,.85vw,12px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}

.stats{
  list-style:none;margin:clamp(46px,7vh,84px) 0 0;padding:26px 0 0;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(178px,100%),1fr));gap:28px 20px;
}
.stats b{
  display:block;font-family:var(--f-mono);font-weight:400;
  font-size:clamp(1.8rem,2.9vw,2.7rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.stats span{
  display:block;margin-top:10px;min-height:2.2em;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}

/* =================== REGISTRATION MODULE ==================== */
.reg-mod{
  border-top:1px solid var(--line);background:var(--bg-2);
  padding:clamp(72px,11vh,128px) var(--pad);
}
.reg-mod__head{max-width:var(--maxw);margin:0 auto clamp(34px,5vh,58px)}
.reg-mod h2{
  font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.05;letter-spacing:-.02em;
  text-wrap:balance;
}
.press{max-width:min(1180px,100%);margin:0 auto}
.press__stack{
  position:relative;background:#fff;
  aspect-ratio:1200/878;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.plate{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply;will-change:transform;
}
.plate--c{transform:translate(calc(var(--p,1) * 1.05%),calc(var(--p,1) * -0.9%))}
.plate--m{transform:translate(calc(var(--p,1) * -0.95%),calc(var(--p,1) * 1.0%))}
.plate--y{transform:translate(calc(var(--p,1) * 1.15%),calc(var(--p,1) * 0.75%))}
.plate--k{transform:translate(calc(var(--pk,1) * -0.8%),calc(var(--pk,1) * -1.1%))}
.press__target{
  position:absolute;width:26px;height:26px;pointer-events:none;
  background:
    linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat,
    linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat;
  color:var(--magenta);opacity:calc(.25 + var(--p,1) * .75);
}
.press__target--tl{top:10px;left:10px;transform:translate(calc(var(--p,1) * -60%),calc(var(--p,1) * -60%))}
.press__target--br{bottom:10px;right:10px;transform:translate(calc(var(--p,1) * 60%),calc(var(--p,1) * 60%))}
.press__read{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:16px 0 0;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.press__read b{font-weight:500;color:var(--magenta-t);transition:color .3s}
.press__read.is-set b{color:var(--cyan)}
.press__read span{display:flex;gap:6px}
.pchip{
  font-style:normal;width:26px;height:22px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-3);font-size:10px;letter-spacing:.06em;
  transition:color .35s,border-color .35s,background .35s;
}
.pchip.is-set{color:#0a0a0b;border-color:transparent}
.pchip--c.is-set{background:var(--cyan)}
.pchip--m.is-set{background:var(--magenta)}
.pchip--y.is-set{background:#fff100}
.pchip--k.is-set{background:#e8e6e3}

/* ========================== SECTIONS ========================= */
.section{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(80px,13vh,150px) var(--pad)}
#work{max-width:min(2040px,100%)}
.section--rule{border-top:1px solid var(--line)}
.sec-head{max-width:860px;margin-bottom:clamp(38px,6vh,64px)}
.label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 20px;display:flex;align-items:center;gap:12px;
}
.tick{width:7px;height:7px;background:var(--magenta);display:inline-block;flex:none}
.section h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.05;letter-spacing:-.02em;margin:0;
  text-wrap:balance;
}
.sec-note{color:var(--ink-2);max-width:64ch;margin:20px 0 0;font-size:15.5px}

/* ============================ GRID =========================== */
.grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(30px,3.6vw,60px) clamp(16px,2.2vw,34px);
  align-items:start;
}
.card{grid-column:span var(--span,6);opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:var(--stag,0s)}
.card.is-in{opacity:1;transform:none}
.card__btn{display:block;width:100%;text-align:left;padding:0}
.card__sheet{
  position:relative;background:var(--sheet);overflow:hidden;
  padding:clamp(16px,2vw,32px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.card__frame{position:relative;aspect-ratio:var(--r,1.4);max-height:76vh;display:grid;place-items:center}
.card__frame img{width:100%;height:100%;object-fit:contain}
.card__btn:hover .card__sheet{transform:translateY(-3px);box-shadow:0 8px 16px -6px rgba(0,0,0,.9)}

/* crop marks: always on, magenta on hover — they are structure, not garnish */
.card__crop{position:absolute;inset:9px;pointer-events:none}
.card__crop i{position:absolute;width:15px;height:15px;color:rgba(0,0,0,.28);transition:color .3s}
.card__btn:hover .card__crop i{color:var(--magenta)}
.card__crop i::before,.card__crop i::after{content:"";position:absolute;background:currentColor}
.card__crop i::before{width:100%;height:1px;top:0}
.card__crop i::after{height:100%;width:1px;left:0}
.card__crop i:nth-child(1){top:0;left:0}
.card__crop i:nth-child(2){top:0;right:0;transform:scaleX(-1)}
.card__crop i:nth-child(3){bottom:0;left:0;transform:scaleY(-1)}
.card__crop i:nth-child(4){bottom:0;right:0;transform:scale(-1)}

.card__meta{display:flex;gap:14px;padding:16px 2px 0}
.card__no{
  font-family:var(--f-mono);font-size:11px;color:var(--magenta-t);
  letter-spacing:.08em;padding-top:5px;flex:none;font-variant-numeric:tabular-nums;
}
.card__name{margin:0;font-family:var(--f-display);font-size:clamp(1.25rem,1.8vw,1.72rem);line-height:1.15;font-weight:400}
.card__role{margin:6px 0 0;color:var(--ink-2);font-size:14px;line-height:1.5;max-width:52ch}
.card__specs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 0;padding:0}
.card__specs li{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-2);border:1px solid var(--line);padding:5px 9px;
}

/* dense technical drawings need width: one column below the desktop grid */
@media (max-width:1080px){.card{grid-column:1/-1!important}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

/* =========================== SKILLS ========================== */
.skills{margin:0;border-top:1px solid var(--line)}
.skills>div{
  display:grid;grid-template-columns:230px 1fr;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line-2);
}
.skills dt{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.skills dd{margin:0;font-size:15.5px;color:var(--ink-2);max-width:70ch}
@media (max-width:640px){.skills>div{grid-template-columns:1fr;gap:8px}}

.toolgrid{margin-top:clamp(40px,6vh,64px)}
.toolgrid ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.toolgrid li{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;
  border:1px solid var(--line);padding:11px 16px;color:var(--ink-2);
  transition:border-color .3s,color .3s;
}
.toolgrid li:hover{border-color:rgba(255,255,255,.3);color:var(--ink)}
.toolgrid li svg{color:var(--magenta-t);flex:none}

/* ================= DISCLOSURES / SHOW MORE =================== */
.more,.disclose>summary{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);padding:14px 22px;
  transition:background .28s,color .28s,border-color .28s;
  list-style:none;
}
.more{margin-top:clamp(30px,4vh,48px)}
.more:hover,.disclose>summary:hover{background:var(--ink);color:#0a0a0b;border-color:var(--ink)}
.disclose>summary::-webkit-details-marker{display:none}
.more__i,.disclose__i{
  width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease);
}
.more.is-open .more__i,.disclose[open] .disclose__i{transform:translateY(1px) rotate(-135deg)}
.disclose{border-top:1px solid var(--line);padding-top:26px}
.disclose .checks{margin-top:26px;border-top:0}

/* collapsed work grid: the first three pieces already fill two rows */
.grid.is-clipped .card:nth-child(n+4){display:none}

/* =========================== CHECKS ========================== */
.checks{
  list-style:none;counter-reset:c;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
  gap:0 clamp(24px,4vw,64px);border-top:1px solid var(--line);
}
.checks li{
  counter-increment:c;padding:24px 0;border-bottom:1px solid var(--line-2);
  display:grid;grid-template-columns:44px 1fr;gap:4px 16px;align-items:start;
}
.checks li::before{
  content:counter(c,decimal-leading-zero);
  font-family:var(--f-mono);font-size:11px;color:var(--magenta-t);letter-spacing:.08em;
  grid-row:span 2;padding-top:5px;
}
.checks h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.005em}
.checks p{margin:6px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.62}

.tools{margin-top:clamp(48px,7vh,84px)}
.tools ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.tools li{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;
  border:1px solid var(--line);padding:10px 16px;color:var(--ink-2);
}

/* =========================== ABOUT =========================== */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,86px);align-items:start}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.about__photo{margin:0;position:sticky;top:96px}
@media (max-width:900px){.about__photo{position:static;max-width:420px}}
.about__photo img{width:100%;filter:grayscale(.18) contrast(1.04);transition:filter .7s var(--ease)}
.about__photo:hover img{filter:none}
.about__photo figcaption{
  margin-top:14px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.about__photo figcaption span{color:var(--ink-3)}
.about__text h2{margin-bottom:26px}
.about__text p{margin:0 0 16px;font-size:16px;max-width:62ch}
/* toolset + résumé button, now inside About ------------------ */
.about__tools{margin-top:clamp(34px,4.5vh,52px)}
.about__tools ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.about__tools li{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;
  border:1px solid var(--line);padding:10px 16px;color:var(--ink-2);
}
.about__cta{margin-top:clamp(28px,3.5vh,40px)}
.about__cta .btn svg{flex:none}

.facts{margin:34px 0 0;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.facts dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:0;color:var(--ink-2);font-size:14.5px;max-width:62ch}
@media (max-width:520px){.facts>div{grid-template-columns:1fr;gap:6px}}

/* ========================== CONTACT ========================== */
.contact__h{max-width:18ch;margin-bottom:clamp(28px,5vh,50px)!important}
.contact__mail{
  display:inline-block;text-decoration:none;font-family:var(--f-display);
  font-size:clamp(1.55rem,5.4vw,4.4rem);line-height:1.05;letter-spacing:-.02em;
  background-image:linear-gradient(var(--magenta),var(--magenta));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease);word-break:break-word;
}
.contact__mail:hover{background-size:100% 1px}
.contact__mail span{color:var(--magenta)}

/* contact layout + form ------------------------------------- */
.contact__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,4.5vw,80px);align-items:start;
  margin-top:clamp(46px,7vh,80px);
}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr;gap:44px}}

.cform{border-top:1px solid var(--line);padding-top:26px;display:grid;gap:18px}
.cform__lead{
  margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
.cform__row{display:grid;gap:8px}
.cform__row label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}
.cform__row label i{font-style:normal;color:var(--ink-3);letter-spacing:.1em}
.cform input,.cform textarea{
  font:inherit;font-size:15px;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:0;padding:12px 14px;width:100%;
  transition:border-color .25s,background .25s;
}
.cform textarea{resize:vertical;min-height:120px;line-height:1.6}
.cform input:hover,.cform textarea:hover{border-color:rgba(255,255,255,.26)}
.cform input:focus,.cform textarea:focus{
  outline:none;border-color:var(--cyan);background:rgba(255,255,255,.02);
}
.cform input:user-invalid,.cform textarea:user-invalid{border-color:var(--magenta)}
.cform__trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}
.cform button{justify-self:start;cursor:pointer}
.cform button[disabled]{opacity:.55;cursor:default}
.cform__msg{
  margin:0;min-height:1.2em;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.1em;color:var(--ink-3);
}
.cform__msg.is-ok{color:var(--cyan)}
.cform__msg.is-bad{color:var(--magenta-t)}
.contact__rows{border-top:1px solid var(--line)}
.contact__rows>div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.contact__rows dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.contact__rows dd{margin:0;color:var(--ink-2);font-size:14.5px;max-width:56ch}
.contact__rows a{display:inline-block;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding:5px 0;transition:border-color .3s}
.contact__rows a:hover{border-color:var(--magenta)}
@media (max-width:560px){.contact__rows>div{grid-template-columns:1fr;gap:6px}}

.foot{
  border-top:1px solid var(--line);max-width:var(--maxw);margin:0 auto;
  padding:26px var(--pad);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.foot a{text-decoration:none;padding:4px 0}
.foot a:hover{color:var(--ink)}
@media (max-width:720px){.foot__mid{display:none}}

/* ========================= INSPECTOR ========================= */
.viewer{
  position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;
  background:rgba(7,7,8,.985);opacity:0;transition:opacity .35s var(--ease);
}
.viewer.is-open{opacity:1}
.viewer[hidden]{display:none}
.viewer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px var(--pad);border-bottom:1px solid var(--line);flex:none;
}
.viewer__title{display:flex;align-items:baseline;gap:12px;min-width:0}
.viewer__title i{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--magenta-t)}
.viewer__title b{font-family:var(--f-display);font-weight:400;font-size:clamp(1.05rem,2vw,1.6rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer__title span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
@media (max-width:760px){.viewer__title span{display:none}}
.viewer__tools{display:flex;align-items:center;gap:6px;flex:none}
.viewer__tools button{
  min-width:38px;height:38px;border:1px solid var(--line);
  display:grid;place-items:center;font-size:16px;color:var(--ink-2);
  transition:background .2s,color .2s,border-color .2s;
}
.viewer__tools button:hover{background:var(--ink);color:#000;border-color:var(--ink)}
#vFit,#vOne,.viewer__specs{padding:0 13px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.viewer__specs[aria-expanded="false"]{color:var(--ink-3)}
.viewer__zoom{
  font-family:var(--f-mono);font-size:11px;color:var(--ink-2);min-width:62px;text-align:center;
  font-variant-numeric:tabular-nums;
}
@media (max-width:640px){#vOne,.viewer__specs{display:none}}

.viewer__body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,25vw,440px);min-height:0}
.viewer__body.no-panel{grid-template-columns:minmax(0,1fr)}
.viewer__body.no-panel .viewer__panel{display:none}
@media (max-width:1000px){
  .viewer__body,.viewer__body.no-panel{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .viewer__body.no-panel .viewer__panel{display:block}
}

.viewer__stage{
  position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.05),transparent 62%),#0d0d0f;
  display:grid;place-items:center;touch-action:none;cursor:grab;
}
.viewer__stage.is-dragging{cursor:grabbing}
.viewer__stage img{max-width:none;background:#fff;transform-origin:0 0;user-select:none}
.viewer__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border:1px solid var(--line);background:rgba(12,12,14,.86);
  font-size:22px;line-height:1;color:var(--ink-2);
  transition:background .2s,color .2s,border-color .2s;
}
.viewer__nav:hover{background:var(--ink);color:#000;border-color:var(--ink)}
.viewer__nav--prev{left:14px}
.viewer__nav--next{right:14px}
.viewer__hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);margin:0;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(12,12,14,.8);padding:6px 14px;
  transition:opacity .5s;pointer-events:none;
}
.viewer__hint.is-gone{opacity:0}

.viewer__panel{border-left:1px solid var(--line);overflow-y:auto;padding:26px 32px 44px}
.viewer__panel .vRole{font-family:var(--f-display);font-size:1.3rem;line-height:1.3;margin:0 0 22px}
.viewer__panel dl{margin:0;border-top:1px solid var(--line)}
.viewer__panel dl>div{padding:12px 0;border-bottom:1px solid var(--line-2)}
.viewer__panel dt{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px;
}
.viewer__panel dd{margin:0;font-size:14px;color:var(--ink);line-height:1.55}
.viewer__note{
  margin:24px 0 0;padding:16px 18px;border-left:2px solid var(--magenta);
  background:rgba(236,0,140,.06);font-size:14px;color:var(--ink-2);line-height:1.65;
}
.viewer__note b{
  display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--magenta-t);margin-bottom:7px;font-weight:500;
}
@media (max-width:1000px){
  .viewer__panel{
    border-left:0;border-top:1px solid var(--line);
    max-height:34vh;padding:16px var(--pad) 26px;
    transition:max-height .35s var(--ease);
  }
  .viewer__panel.is-shut{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;border-top-width:0}
  .viewer__panel .vRole{font-size:1.08rem;margin-bottom:16px}
  .viewer__hint{font-size:9px;letter-spacing:.1em;bottom:10px}
  .viewer__nav{width:38px;height:38px}
}

/* ========================== REVEALS ========================== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.card{opacity:1!important;transform:none!important}
  .regword::before,.regword::after{display:none}
  .plate{transform:none!important}
  .press__target{transform:none!important;opacity:1}
}

/* ============================ PRINT ========================== */
@media print{
  @page{margin:16mm}
  body{background:#fff;color:#000;font-size:10.5pt}
  .nav,.cursor,.skip,.viewer,.hero__marks,.reg-mod,.foot a,.hero__cta{display:none!important}
  .reveal,.card{opacity:1!important;transform:none!important}
  .section,.hero{padding:0 0 14mm;max-width:none}
  .hero__h{font-size:34pt;color:#000}
  .regword::before,.regword::after{display:none}
  .section h2{font-size:20pt;color:#000}
  .label,.card__no,.checks li::before{color:#000}
  .muted,.sec-note,.card__role,.checks p,.facts dd,.contact__rows dd{color:#333}
  .grid{display:block}
  .card{break-inside:avoid;margin-bottom:10mm}
  .card__sheet{border:.4pt solid #bbb;padding:4mm}
  .card__crop i{color:#000}
  .checks{display:block}
  .checks li{break-inside:avoid;border-bottom:.4pt solid #ddd}
  .contact__rows a::after{content:" (" attr(href) ")";font-family:var(--f-mono);font-size:8pt;color:#555}
  .contact__rows a[href^="tel"]::after,.contact__rows a[href$=".pdf"]::after{content:""}
  .about__photo{position:static}
}