/* LUCID SKETCHER — shared editorial system */
:root {
  --paper: #f3f0e8;
  --paper-light: #faf8f2;
  --ink: #20211e;
  --graphite: #74746d;
  --rule: rgba(32, 33, 30, 0.16);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --page-pad: clamp(20px, 4vw, 72px);
  --content-max: 1680px;
  --text-max: 620px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); }
body.menu-open { overflow: hidden; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
figure, h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { border: 0; color: inherit; font: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 10px 14px; background: var(--ink); color: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  position: fixed; z-index: 80; top: 0; left: 50%; width: 100%; max-width: var(--content-max);
  height: 76px; padding: 0 var(--page-pad); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color 260ms ease, border-color 260ms ease;
}
.site-header::before { content: ""; position: fixed; z-index: -1; inset: 0 calc((100vw - 100%)/-2); background: transparent; border-bottom: 1px solid transparent; transition: inherit; }
.site-header.is-condensed::before { background: rgba(243,240,232,.97); border-color: var(--rule); }
.wordmark, .menu-toggle, .desktop-nav a { font-size: 11px; font-weight: 600; letter-spacing: .15em; }
.menu-toggle { min-width: 54px; min-height: 44px; padding: 0; background: transparent; cursor: pointer; }
.desktop-nav { display: flex; align-items: center; gap: clamp(22px, 2.2vw, 38px); opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity 240ms ease, transform 240ms ease, visibility 240ms; }
.site-header.is-condensed .desktop-nav { opacity: 1; visibility: visible; transform: none; }
.site-header.is-condensed .menu-toggle { display: none; }
.desktop-nav a, .text-link, .site-footer a { transition: opacity 180ms ease; }
.desktop-nav a:hover, .text-link:hover, .site-footer nav a:hover { opacity: .55; }

.site-menu { position: fixed; z-index: 120; inset: 0; background: var(--paper); padding: 0 var(--page-pad) var(--page-pad); }
.site-menu[hidden] { display: none; }
.menu-bar { height: 76px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: .15em; }
.menu-close { min-width: 64px; min-height: 44px; padding: 0; background: transparent; cursor: pointer; }
.menu-contents { width: min(100%, 920px); margin: clamp(6vh, 12vh, 140px) auto 0; border-top: 1px solid var(--rule); }
.menu-contents a { display: grid; grid-template-columns: 54px 1fr; align-items: baseline; min-height: 84px; padding: 16px 0; border-bottom: 1px solid var(--rule); font: 400 clamp(2.5rem, 6vw, 5.5rem)/1 var(--serif); }
.menu-contents span { font: 500 10px/1 var(--sans); letter-spacing: .12em; color: var(--graphite); }

.hero { position: relative; max-width: var(--content-max); min-height: 100svh; margin: 0 auto; padding: 96px var(--page-pad) 42px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr auto; column-gap: clamp(16px, 2vw, 32px); align-items: center; }
.hero-identity { grid-column: 1 / 4; align-self: start; margin-top: 18vh; font-size: 10px; line-height: 1.7; letter-spacing: .14em; color: var(--graphite); }
.hero-media { position: relative; grid-column: 6 / 11; grid-row: 1 / 3; justify-self: center; height: min(78vh, 800px); aspect-ratio: 9 / 16; overflow: hidden; background: var(--paper-light); }
.hero-media video, .hero-fallback { width: 100%; height: 100%; object-fit: cover; }
.hero-fallback { position: absolute; inset: 0; opacity: 0; }
.hero.video-failed .hero-fallback, .hero.is-reduced .hero-fallback { opacity: 1; }
.hero.video-failed video, .hero.is-reduced video { visibility: hidden; }
.hero-copy { grid-column: 1 / 6; grid-row: 2; align-self: end; padding-bottom: 2vh; opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.hero.is-resolved .hero-copy { opacity: 1; transform: none; }
.hero h1 { font: 400 clamp(2.7rem, 4.5vw, 5.1rem)/.98 var(--serif); letter-spacing: -.035em; }
.scroll-cue { position: absolute; right: var(--page-pad); bottom: 42px; display: flex; gap: 18px; font-size: 9px; letter-spacing: .16em; color: var(--graphite); opacity: 0; transition: opacity 500ms ease 500ms; }
.hero.is-resolved .scroll-cue { opacity: 1; }

.movement { max-width: var(--content-max); margin: 0 auto; padding: clamp(110px, 14vw, 220px) var(--page-pad); }
.section-header { margin-bottom: clamp(64px, 9vw, 140px); }
.section-label, .concept-label { font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--graphite); }
.text-link { display: inline-flex; gap: 10px; align-items: center; padding: 10px 0 5px; border-bottom: 1px solid var(--rule); font-size: 13px; }
.section-path { margin-top: clamp(70px, 9vw, 140px); }

.places-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.places-grid img { width: 100%; }
.place-a { grid-column: 1 / 10; }
.place-b { grid-column: 10 / 13; margin-top: 18vw; }
.place-c { grid-column: 1 / 7; margin-top: 12vw; }
.place-d { grid-column: 6 / 13; margin-top: 20vw; }

.sketcher { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
.sketcher-primary { grid-column: 1 / 7; }
.sketcher-primary img, .sketcher-detail img { width: 100%; }
.sketcher-copy { grid-column: 8 / 13; padding-top: clamp(20px, 6vw, 100px); }
.sketcher-copy h2 { max-width: 620px; margin: 30px 0 28px; font: 400 clamp(2.6rem, 4.2vw, 4.8rem)/1.02 var(--serif); letter-spacing: -.025em; }
.sketcher-copy > p:not(.section-label) { max-width: 48ch; margin-bottom: 28px; color: var(--graphite); }
.sketcher-detail { grid-column: 8 / 11; margin-top: -7vw; transform: translateX(-3vw); }

.shop { background: var(--paper-light); max-width: none; }
.shop > * { max-width: calc(var(--content-max) - 2 * var(--page-pad)); margin-left: auto; margin-right: auto; }
.shop-layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
.shop-layout img { width: 100%; }
.shop-lead { grid-column: 1 / 8; }
.shop-secondary { grid-column: 9 / 13; margin-top: 10vw; }
.shop-tertiary { grid-column: 6 / 10; margin-top: 11vw; }

.commission { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 32px); align-items: center; }
.commission-copy { grid-column: 1 / 6; }
.concept-label { margin-top: 28px; color: var(--ink); }
.commission-copy h2 { margin: 30px 0 34px; font: 400 clamp(3rem, 5vw, 5.8rem)/.98 var(--serif); letter-spacing: -.03em; }
.commission-lines { margin-bottom: 30px; color: var(--graphite); }
.commission-art { grid-column: 7 / 13; }
.commission-art img { width: 100%; }

.closing { min-height: 72svh; display: grid; place-items: center; text-align: center; }
.closing h2 { max-width: 980px; font: 400 clamp(3.1rem, 6.5vw, 7rem)/1 var(--serif); letter-spacing: -.035em; }
.site-footer { max-width: var(--content-max); min-height: 180px; margin: 0 auto; padding: 32px var(--page-pad); border-top: 1px solid var(--rule); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer nav a { font-size: 12px; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  .hero { min-height: 100svh; grid-template-columns: repeat(8, 1fr); }
  .hero-identity { grid-column: 1 / 3; }
  .hero-media { grid-column: 4 / 9; }
  .hero-copy { grid-column: 1 / 5; }
  .places-grid { grid-template-columns: repeat(8, 1fr); }
  .place-a { grid-column: 1 / 7; } .place-b { grid-column: 6 / 9; } .place-c { grid-column: 1 / 7; } .place-d { grid-column: 3 / 9; }
  .sketcher-primary { grid-column: 1 / 8; } .sketcher-copy { grid-column: 8 / 13; } .sketcher-detail { grid-column: 8 / 12; }
}
@media (max-width: 767px) {
  .site-header { height: 64px; }
  .desktop-nav { display: none; }
  .site-header.is-condensed .menu-toggle { display: block; }
  .menu-bar { height: 64px; }
  .menu-contents { margin-top: 8vh; }
  .menu-contents a { min-height: 74px; font-size: clamp(2.5rem, 13vw, 4.5rem); }

  .hero { min-height: 108svh; padding-top: 78px; padding-bottom: 70px; display: flex; flex-direction: column; align-items: stretch; }
  .hero-identity { display: none; }
  .hero-media { width: min(86vw, 390px); height: auto; aspect-ratio: 9 / 16; margin: 0 0 0 auto; }
  .hero-copy { margin-top: 36px; padding: 0; }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 4.2rem); }
  .scroll-cue { right: auto; left: var(--page-pad); bottom: 24px; }

  .movement { padding-top: 110px; padding-bottom: 110px; }
  .section-header { margin-bottom: 58px; }
  .places-grid { display: flex; flex-direction: column; }
  .place-a { width: 100%; }
  .place-b { width: 74%; margin: 78px 0 0 auto; }
  .place-c { width: 92%; margin: 112px auto 0 0; }
  .place-d { width: 100%; margin: 86px 0 0; }
  .section-path { margin-top: 66px; }

  .sketcher { display: flex; flex-direction: column; }
  .sketcher-primary { width: 92%; }
  .sketcher-copy { padding-top: 66px; }
  .sketcher-copy h2 { margin-top: 24px; font-size: clamp(2.65rem, 12vw, 4rem); }
  .sketcher-detail { width: 68%; margin: 72px 0 0 auto; transform: translateX(-4vw); }

  .shop > * { max-width: none; }
  .shop-layout { display: flex; flex-direction: column; gap: 0; }
  .shop-lead { width: 100%; }
  .shop-secondary { width: 78%; margin: 82px 0 0 auto; }
  .shop-tertiary { width: 88%; margin: 96px auto 0 0; }

  .commission { display: flex; flex-direction: column; align-items: stretch; }
  .commission-copy { display: contents; }
  .commission-copy .section-label { order: 1; }
  .concept-label { order: 2; margin-top: 20px; }
  .commission-art { order: 3; margin-top: 48px; }
  .commission-copy h2 { order: 4; margin: 52px 0 28px; font-size: clamp(3rem, 13vw, 4.4rem); }
  .commission-lines { order: 5; }
  .commission-copy .text-link { order: 6; align-self: flex-start; }

  .closing { min-height: 65svh; }
  .site-footer { min-height: 210px; align-items: flex-start; flex-direction: column; justify-content: flex-end; }
}
@media (min-width: 1600px) {
  .hero-media { height: min(80vh, 860px); }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .hero { padding-top: 82px; padding-bottom: 24px; }
  .hero-media { height: min(76vh, 620px); }
  .hero-identity { margin-top: 12vh; }
  .hero h1 { font-size: clamp(2.8rem, 4vw, 4.4rem); }
  .scroll-cue { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .hero-copy, .scroll-cue { opacity: 1; transform: none; }
}

/* Production revision: resolved hero, section routing, and confirmed social destination */
.hero-identity {
  margin-top: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.hero.is-resolved .hero-identity { opacity: 1; transform: none; }
.hero-media video, .hero-fallback { object-fit: cover; }
.hero-fallback {
  transition: opacity 320ms ease;
  pointer-events: none;
}
.hero.is-resolved .hero-fallback,
.hero.video-failed .hero-fallback,
.hero.is-reduced .hero-fallback { opacity: 1; }
.hero.is-resolved video,
.hero.video-failed video,
.hero.is-reduced video { visibility: hidden; }

.footer-links { display: flex; align-items: flex-end; gap: clamp(28px, 4vw, 64px); }
.instagram-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; }
.instagram-link svg { flex: 0 0 auto; }
.site-footer a:hover { opacity: .55; }

@media (min-width: 768px) {
  .hero-media { height: min(82vh, 840px); }
  .hero-identity { align-self: start; margin-top: 18vh; }
}

@media (max-width: 767px) {
  .site-header .wordmark {
    opacity: 0;
    transition: opacity 400ms ease;
  }
  .hero-resolved .site-header .wordmark,
  .menu-open .site-header .wordmark { opacity: 1; }

  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 0 0 64px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: start;
  }
  .hero-media {
    grid-row: 1;
    width: min(100vw, calc(100svh * 0.88 * 9 / 16));
    width: min(100vw, calc(100dvh * 0.88 * 9 / 16));
    height: auto;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    overflow: hidden;
    background: transparent;
  }
  .hero-media video,
  .hero-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-identity {
    display: block;
    grid-row: 2;
    margin: 24px var(--page-pad) 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .15em;
    color: var(--ink);
  }
  .hero-copy {
    grid-row: 3;
    margin-top: 22px;
    padding: 0 var(--page-pad);
  }
  .hero h1 { font-size: clamp(2.55rem, 11.5vw, 4.1rem); }
  .scroll-cue { display: none; }

  .places .section-path {
    min-height: 48px;
    margin-top: 78px;
    align-items: center;
  }

  .shop.movement {
    padding-top: 84px;
  }
  .shop .section-header { margin-bottom: 42px; }

  .footer-links { width: 100%; align-items: flex-start; flex-direction: column; gap: 20px; }
  .site-footer nav { gap: 20px; }
}

@media (min-width: 1024px) and (max-height: 800px) {
  .hero-media { height: min(79vh, 640px); }
  .hero-identity { margin-top: 10vh; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-identity { opacity: 1; transform: none; }
}

@media (max-width: 767px) { .hero-fallback { object-fit: contain; background: var(--paper); } }

/* Surgical visual polish: paper-integrated hero stage and action hierarchy */
.hero-media,
.hero-media video,
.hero-fallback {
  background-color: var(--paper);
}

.hero-media video {
  object-fit: contain;
}

.places .section-path {
  min-height: 48px;
  padding: 12px 0 8px;
  border-bottom-color: rgba(32, 33, 30, 0.34);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .hero-identity {
    margin-top: 30px;
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.25;
    letter-spacing: .16em;
  }

  .hero-copy {
    margin-top: 26px;
  }

  .places .section-path {
    margin-top: 84px;
    font-size: 15px;
  }
}

@media (min-width: 768px) {
  .hero-identity {
    font-size: clamp(10px, .72vw, 12px);
  }
}

/* Continuous work sketchbook */
.work-page .inner-header .desktop-nav { opacity: 1; visibility: visible; transform: none; }
.work-page .inner-header .menu-toggle { display: none; }
/* ---- About page ---- */
.about-main { max-width: var(--content-max); margin: 0 auto; padding: clamp(145px, 18vh, 210px) var(--page-pad) clamp(100px, 12vw, 180px); }
.about-main h1 { font: 400 clamp(4rem, 9vw, 8rem)/.9 var(--serif); letter-spacing: -.04em; margin-bottom: clamp(40px, 6vw, 80px); }
.about-main figure { margin: 0 0 clamp(40px, 6vw, 80px); max-width: 720px; }
.about-main figure img { width: 100%; border-radius: 2px; }
.about-main p { max-width: var(--text-max); font: 400 18px/1.75 var(--serif); color: var(--graphite); margin-bottom: 26px; }
.about-main p:last-child { margin-bottom: 0; }

/* ---- Commission page ---- */
.commission-page { max-width: var(--content-max); margin: 0 auto; padding: clamp(145px, 18vh, 210px) var(--page-pad) clamp(100px, 12vw, 180px); }
.commission-page > header { max-width: var(--text-max); margin-bottom: clamp(60px, 8vw, 110px); }
.commission-page > header h1 { font: 400 clamp(3.4rem, 6.5vw, 6.5rem)/.95 var(--serif); letter-spacing: -.035em; margin-bottom: 24px; }
.commission-page > header p { font: 400 18px/1.6 var(--serif); color: var(--graphite); margin-bottom: 6px; }
.commission-page > figure { margin: 0 0 clamp(70px, 9vw, 130px); }
.commission-page > figure img { width: 100%; max-width: 900px; border-radius: 2px; }
.commission-page > section { padding: clamp(60px, 8vw, 110px) 0; border-top: 1px solid var(--rule); }
.commission-page > section:first-of-type { border-top: none; padding-top: 0; }
.commission-page h2 { font: 400 clamp(1.9rem, 3.4vw, 3rem)/1.05 var(--serif); letter-spacing: -.02em; margin-bottom: clamp(30px, 4vw, 56px); }

.editorial-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 48px); }
.editorial-cards article { border-top: 1px solid var(--rule); padding-top: 18px; }
.editorial-cards h3 { font: 500 15px/1.3 var(--sans); letter-spacing: .01em; margin-bottom: 8px; }
.editorial-cards p { font-size: 14px; line-height: 1.6; color: var(--graphite); }

