/* Shared styles for the home page and the two restored work pages. */
:root { color-scheme: dark; --bg:#2e222f; --ink:#fff; --accent:#c7dcd0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Google Sans Code","Yu Gothic",Meiryo,monospace; font-size:16px; line-height:1.9; text-align:left; }
a { color:var(--accent); text-underline-offset:4px; overflow-wrap:anywhere; }
a:hover { color:#eaaded; }
a:focus-visible { outline:2px solid #eaaded; outline-offset:5px; }
main { max-width:1088px; margin:0; padding:32px; }
.hero { padding:34px 0 50px; color:var(--accent); }
.hero p { margin:0; }
.hero h1 { font-size:clamp(44px,10vw,120px); line-height:1.15; letter-spacing:-.07em; margin:0; overflow-wrap:normal; }
h1,h2,h3 { line-height:1.4; overflow-wrap:anywhere; }
.home h2 { background:var(--accent); color:var(--bg); min-height:78px; padding:4px 8px; margin-top:64px; display:flex; align-items:flex-end; justify-content:flex-start; }
.home h2:not([id]) { margin-top:40px; }
.home h2.subheading { background:none; color:var(--ink); min-height:0; padding:0; display:block; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.home h2 + p img { display:block; margin:24px 0; }
.home li { margin:7px 0; }
code { display:inline-block; padding:0 8px; margin-right:8px; background:#453748; font-family:inherit; }
img { max-width:100%; height:auto; vertical-align:middle; }
iframe { max-width:100%; border:0; }
iframe[src*="youtube"] { height:auto; aspect-ratio:16/9; }
.work-title { font-size:clamp(23px,4vw,36px); }
.work { color-scheme:light; --bg:#c7dcd0; --ink:#2e222f; --accent:#2e222f; }
.work a:hover { color:#2e222f; }
.work a:focus-visible { outline-color:#2e222f; }
.work p:has(>img) { text-align:left; }
.work .section-title { text-align:left; font-family:inherit; font-size:clamp(30px,6vw,48px); margin:40px 0 22px; }
table { width:100%; border-collapse:collapse; table-layout:fixed; overflow-wrap:anywhere; }
th,td { padding:12px; border:1px solid #655469; }
th { background:#547e64; } td { background:#9babb2; color:#253633; }
footer { padding:30px 32px; background:#45293f; text-align:left; }
.work footer { background:var(--bg); color:var(--ink); }
.work th, .work td { color:#2e222f; }
.skip-link { position:absolute; top:-100px; } .skip-link:focus { top:0; background:var(--bg); padding:12px; z-index:10; }
@media(max-width:600px) { main { padding:22px 16px; } .hero { padding:25px 0; } ul { padding-left:24px; } th,td { padding:7px; font-size:14px; } footer { padding:30px 16px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }