/* ============================================
   BOHO PAPER THEME — lonemagma
   Palette: Dun, Jasper, Melon, Sage,
            Earth Yellow, Feldgrau, Ash Gray
   ============================================ */

:root {
  /* --- Day: warm paper notebook --- */
  --paper: #E8DDCC;
  --paper-deep: #DDD0B8;
  --paper-light: #F2EDE3;
  --ink: #3A3128;
  --ink-soft: #5C5147;
  --muted: #8B7E6C;
  --line: rgba(58, 49, 40, .18);
  --accent: #C07A4A;          /* Jasper */
  --accent-warm: #D4764E;
  --melon: #D89A91;           /* Melon */
  --sage: #9DC8AB;            /* Sage */
  --earth: #D4A56A;           /* Earth Yellow */
  --dun: #E0D0A8;             /* Dun */
  --soft: rgba(255,255,255,.18);
  --note: rgba(242,237,227,.82);
  --shadow: rgba(58,49,40,.09);
  --shadow-deep: rgba(58,49,40,.14);
  --grain-opacity: .06;
  --serif: "Instrument Serif", Iowan Old Style, Baskerville, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
}

html[data-theme="night"] {
  /* --- Night: deep feldgrau paper --- */
  --paper: #2B3530;
  --paper-deep: #343F3A;
  --paper-light: #3A4640;
  --ink: #E5DBCA;
  --ink-soft: #C8BDA8;
  --muted: #9BA89E;
  --line: rgba(229,219,202,.13);
  --accent: #D49560;          /* warm Jasper on dark */
  --accent-warm: #E0A870;
  --melon: #C48A80;
  --sage: #7AAF8E;
  --earth: #C9A060;
  --dun: #B8A88A;
  --soft: rgba(255,255,255,.04);
  --note: rgba(42,53,48,.88);
  --shadow: rgba(0,0,0,.22);
  --shadow-deep: rgba(0,0,0,.32);
  --grain-opacity: .04;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--paper); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color .5s ease, color .5s ease;
}
body::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---- Paper Grain Overlay ---- */
.paper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,.14) 0 .6px, transparent .8px),
    radial-gradient(circle at 68% 58%, rgba(0,0,0,.11) 0 .55px, transparent .75px),
    radial-gradient(circle at 42% 82%, rgba(0,0,0,.09) 0 .5px, transparent .7px),
    radial-gradient(circle at 85% 15%, rgba(0,0,0,.07) 0 .4px, transparent .6px);
  background-size: 17px 15px, 21px 19px, 27px 29px, 31px 33px;
  transition: opacity .5s ease;
}
html[data-theme="night"] .paper {
  opacity: .035;
  mix-blend-mode: soft-light;
}

/* ---- Scribble Background Layer ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%233A3128' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- dots --%3E%3Ccircle cx='45' cy='32' r='1.2' fill='%233A3128' stroke='none' opacity='.4'/%3E%3Ccircle cx='320' cy='78' r='1' fill='%233A3128' stroke='none' opacity='.3'/%3E%3Ccircle cx='510' cy='42' r='1.5' fill='%233A3128' stroke='none' opacity='.25'/%3E%3Ccircle cx='180' cy='520' r='1.3' fill='%233A3128' stroke='none' opacity='.35'/%3E%3Ccircle cx='440' cy='310' r='1' fill='%233A3128' stroke='none' opacity='.3'/%3E%3Ccircle cx='90' cy='280' r='1.4' fill='%233A3128' stroke='none' opacity='.2'/%3E%3Ccircle cx='560' cy='540' r='1.1' fill='%233A3128' stroke='none' opacity='.3'/%3E%3C!-- short dashes --%3E%3Cpath d='M60 110l18 8' stroke-width='1.4' opacity='.3'/%3E%3Cpath d='M250 45l22-6' stroke-width='1.2' opacity='.25'/%3E%3Cpath d='M420 160l15 10' stroke-width='1.3' opacity='.2'/%3E%3Cpath d='M130 390l20-4' stroke-width='1.4' opacity='.25'/%3E%3Cpath d='M480 480l-16 9' stroke-width='1.2' opacity='.3'/%3E%3Cpath d='M350 240l12 14' stroke-width='1.1' opacity='.2'/%3E%3C!-- cross marks --%3E%3Cpath d='M170 155l10 10M180 155l-10 10' stroke-width='1.2' opacity='.2'/%3E%3Cpath d='M460 90l8 8M468 90l-8 8' stroke-width='1.1' opacity='.25'/%3E%3Cpath d='M80 470l9 9M89 470l-9 9' stroke-width='1.2' opacity='.2'/%3E%3C!-- tiny circles --%3E%3Ccircle cx='370' cy='130' r='5' stroke-width='1.2' opacity='.15'/%3E%3Ccircle cx='520' cy='260' r='4' stroke-width='1.1' opacity='.18'/%3E%3Ccircle cx='110' cy='200' r='6' stroke-width='1' opacity='.12'/%3E%3Ccircle cx='290' cy='440' r='4.5' stroke-width='1.1' opacity='.15'/%3E%3C!-- wobbly curves (notebook marginalia) --%3E%3Cpath d='M30 340c15-12 35-5 50 8' stroke-width='1.3' opacity='.22'/%3E%3Cpath d='M380 380c12-8 30-2 42 10' stroke-width='1.2' opacity='.2'/%3E%3Cpath d='M200 80c10-15 30-12 42-2' stroke-width='1.3' opacity='.18'/%3E%3Cpath d='M500 400c-10-12-28-8-38 4' stroke-width='1.1' opacity='.22'/%3E%3C!-- zigzag --%3E%3Cpath d='M240 190l8-10 8 10 8-10' stroke-width='1.1' opacity='.18'/%3E%3Cpath d='M50 530l7-8 7 8 7-8' stroke-width='1' opacity='.2'/%3E%3C!-- small arrow --%3E%3Cpath d='M340 490l12-8M352 482l-3-8' stroke-width='1.2' opacity='.2'/%3E%3Cpath d='M550 150l-10 6M540 156l3 8' stroke-width='1.1' opacity='.22'/%3E%3C!-- spiral hint --%3E%3Cpath d='M450 50c5 0 8 4 8 8s-4 7-8 7-7-3-7-6' stroke-width='1' opacity='.15'/%3E%3Cpath d='M150 480c4 0 6 3 6 6s-3 5-6 5-5-2-5-4' stroke-width='1' opacity='.18'/%3E%3C!-- underline squiggle --%3E%3Cpath d='M300 340c5 3 12 3 17 0s12-3 17 0' stroke-width='1.2' opacity='.2'/%3E%3Cpath d='M60 240c4 2 10 2 14 0s10-2 14 0' stroke-width='1.1' opacity='.18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 600px 600px;
}
html[data-theme="night"] body::after {
  opacity: .02;
}

/* ---- Warm page gradient (subtle paper shadow) ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--paper) 100%, transparent) 0%,
    color-mix(in srgb, var(--paper) 92%, var(--paper-deep) 8%) 50%,
    color-mix(in srgb, var(--paper) 88%, var(--paper-deep) 12%) 100%
  );
}

/* ---- Layout ---- */
.page {
  width: min(100% - 40px, 980px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* ---- Topbar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 4px;
  font-size: 12px;
  letter-spacing: .02em;
}
.wordmark { color: var(--ink); text-decoration: none; font-size: 22px; font-family: var(--hand); font-weight: 700; letter-spacing: .02em; }
.wordmark .dot { color: var(--accent); }
.mode-wrap { position: relative; display: flex; align-items: center; gap: 9px; }
.mode-note { color: var(--muted); font-family: var(--hand); font-size: 18px; white-space: nowrap; }
.mode-arrow { width: 120px; height: 54px; color: var(--accent); overflow: visible; }
.mode-arrow .ink, .mode-arrow .arrow-head { stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.mode-toggle {
  appearance: none;
  width: 43px; height: 43px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: var(--soft);
  border-radius: 52% 48% 53% 47%;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform .25s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mode-toggle:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: 3px 4px 0 var(--shadow); }
.theme-icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s ease, transform .35s ease; }
.theme-icon.icon-moon { display: none; }
html[data-theme="night"] .theme-icon.icon-sun { display: none; }
html[data-theme="night"] .theme-icon.icon-moon { display: block; }

/* ---- Hero ---- */
.hero-footnote {
  margin: 16px 0 0 9px;
  color: var(--muted);
  font-family: var(--hand);
  font-size: 16px;
  line-height: 1;
}
.hero-footnote span { color: var(--accent); margin-right: 5px; }

.hero {
  min-height: 78vh;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 8vw;
  align-items: center;
  padding: 5vh 2vw 10vh;
}
.hero-copy { max-width: 660px; }
.eyebrow, .section-label, .small-note, .index-mark, .footer, .annotation { font-family: var(--sans); }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 18px; }
.scribble-star { color: var(--accent); font-size: 16px; margin-right: 7px; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(62px, 8vw, 108px); font-weight: 400; line-height: .88; letter-spacing: -.04em; }
.name-mark { position: relative; display: inline-block; }
.name-mark::after { content: ""; position: absolute; left: 1%; right: -3%; bottom: -10px; height: 16px; border-bottom: 3px solid var(--accent); border-radius: 50%; transform: rotate(-2deg); }
.period { color: var(--accent); }
.lede { margin: 32px 0 26px 8px; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.04; color: var(--ink-soft); }
.hero-actions, .contact-actions { display: flex; flex-wrap: wrap; gap: 13px; }

/* ---- Sketch Buttons (boho paper tabs) ---- */
.sketch-btn {
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid color-mix(in srgb, var(--ink) 50%, transparent);
  border-radius: 9px 7px 11px 8px;
  padding: 10px 15px 9px;
  font-size: 12px;
  position: relative;
  background: var(--soft);
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.sketch-btn::after {
  content: "";
  position: absolute; inset: 3px -2px -2px 3px;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 10px 8px 7px 9px;
  pointer-events: none;
}
.hero-actions .sketch-btn:nth-child(1), .contact-actions .sketch-btn:nth-child(1) { transform: rotate(-1.2deg); }
.hero-actions .sketch-btn:nth-child(2), .contact-actions .sketch-btn:nth-child(2) { transform: rotate(.8deg); }
.hero-actions .sketch-btn:nth-child(3), .contact-actions .sketch-btn:nth-child(3) { transform: rotate(-.7deg); }
.sketch-btn:hover {
  transform: translateY(-3px) rotate(-.35deg);
  box-shadow: 3px 5px 0 var(--shadow-deep);
  background: color-mix(in srgb, var(--paper) 82%, var(--accent) 8%);
  border-color: var(--accent);
}
.sketch-btn span { color: var(--accent); margin-left: 5px; }

/* ---- Hero Doodle ---- */
.hero-doodle { position: relative; max-width: 360px; justify-self: end; }
.hero-supplied-art { width: 100%; display: block; border-radius: 8px; }
.hero-fallback { width: 100%; display: block; }
.hero-doodle .hero-supplied-art[hidden] + .hero-fallback { display: block; }
.hero-supplied-art:not([hidden]) + .hero-fallback { display: none; }
.ink { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ink.thin { stroke-width: 2.2; }
.paper-fill { fill: color-mix(in srgb, var(--paper) 88%, transparent); stroke: currentColor; stroke-width: 3; }
.doodle-text { font-family: var(--hand); font-size: 18px; }
.doodle-note { font-family: var(--hand); font-size: 22px; line-height: 1.05; position: absolute; right: -6px; bottom: 0; color: var(--muted); }

/* ---- Sections ---- */
.section-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 36px;
  padding: 80px 4vw;
  border-top: 1px solid var(--line);
  position: relative;
}
.section-label { font-size: 14px; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); padding-top: 9px; }
.making-label { font-family: var(--hand); text-transform: none; letter-spacing: .01em; color: var(--ink); font-size: 31px; line-height: .9; }
.project-label { max-width: 680px; line-height: 1.35; font-size: 18px; }
.project-label a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); transition: color .2s; }
.project-label a:hover { color: var(--accent); }
.section-body { max-width: 700px; }
.about-body p { margin: 0 0 20px; font-size: 15px; color: var(--ink-soft); }
.annotation { color: var(--muted); font-size: 12px; max-width: 520px; font-style: italic; }
.things-line { font-family: var(--serif); font-size: clamp(27px, 3.5vw, 44px); line-height: 1.1; }
.things-line i { color: var(--accent); font-style: normal; margin: 0 .16em; }
.big-scribble { font-family: var(--hand); font-size: 28px; margin: 28px 0 0 6vw; color: var(--ink-soft); }
.big-scribble em { color: var(--accent); font-style: normal; }

/* ---- Projects ---- */
.projects { padding: 80px 4vw 60px; border-top: 1px solid var(--line); }
.projects-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.small-note { color: var(--muted); font-size: 17px; margin: 8px 0 0; font-family: var(--hand); }
.index-mark { color: var(--accent); font-size: 21px; }
.project-stack { display: grid; gap: 18px; }

/* ---- Project Note Card (paper card style) ---- */
.project-note {
  min-height: 220px;
  position: relative;
  padding: 34px 38px 36px 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 30px;
  align-items: center;
  background: var(--note);
  box-shadow:
    4px 6px 0 var(--shadow),
    8px 10px 0 var(--shadow-deep);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 4px 6px 8px 5px;
  transition: transform .3s ease, box-shadow .3s ease, background-color .4s ease;
}
.project-note::before {
  content: "";
  position: absolute; inset: 5px 4px 3px 3px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 3px 5px 6px 4px;
  pointer-events: none;
}
.project-note:hover {
  transform: translateY(-2px) rotate(-.3deg);
  box-shadow: 5px 8px 0 var(--shadow), 10px 14px 0 var(--shadow-deep);
}

/* Washi tape accent on card */
.project-note::after {
  content: "";
  position: absolute;
  top: -6px; left: 30px;
  width: 60px; height: 14px;
  background: var(--melon);
  opacity: .4;
  border-radius: 1px;
  transform: rotate(-1.5deg);
}

.note-1 { border-radius: 3px 8px 5px 10px; }
.note-number { position: absolute; left: 18px; top: 18px; font-size: 12px; color: var(--accent); font-family: var(--hand); }
.note-copy h2 { font-family: var(--serif); font-weight: 400; font-size: 38px; margin: 0 0 11px; line-height: .95; }
.note-copy p { margin: 0 0 21px; max-width: 510px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.note-link, .outline-link { color: var(--ink); font-size: 12px; text-decoration: none; border-bottom: 1px solid var(--muted); padding-bottom: 3px; transition: color .2s, border-color .2s; }
.note-link span, .outline-link span { color: var(--accent); margin-left: 4px; }
.note-link:hover, .outline-link:hover { color: var(--accent); border-color: var(--accent); }
.note-icon { width: 130px; height: 130px; opacity: .6; }
.note-smiley { transform: none; }
.smiley-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; transform-box: fill-box; transform-origin: center; }
.pacify-note:hover .face-outline { transform: rotate(-2deg); }
.pacify-note:hover .eye-right { d: path("M60 46c2 1 4 1 5-1"); }
.pacify-note:hover .smile-curve { transform: scale(1.05); }
.outline-link { display: inline-block; margin-top: 29px; }

/* ---- Statement (paper banner) ---- */
.statement {
  position: relative;
  padding: 80px 10vw 90px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--melon) 8%, transparent) 0%,
    color-mix(in srgb, var(--earth) 5%, transparent) 50%,
    color-mix(in srgb, var(--sage) 4%, transparent) 100%
  );
}
.statement p {
  font-family: var(--hand);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.02em;
}
.statement p span {
  font-style: italic;
  color: var(--accent);
  display: inline-block;
  position: relative;
}
.statement p span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  opacity: .3;
  border-radius: 50%;
}

/* ---- Contact ---- */
.doodle-arrow { width: 190px; position: absolute; right: 7vw; top: 44px; }
.contact { border-top: none; padding-top: 80px; }
.contact-body > p:first-child { font-family: var(--serif); font-size: 28px; margin: 0 0 23px; }
.contact-actions { margin-bottom: 20px; }


/* ---- Footer ---- */
.footer {
  border-top: 1px solid var(--line);
  padding: 45px 4vw 25px;
  font-size: 11px;
  color: var(--muted);
  position: relative;
}
.footer-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; }
.bottom-note { font-family: var(--hand); font-size: 18px; color: var(--ink-soft); }
.footer-signoff {
  margin-top: 28px;
  font-family: var(--hand);
  font-size: 18px;
  color: var(--muted);
}
.footer-wave {
  display: inline-block;
  animation: wave-hand 1.5s ease-in-out infinite;
  transform-origin: 70% 70%;
}
@keyframes wave-hand {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-8deg); }
  45% { transform: rotate(14deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(10deg); }
}

/* ---- Focus ---- */
a:focus-visible, button:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 5px;
}

/* ---- Responsive ---- */
@media (max-width: 780px) {
  .page { width: min(100% - 26px, 980px); }
  .topbar { padding-top: 18px; }
  .mode-note, .mode-arrow { display: none; }
  .hero-footnote { font-size: 16px; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding: 10vh 4vw 12vh; gap: 50px; }
  h1 { font-size: clamp(56px, 16vw, 96px); }
  .hero-doodle { max-width: 320px; width: 75%; justify-self: center; }
  .section-grid { grid-template-columns: 1fr; gap: 20px; padding: 60px 4vw; }
  .making-label { width: max-content; }
  .projects { padding: 60px 4vw 44px; }
  .project-note { grid-template-columns: 1fr; padding: 40px 26px 30px 55px; }
  .note-icon { position: absolute; width: 82px; height: 82px; right: 15px; top: 15px; opacity: .18; }
  .note-copy h2 { font-size: 34px; padding-right: 70px; }
  .statement { padding: 60px 5vw 70px; }
  .statement p { font-size: clamp(28px, 10vw, 52px); }
  .doodle-arrow { width: 120px; right: 3vw; top: 36px; }
  .footer-copy, .footer-bottom { flex-direction: column; gap: 8px; }
}


/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}