/* Sunpatch. © 2026 Robin Metcalfe (Solarise). All rights reserved. */
:root{--paper: #F1EADB;--card: #FAF6EC;--wash: #E9E0CD;--ink: #29241C;--ink-soft: #4A4234;--mute: #6A6150;--rule: rgba(56, 44, 24, .13);--rule-strong: rgba(56, 44, 24, .26);--sun: #E39F36;--sun-edge: #AD7115;--sun-tint: #F7E7C3;--sun-ink: #6A4407;--leaf: #4A7639;--leaf-edge: #34562A;--leaf-tint: #E2E8CF;--leaf-ink: #2E4F22;--sky: #3C5D97;--sky-edge: #2A4474;--sky-tint: #DFE4EE;--sky-ink: #253E69;--soil: #B04D2B;--soil-edge: #82361B;--soil-tint: #F3DECF;--soil-ink: #7C3014;--serif: "Fraunces", Georgia, serif;--ui: "Bricolage Grotesque", system-ui, sans-serif;--soft: "SOFT" 100, "WONK" 1;--ease: cubic-bezier(.2, .7, .2, 1);--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .20 0 0 0 0 .15 0 0 0 0 .08 .6 0 0 0 -.25'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");--fleck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .22 0 0 0 0 .10 3.2 0 0 0 -2.2'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23f)'/%3E%3C/svg%3E");--hand-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6'%3E%3Cpath d='M0 3.1c20-.8 40 .7 60 0s40-.9 60-.1 40 .8 60 .1 40-.8 60 0' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");--hand-under: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' preserveAspectRatio='none'%3E%3Cpath d='M2 4.6C20 3.2 38 5.2 60 3.9s38-1 58 .5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background-color:var(--paper);background-image:var(--fleck),var(--grain);color:var(--ink);font:400 17px/1.6 var(--ui);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}.day{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr)}.day>:not(.stage){grid-column:1}.stage{grid-column:2;grid-row:1 / span 7;align-self:start;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}.stage canvas{display:block;width:100%;height:100%}.stage:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;z-index:1;pointer-events:none;background:var(--ink);opacity:.35;-webkit-mask:var(--hand-rule) repeat-y center / 6px 240px;mask:var(--hand-rule) repeat-y center / 6px 240px}.hero,.beat-text,.ways{padding-left:clamp(24px,5vw,88px);padding-right:clamp(24px,3.5vw,56px)}.sep{position:absolute;left:clamp(24px,5vw,88px);right:clamp(24px,3.5vw,56px);top:0;height:6px;background:var(--ink);opacity:.3;-webkit-mask:var(--hand-rule) repeat-x left center / 240px 6px;mask:var(--hand-rule) repeat-x left center / 240px 6px}h1,h2{font-family:var(--serif);font-variation-settings:var(--soft);margin:0}.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:48px;padding-bottom:48px;max-width:42rem}.brand{font-weight:600;font-size:68px;line-height:.95;letter-spacing:-.03em;margin:0 0 26px;display:flex;align-items:center;gap:16px}.brand:before{content:"";width:34px;height:34px;flex:none;border-radius:50%;background:var(--sun);box-shadow:3px 3px 0 var(--sun-edge);background-image:var(--grain);background-blend-mode:multiply}.lede{font:400 28px/1.25 var(--serif);font-variation-settings:var(--soft);letter-spacing:-.01em;margin:0 0 18px}.hero>p{color:var(--ink-soft);margin:0 0 16px;max-width:34rem}.daychart{margin:22px 0 0;max-width:400px;position:relative;padding-top:20px}.daychart:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--ink);opacity:.3;-webkit-mask:var(--hand-rule) repeat-x left center / 240px 6px;mask:var(--hand-rule) repeat-x left center / 240px 6px}.daychart svg{display:block;width:100%;height:auto;overflow:visible}.daychart figcaption{font:italic 400 15px/1.45 var(--serif);font-variation-settings:var(--soft);color:var(--ink-soft);margin-top:10px}.daychart text{font:500 10.5px var(--ui);fill:var(--mute)}.daychart .grid{stroke:var(--rule-strong);stroke-width:1;stroke-dasharray:1.5 3.5}.daychart .horizon{stroke:var(--ink);stroke-width:1.3}.daychart .band{fill:color-mix(in srgb,var(--sun) 18%,transparent)}.daychart .curve{fill:none;stroke:#29241c4d;stroke-width:1.5}.daychart .curve-day{fill:none;stroke:var(--sun);stroke-width:2.6;stroke-linecap:round}.daychart .now{fill:var(--sun);stroke:var(--ink);stroke-width:1.5}.beat{min-height:130vh;min-height:130svh;position:relative}.beat-text{position:sticky;top:12vh;padding-top:10vh;padding-bottom:12vh;max-width:40rem}.stamp{display:inline-flex;font:650 11.5px/1 var(--ui);font-variation-settings:"wdth" 78;text-transform:uppercase;letter-spacing:.08em;padding:5px 8px 4px;border-radius:3px;margin:0 0 18px;box-shadow:inset 0 0 0 1.3px color-mix(in srgb,currentColor 55%,transparent)}.stamp-left{background:var(--leaf-tint);color:var(--leaf-ink)}.stamp-right{background:var(--soil-tint);color:var(--soil-ink)}.beat h2{font-weight:600;font-size:44px;line-height:1.02;letter-spacing:-.025em;margin:0 0 14px}.beat-lead{font:italic 400 23px/1.3 var(--serif);font-variation-settings:var(--soft);margin:0 0 18px}.beat p{color:var(--ink-soft);margin:0 0 16px}.beat .beat-lead{color:var(--ink)}.note{font:italic 400 17px/1.45 var(--serif);font-variation-settings:var(--soft);border-left:3px solid var(--soil);padding-left:14px}.ways{min-height:90vh;display:flex;flex-direction:column;justify-content:center;position:relative;padding-top:64px;padding-bottom:64px}.ways h2{font-weight:600;font-size:48px;line-height:1;letter-spacing:-.025em;margin:0 0 12px}.ways-lead{color:var(--ink-soft);margin:0 0 30px;max-width:30rem}.packets{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:36rem}.packet{--c: var(--leaf);--c-edge: var(--leaf-edge);display:flex;flex-direction:column;gap:8px;min-height:212px;padding:0 16px 16px;text-decoration:none;color:var(--ink);background-color:var(--card);background-image:var(--grain);border:1.5px solid var(--c-edge);border-radius:6px;overflow:hidden;box-shadow:0 3px 0 var(--c-edge);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}.packet-right{--c: var(--soil);--c-edge: var(--soil-edge)}.packet-kind{margin:0 -16px 10px;padding:11px 16px 10px;font:650 11.5px/1.2 var(--ui);font-variation-settings:"wdth" 78;letter-spacing:.08em;text-transform:uppercase;color:#fff;background-color:var(--c);background-image:var(--grain);background-blend-mode:multiply}.packet-name{font:600 27px/1.05 var(--serif);font-variation-settings:var(--soft);letter-spacing:-.02em}.packet-line{font:400 15px/1.45 var(--ui);color:var(--ink-soft);margin-top:auto}.packet:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--c-edge)}.packet:active{transform:translateY(3px);box-shadow:0 0 0 var(--c-edge);transition-duration:40ms}.packet:focus-visible{outline:3px solid color-mix(in srgb,var(--sun-edge) 55%,transparent);outline-offset:3px}.foot-small{font:400 13px/1.45 var(--ui);color:var(--mute);margin:36px 0 0}.foot-small a{color:var(--ink-soft);text-underline-offset:2px}.clock{position:absolute;left:18px;top:16px;padding:7px 11px 8px;background-color:var(--card);background-image:var(--grain);border:1.5px solid var(--line-edge, #BFAF92);border-radius:5px;box-shadow:0 2px #bfaf92;font:500 12.5px/1.3 var(--ui);color:var(--ink-soft);pointer-events:none;max-width:330px}.clock-row{display:flex;align-items:baseline;gap:10px}.clock-time{font:600 20px/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}.clock-note{margin-top:5px;color:var(--ink);font-variant-numeric:tabular-nums}.clock-note:empty{display:none}.half{position:absolute;bottom:16px;margin:0;padding:7px 10px 6px;font:650 12px/1 var(--ui);font-variation-settings:"wdth" 78;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-radius:3px;pointer-events:none;background-image:var(--grain);background-blend-mode:multiply;transition:opacity .32s,filter .32s,transform .32s var(--ease)}.half-left{left:18px;background-color:var(--leaf)}.half-right{right:16px;background-color:var(--soil)}.stage[data-side=left] .half-right,.stage[data-side=right] .half-left{opacity:.72;filter:saturate(.45)}.stage[data-side=left] .half-left,.stage[data-side=right] .half-right{transform:translateY(-4px)}.nogl{position:absolute;inset:auto 20px 60px;font:400 14px/1.45 var(--ui);color:var(--ink-soft)}@media(max-width:880px){.day{display:flex;flex-direction:column}.hero{order:0;min-height:auto;padding-top:40px}.stage{order:1;height:52svh;z-index:2}.stage:before{display:none}.beat,.ways{order:2}.beat{min-height:90svh}.beat-text{position:static;padding-top:32px;padding-bottom:32px}.brand{font-size:50px}.lede{font-size:22px}.beat h2{font-size:32px}.packets{grid-template-columns:1fr}.clock{left:10px;top:10px;padding:6px 9px 7px}.half{bottom:10px;font-size:10.5px}.half-left{left:10px}.half-right{right:10px}}@media(prefers-reduced-motion:reduce){.packet,.half{transition:none}}.about{min-height:100svh}.ab-top,.ab,.ab-foot{width:min(100% - 48px,68rem);margin:0 auto}.ab-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 0;flex-wrap:wrap}.ab-brand{display:inline-flex;align-items:center;gap:10px;font:600 24px/1 var(--serif);font-variation-settings:var(--soft);letter-spacing:-.02em;color:var(--ink);text-decoration:none}.ab-brand:before{content:"";width:16px;height:16px;border-radius:50%;background:var(--sun);box-shadow:2px 2px 0 var(--sun-edge)}.ab-top nav{display:flex;gap:18px;font:500 15px/1 var(--ui)}.ab-top nav a,.ab-foot a{color:var(--ink-soft);text-underline-offset:3px;text-decoration-thickness:1px}.ab-top nav a:hover,.ab-foot a:hover{color:var(--ink)}.ab{padding:40px 0 24px}.ab section{position:relative;max-width:42rem}.ab .sep{position:static;display:block;margin:0 0 30px}.ab h1{font-weight:600;font-size:56px;line-height:1;letter-spacing:-.03em;margin:0 0 18px}.ab h2{font-weight:600;font-size:38px;line-height:1.05;letter-spacing:-.025em;margin:0 0 14px}.ab .lede{font:400 26px/1.25 var(--serif);font-variation-settings:var(--soft);letter-spacing:-.01em;margin:0 0 14px}.ab p{color:var(--ink-soft);margin:0 0 14px}.ab a{color:var(--ink)}.ab .stamp{margin-bottom:16px}.ab-shot{margin:34px 0 56px;max-width:60rem}.ab-shot img{display:block;width:100%;height:auto;border:1.5px solid var(--rule-strong);border-radius:4px;box-shadow:0 3px #382c182e;background:var(--wash)}.ab-shot figcaption{font:italic 400 15px/1.45 var(--serif);font-variation-settings:var(--soft);color:var(--ink-soft);margin-top:10px;max-width:42rem}.ab-hard{padding-bottom:28px}.ab-lead{font:italic 400 20px/1.4 var(--serif);font-variation-settings:var(--soft);color:var(--ink)!important}.notes{list-style:none;counter-reset:n;margin:28px 0 0;padding:0}.notes li{counter-increment:n;position:relative;padding:0 0 18px 52px;margin-bottom:18px;border-bottom:1px solid var(--rule)}.notes li:last-child{border-bottom:0}.notes li:before{content:counter(n);position:absolute;left:0;top:-2px;font:600 30px/1 var(--serif);font-variation-settings:var(--soft);color:var(--sun-edge)}.notes h3{font:650 19px/1.25 var(--ui);margin:0 0 8px;color:var(--ink)}.ab-who{padding-bottom:36px}.ab-hire{margin:26px 0 22px;max-width:30rem}.ab-packet{min-height:0}.ab-packet .packet-line{margin-top:0}.ab-cta{margin-top:6px;font:650 16px/1.35 var(--ui);color:var(--soil-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.ab-tip{font:italic 400 17px/1.45 var(--serif);font-variation-settings:var(--soft);border-left:3px solid var(--sun);padding-left:14px}.ab-tip a{font:650 15px/1 var(--ui);font-style:normal;margin-left:6px}.ab-credits dl{margin:0;display:grid;grid-template-columns:11rem 1fr;gap:10px 20px;font-size:14.5px;line-height:1.5}.ab-credits dt{font-weight:650;color:var(--ink)}.ab-credits dd{margin:0;color:var(--ink-soft)}.ab-foot{padding:12px 0 48px;font:500 15px/1 var(--ui)}@media(max-width:640px){.ab-top,.ab,.ab-foot{width:calc(100% - 36px)}.ab{padding-top:28px}.ab h1{font-size:40px}.ab h2{font-size:30px}.ab .lede{font-size:22px}.ab-shot{margin:24px -18px 40px}.ab-shot img{border-left:0;border-right:0;border-radius:0}.ab-shot figcaption{padding:0 18px}.notes li{padding-left:36px}.notes li:before{font-size:24px}.ab-credits dl{grid-template-columns:1fr;gap:2px}.ab-credits dd{margin-bottom:10px}}