.commission-page ol { margin: 0; padding: 0 0 0 22px; max-width: var(--text-max); color: var(--graphite); font: 400 17px/1.9 var(--serif); }
.commission-page ol li { padding-left: 6px; margin-bottom: 4px; }

.commission-page form { display: flex; flex-direction: column; gap: 26px; max-width: var(--text-max); }
.commission-page form label { display: flex; flex-direction: column; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--graphite); }
.commission-page form input,
.commission-page form textarea,
.commission-page form select {
  font: 400 16px/1.5 var(--sans); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  padding: 10px 2px; min-height: 44px; transition: border-color 180ms ease, background-color 180ms ease;
}
.commission-page form textarea { min-height: 96px; resize: vertical; padding-top: 12px; }
.commission-page form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%); background-position: calc(100% - 6px) 20px, calc(100% - 1px) 20px; background-size: 6px 6px; background-repeat: no-repeat; }
.commission-page form input::placeholder, .commission-page form textarea::placeholder { color: var(--graphite); opacity: .6; }
.commission-page form input:hover, .commission-page form textarea:hover, .commission-page form select:hover { border-color: var(--ink); }
.commission-page form input:focus-visible, .commission-page form textarea:focus-visible, .commission-page form select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.commission-page form input:invalid:not(:placeholder-shown):not(:focus), .commission-page form textarea:invalid:not(:placeholder-shown):not(:focus) { border-color: #b3413a; }
.commission-page form input[type="file"] { border: 1px dashed var(--rule); padding: 16px 12px; border-radius: 2px; font-size: 13px; }
.commission-page form input[type="file"]:hover { border-color: var(--ink); }
#messages:not(:empty) { font-size: 13px; color: var(--graphite); padding-top: 4px; }
#messages[data-state="error"] { color: #b3413a; }
#previews:not(:empty) { display: flex; flex-wrap: wrap; gap: 10px; }
.commission-page form button[type="submit"] {
  align-self: flex-start; margin-top: 12px; padding: 15px 34px; min-height: 48px;
  background: var(--ink); color: var(--paper); font: 600 11px/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; border-radius: 1px; cursor: pointer; transition: opacity 180ms ease;
}
.commission-page form button[type="submit"]:hover { opacity: .85; }
.commission-page form button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }
.commission-page section h2 + p { max-width: var(--text-max); font: 400 18px/1.6 var(--serif); color: var(--graphite); }

@media (max-width: 767px) {
  .editorial-cards { grid-template-columns: 1fr 1fr; }
  .about-main, .commission-page { padding-top: 128px; }
}

.desktop-nav [aria-current="page"], .site-footer [aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .45em;
}

.work-main { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-pad); overflow: clip; }
.work-opening { padding: clamp(145px, 18vh, 220px) 0 clamp(72px, 9vw, 130px); }
.work-opening h1 {
  margin-top: 12px;
  font: 400 clamp(4.2rem, 9vw, 9.5rem)/.86 var(--serif);
  letter-spacing: -.045em;
}
.work-opening > p:last-child {
  margin-top: clamp(22px, 3vw, 40px);
  max-width: var(--text-max);
  color: var(--graphite);
}

.sketchbook-section { padding-bottom: clamp(120px, 14vw, 240px); }
.sketchbook { width: min(88%, 1320px); margin: 0 auto; }
.sketch-beat { position: relative; margin-top: clamp(130px, 15vw, 260px); }
.sketch-beat:first-child { margin-top: 0; }
.sketch-page {
  position: relative;
  width: min(74%, 860px);
  margin-inline: auto;
  isolation: isolate;
  transform: translate3d(0, 18px, 0);
  opacity: .94;
  transition: transform 850ms cubic-bezier(.22,.65,.3,1), opacity 650ms ease;
  will-change: transform;
}
.sketch-page::before, .paper-layer {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-light);
  border: 1px solid rgba(32,33,30,.08);
  z-index: -2;
}
.paper-layer {
  transform: translate(9px, 10px) rotate(.28deg);
  box-shadow: 0 16px 38px rgba(32,33,30,.07);
  z-index: -3;
  transition: transform 850ms cubic-bezier(.22,.65,.3,1), box-shadow 850ms ease;
}
.sketch-page--left { transform-origin: 12% 50%; }
.sketch-page--right { transform-origin: 88% 50%; }
.sketch-page--left.is-near { transform: translate3d(-14px, 0, 0) rotate(-.7deg); opacity: 1; }
.sketch-page--right.is-near { transform: translate3d(14px, 0, 0) rotate(.7deg); opacity: 1; }
.sketch-page.is-past { transform: translate3d(-20px, -4px, 0) rotate(-1deg); opacity: 1; }
.sketch-page.is-near .paper-layer { transform: translate(12px, 13px) rotate(.45deg); box-shadow: 0 20px 46px rgba(32,33,30,.09); }

.artwork-trigger {
  display: block;
  width: 100%;
  padding: clamp(10px, 1.25vw, 20px);
  background: var(--paper-light);
  cursor: zoom-in;
}
.artwork-trigger img { width: 100%; height: auto; }

.sketch-beat--opening .sketch-page { width: min(78%, 900px); margin-left: 4%; }
.sketch-beat--intimate .sketch-page { width: min(52%, 620px); margin-right: 4%; }
.sketch-beat--intimate.sketch-beat--right .sketch-page { margin-left: 7%; margin-right: auto; }
.sketch-beat--quiet .sketch-page { width: min(66%, 760px); }
.sketch-beat--major .sketch-page { width: min(82%, 960px); margin-left: 2%; }
.sketch-beat--closing .sketch-page { width: min(64%, 760px); margin-right: 7%; }
.sketch-beat--wide .sketch-page { width: min(92%, 1180px); }

.sketch-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  width: min(100%, 1320px);
  margin-inline: auto;
  padding: clamp(12px, 1.4vw, 22px);
  background: var(--paper-light);
  border: 1px solid rgba(32,33,30,.08);
  box-shadow: 0 20px 48px rgba(32,33,30,.07);
}
.sketch-spread .sketch-page { width: 100%; margin: 0; }
.sketch-spread .sketch-page::before, .sketch-spread .paper-layer { display: none; }
.sketch-spread .artwork-trigger { padding: clamp(8px, 1vw, 14px); }
.sketch-spread::after {
  content: "";
  position: absolute;
  inset: 3% auto 3% 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--rule) 12%, var(--rule) 88%, transparent);
}

.sketchbook-end { padding: 0 0 clamp(140px, 17vw, 270px); }
.endpaper {
  width: min(76%, 1040px);
  margin: 0 auto;
  padding: clamp(70px, 9vw, 150px) clamp(28px, 7vw, 110px);
  background: var(--paper-light);
  border: 1px solid rgba(32,33,30,.08);
  box-shadow: 0 18px 42px rgba(32,33,30,.055);
}
.endpaper h2 {
  max-width: 720px;
  font: 400 clamp(2.5rem, 5vw, 5.2rem)/1 var(--serif);
  letter-spacing: -.03em;
}
.endpaper .instagram-path {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: clamp(32px, 4vw, 58px);
}

