/* ==========================================================================
   LUCID SKETCHER — sketchbook layer
   Progressive-enhancement stylesheet loaded after styles.css.
   Everything here is additive: if this file fails to load, the site
   underneath (styles.css) is already a complete, working experience.
   ========================================================================== */

:root {
  --hand: "Caveat", "Segoe Script", cursive;
  --page-turn-ms: 560ms;
}

html, body { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   1. Marginalia navigation
   Restyles the existing real <a href> nav into handwritten corner notes.
   No markup changes — pure CSS re-skin + attribute-selector glyphs.
   -------------------------------------------------------------------------- */
.desktop-nav a,
.menu-contents a,
.site-footer nav a {
  font-family: var(--hand);
}

.desktop-nav {
  gap: clamp(20px, 2.4vw, 44px);
}
.desktop-nav a {
  position: relative;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink);
  transform: rotate(var(--tilt, -1.2deg));
  display: inline-block;
}
.desktop-nav a:nth-child(2n) { --tilt: 1.4deg; }
.desktop-nav a:nth-child(3n) { --tilt: -0.6deg; }
.desktop-nav a::after {
  font-family: var(--hand);
  margin-left: 4px;
  opacity: .75;
}
.desktop-nav a[href="work.html"]::after       { content: "\2192"; }      /* → */
.desktop-nav a[href="about.html"]::after      { content: "\21b4"; }      /* ↴ */
.desktop-nav a[href="prints.html"]::after     { content: "\2727"; }      /* ✧ */
.desktop-nav a[href="tools.html"]::after      { content: "\270e"; }      /* ✎ */
.desktop-nav a[href="commission.html"]::after { content: "\270d"; }      /* ✍ */

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  opacity: 1;
  transform: rotate(0deg) translateY(-1px);
}
.desktop-nav a[aria-current="page"] { text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 4px; text-decoration-color: var(--rule); }

.menu-contents a {
  font: 400 clamp(2.6rem, 6.4vw, 5.8rem)/1 var(--hand);
  letter-spacing: 0;
}
.menu-contents span { font-family: var(--sans); }

.site-footer nav a { font-size: 15px; }

/* --------------------------------------------------------------------------
   2. Opening sequence (homepage only)
   Hidden by default. Only ever revealed by JS, and only when JS is running,
   motion is not reduced, and the intro hasn't played yet this session.
   That means: no-JS and reduced-motion users never see this element at all.
   -------------------------------------------------------------------------- */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}
.intro-overlay.is-playing { visibility: visible; opacity: 1; pointer-events: auto; }
.intro-overlay.is-leaving { animation: introLift 720ms var(--ease) forwards; }
@keyframes introLift { to { opacity: 0; transform: translateY(-4%); visibility: hidden; } }

.intro-hand { width: min(74vw, 560px); height: auto; overflow: visible; }
.intro-hand path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.intro-overlay.is-playing .intro-hand path { animation: introDraw 1500ms ease-out forwards; }
@keyframes introDraw { to { stroke-dashoffset: 0; } }

.intro-bleed {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(32,33,30,.05), transparent 62%);
  opacity: 0;
}
.intro-overlay.is-playing .intro-bleed { animation: introBleed 900ms ease-out 700ms forwards; }
@keyframes introBleed { to { opacity: 1; } }

