/* EB Garamond, served from this site (SIL Open Font License, see fonts/OFL.txt) */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

*,*::before,*::after{box-sizing:border-box}
/* Background drift: day -> sea blues -> night (text flips light) -> dusk -> (text flips dark) -> day, every 10 minutes */
@property --paper{syntax:'<color>';inherits:true;initial-value:#F5EEDD}
@property --ink{syntax:'<color>';inherits:true;initial-value:#3B3732}
:root{--paper:#F5EEDD;--ink:#3B3732;animation:paper 600s linear infinite;--muted:color-mix(in srgb,var(--ink) 70%,var(--paper));--soft:color-mix(in srgb,var(--ink) 82%,var(--paper));--line:color-mix(in srgb,var(--ink) 25%,var(--paper));--ph:color-mix(in srgb,var(--ink) 10%,var(--paper));--phink:color-mix(in srgb,var(--ink) 78%,var(--paper))}
@keyframes paper{0%{--paper:#F5EEDD;--ink:#3B3732}16%{--paper:#E4E9DF;--ink:#34383A}30%{--paper:#BCD6D9;--ink:#22343C}42%{--paper:#7DB5C8;--ink:#12232B}45%{--paper:#6CA9BF;--ink:#10222B}45.4%{--paper:#6AA7BD;--ink:#F5EEDD}48%{--paper:#5A97B0;--ink:#F5EEDD}54%{--paper:#3E7A92;--ink:#F5EEDD}66%{--paper:#24485A;--ink:#F2ECDF}76%{--paper:#1A2430;--ink:#EDE7DA}84%{--paper:#352C38;--ink:#EFE4D6}90%{--paper:#6E5A55;--ink:#F3E9DC}91.5%{--paper:#7D6860;--ink:#F3E9DC}91.9%{--paper:#836D65;--ink:#2A211D}94%{--paper:#A58B7C;--ink:#2A211D}97%{--paper:#E3D4C0;--ink:#3B3732}100%{--paper:#F5EEDD;--ink:#3B3732}}
@media (prefers-reduced-motion:reduce){:root{animation:none}}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'EB Garamond',Garamond,Georgia,serif;font-size:20px;line-height:1.6;min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}a:hover{text-decoration-color:var(--ink)}

.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.045;mix-blend-mode:multiply;z-index:0}
.page{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:30px 40px 96px;box-sizing:border-box}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 72px}
.logo{position:relative;display:block;width:42px;height:42px;padding:6px;margin:-6px;color:var(--ink)}
.logo svg{position:absolute;left:6px;top:6px;width:42px;height:42px;fill:currentColor;opacity:0;transform:scale(.6) rotate(-25deg)}
.logo .cut{fill:var(--paper)}
.logo:hover svg,.logo:focus-visible svg{animation:flip 3.75s cubic-bezier(.3,1.4,.5,1) infinite backwards;animation-delay:calc(var(--k) * .75s)}
@keyframes flip{0%{opacity:0;transform:scale(.5) rotate(-25deg)}6%{opacity:1;transform:scale(1.08) rotate(3deg)}10%,18%{opacity:1;transform:none}23%,100%{opacity:0;transform:scale(.7) rotate(18deg)}}
@media (prefers-reduced-motion:reduce){.logo:hover svg,.logo:focus-visible svg{animation:none}}
.top nav{display:flex;gap:28px;font-size:21px}
.read{max-width:660px}
.column{display:flex;flex-direction:column;align-items:center;gap:80px}
.item{margin:0;width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center;animation:rise .7s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * 70ms + 100ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.item .img{display:flex;align-items:flex-end;padding:12px;box-sizing:border-box}
.item .img span{font-family:'EB Garamond', Garamond, Georgia, serif;font-style:italic;font-size:14px;color:var(--phink)}
.item figcaption{margin-top:18px;font-style:italic;font-size:19px;color:var(--muted);text-align:center}
.intro{max-width:500px;margin:24px auto 88px;text-align:center;color:var(--soft)}
.vt{font-family:'EB Garamond', Garamond, Georgia, serif;font-weight:400;font-size:52px;letter-spacing:-.01em;line-height:1.05;margin:0 0 14px;color:var(--ink)}
@media (max-width:640px){.page{padding:20px 20px 64px}.top{margin:0 0 48px}.top nav{gap:20px;font-size:19px}.vt{font-size:40px}}
@media (prefers-reduced-motion:reduce){.item{animation:none}}
.portrait{width:100%;max-width:440px;aspect-ratio:4/5;background:var(--ph);display:flex;align-items:flex-end;padding:12px;box-sizing:border-box;margin-bottom:40px}
.portrait span{font-family:'EB Garamond', Garamond, Georgia, serif;font-style:italic;font-size:14px;color:var(--phink)}
.credo{font-size:28px;line-height:1.45;margin:0 0 32px;color:var(--ink)}
.credo .w{display:inline-block;animation:pour 1.1s both;animation-delay:calc(var(--d) + .3s)}
@keyframes pour{0%{opacity:0;transform:translateX(var(--x)) rotate(var(--rr)) scale(.6);translate:0 var(--y);animation-timing-function:cubic-bezier(.25,.5,.4,1)}12%{opacity:1}100%{opacity:1;transform:none;translate:0 0}}
@media (max-width:1179px),(prefers-reduced-motion:reduce){.credo .w{animation:none}}
.contact{list-style:none;padding:0;margin:40px 0 0;display:flex;flex-direction:column;gap:8px}

.vr{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.sel-bw{display:none}
body:has(#s-bw:checked) .sel-color{display:none}
body:has(#s-bw:checked) .sel-bw{display:block}
.sel-col{animation:colfade .55s cubic-bezier(.2,.7,.3,1)}
@keyframes colfade{from{opacity:0;transform:translateY(10px)}}
.switch{display:flex;justify-content:center;gap:24px;margin-top:22px;font-size:19px}
.switch label{cursor:pointer;color:var(--muted);padding:6px 0}.switch label:hover{color:var(--ink)}
.switch b{font-weight:400;color:var(--ink);text-decoration:underline;text-underline-offset:5px;padding:6px 0}
body:has(.vr:focus-visible) .switch label{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.sel-col{animation:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sentence{font-size:22px}
.rot{display:inline-grid;text-align:left;vertical-align:bottom}
.rot .ph{grid-area:1/1;opacity:0;font-style:italic;color:var(--ink);animation:phrase 15s infinite both;animation-delay:calc(var(--n) * 2.5s)}
@keyframes phrase{0%{opacity:0;transform:translateY(.45em)}3%,14%{opacity:1;transform:none}17%,100%{opacity:0;transform:translateY(-.45em)}}
@media (prefers-reduced-motion:reduce){.rot .ph{animation:none}.rot .ph:first-child{opacity:1}}
body:has(#s-color:checked) .switch [for=s-color],body:has(#s-bw:checked) .switch [for=s-bw]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}

.item img{width:100%;height:auto;background:var(--ph)}
.item.tall{max-width:547px}
.portrait{padding:0!important;background:none!important;aspect-ratio:auto!important}
.portrait img{width:100%;height:auto}
.empty{text-align:center;font-style:italic;color:var(--muted)}

/* One page: hidden radios switch sections with no JavaScript and no reload, so the
   background drift never restarts. Links like /#film open a section directly. */
.anchor{position:absolute;top:0;left:0;width:1px;height:1px}
.top nav label{cursor:pointer;color:var(--muted);text-decoration:none;padding:10px 0}
.top nav label:hover{color:var(--ink)}
label.logo{cursor:pointer}
.sec-builds,.sec-film{display:none}
body:has(#r-builds:checked) .sec-about,body:not(:has(.sec-r:checked)):has(#builds:target) .sec-about,body:has(#r-film:checked) .sec-about,body:not(:has(.sec-r:checked)):has(#film:target) .sec-about{display:none}
body:has(#r-builds:checked) .sec-builds,body:not(:has(.sec-r:checked)):has(#builds:target) .sec-builds,body:has(#r-film:checked) .sec-film,body:not(:has(.sec-r:checked)):has(#film:target) .sec-film{display:block}
.top nav .n-about,body:has(#r-builds:checked) .top nav .n-builds,body:not(:has(.sec-r:checked)):has(#builds:target) .top nav .n-builds,body:has(#r-film:checked) .top nav .n-film,body:not(:has(.sec-r:checked)):has(#film:target) .top nav .n-film{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink);text-underline-offset:5px}
body:has(#r-builds:checked) .top nav .n-about,body:not(:has(.sec-r:checked)):has(#builds:target) .top nav .n-about,body:has(#r-film:checked) .top nav .n-about,body:not(:has(.sec-r:checked)):has(#film:target) .top nav .n-about{color:var(--muted);text-decoration:none}
.logo .s-sun{opacity:1;transform:none}
body:has(#r-builds:checked) .logo .s-sun,body:not(:has(.sec-r:checked)):has(#builds:target) .logo .s-sun,body:has(#r-film:checked) .logo .s-sun,body:not(:has(.sec-r:checked)):has(#film:target) .logo .s-sun{opacity:0;transform:scale(.6) rotate(-25deg)}
body:has(#r-builds:checked) .logo .s-plane,body:not(:has(.sec-r:checked)):has(#builds:target) .logo .s-plane,body:has(#r-film:checked) .logo .s-wave,body:not(:has(.sec-r:checked)):has(#film:target) .logo .s-wave{opacity:1;transform:none}
body:has(.sec-r:focus-visible) .top nav label{outline:1px dashed var(--muted);outline-offset:4px}

/* About: photo on the left sized to fit the window, name and text beside it */
.sec-about{max-width:none;display:grid;grid-template-columns:auto minmax(0,560px);gap:64px;align-items:end}
.sec-about .portrait{margin:0;max-width:none;width:auto}
.sec-about .portrait img{width:auto;height:auto;max-height:calc(100svh - 254px);max-width:min(640px,55vw)}
.sec-about .credo{margin:0}
.sec-about .contact{margin:32px 0 0}
@media (max-width:899px){
  .sec-about{grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
  .sec-about .portrait img{height:auto;max-height:calc(100svh - 170px);max-width:100%}
}

/* Very tall photos never run taller than the window */
.item img{width:auto;max-width:100%;max-height:88svh;object-fit:contain}