.artwork-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper-light);
  color: var(--ink);
}
.artwork-dialog::backdrop { background: rgba(32,33,30,.38); }
.viewer-shell { display: grid; grid-template-rows: 64px minmax(0,1fr) 72px; height: 100%; padding: 0 var(--page-pad); }
.viewer-close { justify-self: end; min-width: 72px; min-height: 48px; background: transparent; cursor: pointer; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.viewer-stage { min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.viewer-stage img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--rule); }
.viewer-controls button { min-height: 52px; padding: 0; background: transparent; cursor: pointer; font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.viewer-controls [data-viewer-prev] { justify-self: start; }
.viewer-controls [data-viewer-next] { justify-self: end; }
.viewer-count { font-size: 10px; letter-spacing: .12em; color: var(--graphite); }
body.viewer-open { overflow: hidden; }

@media (max-width: 1023px) {
  .work-page .inner-header .desktop-nav { display: none; }
  .work-page .inner-header .menu-toggle { display: block; }
  .sketchbook { width: 94%; }
  .sketch-page { width: min(82%, 720px); }
  .sketch-beat--intimate .sketch-page { width: min(66%, 580px); }
  .sketch-spread { width: 100%; }
}

@media (max-width: 767px) {
  .work-opening { padding: 128px 0 72px; }
  .work-opening h1 { font-size: clamp(4.2rem, 25vw, 7rem); }
  .sketchbook { width: 100%; }
  .sketch-beat { margin-top: 112px; }
  .sketch-page,
  .sketch-beat--opening .sketch-page,
  .sketch-beat--major .sketch-page,
  .sketch-beat--closing .sketch-page,
  .sketch-beat--wide .sketch-page {
    width: 92%;
    margin-inline: auto;
  }
  .sketch-beat--intimate .sketch-page { width: 84%; margin-left: auto; margin-right: 0; }
  .sketch-beat--intimate.sketch-beat--right .sketch-page { margin-left: 0; margin-right: auto; }
  .sketch-page--left.is-near { transform: translate3d(-8px,0,0) rotate(-.65deg); }
  .sketch-page--right.is-near { transform: translate3d(8px,0,0) rotate(.65deg); }
  .sketch-page.is-past { transform: translate3d(-10px,-2px,0) rotate(-.75deg); }
  .paper-layer { transform: translate(7px,9px) rotate(.25deg); }
  .sketch-spread {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .sketch-spread::after { display: none; }
  .sketch-spread .sketch-page {
    width: 92%;
    margin-inline: auto;
    background: var(--paper-light);
    border: 1px solid rgba(32,33,30,.08);
    box-shadow: 0 14px 34px rgba(32,33,30,.06);
  }
  .sketch-spread .sketch-page + .sketch-page { margin-top: 104px; }
  .sketchbook-end { padding-bottom: 130px; }
  .endpaper { width: 94%; padding: 68px 24px 76px; }
  .viewer-shell { grid-template-rows: 58px minmax(0,1fr) 76px; padding: 0 16px; }
  .viewer-controls button { min-width: 96px; min-height: 56px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .sketch-page,
  .sketch-page.is-near,
  .sketch-page.is-past,
  .paper-layer {
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

/* Exact opening sequence */
.intro-title-field,.cinematic-stage{position:fixed;inset:0;width:100%;height:100vh;height:100dvh}
.intro-title-field{z-index:120;display:grid;place-items:center;padding:var(--page-pad);background:var(--paper);opacity:0;visibility:hidden}
.intro-title-field.is-active{opacity:1;visibility:visible}
.intro-title-word{display:flex;justify-content:center;white-space:nowrap;font:400 clamp(2.35rem,9vw,8rem)/1 var(--serif);letter-spacing:clamp(.08em,1vw,.18em)}
.intro-letter{display:inline-block;opacity:0;transform:translateY(6px);transition:opacity 420ms ease,transform 520ms cubic-bezier(.22,.65,.3,1)}
.intro-letter.is-visible{opacity:1;transform:none}
.cinematic-stage{z-index:115;background:var(--paper);opacity:0;visibility:hidden;overflow:hidden;transition:opacity 420ms ease}
.cinematic-stage.is-active{opacity:1;visibility:visible}
.cinematic-video,.cinematic-resolved{position:absolute;inset:0;width:100%;height:100%}
.cinematic-video{object-fit:cover;object-position:50% 48%;background:var(--paper)}
.cinematic-resolved{object-fit:contain;background:var(--paper);opacity:0;transition:opacity 500ms ease}
.cinematic-stage.is-resolved .cinematic-resolved{opacity:1}
body.hero-intro-active{overflow:hidden} body.hero-intro-active .site-header{opacity:0;pointer-events:none}
@media(max-width:767px){.intro-title-word{font-size:clamp(2.05rem,9.5vw,3.7rem);letter-spacing:clamp(.035em,.8vw,.09em)}}
@media(min-width:768px){.cinematic-stage{left:50%;top:50%;width:min(52vw,720px);height:min(88vh,920px);transform:translate(-50%,-50%)}}

/* Persistent 3D sketchbook */
.book-section{min-height:clamp(680px,88vh,980px);padding:0 0 clamp(120px,14vw,220px)}
.book-stage{width:min(92%,1380px);margin:auto;touch-action:pan-y}
.book-object{position:relative;width:100%;aspect-ratio:1.5/1;perspective:2200px;transform-style:preserve-3d}
.book-board{position:absolute;top:2%;bottom:2%;width:49.5%;background:var(--paper-light);border:1px solid rgba(32,33,30,.14);box-shadow:0 24px 54px rgba(32,33,30,.11)}
.book-board-left{left:0}.book-board-right{right:0}
.book-gutter{position:absolute;z-index:50;top:2%;bottom:2%;left:50%;width:1px;background:var(--rule);box-shadow:0 0 14px rgba(32,33,30,.12)}
.book-page-stack{position:absolute;inset:2% .5%;transform-style:preserve-3d}
.book-leaf{position:absolute;top:0;right:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 820ms cubic-bezier(.45,.05,.18,1),filter 820ms ease}
.book-leaf.is-turning{will-change:transform;filter:drop-shadow(-18px 12px 16px rgba(32,33,30,.16))}
.book-leaf.is-turned{transform:rotateY(-180deg)}
.book-face{position:absolute;inset:0;padding:clamp(14px,1.5vw,26px);background:var(--paper-light);border:1px solid rgba(32,33,30,.1);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.book-face-back{transform:rotateY(180deg)}
.book-artwork{display:grid;place-items:center;width:100%;height:100%;padding:0;background:transparent;cursor:zoom-in}
.book-artwork img{width:100%;height:100%;object-fit:contain}
.book-navigation{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(100%,980px);margin:28px auto 0;border-top:1px solid var(--rule)}
.book-navigation button{min-height:52px;padding:0;background:transparent;cursor:pointer;font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.book-navigation [data-book-prev]{justify-self:start}.book-navigation [data-book-next]{justify-self:end}
.book-progress{font-size:10px;letter-spacing:.14em;color:var(--graphite)}
@media(max-width:767px){.book-section{min-height:auto;padding-bottom:120px}.book-stage{width:92vw}.book-object{aspect-ratio:.72/1;perspective:1700px}.book-board-left{display:none}.book-board-right{width:100%}.book-gutter{left:0}.book-page-stack{inset:2%}.book-leaf{width:100%}.book-face{padding:14px}.book-navigation{margin-top:20px}.book-navigation button{min-width:92px;min-height:56px}}
@media(prefers-reduced-motion:reduce){.intro-letter,.cinematic-stage,.cinematic-resolved,.book-leaf{transition:none!important}.book-leaf.is-turning{filter:none}}

/* Prints storefront */
.prints-page .inner-header .desktop-nav{opacity:1;visibility:visible;transform:none}.prints-page .inner-header .menu-toggle{display:none}.prints-main{max-width:var(--content-max);margin:auto;padding:0 var(--page-pad)}.prints-opening{padding:clamp(145px,18vh,210px) 0 clamp(70px,8vw,120px)}.prints-opening h1{margin-top:12px;font:400 clamp(4.2rem,9vw,9.5rem)/.86 var(--serif);letter-spacing:-.045em}.prints-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,var(--text-max));gap:32px;margin-top:clamp(30px,4vw,60px);border-top:1px solid var(--rule);padding-top:28px}.prints-lead{font:400 clamp(2rem,3.4vw,4rem)/1.05 var(--serif)}.prints-intro>p:not(.prints-lead){grid-column:2;color:var(--graphite)}.shipping-note{margin-top:-18px}.collection-nav{display:flex;gap:clamp(22px,3vw,48px);overflow-x:auto;margin-top:clamp(50px,6vw,90px);padding-bottom:14px;border-bottom:1px solid var(--rule);scrollbar-width:none}.collection-nav a{flex:none;min-height:44px;display:flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.print-collection{padding:clamp(90px,11vw,180px) 0;border-top:1px solid var(--rule)}.print-collection-header{display:grid;grid-template-columns:80px 1fr;align-items:baseline;margin-bottom:clamp(55px,7vw,110px)}.print-collection-header p{font-size:10px;color:var(--graphite);letter-spacing:.12em}.print-collection-header h2{font:400 clamp(2.6rem,5vw,5.5rem)/1 var(--serif);letter-spacing:-.03em}.print-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(60px,8vw,140px) clamp(18px,2.4vw,38px);align-items:start}.print-work{grid-column:span 5}.print-work:nth-child(even){grid-column:7/span 5;margin-top:clamp(60px,8vw,130px)}.print-artwork{display:block;width:100%;padding:0;background:transparent;cursor:zoom-in}.print-artwork img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center}.print-info{display:flex;justify-content:space-between;gap:20px;padding-top:16px;border-top:1px solid var(--rule);margin-top:14px}.print-info h3{font:400 clamp(1.3rem,1.7vw,1.8rem)/1.15 var(--serif)}.print-info p{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}.shipping-section{display:grid;grid-template-columns:1fr 2fr;gap:30px;padding:clamp(80px,10vw,150px) 0;border-top:1px solid var(--rule)}.shipping-section h2{font:400 clamp(2.4rem,4.8vw,5rem)/1 var(--serif);letter-spacing:-.03em}.shipping-section>p:last-child{grid-column:2;max-width:620px;color:var(--graphite)}.prints-closing{padding:clamp(100px,14vw,220px) 0}.prints-closing h2{max-width:900px;font:400 clamp(3rem,6vw,7rem)/.98 var(--serif);letter-spacing:-.035em}
@media(max-width:1023px){.prints-page .inner-header .desktop-nav{display:none}.prints-page .inner-header .menu-toggle{display:block}}
@media(max-width:767px){.prints-opening{padding:128px 0 65px}.prints-opening h1{font-size:clamp(4.2rem,25vw,7rem)}.prints-intro{display:block}.prints-intro p{margin-top:18px}.shipping-note{margin-top:18px!important}.collection-nav{margin-top:48px}.print-collection{padding:90px 0}.print-collection-header{grid-template-columns:42px 1fr;margin-bottom:58px}.print-grid{display:block}.print-work,.print-work:nth-child(n){width:100%;margin:0;display:block}.print-work+.print-work{margin-top:82px}.shipping-section{display:block;padding:90px 0}.shipping-section h2{margin-top:32px}.shipping-section>p:last-child{margin-top:24px}.prints-closing{padding:100px 0 130px}}


/* Tools — The Working Table */
.tools-page .inner-header .desktop-nav{opacity:1;visibility:visible;transform:none}
.tools-page .inner-header .menu-toggle{display:none}
.tools-main{max-width:var(--content-max);margin:0 auto;padding:0 var(--page-pad)}
.tools-opening{padding:clamp(145px,18vh,210px) 0 clamp(55px,7vw,105px)}
.tools-opening h1{max-width:1050px;margin-top:14px;font:400 clamp(4rem,9vw,9rem)/.88 var(--serif);letter-spacing:-.045em}
.tools-intro{max-width:600px;margin:clamp(28px,4vw,58px) 0 0 auto;font:400 clamp(1.35rem,2.2vw,2.25rem)/1.28 var(--serif)}
.tools-worktable{width:100%;margin:0 0 clamp(110px,14vw,220px)}
.tools-worktable img{display:block;width:100%;height:auto}
.tools-section{padding:clamp(90px,10vw,165px) 0;border-top:1px solid var(--rule)}
.tools-section-heading{display:grid;grid-template-columns:minmax(150px,2fr) 7fr;gap:30px;align-items:baseline;margin-bottom:clamp(55px,7vw,110px)}
.tools-section-heading h2{font:400 clamp(2.8rem,6vw,6.5rem)/.96 var(--serif);letter-spacing:-.035em}
.tools-sketchbook-layout{display:grid;grid-template-columns:7fr 4fr;gap:clamp(35px,6vw,100px);align-items:center}
.tools-context-image{max-width:760px}
.tools-context-image img{display:block;width:100%;height:auto}
.tool-product{position:relative}
.tool-category{margin-bottom:18px;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--graphite)}
.tool-product h3{font:400 clamp(1.8rem,3.1vw,3.6rem)/1.08 var(--serif);letter-spacing:-.025em}
.tool-link{display:inline-flex;align-items:center;min-height:48px;margin-top:30px;border-bottom:1px solid currentColor;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.tool-link span{margin-left:8px;transition:transform .2s ease}
.tool-link:hover span{transform:translate(3px,-3px)}
.tools-linework .tool-product--line{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,120px);align-items:end}
.nib-range{display:flex;justify-content:space-between;gap:12px;padding:26px 0 18px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);font:400 clamp(1.25rem,2.3vw,2.7rem)/1 var(--serif)}
.nib-range small{font:500 9px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.tools-process{display:grid;grid-template-columns:3fr 8fr;gap:clamp(35px,6vw,100px);align-items:start;padding:clamp(90px,11vw,180px) 0;border-top:1px solid var(--rule)}
.tools-process-copy h2{max-width:280px;margin-top:18px;font:400 clamp(2rem,3.3vw,4rem)/1.05 var(--serif)}
.tools-process-video{display:block;width:100%;height:auto;background:var(--paper-light)}
.tools-colour-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(75px,10vw,160px) clamp(24px,4vw,70px);align-items:start}
.tool-product--colour-primary{grid-column:1/span 8}
.tool-product--colour-primary h3{font-size:clamp(2.5rem,4.8vw,5.8rem)}
.tool-product--tone{grid-column:9/span 4;margin-top:clamp(110px,14vw,210px)}
.tool-product--specialist{grid-column:2/span 5}
.tool-product--accent{grid-column:8/span 4;margin-top:clamp(45px,6vw,90px)}
.tool-specs{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:24px;padding-top:14px;border-top:1px solid var(--rule);list-style:none;color:var(--graphite);font-size:11px}
.tool-specs li+li::before{content:"·";margin-right:18px}
.tools-closing{padding:clamp(110px,15vw,240px) 0}
.tools-closing h2{max-width:850px;margin:18px 0 35px;font:400 clamp(3.2rem,7vw,8rem)/.95 var(--serif);letter-spacing:-.04em}
.tools-closing .text-link{display:inline-flex;min-height:48px;align-items:center;border-bottom:1px solid currentColor}

@media(max-width:1120px){
  .tools-page .inner-header .desktop-nav{display:none}
  .tools-page .inner-header .menu-toggle{display:block}
}
@media(max-width:767px){
  .tools-opening{padding:125px 0 52px}
  .tools-opening h1{font-size:clamp(4rem,22vw,6.4rem)}
  .tools-intro{margin-top:28px;font-size:1.55rem}
  .tools-worktable{width:calc(100% + (var(--page-pad) * 2));margin-left:calc(var(--page-pad) * -1);margin-bottom:105px}
  .tools-section{padding:82px 0}
  .tools-section-heading{display:block;margin-bottom:52px}
  .tools-section-heading h2{margin-top:14px;font-size:clamp(2.8rem,14vw,4.7rem)}
  .tools-sketchbook-layout{display:block}
  .tools-context-image{width:88%;margin:0 0 46px auto}
  .tool-product h3{font-size:clamp(1.9rem,9vw,3rem)}
  .tools-linework .tool-product--line{display:block}
  .nib-range{margin-top:58px;gap:8px;overflow:hidden;font-size:clamp(1rem,5vw,1.5rem)}
  .tools-process{display:block;padding:82px 0}
  .tools-process-copy{margin-bottom:38px}
  .tools-process-copy h2{font-size:2.7rem}
  .tools-colour-layout{display:block}
  .tools-colour-layout .tool-product{margin:0}
  .tools-colour-layout .tool-product+.tool-product{margin-top:78px;padding-top:48px;border-top:1px solid var(--rule)}
  .tool-product--colour-primary h3{font-size:clamp(2.3rem,10.5vw,3.5rem)}
  .tools-closing{padding:105px 0 135px}
}
@media(prefers-reduced-motion:reduce){
  .tool-link span{transition:none}
  .tool-link:hover span{transform:none}
}

/* Prints artwork integrity repair */
.print-work,
.print-artwork,
.print-artwork picture {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  overflow: visible;
}
.print-artwork img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

.prints-editorial{max-width:42rem;margin:2rem 0 3rem;line-height:1.8}
.print-meta{margin-top:1rem;font-size:.92rem}.size-selector{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0}.size-selector input{margin-right:.35rem}
.print-meta .button{display:inline-block;margin-top:1rem}
@media(max-width:640px){.print-meta .button{display:block;text-align:center;width:100%}}

.print-meta{display:flex;flex-direction:column;gap:.55rem}
.meta-label{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;opacity:.6;margin-top:.9rem}
.size-selector{display:inline-flex;gap:0;border:1px solid rgba(0,0,0,.15);border-radius:999px;overflow:hidden;width:max-content;margin:1.1rem 0}
.size-selector .seg{position:relative;cursor:pointer}
.size-selector input{position:absolute;opacity:0;inset:0}
.size-selector span{display:block;padding:.5rem 1rem;border-right:1px solid rgba(0,0,0,.15);transition:background .2s,color .2s}
.size-selector .seg:last-child span{border-right:none}
.size-selector .seg:hover span{background:rgba(0,0,0,.04)}
.size-selector input:checked+span{background:#111;color:#fff}
@media(max-width:640px){.size-selector{width:100%}.size-selector .seg{flex:1}.size-selector span{text-align:center}.print-meta{gap:.7rem}}