@font-face {
  font-family: Hand;
  src: url('./assets/caveat.woff2') format('woff2');
  font-display: swap;
}
:root {
  --page: #f5f5f5;
  --ink: #353733;
  --muted: #888c85;
  --glass: rgb(255 255 255 / .62);
  --edge: rgb(255 255 255 / .92);
  --radius: 22px;
  --inset: 7px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --breathe: cubic-bezier(.45, 0, .55, 1);
  --fast: 150ms;
  --settle: 320ms;
  --shadow:
    0 0 0 1px rgb(42 49 38 / .045),
    0 2px 3px -2px rgb(42 49 38 / .14),
    0 8px 13px -9px rgb(42 49 38 / .16),
    0 22px 30px -22px rgb(42 49 38 / .19),
    0 38px 60px -40px rgb(42 49 38 / .13),
    inset 0 1px 0 rgb(255 255 255 / 1),
    inset 0 -1px 2px rgb(42 49 38 / .065),
    inset 1px 0 1px rgb(255 255 255 / .8);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid #687364; outline-offset: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 24px; z-index: 10; padding: 10px 16px; background: var(--ink); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.masthead, main { max-width: 1500px; margin: auto; padding-inline: 40px; }
.masthead nav { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-size: 18px; letter-spacing: -.7px; }
.wordmark strong { font-weight: 650; }
.options-slot { position: relative; }
.options-button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 23px; cursor: default; transition: color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.options-button:hover { color: var(--ink); }
.options-button:active { transform: scale(.96); }
.options-hint { position: absolute; top: 45px; right: 0; white-space: nowrap; font-size: 11px; color: var(--muted); opacity: 0; transform: translateY(-4px) scale(1.008); pointer-events: none; transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
.options-slot:hover .options-hint, .options-slot:focus-within .options-hint { opacity: 1; transform: none; }
main { padding-top: 36px; padding-bottom: 80px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 320px)); gap: 32px; align-items: stretch; }
.experiment { min-width: 0; padding: var(--inset); border: 1px solid var(--edge); border-radius: var(--radius); background: var(--glass); box-shadow: var(--shadow); position: relative; isolation: isolate; transition: transform 480ms var(--ease); }
.experiment::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; box-shadow: 0 16px 24px -16px rgb(42 49 38 / .18), 0 36px 60px -28px rgb(42 49 38 / .12); opacity: 0; transition: opacity 480ms var(--ease); }
.card-art { position: relative; isolation: isolate; aspect-ratio: 1.14; overflow: hidden; border-radius: calc(var(--radius) - var(--inset)); background: #b5b9ab; }
.card-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 43% center; filter: brightness(1.14) saturate(.6); animation: canopy-drift 24s var(--breathe) infinite alternate; }
/* Stationary bevel and inset shading keep the moving light inside the glass. */
.card-art::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 3px rgb(20 30 20 / .19), inset 0 0 0 1px rgb(30 40 30 / .07), inset 0 -1px 1px rgb(255 255 255 / .55); }
.card-art::before { content: ''; position: absolute; z-index: 1; inset: -40%; pointer-events: none; background: linear-gradient(115deg, transparent 29%, rgb(255 255 255 / .02) 40%, rgb(255 255 255 / .18) 49%, rgb(255 255 255 / .025) 60%, transparent 71%); animation: light-drift 18s var(--breathe) infinite alternate; }
.card-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 51px; padding: 4px 9px 0 14px; }
.card-caption h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: -.2px; }
.open-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; color: #73796e; font-size: 18px; line-height: 1; background: rgb(255 255 255 / .2); box-shadow: inset 0 1px 1px rgb(255 255 255 / .2); transition: transform 480ms var(--ease), color var(--settle) var(--ease), background-color var(--settle) var(--ease); }
.experiment:hover, .experiment:focus-visible { transform: translateY(-4px) scale(1.008); }
.experiment:hover .open-mark, .experiment:focus-visible .open-mark { color: var(--ink); background: rgb(255 255 255 / .9); transform: translate(1px, -1px); }
.experiment:hover::after, .experiment:focus-visible::after { opacity: 1; }
.experiment:active { transform: translateY(-1px) scale(.99); transition-duration: var(--fast); }
.experiment:hover .card-art img, .experiment:focus-visible .card-art img { animation-play-state: paused; }
.phantom { display: grid; place-items: center; min-width: 0; border: 1px dashed #d6d9d2; border-radius: var(--radius); background: rgb(255 255 255 / .13); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 -1px 0 rgb(73 85 64 / .015); }
.phantom p { margin: 0; color: #939b8e; font: 30px/1.1 Hand, 'Bradley Hand', cursive; text-align: center; transform: rotate(-6deg); }
.phantom p span { display: block; margin-top: 4px; font-size: 26px; }
@keyframes canopy-drift { from { transform: scale(1.06) translate(-.7%, -.3%); } to { transform: scale(1.11) translate(.7%, .3%); } }
@keyframes light-drift { from { transform: translateX(-14%) rotate(-3deg); opacity: .25; } to { transform: translateX(14%) rotate(3deg); opacity: .65; } }
/* Each study has a lightweight, authored preview; none starts a WebGL renderer. */
.field-notes .card-art { background: #e4e5df; display: grid; place-items: center; }
.field-notes .card-art::before, .organic-motion .card-art::before, .haptics .card-art::before, .sourdine-field .card-art::before { display: none; }
.notes-sheet { width: 65%; padding: 21px 18px; background: #fbfcf8; border-radius: 7px; box-shadow: 0 12px 30px -16px #57614370, 0 2px 3px #57614312; transform: rotate(-6deg); }
.mini-kicker { display: block; text-transform: uppercase; font-size: 6px; letter-spacing: 1px; color: #4c5940; margin-bottom: 11px; }
.mini-heading { display: block; font-size: 25px; line-height: 1.05; letter-spacing: -1.1px; color: #46533b; }
.mini-corners { display: flex; gap: 9px; margin: 17px 0 14px; }
.mini-corners i { display: block; width: 44px; height: 44px; border: 5px solid #e1e7d7; border-radius: 11px; background: #f3f6ed; box-shadow: 0 0 0 1px #bec9b250; }
.mini-corners i:last-child { border-radius: 15px; background: #e4edd7; }
.mini-line { display: block; width: 100%; height: 3px; background: #d6dacc; border-radius: 2px; margin-top: 5px; }
.mini-line.short { width: 68%; }
.art-scribble { position: absolute; right: 14px; bottom: 18px; font: 20px/1 Hand, cursive; color: #435632; transform: rotate(-9deg); }
.organic-motion .card-art { background: radial-gradient(ellipse at 50% 45% in oklab, #eaf1df, #d4dfc6); display: grid; place-items: center; }
.alive-word { font: italic 70px/1 Georgia, serif; letter-spacing: -5px; color: #4c6838; position: relative; z-index: 1; padding-bottom: 8px; }
.motion-orbit { position: absolute; width: 70%; aspect-ratio: 1.15; border: 1px solid #7f9f6238; border-radius: 46% 54% 49% 51%; transform: rotate(-17deg); }
.orbit-two { width: 90%; aspect-ratio: 1.12; transform: rotate(26deg); border-color: #7f9f6225; }
.mini-caption { position: absolute; bottom: 22px; left: 16px; right: 16px; text-align: center; color: #6b7b5e; font-size: 8px; letter-spacing: 1px; }
.haptics .card-art { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40% in oklab, #f1f2e9, #dfe3d8); }
.contact-disc { width: 124px; height: 124px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; background: linear-gradient(150deg in oklab, #fefef9, #ecf0e3); color: #6a7b58; box-shadow: inset 0 2px 3px #fff, inset 0 -3px 5px #93a17d25, 0 3px 4px #59664110, 0 17px 24px -13px #59664140; }
.contact-disc>span { font-size: 47px; line-height: 1; }
.contact-disc small { font-size: 9px; }
.contact-ring { position: absolute; width: 152px; height: 152px; border: 1px solid #9ca98d35; border-radius: 50%; }
.sourdine-field .card-art { background: repeating-radial-gradient(circle at 18% 76%, transparent 0 22px, #829b6360 23px, #829b6320 24px, transparent 27px 38px), #e7edda; }
.field-crosshair { position: absolute; top: 76%; width: 100%; height: 1px; background: linear-gradient(90deg, #59774f80, transparent); }
.field-word { position: absolute; left: 21px; bottom: 39px; font-size: 40px; font-weight: 780; letter-spacing: -3px; color: #344b31; }
.field-caption { position: absolute; left: 24px; bottom: 26px; font: italic 12px Georgia, serif; color: #637451; }
@media (prefers-reduced-motion: no-preference) {
  .alive-word { animation: word-breath 5.5s ease-in-out infinite; }
  .organic-motion:hover .alive-word, .organic-motion:focus-visible .alive-word { animation-play-state: paused; }
}
@keyframes word-breath { 0%, 100% { scale: 1; } 48% { scale: 1.055; } }
@media (max-width: 650px) {
  .masthead, main { padding-inline: 24px; }
  .masthead nav { height: 76px; }
  main { padding-top: 28px; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .phantom { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card-art img { transform: scale(1.06); }
  .card-art::before { opacity: .3; }
  .experiment:hover, .experiment:focus-visible, .experiment:active { transform: none; }
}