:root{
  /* page-level: dark ocean night, used everywhere as the constant backdrop */
  --paper:      #0e2233;
  --ink:        #f1e6d2;
  --ink-soft:   #9fb2ba;

  /* card-level: light paper objects floating on the dark backdrop */
  --paper-2:    #ede1c9;
  --paper-3:    #d4d8d9;
  --paper-4:    #ddd0b2;
  --card-ink:   #1c333d;
  --card-ink-soft: rgba(28,51,61,0.65);

  /* accents, used on both light and dark surfaces */
  --rose:       #e2794f;
  --mauve:      #4f9d94;
  --steel:      #163c4a;
  --mustard:    #d9a441;

  --line:       rgba(241,230,210,0.16);
  --line-soft:  rgba(241,230,210,0.09);

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-hand:    'Caveat', cursive;
  --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
  --col: 720px;
}

*{ box-sizing:border-box; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:linear-gradient(to bottom, #060f18 0%, #0e2233 45%, #123044 100%);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
  text-transform:lowercase;
}
code, pre{ text-transform:none; }

a{ color:var(--rose); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:hover{ color:var(--mustard); }
:focus-visible{ outline:2px dashed var(--rose); outline-offset:3px; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:0.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}

h1,h2,h3{ font-family:var(--font-display); font-weight:400; margin:0; color:var(--ink); }

.eyebrow{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em;
  color:var(--ink-soft); margin-bottom:0.7rem;
}

.hand{ font-family:var(--font-hand); color:var(--mauve); }

/* ---------- simple text nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:flex-end; gap:1.8rem;
  padding:1.6rem 1.8rem;
  background:linear-gradient(to bottom, rgba(14,34,51,0.92), rgba(14,34,51,0));
}
.site-nav a{
  font-family:var(--font-display); font-size:1rem; color:var(--ink-soft);
  text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a.active{ color:var(--ink); border-bottom-color:var(--rose); }

main{ max-width:var(--col); margin:0 auto; padding:0 1.6rem; position:relative; z-index:1; }
.page-head{ padding:3rem 0 2rem; }
.page-head h1{ font-size:clamp(1.9rem, 5vw, 2.4rem); }
.page-head .intro-line{ color:var(--ink-soft); max-width:52ch; margin-top:0.6rem; font-size:0.95rem; }
.page-body{ padding-bottom:7rem; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:6.5rem 0 4.5rem; overflow:visible; }
.hero-moon{
  position:absolute; top:-1rem; right:2%;
  width:70px; height:70px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #fbe9c8, #f0c98a 55%, #e2b877 100%);
  box-shadow:0 0 60px 14px rgba(240,201,138,0.28);
}
.hero h1{ font-size:clamp(2.4rem, 6vw, 3.4rem); }
.hero h1 .accent{ color:var(--rose); }
.hero .tagline{
  font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-soft);
  margin-top:0.9rem; letter-spacing:0.02em;
}
.hero-bio{
  font-family:var(--font-body); font-size:0.98rem; color:var(--ink-soft);
  max-width:52ch; margin-top:1rem; line-height:1.55;
}
.hero-hint{
  font-family:var(--font-hand); font-size:1.05rem; color:var(--mauve);
  margin-top:1.6rem;
}
.hero-hint-touch{ display:none; }
@media (pointer: coarse){
  .hero-hint-desktop{ display:none; }
  .hero-hint-touch{ display:block; }
}

/* ---------- decorative doodles ---------- */
.doodle{ position:absolute; pointer-events:none; opacity:0.75; z-index:0; }

/* ---------- site-wide particle canvas ---------- */
#sand-canvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:1; pointer-events:none;
}

/* ---------- homepage sections ---------- */
.home-section{ margin-top:5.5rem; position:relative; z-index:1; }
.home-section:last-of-type{ margin-bottom:3rem; }
.home-label{
  font-family:var(--font-hand); font-size:1.15rem;
  color:var(--ink-soft); margin-bottom:1rem;
}
.home-panel-text{ font-size:0.98rem; max-width:52ch; color:var(--ink-soft); }
.home-more{ margin-top:1.3rem; font-family:var(--font-mono); font-size:0.82rem; }

/* ---------- homepage experience teaser ---------- */
.exp-teaser{ display:flex; flex-direction:column; gap:1.1rem; }
.exp-teaser-item{ display:flex; align-items:baseline; gap:0.9rem; flex-wrap:wrap; }
.exp-teaser-item h3{ font-size:1.15rem; }
.exp-teaser-org{ font-family:var(--font-mono); font-size:0.78rem; color:var(--mauve); }

/* ---------- project cards: scattered index cards with washi tape ---------- */
.card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.4rem 1.8rem; align-items:start; }
@media (max-width:640px){ .card-grid{ grid-template-columns:1fr; } }
.card{
  display:block; text-decoration:none;
  position:relative;
  background:var(--paper-2);
  color:var(--card-ink);
  padding:1.6rem 1.7rem 1.4rem;
  box-shadow:0 16px 30px -16px rgba(0,0,0,0.5);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.card:nth-child(3n+1){ transform:rotate(-1.1deg); background:var(--paper-2); }
.card:nth-child(3n+2){ transform:rotate(0.9deg); background:var(--paper-3); }
.card:nth-child(3n+3){ transform:rotate(-0.6deg); background:var(--paper-4); }
.card:hover{ transform:translateY(-4px) rotate(0deg); box-shadow:0 22px 36px -16px rgba(0,0,0,0.55); }
.card::before{
  content:""; position:absolute; top:-10px; left:20px; width:46px; height:18px;
  opacity:0.85; transform:rotate(-4deg);
}
.card:nth-child(3n+1)::before{ background:var(--rose); }
.card:nth-child(3n+2)::before{ background:var(--mauve); }
.card:nth-child(3n+3)::before{ background:var(--steel); }
.card h3{ font-size:1.35rem; color:var(--card-ink); }
.card-tagline{ margin:0.4rem 0 0.7rem; font-size:0.92rem; color:var(--card-ink-soft); }
.card-fact{
  font-family:var(--font-hand); font-size:1.02rem; color:var(--mauve);
  margin:0.65rem 0 0; line-height:1.3;
}
.tags{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:0.15rem; }
.tag{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.02em;
  color:var(--card-ink-soft); border-bottom:1px solid rgba(28,51,61,0.25); padding-bottom:1px;
}
.card-cta{ text-align:right; margin:0.75rem 0 0; font-family:var(--font-hand); font-size:1.05rem; color:var(--card-ink-soft); }
.card-cta-text{ position:relative; padding-bottom:2px; }
.card-cta-text::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width 0.25s ease;
}
.card:hover .card-cta{ color:var(--card-ink); }
.card:hover .card-cta-text::after{ width:100%; }
.card-cta-arrow{ display:inline-block; transition:transform 0.2s ease; }
.card:hover .card-cta-arrow{ transform:translate(3px,-3px); }
.grid-note{
  font-family:var(--font-hand); font-size:1.1rem; color:var(--mauve);
  margin:0.6rem 0 1.6rem;
}

/* ---------- project detail (post) pages ---------- */
.post-links{ font-family:var(--font-mono); font-size:0.78rem; margin-top:0.8rem; display:flex; gap:1rem; }
.post-body p{ margin:0 0 1rem; color:var(--ink-soft); }
.sketch-wrap{
  margin:1.3rem 0; padding:1rem;
  border:1px solid var(--line);
  background:var(--paper-2);
  overflow-x:auto;
}
.sketch-wrap svg{ display:block; margin:0 auto; max-width:100%; height:auto; }
.friend-gallery-note{ font-family:var(--font-hand); font-size:1.1rem; color:var(--mauve); margin:2rem 0 1rem; }
.friend-gallery{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem; }
@media (max-width:640px){ .friend-gallery{ grid-template-columns:repeat(2, 1fr); } }
.friend-gallery img{
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  background:var(--paper-2); border:6px solid var(--paper-2);
  box-shadow:0 10px 20px -12px rgba(0,0,0,0.5);
}
.friend-gallery img:nth-child(4n+1){ transform:rotate(-2deg); }
.friend-gallery img:nth-child(4n+2){ transform:rotate(1.5deg); }
.friend-gallery img:nth-child(4n+3){ transform:rotate(-1deg); }
.friend-gallery img:nth-child(4n+4){ transform:rotate(2deg); }

/* ---------- experience: editorial timeline ---------- */
.tl-item{ padding-bottom:2.6rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-date{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-soft); letter-spacing:0.02em; margin-bottom:0.5rem; }
.tl-rule{ display:flex; align-items:center; gap:0.7rem; margin-bottom:1.2rem; }
.tl-dot{ width:0.5rem; height:0.5rem; border-radius:50%; background:var(--rose); flex-shrink:0; }
.tl-line{ flex:1; height:1px; background:var(--line); }
.tl-item:nth-child(3n+1) .tl-dot{ background:var(--rose); }
.tl-item:nth-child(3n+2) .tl-dot{ background:var(--mauve); }
.tl-item:nth-child(3n+3) .tl-dot{ background:var(--steel); }
.tl-item h3{ font-size:1.25rem; }
.tl-org{ font-family:var(--font-mono); font-size:0.78rem; color:var(--mauve); margin-top:0.35rem; letter-spacing:0.02em; }
.tl-quote{
  font-family:var(--font-body); font-size:0.98rem; color:var(--ink-soft);
  margin:0.9rem 0 1rem; max-width:52ch; line-height:1.5;
  padding-left:0.9rem; border-left:2px solid var(--line);
}
.tl-more{ display:inline-block; font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-soft); text-decoration:none; }
.tl-more-text{ position:relative; padding-bottom:2px; }
.tl-more-text::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width 0.25s ease;
}
.tl-more:hover{ color:var(--ink); }
.tl-more:hover .tl-more-text::after{ width:100%; }
.tl-more-arrow{ display:inline-block; transition:transform 0.2s ease; }
.tl-more:hover .tl-more-arrow{ transform:translate(3px,-3px); }

/* ---------- contact links ---------- */
.contact-inline{ display:flex; flex-direction:column; gap:1.1rem; margin-top:1.4rem; max-width:26rem; }
.contact-link{
  display:flex; align-items:center; gap:0.9rem;
  font-family:var(--font-mono); font-size:0.9rem; color:var(--ink);
}
.contact-link .k{
  color:var(--ink); border-bottom:1px solid var(--rose); padding-bottom:1px;
  transition:color 0.15s ease;
}
.contact-link:hover .k{ color:var(--mustard); border-color:var(--mustard); }
.contact-icon{ width:19px; height:19px; flex-shrink:0; color:var(--ink); opacity:0.85; }
.contact-note{
  font-family:var(--font-hand); font-size:1rem; color:var(--mauve); margin-top:1.2rem;
}

footer{ position:relative; z-index:1; margin-top:1.5rem; }
.footer-wave{ display:block; width:100%; height:36px; opacity:0.35; }
.footer-note{
  text-align:center; padding:0.6rem 1.6rem 0;
  font-family:var(--font-hand); font-size:1.15rem; color:var(--mauve);
  margin-bottom:0.5rem;
}
footer .fine{
  text-align:center; padding:0 1.6rem 1.8rem;
  font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-soft);
}

::selection{ background:var(--mustard); color:var(--card-ink); }