/* ============================================================
   Leyun Kim — "Dotwork" variant
   Aesthetic: antique pricked-paper folk sampler (dot-matrix / ASCII)
   Monochrome ink on aged ecru. Everything built from dots.
   ============================================================ */

:root{
  --ground:   #E7DCC2;   /* aged ecru page ground            */
  --paper:    #F0E8D4;   /* lighter pricked-paper panel       */
  --paper-2:  #ECE3CC;   /* alt panel                         */
  --ink:      #2c2820;   /* dark sepia ink (dots & text)      */
  --ink-soft: #6f6452;   /* muted secondary                   */
  --dot:      #322d23;   /* motif dot color                   */
  --accent:   #2c2820;   /* accent (monochrome by default)    */
  --line-soft: rgba(50,45,35,.16);

  --maxw: 860px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display: "EB Garamond", Georgia, serif;
  --font-body:    "EB Garamond", Georgia, serif;
  --font-mono:    "Courier Prime", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background-color:var(--ground);
  font-size:19px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

#field{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85; }
.shell{ position:relative; z-index:1; }

.motif{ position:absolute; transform:translate(-50%,-50%) rotate(var(--r,0deg)); color:var(--dot); }
.motif svg{ display:block; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:6px;
  padding:10px clamp(14px,4vw,28px);
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px dotted var(--line-soft);
}
.nav__home{
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--ink);
  padding:4px; line-height:0; border-radius:50%;
  transition:transform .4s var(--ease);
}
.nav__home:hover{ transform:rotate(-6deg) scale(1.08); }
.nav__home svg{ width:40px; height:46px; }
.nav__spacer{ flex:1; }
.nav__links{ display:flex; align-items:center; gap:2px; }
.navlink{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:0; cursor:pointer; padding:6px 11px 4px; border-radius:10px;
  color:var(--ink-soft); transition:color .25s var(--ease), transform .25s var(--ease);
}
.navlink:hover{ color:var(--ink); transform:translateY(-2px); }
.navlink.is-active{ color:var(--ink); }
.navlink svg{ width:24px; height:24px; }
.navlink .lbl{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; line-height:1;
}
.navlink .dot{
  position:absolute; bottom:-5px; left:50%; width:4px; height:4px;
  transform:translateX(-50%) scale(0); background:var(--ink); border-radius:50%;
  transition:transform .3s var(--ease);
}
.navlink.is-active .dot{ transform:translateX(-50%) scale(1); }
@media (max-width:560px){ .navlink .lbl{ display:none; } .navlink{ padding:8px; } }

/* ---------- WRAP / PANELS ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,5vw,34px); }
.panel{
  position:relative; background:var(--paper); border-radius:6px;
  padding:clamp(40px,5.5vw,60px) clamp(30px,5vw,58px); margin:34px 0;
  box-shadow:0 18px 38px -30px rgba(60,45,25,.55);
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.panel.alt{ background:var(--paper-2); }
.panel.in{ opacity:1; transform:none; }
.panel__lace{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:2; }
.panel > *:not(.panel__lace){ position:relative; z-index:3; }

/* ---------- HERO ---------- */
.hero{ padding-top:clamp(40px,7vw,76px); }
.hero-panel{ padding-top:clamp(50px,7vw,78px); padding-bottom:clamp(46px,6vw,64px); }
.hero__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero__photo{ width:96px; height:96px; margin-bottom:26px; }
.hero__photo image-slot{ width:96px; height:96px; }

