/* andrewhay.es. The Editorial Relief layout from doru.dev, in the steward-pattern palette.
   Type is doru's: "Site Sans" is Helvetica Neue where installed, falling through to a
   self-hosted, metric-matched Hanken Grotesk; the mono is Menlo or DejaVu Sans Mono. */
@font-face{font-family:"Site Sans";font-weight:400;src:local("Helvetica Neue"),local("HelveticaNeue")}
@font-face{font-family:"Site Sans";font-weight:500;src:local("Helvetica Neue Medium"),local("HelveticaNeue-Medium")}
@font-face{font-family:"Site Sans";font-weight:600 700;src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold")}
@font-face{font-family:"Site Sans Fallback";font-weight:400;src:url(../fonts/hanken-grotesk.woff2) format("woff2");size-adjust:99.56%;ascent-override:95.62%;descent-override:21.39%;line-gap-override:2.81%;font-display:swap}
@font-face{font-family:"Site Sans Fallback";font-weight:500;src:url(../fonts/hanken-grotesk.woff2) format("woff2");size-adjust:102.69%;ascent-override:94.95%;descent-override:21.13%;line-gap-override:2.82%;font-display:swap}
@font-face{font-family:"Site Sans Fallback";font-weight:600 700;src:url(../fonts/hanken-grotesk.woff2) format("woff2");size-adjust:104.87%;ascent-override:92.98%;descent-override:20.69%;line-gap-override:2.77%;font-display:swap}
@font-face{font-family:"Site Symbols";src:local("Menlo"),local("Menlo-Regular"),url(../fonts/dejavu-sans-mono.woff2) format("woff2");unicode-range:U+21BB,U+2304,U+25A6,U+2713;font-display:swap}
@font-face{font-family:"Site Mono";src:local("Menlo"),local("Menlo-Regular"),url(../fonts/dejavu-sans-mono.woff2) format("woff2");font-display:swap}

/* Colour lives here and nowhere else (the canvas reads --relief-* and --accent).
   Steward pattern: navy #0c2835, ivory #f4f3ef, crimson highlight (#951e36 / #e4566e),
   steward blue (#1f4e6c / #86bcd8), slate #5b7a8c / #92a1a8. Tints marked * are derived. */
:root{color-scheme:dark;
 --bg:#0c2835;--surface:#133647;--raised:#173b4d;--contact:#133647;--bar:#1f4e6c;
 --ink:#f4f3ef;--muted:#92a1a8;--line:#5b7a8c;--soft-line:#2c4d5f;
 --accent:#e4566e;--accent-hover:#ec7a8d/* * */;--accent-ink:#0c2835;
 --button:#f4f3ef;--button-ink:#0c2835;--button-hover:#e9ebec;--button-edge:#f4f3ef;
 --shadow:#061923/* * */;--quiet:#0a2330/* * */;--pop-shadow:#00000040;
 --relief-seam:#0f2e3d/* * */;--relief-field:#1d4255/* * */;--relief-shadow:#04121a80;
 --relief-side:#5b7a8c;--relief-front:#92a1a8;--relief-top:#e9ebec;--relief-highlight:#f4f3ef88;
 --relief-lift-shadow:#04121a5a;--relief-lift-edge:#a9bfcb36;
 --radius-s:4px;--radius-m:8px;--radius-pill:999px;
 --sans:"Site Sans","Site Symbols","Site Sans Fallback",Arial,sans-serif;
 --mono:"Site Mono",Menlo,Consolas,'Liberation Mono',monospace}
:root[data-theme="light"]{color-scheme:light;
 --bg:#f4f3ef;--surface:#fbfaf7;--raised:#ffffff;--contact:#fbfaf7;--bar:#dfe6ea/* * */;
 --ink:#0c2835;--muted:#5f7079;--line:#92a1a8;--soft-line:#c9d3d9;
 --accent:#cf4d63/* * dark's coral, deepened for ivory */;--accent-hover:#b83f55/* * */;--accent-ink:#fbfaf7;
 --button:#ffffff;--button-ink:#0c2835;--button-hover:#e9ebec;--button-edge:#92a1a8;
 --shadow:#b4c0c6/* * */;--quiet:#e9ebec;--pop-shadow:#0c28352e;
 --relief-seam:#c9d3d9;--relief-field:#dfe3e2/* * */;--relief-shadow:#0c283533;
 --relief-side:#1c3b4a/* * */;--relief-front:#2a4b5b/* * */;--relief-top:#3d647c/* * */;--relief-highlight:#ffffff40;
 --relief-lift-shadow:#0c283533;--relief-lift-edge:#ffffff1c}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--accent-ink)}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button,summary{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
h1,h2,p{margin:0}
h1,h2{font-weight:500;line-height:1.1;letter-spacing:-.045em;text-wrap:balance}
.page-shell{max-width:1600px;margin:auto;container-type:inline-size;background:var(--bg);position:relative}
.mono{font:11px/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.skip-link{position:absolute;top:10px;left:10px;padding:12px 18px;transform:translateY(-200%);z-index:20;background:var(--button);color:var(--button-ink)}
.skip-link:focus{transform:none}

/* Header: wordmark and eyebrow float over the hero field. */
.header{padding:26px 5%;display:grid;grid-template-columns:1fr auto;gap:6px 22px;align-items:center;position:absolute;top:0;left:0;width:100%;z-index:5;pointer-events:none}
.header a{pointer-events:auto}
.brand-wordmark{justify-self:start;display:flex;align-items:center;min-height:44px;font-size:30px;font-weight:500;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.brand-wordmark .dot{color:var(--accent)}
.brand-wordmark .tld{color:var(--muted);font-weight:400}
.eyebrow{display:flex;gap:8px;align-items:center;color:var(--muted)}
.header>.eyebrow{grid-column:1/-1;line-height:1.5;font-size:clamp(8px,1.15vw,11px);position:relative;top:-9px}
.tiny-grid{color:var(--accent);font-size:16px}

/* Hero: copy on the left, the raised lettering field across the whole section. */
.hero{min-height:clamp(560px,66cqw,950px);position:relative;display:flex;align-items:flex-start;padding:112px 5% 48px}
.intro{position:relative;z-index:1;width:100%;pointer-events:none}
.intro a{pointer-events:auto}
h1{font-size:clamp(46px,8.6cqw,112px);line-height:.99;letter-spacing:-.06em;margin:28px 0 34px;max-width:1000px}
.muted{color:var(--muted)}
/* Headline word cycle (js/cycle.js): the word after "my" changes through a flat block grid. */
/* Clickable (js/cycle.js: a click changes the word now), though the headline layer ignores the pointer. */
.cycle{position:relative;display:inline-block;white-space:nowrap;pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none}
/* Inline-block, not inline: iOS Safari ignores clip-path on inline boxes, and the word is clipped per cell. */
.cycle-text{display:inline-block}
.cycle-next{position:absolute;left:0;top:0}
.cycle-grid{position:absolute;pointer-events:none}
.cycle-flap{position:absolute;transform-origin:50% 100%;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.cycle-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cycle-face-word{background:var(--bg)}
.cycle-face-back{transform:rotateX(180deg)}
.cycle-flap-text{position:absolute;white-space:nowrap}
.cycle-flap-shade{position:absolute;inset:0;background:var(--relief-shadow);opacity:0}
.cycle-cast{position:absolute;pointer-events:none}
.art{position:absolute;inset:0;width:100%;height:100%}
/* The hero canvas runs edge to edge of the window, past the page's 1600 px cap, and down to the page's
   end behind the contact window and the footer, or to the window's bottom when the page is shorter
   (relief.js sets that height), so a shadow reaches the window's edge and runs on behind the boxes;
   relief.js lays the lettering out within the page and the hero. */
.hero .art{left:50%;right:auto;width:100vw;transform:translateX(-50%)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;opacity:var(--entrance-opacity,1)}
.entrance-content{opacity:var(--entrance-opacity,1)}
.relief-fallback{display:flex;align-items:center;justify-content:center;height:100%;min-height:inherit;color:var(--muted);font:40px/1.1 var(--mono);letter-spacing:.04em}
.hero-fallback{margin-left:36%;font-size:clamp(70px,12vw,150px);font-weight:bold;transform:rotate(-16deg)}
.relief-ready>.relief-fallback,.js .relief-fallback{display:none}
.relief-figure{position:relative;min-width:0;min-height:95px}

.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;background:var(--button);color:var(--button-ink);border:1px solid var(--button-edge);box-shadow:3px 3px var(--shadow);padding:14px 18px;font-size:14px;line-height:1.4;max-width:100%;min-height:48px;transition:background .15s,border-color .15s,box-shadow .15s}
.primary:hover{background:var(--button-hover);box-shadow:5px 5px var(--shadow)}
.text-link{display:inline-flex;align-items:center;gap:18px;font-size:13px;line-height:1.6;border-bottom:1px solid var(--line);padding:9px 0;min-height:44px}
.text-link:hover{color:var(--accent);border-color:var(--accent)}

/* Contact: the retro window. */
.contact-section{position:relative;z-index:1;width:90%;max-width:1100px;margin:0 auto 60px;border:1px solid var(--line);box-shadow:5px 5px var(--shadow);background:var(--contact);overflow:hidden}
.window-title{display:flex;gap:14px;align-items:center;min-height:34px;background:var(--bar);padding:8px 14px;border-bottom:1px solid var(--line);font:11px/1.3 var(--mono)}
.window-dot{width:10px;height:10px;border:1px solid var(--muted)}
.stripes{height:13px;flex:1;background:repeating-linear-gradient(to bottom,var(--muted) 0,var(--muted) 1px,transparent 1px,transparent 3px);opacity:.45}
.contact-body{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:32px 40px;align-items:stretch}
.contact-copy{align-self:center;position:relative;z-index:1}
h2{font-size:clamp(32px,4.5cqw,54px)}
.contact-copy h2{margin-bottom:20px}
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:26px}
.contact-body .relief-figure{min-height:220px;margin:-32px -40px -32px 0}
/* The HELLO canvas spans the whole window body (under the copy) so its shadows run on to the
   frame; relief.js keeps the lettering in the figure's own column. */
.contact-body .relief-figure>canvas{left:calc(-100% - 28px);width:calc(200% + 28px)}

/* Pixel glyphs (dev/glyphs/): the hero's blocks seen flat-on, in its own colours, so they follow
   the theme; they light coral on hover like the hero. Char siu and pizza up top, a skull in the footer; all invisible until hovered. */
.glyph{display:block;height:auto}
.glyph .t{fill:var(--relief-top);transition:fill .25s}
.glyph .f{fill:var(--relief-front);transition:fill .25s}
.glyph .fl{fill:var(--relief-field)}
.glyph-link{display:inline-grid;place-items:center;color:inherit}
.glyph-link:hover .glyph .t,.glyph-link:focus-visible .glyph .t{fill:var(--accent)}
.glyph-link:hover .glyph .f,.glyph-link:focus-visible .glyph .f{fill:color-mix(in srgb,var(--accent) 62%,var(--relief-side))}
.char-siu-link,.pizza-link{width:44px;height:44px;opacity:0;transition:opacity .6s}
.char-siu-link .glyph,.pizza-link .glyph{width:34px}
/* The inward halves reveal the neighbouring shortcut; keyboard focus reveals both. */
.char-siu-link:hover,.char-siu-link:focus-visible,.char-siu-link.is-near,.pizza-link:hover,.pizza-link:focus-visible,.pizza-link.is-near{opacity:1}
.header-actions:has(:is(.char-siu-link,.pizza-link):focus-visible) :is(.char-siu-link,.pizza-link){opacity:1}
/* Keep the recipe shortcuts closer together than the display control. */
.char-siu-link{margin-right:-18px}
/* The skull is invisible until hovered itself, and stays in the block colours (no coral). */
.skull-link{width:30px;height:30px;margin-right:10px;opacity:0;transition:opacity .6s}.skull-link .glyph{width:24px}
.skull-link:hover,.skull-link:focus-visible{opacity:1}
/* The footer's right side (skull + name) as a centred row, so it lines up with the left side. */
.footer>span:last-child{display:inline-flex;align-items:center}
.skull-link:hover .glyph .t,.skull-link:focus-visible .glyph .t{fill:var(--relief-top)}
.skull-link:hover .glyph .f,.skull-link:focus-visible .glyph .f{fill:var(--relief-front)}
/* Touch (html[data-input="mobile"], js/site.js): the hidden glyphs show only when a tap's wave
   uncovers them (.discovered), then fade out slowly; a touch's sticky hover is ignored. Char siu and
   pizza stay coral while showing, so they read as links. */
html[data-input="mobile"] .glyph-link{transition:opacity 1.1s ease-out}
html[data-input="mobile"] :is(.char-siu-link,.pizza-link,.skull-link):is(:hover,.is-near){opacity:0}
html[data-input="mobile"] .header-actions:has(:is(.char-siu-link,.pizza-link):focus-visible) :is(.char-siu-link,.pizza-link),
html[data-input="mobile"] .glyph-link:is(.discovered,:focus-visible){opacity:1;transition-duration:.2s}
html[data-input="mobile"] .glyph-link:not(.skull-link) .glyph .t{fill:var(--accent)}
html[data-input="mobile"] .glyph-link:not(.skull-link) .glyph .f{fill:color-mix(in srgb,var(--accent) 62%,var(--relief-side))}
.footer{position:relative;z-index:1;padding:25px 5%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;background:var(--quiet);border-top:1px solid var(--soft-line);color:var(--muted);font:11px/1.6 var(--mono)}

/* Display controls: a quiet fixed button and its popover. */
.header-actions{display:flex;align-items:center;gap:14px;position:fixed;top:26px;right:clamp(16px,3vw,40px);z-index:15}
.appearance{position:relative}
.appearance>summary{list-style:none}
.appearance>summary::-webkit-details-marker{display:none}
.display-trigger{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--soft-line);border-radius:var(--radius-m);color:var(--muted);background:var(--surface);transition:background .15s,border-color .15s}
.display-trigger:hover,.appearance[open]>.display-trigger{border-color:var(--accent);color:var(--ink)}
.controls-popover{position:absolute;top:calc(100% + 12px);right:0;width:300px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 96px);overflow-y:auto;background:var(--surface);color:var(--ink);border:1px solid var(--soft-line);border-radius:var(--radius-m);box-shadow:0 12px 32px var(--pop-shadow);z-index:10}
.controls-title{padding:18px 20px 2px;font:500 14px/1.5 var(--sans);letter-spacing:-.01em}
.study-controls{display:flex;flex-direction:column;padding:4px 20px 12px;font:14px/1.5 var(--sans)}
.study-controls label{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 0;min-height:64px;cursor:pointer}
.control-copy{display:block;min-width:0;flex:1}
.control-copy>span{font-weight:500}
.control-copy small{display:block;max-width:190px;color:var(--muted);font:12px/1.55 var(--sans);margin-top:3px}
.study-controls input[role="switch"]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:36px;height:22px;margin:0;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--quiet);cursor:pointer;transition:background .15s,border-color .15s}
.study-controls input[role="switch"]:before{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;background:var(--muted);border-radius:var(--radius-pill);transition:transform .15s,background .15s}
.study-controls input[role="switch"]:checked{background:var(--accent);border-color:var(--accent)}
.study-controls input[role="switch"]:checked:before{transform:translateX(14px);background:var(--accent-ink)}
/* Interaction (js/site.js): a small, quiet Mobile / Desktop slider at the bottom of the menu. */
.input-mode{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0 2px;border-top:1px solid var(--soft-line);color:var(--muted);font:12px/1.4 var(--sans)}
.input-slider{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:2px;border:1px solid var(--soft-line);border-radius:var(--radius-pill);isolation:isolate}
.input-slider:before{content:'';position:absolute;z-index:-1;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:var(--radius-pill);background:var(--quiet);transition:transform .2s}
.input-slider:has([value="desktop"]:checked):before{transform:translateX(100%)}
.study-controls .input-slider label{position:relative;display:block;min-height:0;padding:2px 9px;font-size:11px;text-align:center;color:var(--muted)}
.input-slider label:has(:checked){color:var(--ink)}
.input-slider label:has(:focus-visible){outline:2px solid var(--accent);outline-offset:1px;border-radius:var(--radius-pill)}
.input-slider input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}

/* 404 page: the headline on the left, "404" in raised blocks on the right. */
.notfound .hero{min-height:clamp(520px,50cqw,700px)}
.notfound-figure{position:absolute;right:4%;top:110px;width:52%;bottom:40px}
.notfound .intro .primary{margin-top:6px}
@media(max-width:650px){
 .header{padding-top:22px;padding-bottom:22px;gap:15px}.mono{font-size:10px}.header>.eyebrow{top:-15px}
 .contact-body{padding:28px;gap:16px}.contact-body .relief-figure{min-height:190px;margin:-28px -28px -28px 0}.contact-body .relief-figure>canvas{left:calc(-100% - 16px);width:calc(200% + 16px)}.contact-section{margin-bottom:40px}.contact-copy h2{font-size:38px}
}
@media(max-width:550px){
 .contact-body{grid-template-columns:1fr;padding-bottom:12px}.contact-body .relief-figure{height:150px;min-height:130px;margin:-4px 0 0}.contact-body .relief-figure>canvas{left:0;width:100%}
 .header-actions{gap:8px}.char-siu-link{margin-right:-12px}.brand-wordmark{font-size:26px}
 .hero{display:block;min-height:0;padding:430px 6% 48px}.hero h1{font-size:44px;max-width:360px;line-height:1.04;margin-bottom:0}
 .hero-fallback{position:absolute;top:110px;width:100%;height:310px;margin:0;font-size:80px}
 .notfound .hero{padding-top:340px}.notfound .intro .primary{margin-top:22px}.notfound-figure{left:0;right:0;top:100px;width:100%;bottom:auto;height:230px}
}
@media(max-width:380px){.hero h1{font-size:40px}.brand-wordmark{font-size:22px}.header-actions{gap:2px}.char-siu-link{margin-right:-8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.entrance-content,canvas{opacity:1!important}}

/* When an entrance is due (set by js/boot.js before paint), everything it fades in starts
   hidden. The selector list is mirrored in js/site.js. */
:root[data-intro="pending"] :is(.header,.intro,.contact-section .window-title,.contact-copy,.footer),:root[data-intro="pending"] canvas{opacity:0}

/* Panel sections (js/site.js): Sun, Headline and Ripples as <details>, each a column of sliders.
   Sub-sections nest one level (Fix the sun, Day settings). */
.panel-section{border-top:1px solid var(--soft-line);margin-top:14px;padding-top:14px}
.panel-section>summary,.panel-sub>summary{cursor:pointer;font-weight:500;min-height:32px}
.panel-sub{margin:4px 0 2px;padding-left:12px;border-left:2px solid var(--soft-line)}
.panel-sub>summary{font-size:12px;color:var(--muted);min-height:28px}
.panel-sub[open]>summary{color:var(--ink)}
.panel-help,.sun-status{font-size:12px;color:var(--muted);margin:4px 0 8px}
.sun-status{font-variant-numeric:tabular-nums;margin-top:-6px}
.study-controls .panel-section label{display:grid;grid-template-columns:1fr auto;gap:6px;min-height:0;padding:9px 0;font-size:12px}
.study-controls .panel-section label:has(.control-copy){display:flex;padding:6px 0;min-height:44px}
.study-controls .panel-section label.following{color:var(--muted)}
.study-controls .panel-section label.following input[type=range]{opacity:.55}
.panel-section output{color:var(--muted);font-variant-numeric:tabular-nums}
.panel-section input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--accent);min-height:24px}
.panel-section button{background:var(--quiet);color:var(--ink);border:1px solid var(--soft-line);border-radius:6px;padding:9px 12px;margin:10px 8px 4px 0;cursor:pointer}
.panel-section select{width:100%;margin:6px 0 2px;padding:8px;background:var(--quiet);color:var(--ink);border:1px solid var(--soft-line);border-radius:6px;font:inherit;font-size:12px}
.pace{margin-bottom:6px}