/* =========================================================================
   _____ by nina — DESIGN SYSTEM  ·  "The Sketchbook"
   Canonical tokens + components. Off-white paper, black ink, one turquoise accent,
   a structural grotesque, a clean sans, and a human hand.
   Shared across every page. Single source of truth.
   ========================================================================= */

/* ----------------------------------------------------------------- TOKENS */
:root{
  /* Surface & ink */
  --paper:#f5f2ec;          /* off-white — the page */
  --paper-deep:#ece7dd;     /* recessed panels, insets */
  --ink:#141312;            /* simply black — text & line */
  --ink-70:rgba(20,19,18,.70);
  --ink-50:rgba(20,19,18,.50);
  --ink-30:rgba(20,19,18,.30);
  --pencil:#b7b1a6;         /* faint guide / dotted line */
  --hair:rgba(20,19,18,.14);/* hairline rules */
  --accent:#1cab9b;         /* the ONE accent — turquoise, for marginalia, emphasis & a single live state */

  /* Type families */
  --display:"Bricolage Grotesque",system-ui,sans-serif; /* structure */
  --sans:"Rubik",system-ui,sans-serif;                  /* clean voice */
  --hand:"Mynerve",cursive;                             /* the human hand */

  /* Type scale (fluid) */
  --t-display:clamp(2.6rem,7vw,5.5rem);
  --t-h1:clamp(2rem,5.5vw,4rem);
  --t-h2:clamp(1.5rem,3.5vw,2.4rem);
  --t-h3:clamp(1.15rem,2vw,1.5rem);
  --t-body:clamp(1rem,1.2vw,1.1rem);
  --t-small:.86rem;
  --t-label:.72rem;
  --t-note:clamp(1.05rem,1.8vw,1.45rem);

  /* Space scale */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
  --gutter:clamp(1.5rem,5vw,6rem);
  --maxw:1180px;

  /* Form */
  --radius:3px;             /* nearly square — paper, not plastic */
  --stroke:2px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ----------------------------------------------------------------- RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit}
img,svg{display:block;max-width:100%}

/* ----------------------------------------------------------- TYPOGRAPHY */
.display{font-family:var(--display);font-optical-sizing:auto;font-weight:700;
  font-size:var(--t-display);line-height:.98;letter-spacing:-.03em}
.h1{font-family:var(--display);font-weight:600;font-size:var(--t-h1);line-height:1;letter-spacing:-.03em}
.h2{font-family:var(--display);font-weight:600;font-size:var(--t-h2);line-height:1.05;letter-spacing:-.02em}
.h3{font-family:var(--display);font-weight:500;font-size:var(--t-h3);line-height:1.1;letter-spacing:-.01em}
.body{font-family:var(--sans);font-weight:300;font-size:var(--t-body);color:var(--ink-70);max-width:62ch}
.small{font-size:var(--t-small);color:var(--ink-70)}
.label{font-family:var(--sans);font-weight:500;font-size:var(--t-label);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.num{font-family:var(--sans);font-weight:500;font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-50)}
.thin{font-weight:300}

/* The hand — Mynerve. Always slightly rotated, never body copy, never long. */
.note{font-family:var(--hand);font-size:var(--t-note);line-height:1.2;color:var(--ink);opacity:.85;display:inline-block}
.note--accent{color:var(--accent);opacity:1}
.note--l{transform:rotate(-4deg)}
.note--r{transform:rotate(3deg)}

/* ------------------------------------------------------------ COMPONENTS */

/* Buttons & links */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:500;
  font-size:.92rem;letter-spacing:.02em;padding:.7rem 1.3rem;border-radius:var(--radius);
  background:var(--ink);color:var(--paper);border:var(--stroke) solid var(--ink);cursor:pointer;
  transition:transform .4s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.btn:hover{transform:translateY(-2px);background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.link{font-family:var(--sans);font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:var(--stroke) solid var(--ink);padding-bottom:1px;transition:border-color .3s var(--ease)}
.link:hover{border-color:var(--accent)}

/* Discipline tags — the four worlds */
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{font-family:var(--sans);font-weight:400;font-size:.78rem;letter-spacing:.04em;
  padding:.32rem .7rem;border:1px solid var(--ink-30);border-radius:100px;color:var(--ink-70)}
.tag--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Hand-drawn divider — a wobbling ink rule */
.rule{width:100%;height:14px;color:var(--ink)}
.rule path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* Annotation — handwritten note + arrow, for pointing at things */
.anno{position:relative;display:inline-flex;align-items:center;gap:.4rem}
.anno svg{width:48px;height:34px;color:var(--ink);flex:none}

/* Work index row */
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1.5rem;
  padding:1.4rem 0;border-bottom:1px solid var(--hair);transition:padding-left .45s var(--ease)}
.row:hover{padding-left:.6rem}
.row__no{font-family:var(--sans);font-weight:500;color:var(--ink-50);font-size:.8rem}
.row__title{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3vw,2.2rem);
  line-height:1.04;letter-spacing:-.02em;transition:color .3s var(--ease)}
.row:hover .row__title{color:var(--accent)}
.row__yr{font-family:var(--sans);color:var(--ink-50);font-size:.84rem}

/* Card / project peak */
.card{background:var(--paper-deep);border-radius:var(--radius);padding:var(--s4);
  border:1px solid var(--hair)}
.card__media{aspect-ratio:4/3;background:
  repeating-linear-gradient(45deg,var(--hair) 0 1px,transparent 1px 14px);
  border:1px solid var(--hair);border-radius:var(--radius);display:grid;place-items:center;margin-bottom:var(--s3)}
.card__media span{font-family:var(--hand);color:var(--ink-50)}

/* Pull quote / statement */
.quote{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,4vw,2.8rem);
  line-height:1.18;letter-spacing:-.02em;max-width:24ch}
.quote em{color:var(--accent);font-style:normal}

/* Form field */
.field{display:flex;flex-direction:column;gap:.4rem;max-width:30rem}
.field label{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.04em}
.field input,.field textarea{font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:transparent;border:none;border-bottom:1.5px solid var(--ink-30);
  padding:.6rem 0;transition:border-color .3s var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-30)}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.nav__links{display:flex;gap:clamp(1rem,2.4vw,2.2rem)}
.nav__links a{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);position:relative;padding-bottom:2px}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1)}

/* Layout helpers */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* Motion */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  *{animation:none!important}
}

/* ----------------------------------------------- SHARED HEADER (every page) */
.logo{position:fixed;top:.9rem;left:var(--gutter);z-index:40;display:flex;align-items:center;gap:.5rem;text-decoration:none}
.logo__mark{width:24px;height:auto;display:block}
.logo .brand{font-family:var(--hand);font-weight:400;letter-spacing:.01em;font-size:1.5rem;
  padding-right:.35em;line-height:1.3;color:var(--ink);overflow:visible}
.nav{position:fixed;top:1.15rem;right:var(--gutter);z-index:40;display:flex;align-items:center;flex-wrap:nowrap;justify-content:flex-end;gap:1.5rem}
.nav a{font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink);opacity:.6;text-decoration:none;transition:opacity .3s}
.nav a:hover,.nav a[aria-current]{opacity:1}
@media(max-width:600px){
  .logo{top:.75rem}.logo__mark{width:21px}.logo .brand{font-size:1.22rem}
  .nav{top:1rem;gap:.95rem}.nav a{font-size:.62rem;letter-spacing:.1em}
}