/* taped vintage photo */
.taped-photo{ position:relative; width:190px; margin:8px auto 40px; transform:rotate(-2.4deg); }
.taped-photo .frame{
  position:relative; background:#fbf6ea; padding:9px 9px 28px;
  box-shadow:0 16px 28px -16px rgba(60,45,25,.55), 0 2px 6px rgba(60,45,25,.12);
}
.taped-photo image-slot, .taped-photo .shot{
  display:block; width:172px; height:170px;
  object-fit:cover; object-position:50% 32%;
}
.taped-photo .tape{
  position:absolute; z-index:3; top:-15px; left:50%;
  width:72px; height:42px; transform:translateX(-50%) rotate(1.6deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 3px, rgba(0,0,0,.02) 3px 6px),
    linear-gradient(180deg, rgba(217,203,165,.5), rgba(198,183,145,.62));
  box-shadow:0 2px 5px rgba(60,45,25,.14);
  -webkit-mask:linear-gradient(90deg, #0000 0, #000 5px, #000 calc(100% - 5px), #0000 100%);
          mask:linear-gradient(90deg, #0000 0, #000 5px, #000 calc(100% - 5px), #0000 100%);
}

/* cross-stitch cursive name: script rasterized to a uniform dot grid (JS) */
.hero__name{
  width:min(560px, 90%);
  color:var(--ink);
  margin:.12em 0 .42em;
  font-size:0;
}
.hero__name svg{ display:block; width:100%; height:auto; }
.hero__name.write{ animation:writeOn 2.2s cubic-bezier(.62,.02,.3,1) both; }
@keyframes writeOn{
  from{ clip-path:inset(-12% 101% -28% -3%); }
  to{   clip-path:inset(-12% -3% -28% -3%); }
}

.hero__kicker{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 24px;
}
.hero__bio{ max-width:46ch; margin:0 auto; font-size:21px; color:var(--ink); text-wrap:pretty; }
.hero__bio p{ margin:0 0 1.5em; }
.hero__bio p:last-child{ margin-bottom:0; }
.hero__bio .han{ font-family:var(--font-display); font-style:italic; }
.hero__meta{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 20px; margin-top:30px; font-family:var(--font-mono);
  font-size:13px; letter-spacing:.04em; color:var(--ink-soft); text-transform:uppercase;
}
.hero__meta a{ color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--ink); padding-bottom:2px; transition:opacity .2s; }
.hero__meta a:hover{ opacity:.6; }
.metasep{ width:4px; height:4px; border-radius:50%; background:var(--ink-soft); display:inline-block; }

.scrollcue{
  display:flex; flex-direction:column; align-items:center; gap:8px; margin:32px auto 0;
  color:var(--ink-soft); font-family:var(--font-mono); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; background:none; border:0; cursor:pointer;
}
.scrollcue .arr{ animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* ---------- SECTION HEADER ---------- */
.shead{ display:flex; align-items:center; gap:18px; margin:8px 0 6px; }
.shead__badge{ flex:none; width:52px; height:52px; display:grid; place-items:center; color:var(--ink); }
.shead__badge svg{ width:38px; height:38px; }
.shead__t{ display:flex; flex-direction:column; }
.shead__title{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(30px,5.2vw,44px); color:var(--ink); line-height:1.05; }
.shead__sub{ font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); margin-top:9px; }
.srule{ height:18px; margin:14px 0 6px; background-repeat:repeat-x; background-position:center; background-size:auto 100%; }

/* ---------- STITCHED LISTS ---------- */
.stitch{ list-style:none; margin:18px 0 0; padding:0; }
.row{
  display:grid; grid-template-columns:26px 1fr auto; align-items:start; gap:4px 16px;
  padding:18px 14px 18px 6px; border-radius:6px; text-decoration:none; color:inherit;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.stitch li + li .row{ border-top:1px dotted var(--line-soft); }
a.row:hover{ background:rgba(50,45,35,.05); transform:translateX(4px); }
a.row:hover .bullet{ transform:scale(1.18); }
.bullet{ grid-column:1; grid-row:1 / span 2; margin-top:8px; width:18px; height:18px; color:var(--dot); justify-self:center; transition:transform .35s var(--ease); }
.bullet svg{ display:block; width:100%; height:100%; }
.row__title{
  grid-column:2; grid-row:1; font-family:var(--font-display); font-size:23px; font-weight:600;
  line-height:1.18; color:var(--ink); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.row__title .yr{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); letter-spacing:.08em; align-self:baseline; }
.row__title .break{ flex-basis:100%; height:0; }
.row__desc{ grid-column:2; grid-row:2; color:var(--ink-soft); font-size:17px; margin-top:4px; text-wrap:pretty; }
.row__go{
  grid-column:3; grid-row:1 / span 2; align-self:center; color:var(--ink-soft);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), color .25s;
}
a.row:hover .row__go{ opacity:1; transform:none; color:var(--ink); }
.row__go svg{ width:15px; height:15px; }
.tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); border:1px dotted var(--ink-soft); border-radius:3px; padding:2px 8px;
}
.reading .row__title{ font-style:italic; }

/* ---------- FOOTER ---------- */
.foot{ text-align:center; padding:8px 0 70px; color:var(--ink-soft); }
.foot__heart{ width:48px; height:56px; color:var(--ink); margin:0 auto 14px; }
.foot__heart svg{ width:100%; height:100%; }
.foot a{ color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--ink); }
.foot__sig{ font-family:var(--font-display); font-style:italic; font-size:30px; color:var(--ink); margin-top:8px; }
.foot__colophon{
  font-family:var(--font-mono); font-size:12px; line-height:1.75; letter-spacing:.01em;
  color:var(--ink-soft); max-width:74ch; margin:18px auto 2px; text-transform:none; text-wrap:pretty;
}
.foot small{ display:block; margin-top:14px; font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
  .panel,.reveal{ opacity:1 !important; transform:none !important; }
  .hero__name{ clip-path:none !important; }
}
html.no-anim .panel, html.no-anim .reveal{
  transition:none !important; animation:none !important; opacity:1 !important; transform:none !important;
}
html.no-anim .hero__name{ animation:none !important; clip-path:none !important; }