:root { font-family: 'DM Sans', sans-serif; color: #45473d; background: #ece8df; font-synthesis: none; --muted: #707166; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
.icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible, a:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.world { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: linear-gradient(115deg, #efede6 5%, #eee9dc 55%, #dbd5c4 100%); }
.sunlight { position: absolute; inset: -30%; background: radial-gradient(ellipse at 65% 25%, #fff9de88, transparent 60%); animation: breathe 24s ease-in-out infinite alternate; }
.plant-shadows { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 80% 0; animation: light-move 32s ease-in-out infinite alternate; }
#branches { transform-origin: 100% 100%; animation: branches 14s ease-in-out infinite alternate; }
.grain { position: absolute; inset: 0; opacity: .23; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.site-header, .site-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.site-header { padding: 38px 5%; }
.wordmark { font-family: 'Instrument Serif', Georgia, serif; font-size: 37px; letter-spacing: -3px; line-height: 1; }
.about-link { font-size: 12px; padding: 8px 0; }
.about-link .icon { margin-left: 15px; color: var(--muted); }
main { position: relative; flex: 1; display: flex; align-items: center; min-height: 440px; padding: 28px 10% 40px 16%; }
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .19em; margin: 0 0 29px; color: var(--muted); }
h1 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(64px, 6.6vw, 108px); letter-spacing: -.035em; line-height: .98; margin: 0 0 29px; }
h1 em, h2 em { font-weight: 400; }
.intro-copy { font-size: 14px; line-height: 1.85; color: var(--muted); margin: 0 0 32px; }
.contact { display: inline-flex; align-items: center; gap: 35px; font-size: 12px; border-bottom: 1px solid #77766b50; padding-bottom: 8px; }
.contact .icon { transition: transform .3s; }
.contact:hover .icon { transform: translate(3px,-3px); }
.site-footer { padding: 28px 5% 32px; min-height: 90px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.place { display: flex; align-items: center; gap: 15px; }
#local-time { opacity: .75; }
#motion-toggle { font-size: 10px; padding: 10px; position: absolute; left: 50%; transform: translateX(-50%); }
#motion-toggle .icon { width: 12px; height: 12px; margin-left: 9px; }
.site-address { font-size: 8px; letter-spacing: .12em; }
.site-header, main, .site-footer { transition: opacity .4s; }
.about-visible .site-header, .about-visible main, .about-visible .site-footer { opacity: 0; }

dialog { width: min(760px, calc(100% - 48px)); max-height: calc(100svh - 48px); padding: 0; border: 9px solid #f1ede2; outline: 1px solid #a9a48d44; background: transparent; color: #45473d; box-shadow: 0 1px 2px #fff8 inset, 0 18px 60px #5b584b26, 12px 20px 0 -9px #817e6420; overflow: auto; }
dialog::backdrop { background: #eee9dc30; }
.about-window { display: grid; grid-template-columns: 155px minmax(0, 1fr); }
.clear-pane { position: relative; overflow: hidden; border-right: 7px solid #f1ede2; background: linear-gradient(155deg, #f6edd83b, #d7d9b96b); box-shadow: 0 0 0 1px #aaa68e40 inset; }
.pane-light { position: absolute; inset: -40%; background: radial-gradient(ellipse at 40% 10%, #fff6c9a6, transparent 68%); animation: breathe 24s ease-in-out infinite alternate; }
.pane-branches { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(3px); transform-origin: 80% 100%; animation: branches 14s ease-in-out infinite alternate; }
.pane-crossbar { position: absolute; top: 34%; left: 0; right: 0; height: 7px; background: #f1ede2; box-shadow: 0 1px 1px #aaa68e30; }
.frosted-pane { position: relative; background: #f3efe5d9; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px #aaa68e40 inset; }
#about-close { position: absolute; top: 18px; right: 24px; padding: 5px; font-size: 11px; color: var(--muted); }
#about-close .icon { margin-left: 8px; }
.about-heading { padding: 53px 42px 28px; border-bottom: 6px solid #f1ede2; }
.about-heading .eyebrow { font-size: 9px; margin-bottom: 20px; }
h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: 49px; font-weight: 400; letter-spacing: -.02em; margin: 0; line-height: 1.1; }
.about-body { padding: 24px 42px 36px; }
.about-body p { font-size: 14px; line-height: 1.85; color: #686c5e; margin: 0 0 18px; }
.about-body .contact { margin-top: 7px; }
.about-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
dialog[open] { animation: window-arrive .45s ease-out; }
.paused .world *, .paused .clear-pane * { animation-play-state: paused !important; }
@keyframes window-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes light-move { from { transform: translate(-12px, -8px) rotate(-2deg); } to { transform: translate(20px, 8px) rotate(2deg); } }
@keyframes branches { from { transform: rotate(-2deg) translateX(-12px); } to { transform: rotate(2deg) translateX(9px); } }
@keyframes breathe { from { opacity: .5; } to { opacity: 1; } }
@media (max-width: 700px) {
  .site-header { padding: 26px 7%; }
  .wordmark { font-size: 32px; }
  .about-link { font-size: 11px; }
  main { min-height: 380px; padding: 35px 8% 45px 10%; }
  h1 { font-size: clamp(60px, 14vw, 90px); }
  .intro-copy { font-size: 12px; }
  .plant-shadows { width: 180%; left: -70%; }
  .site-footer { padding: 24px 7%; min-height: 80px; }
  #local-time, .site-address { display: none; }
  #motion-toggle { position: static; transform: none; margin-right: -10px; }
  dialog { width: calc(100% - 30px); max-height: calc(100svh - 30px); border-width: 7px; }
  .about-window { grid-template-columns: minmax(0, 1fr); }
  .clear-pane { height: 92px; border-right: 0; border-bottom: 6px solid #f1ede2; }
  .pane-branches { width: 180%; height: 320px; top: -140px; left: -20%; }
  .pane-crossbar { height: auto; width: 6px; inset: 0 auto 0 36%; }
  #about-close { top: 16px; right: 17px; }
  .about-heading { padding: 49px 26px 24px; }
  h2 { font-size: 43px; }
  .about-body { padding: 23px 26px 30px; }
  .about-body p { font-size: 13px; line-height: 1.75; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }