/* ═══════════════ PAPER WORLD ═══════════════ */
.paper{
  position:relative;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,  var(--paper-line) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--paper-line) 0 1px, transparent 1px 26px);
  background-size:26px 26px;
  padding-bottom:clamp(4rem,9vw,8rem);
  isolation:isolate;
}
.paper__grain,
.dark__grain{
  position:absolute; inset:0;
  filter:url(#grain);
  opacity:.14;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:1;
}
.dark__grain{ opacity:.2; mix-blend-mode:overlay; }

/* ── headline ── */
.headline{
  font-family:var(--f-display);
  font-weight:800;
  font-size:var(--t-hero);
  line-height:1.06;
  letter-spacing:-.02em;
  max-width:16ch;
  margin-bottom:clamp(2rem,5vw,4rem);
}

/* ── hero ── */
.hero{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,4.5rem);
  align-items:start;
}

.photo{
  position:relative;
  max-width:300px;
  transform:rotate(-1.4deg);
  transition:transform .6s var(--ease);
}
.photo:hover{ transform:rotate(0deg) scale(1.015); }
.photo__inner{
  aspect-ratio:3/3.8;
  background:linear-gradient(150deg,#5c6577,#2f3542 55%,#1d2129);
  box-shadow:0 18px 44px rgba(0,0,0,.24);
  display:grid; place-items:center;
  color:rgba(255,255,255,.34);
  font-family:var(--f-hand);
  font-size:1.15rem;
  text-align:center;
  padding:1rem;
  background-size:cover;
  background-position:center;
}

.about{ position:relative; padding-top:.4rem; }
.about__name{
  font-family:var(--f-display);
  font-weight:800;
  font-size:var(--t-name);
  line-height:1;
  letter-spacing:-.02em;
}
.about__role{
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(.95rem,1.5vw,1.2rem);
  margin:.35rem 0 1.1rem;
  width:max-content;
  max-width:100%;
}
.about__bio{
  font-family:var(--f-display);
  font-size:clamp(.8rem,1.05vw,.94rem);
  line-height:1.6;
  max-width:46ch;
  color:var(--ink-soft);
}

/* annotation placement */
.scribble--about{ top:.2rem; right:6%; width:150px; }
.hand--about{ top:-.2rem; right:0; }
.scribble--touch{ bottom:-3.6rem; left:14%; width:120px; }
.hand--touch{ bottom:-4.4rem; left:4%; transform:rotate(-4deg); }
.scribble--work{ top:1.1rem; left:52%; width:96px; }
.hand--work{ top:.1rem; left:78%; }
.hand--skills{ top:1.3rem; left:62%; transform:rotate(-3deg); }
.hand--tools{
  position:static;
  display:block;
  margin-top:.9rem;
  font-size:.9rem;
  color:var(--ink-faint);
  white-space:normal;
}

/* ── 4-column info grid ── */
.grid4{
  display:grid;
  grid-template-columns:1.05fr 1fr 1fr;
  gap:clamp(2rem,4vw,3.4rem) clamp(1.6rem,4vw,3.6rem);
  margin-top:clamp(3.5rem,8vw,6.5rem);
  align-items:start;
}
.col{ position:relative; min-width:0; }
.col:nth-child(1){ grid-row:1 / span 2; }
.col--facts{ grid-column:3; }

/* ── vertical rules to read the 3 primary columns as separate sections ── */
.col--sep{ padding-left:clamp(1.6rem,3.4vw,3rem); }
.col--sep::before{
  content:"";
  position:absolute;
  left:0; top:.2em; bottom:.4rem;
  width:1px;
  background:var(--paper-line);
}
.col--sep:first-of-type{ padding-left:0; }
.col--sep:first-of-type::before{ display:none; }

/* ── torn edge ── */
.tear{
  position:absolute;
  left:0; right:0; bottom:-1px;
  line-height:0;
  z-index:4;
}
.tear__svg{ width:100%; height:clamp(58px,7vw,118px); display:block; }
.tear__fill{ fill:var(--dark); }
.tear__lip{ fill:#fff; opacity:.85; }

/* ═══════════════ DARK WORLD ═══════════════ */
.dark{
  position:relative;
  background:radial-gradient(120% 90% at 50% 0%, #202024 0%, var(--dark) 42%, var(--dark-2) 100%);
  color:var(--white);
  isolation:isolate;
  padding-top:clamp(2rem,5vw,4rem);
}

.toc__head{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(.6rem,1.6vw,1.4rem);
  margin-bottom:clamp(2.5rem,6vw,5rem);
  flex-wrap:wrap;
}
.toc__script{
  font-family:var(--f-script);
  font-size:clamp(1.5rem,3.4vw,2.9rem);
  color:var(--hl);
  transform:rotate(-6deg) translateY(-.35em);
}
.toc__title{
  font-family:var(--f-heavy);
  font-size:var(--t-huge);
  line-height:.92;
  letter-spacing:-.035em;
}
.toc__rule{
  flex:1 1 120px;
  height:1px;
  background:linear-gradient(90deg,var(--hl),transparent);
  min-width:80px;
}

.toc{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(2.5rem,6vw,5rem) clamp(2rem,6vw,6rem);
}
.toc__item{ position:relative; }
.toc__link{
  display:block;
  position:relative;
  padding:clamp(1.4rem,3vw,2.6rem) 0 clamp(1.4rem,3vw,2.6rem) clamp(3.2rem,7vw,6.5rem);
  transition:transform .45s var(--ease);
}
.toc__link:hover{ transform:translateX(10px); }
.toc__no{
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  font-family:var(--f-heavy);
  font-size:var(--t-num);
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.13);
  letter-spacing:-.05em;
  pointer-events:none;
  transition:-webkit-text-stroke-color .45s var(--ease), color .45s var(--ease);
}
.toc__link:hover .toc__no{ -webkit-text-stroke-color:var(--hl); }
.toc__label{
  font-family:var(--f-heavy);
  font-size:clamp(1.15rem,2.3vw,1.95rem);
  line-height:1.02;
  letter-spacing:-.02em;
  position:relative;
  z-index:2;
}
.toc__sub{
  font-family:var(--f-script);
  font-size:clamp(1.15rem,2.2vw,1.8rem);
  color:var(--hl);
  display:block;
  margin-left:1.6em;
  margin-top:-.15em;
  position:relative;
  z-index:2;
}

/* ═══════════════ GALLERIES ═══════════════ */
.gal{
  background:var(--dark-2);
  color:var(--white);
  border-top:1px solid rgba(255,255,255,.07);
}
.gal__head{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
  flex-wrap:wrap;
}
.gal__no{
  font-family:var(--f-heavy);
  font-size:clamp(1.6rem,3.4vw,2.7rem);
  color:transparent;
  -webkit-text-stroke:1.3px var(--hl);
  letter-spacing:-.04em;
}
.gal__title{
  font-family:var(--f-heavy);
  font-size:clamp(1.3rem,2.8vw,2.3rem);
  letter-spacing:-.02em;
}
.gal__sub{
  font-family:var(--f-script);
  color:var(--hl);
  font-size:clamp(1.05rem,1.9vw,1.5rem);
}
.gal__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(.8rem,1.6vw,1.3rem);
}
.gal__card{
  border-radius:2px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#2a2a30,#1b1b20);
  padding:clamp(1.4rem,3vw,2.2rem);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  transition:transform .5s var(--ease);
}
.gal:nth-child(4n+1) .gal__card{ background:linear-gradient(135deg,#33333b,#1d1d22); }
.gal:nth-child(4n+3) .gal__card{ background:linear-gradient(135deg,#26262c,#141418); }
.gal__card::after{
  content:"";
  position:absolute; inset:0;
  background:var(--hl);
  opacity:0;
  mix-blend-mode:overlay;
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.gal__card:hover{ transform:scale(1.01); }
.gal__card:hover::after{ opacity:.12; }

.gal__pitch{
  font-family:var(--f-display);
  font-size:clamp(.85rem,1.3vw,1rem);
  line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:62ch;
  position:relative;
  z-index:1;
}
.gal__stack{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  position:relative;
  z-index:1;
}
.gal__stack li{
  font-family:var(--f-heavy);
  font-size:.62rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:.4em .9em;
  color:rgba(255,255,255,.72);
}
.gal__metrics{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  position:relative;
  z-index:1;
}
.gal__metrics li{
  font-family:var(--f-display);
  font-size:.72rem;
  color:var(--hl);
  padding-left:1.1em;
  position:relative;
}
.gal__metrics li::before{
  content:"—";
  position:absolute; left:0;
}
.gal__links{
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem;
  margin-top:.2rem;
  position:relative;
  z-index:1;
}
.gal__links a{
  font-family:var(--f-heavy);
  font-size:.72rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--white);
  border-bottom:1px solid var(--hl);
  padding-bottom:.15em;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.gal__links a:hover{ color:var(--hl); }

/* ═══════════════ FAQ ═══════════════ */
.faq{
  background:var(--dark);
  color:var(--white);
  border-top:1px solid rgba(255,255,255,.07);
  padding:clamp(3rem,7vw,6rem) 0;
}
.faq__head{ margin-bottom:clamp(1.6rem,3.4vw,2.6rem); }
.faq__list{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  max-width:64ch;
}
.faq__item{
  border:1px solid rgba(255,255,255,.14);
  border-radius:2px;
  padding:1rem 1.3rem;
}
.faq__q{
  font-family:var(--f-heavy);
  font-size:.9rem;
  letter-spacing:-.01em;
  cursor:pointer;
  list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::before{
  content:"+";
  color:var(--hl);
  margin-right:.6em;
  font-family:var(--f-heavy);
}
.faq__item[open] .faq__q::before{ content:"–"; }
.faq__a{
  font-family:var(--f-display);
  font-size:.82rem;
  line-height:1.6;
  color:rgba(255,255,255,.72);
  margin-top:.8rem;
}

/* ═══════════════ FOOTER ═══════════════ */
.foot{
  background:var(--dark-2);
  color:var(--white);
  text-align:center;
  padding:clamp(4rem,10vw,8rem) var(--pad-x) clamp(2.5rem,5vw,4rem);
  border-top:1px solid rgba(255,255,255,.07);
}
.foot__thanks{
  font-family:var(--f-script);
  font-size:clamp(2.6rem,9vw,6.5rem);
  color:var(--hl);
  line-height:1;
}
.foot__note{
  margin-top:1.4rem;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.foot__faq{
  display:inline-block;
  margin-top:2.2rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--hl);
  border-bottom:1px solid rgba(240,232,60,.35);
  padding-bottom:.15em;
  transition:border-color .3s var(--ease);
}
.foot__faq:hover{ border-color:var(--hl); }

/* ═══════════════ STANDALONE FAQ PAGE ═══════════════ */
.faqpage__head{
  background:var(--dark);
  padding:clamp(1.4rem,3vw,2.2rem) 0 0;
}
.faqpage__back{
  display:inline-block;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.6);
  transition:color .3s var(--ease);
}
.faqpage__back:hover{ color:var(--hl); }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:900px){
  .grid4{ grid-template-columns:1fr 1fr; }
  .col:nth-child(1){ grid-row:auto; }
  .col--facts{ grid-column:auto; }
  .scribble,.hand--about,.hand--touch,.hand--work,.hand--skills{ display:none; }
  .hero{ grid-template-columns:1fr; }
  .photo{ max-width:240px; }
  .col--sep{ padding-left:0; }
  .col--sep::before{ display:none; }
}
@media (max-width:620px){
  .paper{ background-size:22px 22px; }
  .grid4{ grid-template-columns:1fr; }
  .tape--bl{ left:-24px; }
  .toc__link{ padding-left:0; padding-top:2.6rem; }
  .toc__no{ top:0; transform:none; font-size:3.6rem; }
  .tools{ max-width:200px; }
}