/* ============================================================
   SOFIA KAMAL — global styles
   Component layout lives inline in src/site.jsx; everything that
   needs media queries, keyframes or pseudo-elements lives here.
   ============================================================ */

/* Self-hosted, latin-subset web fonts (SIL Open Font License, see assets/fonts/LICENSE.txt). */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 300 500; font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
}
/* Only the glyphs of "Scroll down for works…". */
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/caveat-subset.woff2') format('woff2');
  unicode-range: U+20, U+53, U+63-64, U+66, U+6B-6C, U+6E-6F, U+72-73, U+77, U+2026;
}

:root {
  --paper: #F2E8D5;
  --paper-deep: #E8DCC2;
  --ink: #3A2A1F;
  --ink-deep: #2B1F1A;
  --ink-soft: #5A4636;
  --ink-mute: #6E5C49;
  --border: #C9B79C;
  --sienna: #6B4423;
  --terracotta: #B5613B;
  --poetry: #7A4A5C;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --gutter: clamp(20px, 4vw, 56px);
  /* Static paper textures. Drawn once by the browser and cached, unlike live SVG filters. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.04' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0 0.16 0 0 0 0.5 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background-color: var(--paper);
  background-image: var(--grain);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main:focus { outline: none; }
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--sienna); color: var(--paper); }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* The custom cursor hides the system one only once it has mounted (fine pointers only). */
html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; }

:focus-visible { outline: 2px solid var(--sienna); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 20000;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
  font: 500 13px/1 'Inter', system-ui, sans-serif; text-decoration: none;
  transform: translateY(-160%); transition: transform 200ms var(--ease);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Ambient watercolor washes ---------- */
.wash { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Drift is driven from JS with the Web Animations API (see WatercolorWash). */
.wash-blob { position: absolute; will-change: transform; }
.wash-blob svg { display: block; overflow: visible; }
/* On every page load the washes bloom onto the paper, one after another, like wet pigment spreading. */
.wash-blob svg { animation: pigmentBloom 1700ms cubic-bezier(0.2, 0.75, 0.25, 1) both; animation-delay: calc(var(--i, 0) * 140ms + 80ms); transform-origin: 50% 50%; }
@keyframes pigmentBloom { from { opacity: 0; transform: scale(0.42) rotate(-8deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.paper-fiber {
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--fiber);
  opacity: 0.3;
}

/* ---------- Shared nav ---------- */
.sk-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px var(--gutter);
  pointer-events: none;
  transition: transform 420ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease), padding 300ms var(--ease);
}
.sk-header.is-pinned, .sk-header.is-hidden {
  position: fixed; padding-top: 14px; padding-bottom: 14px;
  background: rgba(242, 232, 213, 0.96);
  box-shadow: 0 1px 0 rgba(58, 42, 31, 0.1), 0 14px 30px -26px rgba(58, 42, 31, 0.55);
}
.sk-header.is-hidden { transform: translateY(-110%); box-shadow: none; }
.sk-header a { pointer-events: auto; }
.sk-logo { white-space: nowrap; }
.sk-nav { display: flex; gap: clamp(20px, 2.6vw, 36px); }
.sk-nav a { position: relative; padding: 6px 0; }
/* A brush-stroke underline that paints in on hover and marks the current page. */
.sk-nav a::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: -1px; height: 5px;
  background: var(--c, var(--sienna));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2C18 2.2 36 4.9 52 3.4S84 1.9 99 3.6' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2C18 2.2 36 4.9 52 3.4S84 1.9 99 3.6' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease);
}
.sk-nav a:hover::after, .sk-nav a.is-active::after { transform: scaleX(1); }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; }
.hero-two-zone { min-height: 100vh; min-height: 100svh; }
.hero-medium .medium-label { display: inline-flex; flex-direction: column; }
/* Reserve the width of the active (italic, heavier) style so neighbours never shift. */
.hero-medium .medium-label::after {
  content: attr(data-text); height: 0; overflow: hidden; visibility: hidden;
  font-style: italic; font-weight: 500; pointer-events: none;
}
.hero-medium a { text-decoration: none; }
.hero-medium a:hover .medium-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hero-art-link { display: block; width: 100%; height: 100%; }

/* Staggered entrance; CSS-driven so it plays as soon as the prerendered page paints. */
.enter { animation: enterUp 1200ms var(--ease) both; animation-delay: calc(var(--d, 0) * 80ms + 60ms); }
@keyframes enterUp { from { opacity: 0.01; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* The collage leans gently away from the pointer (--mx/--my are set from JS on desktop). */
.hero-card { transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.hero-portrait-main { transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -9px), 0) rotate(2deg); }
.hero-vessel { transform: translate3d(calc(var(--mx, 0) * 20px), calc(var(--my, 0) * 14px), 0) rotate(-6deg); }
.hero-quote-card { transform: translate3d(calc(var(--mx, 0) * 9px), calc(var(--my, 0) * 7px), 0) rotate(5deg); }
.hero-portrait-main img, .hero-vessel img { transition: transform 900ms var(--ease); }
.hero-portrait-main:hover img, .hero-vessel:hover img { transform: scale(1.04); }

/* The calligraphic arrow draws itself once, then the arrowhead lands. */
.draw-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawPath 2200ms var(--ease) 900ms forwards; }
.draw-head { opacity: 0; animation: fadeIn 500ms var(--ease) 2900ms forwards; }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes scrollFloat {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(8px); }
}
.scroll-float { animation: scrollFloat 4.2s ease-in-out infinite; }
/* Between tablet and laptop widths the hint would sit under the painting. */
@media (max-width: 1180px) { .hero-scroll-hint { display: none !important; } }

@media (max-width: 900px) {
  .hero-two-zone { grid-template-columns: 1fr !important; padding-top: 104px !important; padding-bottom: 72px !important; }
  .hero-portrait-wrap { order: -1; margin-bottom: 12px; min-height: 500px !important; }
  .hero-portrait-main { width: 70% !important; height: 340px !important; right: 12% !important; top: 0 !important; }
  .hero-vessel { right: 5% !important; top: 262px !important; width: 100px !important; height: 100px !important; }
  .hero-quote-card { right: 18% !important; top: 362px !important; width: 180px !important; }
  .hero-scroll-hint { display: none !important; }
  .link-row > a { flex: 1 1 0 !important; min-width: 0 !important; }
  .link-row > a > div:last-child { overflow-wrap: anywhere; }
  .sk-nav { gap: 16px; font-size: 11px !important; }
}
@media (max-width: 380px) {
  .sk-header { padding-left: 16px; padding-right: 16px; }
  .sk-nav { gap: 12px; font-size: 10px !important; letter-spacing: 0.12em !important; }
  .hero-portrait-main { width: 76% !important; right: 8% !important; height: 300px !important; }
  .hero-vessel { top: 230px !important; width: 86px !important; height: 86px !important; }
  .hero-quote-card { top: 320px !important; right: 10% !important; }
  .hero-portrait-wrap { min-height: 450px !important; }
}

/* ---------- Works: medium switcher ---------- */
.ms-rail button { cursor: pointer; }
.ms-count {
  font: 400 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em;
  color: var(--ink-mute); margin-left: 4px; vertical-align: super; font-style: normal;
}
.ms-stroke path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawPath 700ms var(--ease) forwards; }
@media (max-width: 680px) {
  .ms-rail { gap: 10px 22px !important; }
  .ms-rail button { border-right: none !important; padding-right: 0 !important; margin-right: 0 !important; }
}

/* ---------- Works: galleries ---------- */
.art-button {
  display: flex; width: 100%; padding: 0; border: 0; background: transparent;
  text-align: left; cursor: pointer;
}
.art-button:focus-visible { outline-offset: 6px; }
.art-frame { position: relative; overflow: hidden; }
.art-frame img { transition: transform 900ms var(--ease); }
.art-button:hover .art-frame img { transform: scale(1.025); }

/* Masonry: three columns on desktop (dealt round-robin in the markup); below 980px the columns
   dissolve into an ordered grid so reading order stays 1, 2, 3… without JavaScript. */
.masonry { display: flex; align-items: flex-start; gap: clamp(18px, 2.4vw, 30px); }
.masonry-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); }
.masonry-photos { margin-top: 24px; --gap: 18px; gap: 18px; }
.masonry-photos .masonry-col { gap: 18px; }
@media (max-width: 980px) {
  .masonry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(26px, 4vw, 36px) clamp(16px, 3vw, 24px); }
  .masonry-col { display: contents; }
  .masonry-item { order: var(--i); }
}
@media (max-width: 600px) {
  .masonry { grid-template-columns: 1fr; }
  .ceramic-caption { flex-direction: column; align-items: center !important; gap: 5px !important; text-align: center; }
}

/* "See all" link under each medium on the home page. */
.see-all {
  display: inline-flex; align-items: center; gap: 14px;
  font: italic 400 clamp(22px, 2.4vw, 30px)/1.1 'Fraunces', serif; color: var(--c, var(--ink));
  text-decoration: none; padding: 6px 0;
}
.see-all svg { transition: transform 500ms var(--ease); }
.see-all:hover svg { transform: translateX(8px); }
.see-all span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 500ms var(--ease); }
.see-all:hover span { background-size: 100% 1px; }

.ceramic-ambient-wrap {
  position: absolute;
  width: clamp(180px, 22vw, 320px); height: clamp(180px, 22vw, 320px);
  right: clamp(-40px, 2vw, 20px); top: 160px;
  pointer-events: none; z-index: 1;
}
.ceramic-ambient-core {
  position: absolute; inset: 12%;
  border-radius: 40% 55% 48% 52%;
  background: radial-gradient(circle at 35% 30%, #F9D9BE, #944F30 68%);
  opacity: 0.28;
  animation: ceramicTurn 34s linear infinite;
}
.ceramic-ambient-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid #B5613B55; opacity: 0.42;
  animation: ceramicTurn 44s linear reverse infinite;
}
@keyframes ceramicTurn {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}
.poetry-ambient-ink {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 120px; pointer-events: none; opacity: 0.26; z-index: 1;
}
/* Drawn once, then left alone (a looping dash animation would repaint forever). */
.poetry-ambient-path {
  stroke-dasharray: 1400; stroke-dashoffset: 0; opacity: 0.4;
  animation: poetryTrace 9s var(--ease) both;
}
@keyframes poetryTrace {
  0%   { stroke-dashoffset: 1400; opacity: 0.35; }
  50%  { opacity: 0.6; }
  100% { stroke-dashoffset: 0; opacity: 0.4; }
}
.print-ink-spread { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.print-ink-spread span {
  position: absolute; border-radius: 50%;
  background: var(--ink-deep); filter: blur(12px);
  opacity: 0; animation: printSpread 1300ms var(--ease) forwards;
}
.print-ink-spread span:nth-child(1) { width: 360px; height: 260px; left: 8%; top: 180px; }
.print-ink-spread span:nth-child(2) { width: 420px; height: 280px; right: 4%; top: 260px; animation-delay: 130ms; }
.print-ink-spread span:nth-child(3) { width: 300px; height: 220px; left: 40%; top: 120px; animation-delay: 220ms; }
@keyframes printSpread {
  0%   { transform: scale(0.35); opacity: 0; }
  55%  { opacity: 0.2; }
  100% { transform: scale(1); opacity: 0.14; }
}

/* Poems: lines keep their breaks on wide screens, wrap naturally on small ones. */
.poem-line { display: block; }
.chapbook-poem-line { padding-left: var(--line-indent); }
.poem-body em { font-style: normal; }
@media (min-width: 900px) { .poem-line { white-space: nowrap; } }
@media (max-width: 680px) {
  .poem-line { padding-left: 1.2em; text-indent: -1.2em; }
  .chapbook-poem-line { padding-left: min(var(--line-indent), 18vw); text-indent: 0; }
}

@media (max-width: 980px) {
  .works-header, .painting-alt-row, .print-hero { grid-template-columns: 1fr !important; gap: 24px !important; }
  .painting-alt-row > div { order: initial !important; justify-self: center !important; text-align: center !important; }
  .painting-alt-row > div:first-child { order: 2 !important; width: 100% !important; justify-content: center !important; }
  .painting-alt-row > div:first-child .art-button { justify-content: center !important; }
  .painting-alt-row > div:last-child { order: 1 !important; width: min(520px, 100%) !important; }
  .painting-alt-row > div:last-child * { text-align: center !important; }
  .ceramic-ambient-wrap { display: none; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 36px);
  background: rgba(43, 31, 26, 0.86);
  animation: lightboxIn 260ms var(--ease);
}
@keyframes lightboxIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-panel {
  position: relative; width: min(1180px, 100%); max-height: 100%;
  overflow: auto; overscroll-behavior: contain;
  background: var(--paper); border: 1px solid var(--border);
  box-shadow: 0 24px 80px -32px #000;
}
.lightbox-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: clamp(18px, 3vw, 36px); padding: clamp(18px, 3vw, 32px); align-items: center;
}
.lightbox-figure { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 0; }
.lightbox-figure img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px);
  object-fit: contain; box-shadow: 0 18px 40px -18px rgba(58, 42, 31, 0.6);
}
.lightbox-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(58, 42, 31, 0.3); background: var(--paper); color: var(--ink);
  cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease);
}
.lightbox-icon:hover { background: var(--ink); color: var(--paper); }
.lightbox-icon:disabled { opacity: 0.35; pointer-events: none; }
.lightbox-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.lightbox-zoom { position: relative; display: inline-block; overflow: hidden; line-height: 0; max-width: 100%; }
.lightbox-zoom img { transition: transform 450ms var(--ease); cursor: zoom-in; }
.lightbox-zoom.is-zoomed { touch-action: none; }
.lightbox-zoom.is-zoomed img { transform: scale(2.4); cursor: zoom-out; transition: transform 450ms var(--ease), transform-origin 120ms linear; }
.lightbox-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lightbox-icon[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lightbox-hint { margin: 18px 0 0; font: 400 10px/1.5 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
@media (hover: none) { .lightbox-hint { display: none; } }
@media (max-width: 860px) {
  .lightbox-grid { grid-template-columns: 1fr; padding-top: 64px; }
  .lightbox-figure img { max-height: 62vh; max-height: 62dvh; }
}
/* Phones held sideways: keep image and details side by side so the artwork stays large. */
@media (max-height: 540px) and (orientation: landscape) {
  .lightbox { padding: 8px; }
  .lightbox-grid { grid-template-columns: minmax(0, 1.5fr) minmax(180px, 1fr); padding: 14px 56px 14px 14px; gap: 18px; }
  .lightbox-figure img { max-height: calc(100vh - 46px); max-height: calc(100dvh - 46px); }
}

/* ---------- About / CV ---------- */
@media (max-width: 900px) {
  .about-body { grid-template-columns: 1fr !important; gap: 40px !important; align-items: start !important; }
  .about-photo-cell { height: auto !important; }
  .about-photo-cell > a, .about-photo-cell > div { height: auto !important; width: 100% !important; max-width: 380px !important; }
  .cv-header { grid-template-columns: 1fr !important; align-items: start !important; }
  .cv-section { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cv-skills { grid-template-columns: 1fr !important; }
  .cv-entry { grid-template-columns: 1fr !important; gap: 5px !important; }
}

/* ---------- Footer, back-to-top, page transition ---------- */
.site-footer {
  position: relative; z-index: 5;
  padding: clamp(40px, 6vw, 72px) var(--gutter) 84px;
  border-top: 1px solid rgba(58, 42, 31, 0.13);
  background: linear-gradient(to bottom, rgba(232, 220, 194, 0), rgba(232, 220, 194, 0.55));
  color: var(--ink-soft);
}
.footer-main {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 36px clamp(24px, 5vw, 72px); align-items: start;
}
.footer-logo { font: italic 400 clamp(30px, 3.4vw, 44px)/1 'Fraunces', serif; color: var(--sienna); text-decoration: none; }
.footer-sign p { margin: 14px 0 0; max-width: 340px; font: italic 300 17px/1.5 'Fraunces', serif; color: var(--ink-soft); }
.footer-nav { display: grid; gap: 10px; font: 500 12px/1.4 'Inter', system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.footer-nav a { color: var(--ink); text-decoration: none; justify-self: start; position: relative; }
.footer-nav a:hover { color: var(--sienna); }
.footer-kicker { display: block; margin-bottom: 8px; font: 400 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.footer-email { display: block; font: italic 400 clamp(19px, 1.8vw, 24px)/1.25 'Fraunces', serif; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.footer-email:hover { color: var(--sienna); }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: clamp(32px, 5vw, 56px); padding-top: 18px; border-top: 1px solid rgba(58, 42, 31, 0.12);
  font: 400 10px/1.6 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 860px) { .footer-main { grid-template-columns: 1fr 1fr; } .footer-sign { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-main { grid-template-columns: 1fr; } }

/* Small "Copy" buttons next to email addresses. */
.copy-button {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px;
  border: 1px solid rgba(58, 42, 31, 0.22); border-radius: 999px; background: transparent; color: var(--ink-soft);
  font: 400 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.copy-button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Toast ("Link copied"). */
.toast {
  position: fixed; left: 50%; bottom: clamp(20px, 4vw, 36px); z-index: 13000;
  padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 400 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translate(-50%, 14px); pointer-events: none;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.back-to-top {
  position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 1200;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 10px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(242, 232, 213, 0.94); color: var(--sienna);
  font: 400 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 10px 22px -14px rgba(58, 42, 31, 0.6);
  cursor: pointer;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top span {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(107, 68, 35, 0.1);
}
/* Small screens: an icon-only button, and room under the footer so it never covers the links. */
@media (max-width: 680px) {
  .back-to-top { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 0; letter-spacing: 0; }
  .back-to-top span { width: auto; height: auto; background: none; }
  .back-to-top svg { width: 12px; height: 12px; }
  .site-footer { padding-bottom: 84px; }
  .footer-legal { padding-right: 52px; }
}


/* ---------- Custom cursor (desktop only) ---------- */
.cursor-layer { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 99998; pointer-events: none; }
.cursor-layer > * {
  position: fixed; left: 0; top: 0; pointer-events: none;
  will-change: transform; opacity: 0; transition: opacity 180ms linear;
}
.cursor-layer.is-visible > .is-on { opacity: 1; }
.cursor-layer.is-visible > .cursor-trail.is-on { opacity: var(--o); }
.cursor-dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; box-sizing: border-box; mix-blend-mode: multiply; }
.cursor-trail { border-radius: 50%; filter: blur(2px); mix-blend-mode: multiply; }
.cursor-layer.is-contrast .cursor-dot { mix-blend-mode: normal; border: 1.7px solid #111; }
.cursor-layer.is-contrast .cursor-trail { mix-blend-mode: normal; filter: none; box-shadow: 0 0 0 0.9px rgba(17, 17, 17, 0.8); }
.cursor-ring {
  width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font: 400 10px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); text-align: center; white-space: pre-line;
  transition: opacity 180ms linear, background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.cursor-ring span { padding: 0 8px; }
.cursor-tip {
  width: 26px; height: 26px; margin-top: -25px;
  -webkit-mask: url('/assets/calligraphy-tip.png') left top / 100% 100% no-repeat;
  mask: url('/assets/calligraphy-tip.png') left top / 100% 100% no-repeat;
}
.cursor-pulse-ring, .cursor-pulse-dot { position: fixed; border-radius: 50%; pointer-events: none; z-index: 100001; }
.cursor-pulse-ring { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1.5px solid; animation: skClickPulseRing 520ms var(--ease) forwards; }
.cursor-pulse-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; animation: skClickPulseDot 420ms var(--ease) forwards; }
@keyframes skClickPulseRing {
  0%   { transform: scale(0.3); opacity: 0.95; }
  70%  { opacity: 0.45; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes skClickPulseDot {
  0%   { transform: scale(1); opacity: 0.92; }
  100% { transform: scale(0.4); opacity: 0; }
}

/* ---------- Scroll reveals (armed from JS only for elements below the fold) ---------- */
[data-reveal] { --reveal-ease: cubic-bezier(0.2, 0.65, 0.15, 1); }
.reveal-armed { opacity: 0; transform: translateY(28px); }
.reveal-armed.is-revealed { opacity: 1; transform: none; transition: opacity 900ms var(--reveal-ease), transform 1100ms var(--reveal-ease); }
/* Ceramics rise and settle, as if lifted off the wheel. */
[data-reveal="clay"].reveal-armed { transform: translateY(34px) rotate(-1.4deg) scale(0.985); }
/* Poems: each stanza surfaces in turn. */
[data-reveal="verse"].reveal-armed { transform: translateY(14px); }
[data-reveal="verse"].reveal-armed.is-revealed { transition-duration: 1200ms, 1200ms; }
/* Paintings: a sheet of paper lifts off the canvas. */
[data-reveal="paint"].reveal-armed { opacity: 1; transform: none; }
[data-reveal="paint"]::after, [data-reveal="ink"]::after, [data-reveal="develop"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
[data-reveal="paint"].reveal-armed::after { opacity: 1; background: var(--paper); transform-origin: 50% 0; }
[data-reveal="paint"].reveal-armed img { transform: scale(1.08); }
[data-reveal="paint"].reveal-armed.is-revealed::after { transform: scaleY(0); transition: transform 1250ms var(--reveal-ease) 80ms; }
[data-reveal="paint"].reveal-armed.is-revealed img { transform: none; transition: transform 1600ms var(--reveal-ease); }
/* Prints: the ink lifts off as if the sheet was just pulled from the press. */
[data-reveal="ink"].reveal-armed { opacity: 1; transform: none; }
[data-reveal="ink"].reveal-armed::after { opacity: 0.92; background: var(--ink-deep); }
[data-reveal="ink"].reveal-armed.is-revealed::after { opacity: 0; transition: opacity 1300ms var(--reveal-ease) 60ms; }
[data-reveal="ink"].reveal-armed img { transform: scale(0.96); }
[data-reveal="ink"].reveal-armed.is-revealed img { transform: none; transition: transform 1300ms var(--reveal-ease); }
/* Photographs develop out of white, like a print in the tray. */
[data-reveal="develop"].reveal-armed { opacity: 1; transform: none; }
[data-reveal="develop"].reveal-armed::after { opacity: 1; background: #F7F2E8; }
[data-reveal="develop"].reveal-armed.is-revealed::after { opacity: 0; transition: opacity 1900ms cubic-bezier(0.3, 0.1, 0.2, 1) 120ms; }

/* ---------- Home: section index (wide screens) ---------- */
.medium-rail {
  position: fixed; left: clamp(10px, 1.4vw, 22px); top: 50%; z-index: 900;
  display: flex; flex-direction: column; gap: 14px;
  transform: translate(-12px, -50%); opacity: 0; pointer-events: none;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.medium-rail.is-visible { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.medium-rail a { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; justify-content: flex-end; text-decoration: none; }
.rail-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--c); background: transparent; transition: background-color 300ms var(--ease), transform 300ms var(--ease); }
.medium-rail a.is-active .rail-dot { background: var(--c); transform: scale(1.35); }
.rail-label {
  font: 400 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
  opacity: 0; transform: translateX(-6px); transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.rail-label { padding: 5px 8px; border-radius: 999px; background: rgba(242, 232, 213, 0.94); box-shadow: 0 6px 16px -10px rgba(58, 42, 31, 0.5); }
.medium-rail:hover .rail-label, .medium-rail a:focus-visible .rail-label { opacity: 1; transform: none; }
.medium-rail a.is-active .rail-label { color: var(--ink); }
@media (max-width: 1100px) { .medium-rail { display: none; } }
.home-medium { scroll-margin-top: 70px; }
/* Let the browser skip layout and paint for home sections that are not near the screen yet. */
.home-medium + .home-medium { content-visibility: auto; contain-intrinsic-size: auto 1500px; }

/* ---------- /works: honor #medium before JavaScript loads ---------- */
.medium-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; }
#ceramics:target ~ .works-stage:not(.is-hydrated) [data-medium="painting"],
#poetry:target ~ .works-stage:not(.is-hydrated) [data-medium="painting"],
#printmaking:target ~ .works-stage:not(.is-hydrated) [data-medium="painting"],
#photography:target ~ .works-stage:not(.is-hydrated) [data-medium="painting"] { display: none; }
#ceramics:target ~ .works-stage:not(.is-hydrated) [data-medium="ceramics"],
#poetry:target ~ .works-stage:not(.is-hydrated) [data-medium="poetry"],
#printmaking:target ~ .works-stage:not(.is-hydrated) [data-medium="printmaking"],
#photography:target ~ .works-stage:not(.is-hydrated) [data-medium="photography"] { display: block; }

/* ---------- Text selection takes the color of the medium you are reading ---------- */
.tone-painting ::selection { background: #6B4423; color: var(--paper); }
.tone-ceramics ::selection { background: #B5613B; color: var(--paper); }
.tone-poetry ::selection { background: #7A4A5C; color: var(--paper); }
.tone-printmaking ::selection { background: #E0A13A; color: var(--ink-deep); }
.tone-photography ::selection { background: #2B1F1A; color: var(--paper); }

/* ---------- Page-to-page: the watercolor bloom (driven by src/transitions.js) ----------
   "bloom": pigment spreads from the click, the new page appears inside the stain, the old one sinks back.
   "turn":  back / forward — a quiet cross-fade with a hint of depth, like turning a sketchbook page. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition { background: var(--paper); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 560ms; animation-timing-function: var(--ease); }

html:active-view-transition-type(bloom)::view-transition-image-pair(root) { isolation: auto; }
html:active-view-transition-type(bloom)::view-transition-old(root),
html:active-view-transition-type(bloom)::view-transition-new(root) { animation: none; mix-blend-mode: normal; display: block; }
html:active-view-transition-type(bloom)::view-transition-old(root) { transform-origin: 50% 40%; }
html:active-view-transition-type(bloom)::view-transition-new(root) {
  -webkit-mask: url('/assets/transition/bloom-fill.webp') 0 0 / 0 0 no-repeat;
  mask: url('/assets/transition/bloom-fill.webp') 0 0 / 0 0 no-repeat;
}
html:active-view-transition-type(bloom)::view-transition-group(vt-ink) { animation: none; }
html:active-view-transition-type(bloom)::view-transition-new(vt-ink) {
  animation: none;
  -webkit-mask: url('/assets/transition/bloom-ring.webp') 0 0 / 0 0 no-repeat;
  mask: url('/assets/transition/bloom-ring.webp') 0 0 / 0 0 no-repeat;
}
.vt-ink { display: none; }
html.vt-arriving .vt-ink {
  display: block; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: var(--vt-color, var(--sienna)); view-transition-name: vt-ink;
}

html:active-view-transition-type(turn)::view-transition-old(root) { animation: pageTurnOut 520ms cubic-bezier(0.4, 0, 0.2, 1) both; }
html:active-view-transition-type(turn)::view-transition-new(root) { animation: pageTurnIn 680ms cubic-bezier(0.2, 0.7, 0.2, 1) 60ms both; }
@keyframes pageTurnOut { to { opacity: 0; transform: scale(0.975) translateY(-10px); } }
@keyframes pageTurnIn { from { opacity: 0; transform: scale(1.02) translateY(14px); } }

/* Browsers without cross-document view transitions: a bloom over the old page… */
.vt-overlay {
  position: fixed; z-index: 2147483000; pointer-events: none; will-change: transform;
  -webkit-mask: url('/assets/transition/bloom-fill.webp') center / 100% 100% no-repeat;
  mask: url('/assets/transition/bloom-fill.webp') center / 100% 100% no-repeat;
}
/* …and on the next page a veil of that color with a hole that blooms open from the same point. */
html.vt-veil body::after {
  content: ''; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: var(--vt-color);
  -webkit-mask: url('/assets/transition/bloom-fill.webp') no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url('/assets/transition/bloom-fill.webp') no-repeat exclude, linear-gradient(#000 0 0);
  animation: veilOpen 1100ms cubic-bezier(0.35, 0.3, 0.2, 1) both;
}
@keyframes veilOpen {
  from { -webkit-mask-size: 0 0, auto; mask-size: 0 0, auto; -webkit-mask-position: var(--vt-x) var(--vt-y), 0 0; mask-position: var(--vt-x) var(--vt-y), 0 0; }
  to {
    -webkit-mask-size: var(--vt-size) var(--vt-size), auto; mask-size: var(--vt-size) var(--vt-size), auto;
    -webkit-mask-position: calc(var(--vt-x) - var(--vt-size) / 2) calc(var(--vt-y) - var(--vt-size) / 2), 0 0;
    mask-position: calc(var(--vt-x) - var(--vt-size) / 2) calc(var(--vt-y) - var(--vt-size) / 2), 0 0;
  }
}

/* ---------- 404 ---------- */
.not-found { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 96px var(--gutter); position: relative; }
.not-found-logo { position: absolute; top: 24px; left: var(--gutter); font: italic 400 22px/1 'Fraunces', serif; color: var(--ink); text-decoration: none; }
.not-found-kicker { margin: 0 0 16px; font: 400 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.not-found h1 { margin: 0; font: 400 clamp(56px, 10vw, 120px)/0.92 'Fraunces', serif; letter-spacing: -0.02em; color: var(--ink); animation: enterUp 1200ms var(--ease) both; }
.not-found h1 em { color: var(--sienna); font-weight: 300; }
.not-found-lede { max-width: 520px; margin: 28px 0 36px; font: italic 300 clamp(18px, 1.7vw, 22px)/1.5 'Fraunces', serif; color: var(--ink-soft); }
.not-found nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font: 500 12px/1 'Inter', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.not-found nav a { color: var(--ink); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .scroll-float, .ceramic-ambient-core, .ceramic-ambient-ring { animation: none !important; }
  .cursor-trail { display: none; }
  .draw-path { stroke-dashoffset: 0; }
  .draw-head { opacity: 1; }
  .hero-card { transition: none; }
  .wash-blob svg { animation: none !important; }
}