body.intro-lock { overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Page-turn transition overlay
   Purely visual layer injected by JS on top of real navigation. If JS is
   absent, this element is never created and links behave exactly as before.
   -------------------------------------------------------------------------- */
.page-turn-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}
.page-turn-leaf {
  position: absolute;
  inset: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(32,33,30,.06), transparent 14%),
    var(--paper-light);
  will-change: transform, opacity;
}
.page-turn-overlay.is-active { visibility: visible; }
.page-turn-overlay.is-active .page-turn-leaf { animation: pageTurnIn var(--page-turn-ms) var(--ease) forwards; }
@keyframes pageTurnIn {
  0%   { transform: scaleX(0); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}
.page-turn-overlay.is-entering { visibility: visible; }
.page-turn-overlay.is-entering .page-turn-leaf { transform: scaleX(1); opacity: 1; }
.page-turn-overlay.is-settling .page-turn-leaf { animation: pageTurnOut 480ms var(--ease) forwards; }
@keyframes pageTurnOut {
  0%   { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   4. Ink-outline hover draw (CSS-only; no markup changes)
   -------------------------------------------------------------------------- */
.square-grid figure,
.print-artwork,
.book-artwork,
.sketch-page .artwork-trigger {
  position: relative;
}
.square-grid figure::after,
.print-work .print-artwork::after,
.book-artwork::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid var(--ink);
  opacity: 0;
  transform: scale(.985);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  pointer-events: none;
}
.square-grid figure:hover::after,
.square-grid figure:focus-within::after,
.print-work:hover .print-artwork::after,
.print-artwork:focus-visible::after,
.book-artwork:hover::after,
.book-artwork:focus-visible::after {
  opacity: .55;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   5. Responsive ink grain (cursor-reactive)
   Canvas is injected by JS; pointer-events:none so it never blocks input.
   Skipped entirely on touch devices, reduced motion, and the commission page.
   -------------------------------------------------------------------------- */
.ink-grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .05;
}
body.commission-request-page .ink-grain { display: none; }

/* --------------------------------------------------------------------------
   6. Extreme scale contrast utility (atlas captions, place names)
   -------------------------------------------------------------------------- */
.giant-crop {
  font: 400 clamp(5.5rem, 15vw, 13rem)/.82 var(--serif);
  letter-spacing: -.03em;
  white-space: nowrap;
}
.tiny-note {
  font: 400 clamp(13px, 1.1vw, 15px)/1.5 var(--hand);
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   7. Atlas sequence (homepage centerpiece)
   -------------------------------------------------------------------------- */
.atlas {
  position: relative;
  background: var(--paper-light);
}
.atlas-scroll {
  position: relative;
}
.atlas.js-enhanced .atlas-scroll {
  height: calc(var(--atlas-steps, 5) * 100svh);
}
.atlas-stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .atlas.js-enhanced .atlas-stage { position: sticky; top: 0; }
}
.atlas-map-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.atlas-map {
  width: min(120vw, 1400px);
  height: auto;
  transition: transform 700ms var(--ease);
  transform: translate(var(--atlas-x, 0), var(--atlas-y, 0)) scale(var(--atlas-scale, 1));
}
.atlas-map .atlas-route { fill: none; stroke: var(--graphite); stroke-width: 1.4; stroke-dasharray: 6 8; opacity: .5; }
.atlas-map .atlas-contour { fill: none; stroke: var(--rule); stroke-width: 1; }
.atlas-map .atlas-pin { fill: var(--ink); transition: r 400ms var(--ease); }
.atlas-map .atlas-pin-ring { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0; transition: opacity 400ms var(--ease), r 400ms var(--ease); }
.atlas-map .atlas-pin-label {
  font: 500 11px/1 var(--sans);
  letter-spacing: .08em;
  fill: var(--graphite);
  opacity: .55;
}
.atlas-pin[data-active="true"] .atlas-pin-ring,
.atlas-map [data-pin-active="true"] .atlas-pin-ring { opacity: 1; }

.atlas-stage .atlas-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  align-content: center;
  pointer-events: none;
}
.atlas-frame {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}
.atlas-caption {
  grid-column: 1 / 8;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  pointer-events: none;
}
.atlas-caption.is-current { opacity: 1; transform: none; pointer-events: auto; }
.atlas-caption .giant-crop { display: block; margin-left: -.04em; }
.atlas-caption .tiny-note { display: block; margin-top: 14px; }
.atlas-sketch {
  grid-column: 9 / 13;
  justify-self: end;
  width: min(38vw, 320px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 22px 48px -18px rgba(32,33,30,.28);
  opacity: 0;
  transform: scale(.9) translateY(10px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.atlas-sketch.is-current { opacity: 1; transform: none; }
.atlas-sketch img { width: 100%; height: 100%; object-fit: cover; }

.atlas-progress {
  position: absolute;
  z-index: 2;
  left: var(--page-pad);
  bottom: 28px;
  display: flex;
  gap: 8px;
}
.atlas-progress span { width: 20px; height: 2px; background: var(--rule); transition: background-color 300ms ease; }
.atlas-progress span.is-current { background: var(--ink); }

.atlas-label {
  position: absolute;
  z-index: 2;
  left: var(--page-pad);
  top: clamp(24px, 4vw, 48px);
  font: 500 10px/1 var(--sans);
  letter-spacing: .18em;
  color: var(--graphite);
}

/* Reduced motion / non-enhanced fallback: a plain readable stacked list,
   no pinning, no map choreography — everything is simply in-flow.
   Two triggers land on the same fallback layout:
   (a) JS never added .js-enhanced (no JS, or JS opted out)
   (b) prefers-reduced-motion: reduce, even if .js-enhanced was added */
.atlas:not(.js-enhanced) .atlas-stage {
  position: static; height: auto; display: block; overflow: visible; padding: clamp(90px, 10vw, 140px) 0;
}
.atlas:not(.js-enhanced) .atlas-map-wrap,
.atlas:not(.js-enhanced) .atlas-progress,
.atlas:not(.js-enhanced) .atlas-label { display: none; }
.atlas:not(.js-enhanced) .atlas-frame { position: static; display: block; padding: 0 var(--page-pad); }
.atlas:not(.js-enhanced) .atlas-caption,
.atlas:not(.js-enhanced) .atlas-sketch { opacity: 1 !important; transform: none !important; pointer-events: auto; }

.atlas-static-row { display: none; }
.atlas:not(.js-enhanced) .atlas-static-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid var(--rule);
}
.atlas:not(.js-enhanced) .atlas-static-row:first-of-type { border-top: none; }

@media (prefers-reduced-motion: reduce) {
  .atlas .atlas-stage { position: static; height: auto; display: block; overflow: visible; padding: clamp(90px, 10vw, 140px) 0; }
  .atlas .atlas-map-wrap,
  .atlas .atlas-progress,
  .atlas .atlas-label { display: none; }
  .atlas .atlas-frame { position: static; display: block; padding: 0 var(--page-pad); }
  .atlas .atlas-caption,
  .atlas .atlas-sketch { opacity: 1 !important; transform: none !important; pointer-events: auto; position: static !important; grid-column: auto !important; }
  .atlas .atlas-static-row {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    padding: clamp(36px, 5vw, 64px) 0;
    border-top: 1px solid var(--rule);
  }
  .atlas .atlas-static-row:first-of-type { border-top: none; }
}

/* --------------------------------------------------------------------------
   8. Commission page — the quiet room
   Strip motion and texture back almost entirely.
   -------------------------------------------------------------------------- */
body.commission-request-page .reveal { transition: none; opacity: 1; transform: none; }
body.commission-request-page .square-grid figure::after,
body.commission-request-page .print-artwork::after,
body.commission-request-page .book-artwork::after { display: none; }
body.commission-request-page .desktop-nav a,
body.commission-request-page .menu-contents a { transform: none; }

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .atlas-frame { grid-template-columns: 1fr; text-align: left; padding: 0 var(--page-pad); }
  .atlas-caption { grid-column: 1 / -1; }
  .atlas-sketch { grid-column: 1 / -1; justify-self: start; width: min(60vw, 260px); margin-top: 22px; }
  .atlas-map { width: 160vw; }
}
@media (max-width: 560px) {
  .menu-contents a { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .atlas-sketch { width: min(70vw, 240px); }
  .giant-crop { font-size: clamp(3.6rem, 17vw, 6rem); }
}