/* Hallmark · macrostructure: Photographic Fold · tone: quiet editorial · anchor hue: teal
 * theme: Atelier with user-supplied pool · nav: minimal · footer: Ft2
 * pre-emit critique: P4 H4 E4 S5 R5 V4 */
@import url('./tokens.css');
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; text-underline-offset: .3em; }
a:hover { text-decoration: underline; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, canvas:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 5px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; font-style: normal; }
.page { max-width: 1600px; padding-inline: var(--page-gutter); margin-inline: auto; }
.skip { position: absolute; z-index: 10; top: -5rem; padding: var(--space-xs) var(--space-sm); background: var(--color-paper); }
.skip:focus { top: 1rem; }
.site-header { min-height: 88px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--space-md); font-family: var(--font-display); font-size: var(--text-small); }
.home-link { font-weight: 500; letter-spacing: -.025em; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0 clamp(1rem, 4vw, 3rem); min-width: 0; max-width: 100%; margin-left: auto; }
.site-header a, .site-footer a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; max-width: 100%; }
[aria-current='page'] { text-decoration: underline; }
.hero-heading { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: var(--space-sm); padding-block: var(--space-lg); }
.hero-heading h1 { font-family: var(--font-title); font-size: var(--text-title); font-weight: 300; letter-spacing: .03em; line-height: 1.12; }
.pool-frame { position: relative; background: var(--color-water); }
#water { display: block; width: 100%; height: clamp(290px, 31vw, 460px); touch-action: pan-y; cursor: crosshair; }
#water:focus-visible { outline-offset: -6px; }
.water-error { position: absolute; inset: auto 1rem 1rem; padding: .75rem 1rem; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-small); }
.intro { display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-3xl); }
.profile h2 { font-size: 1.25rem; font-weight: 400; letter-spacing: .1em; margin-bottom: var(--space-sm); }
.profile p { font-size: var(--text-small); color: var(--color-muted); line-height: 2; }
.material-link { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; max-width: 100%; font-size: 1rem; border-bottom: var(--rule-width) solid var(--color-ink); }
.work-links { padding-bottom: var(--space-3xl); }
.work-links > h2 { font-family: var(--font-display); font-size: var(--text-small); font-weight: 400; color: var(--color-muted); margin-bottom: var(--space-md); }
.work-link-grid { display: grid; gap: var(--space-lg); }
.work-link-grid a { display: flex; flex-direction: column; align-items: start; min-width: 0; gap: var(--space-xs); border-top: var(--rule-width) solid var(--color-rule); padding-top: var(--space-lg); }
.work-type { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; letter-spacing: -.04em; line-height: 1.2; max-width: 100%; }
.site-footer { padding-block: var(--space-md); border-top: var(--rule-width) solid var(--color-rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-lg); font-family: var(--font-display); font-size: .75rem; color: var(--color-muted); }
.works-main { min-height: 75dvh; }
.works-heading { padding-block: var(--space-xl) var(--space-3xl); }
.works-heading h1 { font-family: var(--font-display); font-size: var(--text-title); font-weight: 300; letter-spacing: -.05em; line-height: 1.2; margin-bottom: var(--space-sm); }
.works-heading p { color: var(--color-muted); font-size: var(--text-small); }
.collection { scroll-margin-top: var(--space-xl); margin-bottom: var(--space-3xl); }
.collection h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md); font: 300 1.75rem/1.4 var(--font-display); border-bottom: var(--rule-width) solid var(--color-rule); padding-bottom: var(--space-md); }
.collection h2 span { font-family: var(--font-body); font-size: var(--text-small); color: var(--color-muted); }
.empty-state { padding-block: var(--space-2xl); color: var(--color-muted); font-size: var(--text-small); }
.back-home { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-small); margin-bottom: var(--space-3xl); text-decoration: underline; }
.illustration-grid { display: grid; gap: var(--space-xl); margin-top: var(--space-lg); }
.illustration-grid:empty { display: none; }
.illustration-grid img { width: 100%; height: auto; display: block; }
.illustration-grid figcaption { margin-top: var(--space-sm); font-size: var(--text-small); }
.writing-list details { padding-block: var(--space-md); border-bottom: var(--rule-width) solid var(--color-rule); }
.writing-list summary { cursor: pointer; padding-block: .5rem; }
.writing-list article { padding-block: var(--space-lg); max-width: 42rem; }
.writing-list article p + p { margin-top: var(--space-md); }
@media (min-width: 40rem) {
  .hero-heading { flex-direction: row; align-items: baseline; justify-content: space-between; padding-block: var(--space-xl) var(--space-lg); }
  .work-link-grid, .illustration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
}
@media (min-width: 60rem) { .intro { padding-block: var(--space-2xl) var(--space-3xl); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; } }

a:active, button:active { opacity: .65; }
button:disabled, [aria-disabled='true'] { cursor: not-allowed; }
button:disabled { color: var(--color-muted); }

.privacy-main { max-width: 52rem; }
.privacy-main .collection h2 { margin-bottom: var(--space-md); font-size: 1.25rem; }
.policy-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }