/* Fogday Studios — shared site styles.
   Layout: one narrow column under a quiet header; slab wordmark.
   Pages: /index-v007.html, /works/index-v007.html, /data/index-v007.html, /about/index-v007.html */
:root {
  --bg: #edf1f2;        /* morning fog */
  --surface: #f8fafa;
  --ink: #1c2830;       /* bay water at dusk */
  --muted: #5b6a73;
  --line: #cfd8dc;
  --accent: #1f5f6b;    /* deep bay teal */
  --hot: #ff5500;       /* nav hover */
  --font-logo: "Patua One", "Rockwell", "Roboto Slab", Georgia, serif;
  /* Fallbacks if Google Fonts doesn't load: humanist sans already on the visitor's computer
     (Seravek: Mac/iPhone · Calibri, Segoe UI: Windows · Ubuntu, DejaVu Sans: Linux), then Arial. */
  --font-wordmark: "Fira Sans Condensed", Seravek, Calibri, "Segoe UI", Ubuntu, "DejaVu Sans", "Arial Narrow", Arial, sans-serif; /* logotype: weight 600 */
  --font-ui: "Fira Sans", Seravek, Calibri, "Segoe UI", Ubuntu, "DejaVu Sans", Arial, sans-serif; /* body: weight 400 */
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.4rem, 7vw, 3.6rem);
}
/* Dark mode: follows the visitor's system setting. Deep navy #16202A. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16202a; --surface: #1e2a36; --ink: #e3eaee; --muted: #8fa3b1;
    --line: #2a3846; --accent: #7fc2cc; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16202a; --surface: #1e2a36; --ink: #e3eaee; --muted: #8fa3b1;
  --line: #2a3846; --accent: #7fc2cc; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; } /* reserve scrollbar space so the header doesn't shift between short and long pages */
body {
  margin: 0;
  background: var(--bg); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--font-ui);
}
.wrap { max-width: calc(44rem + 40px); margin-inline: auto; padding-inline: 20px; }

/* Header */
header { border-bottom: 1px solid var(--line); }
header .wrap, .wide header .wrap { max-width: none; padding-inline: 16px; } /* header spans the full window: logo near the left edge, icons near the right (like ohlonesky.com) */
header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding-block: 22px;
}
.logo {
    font-family: var(--font-wordmark); font-weight: 600;
  font-size: 1.75rem; line-height: 1; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
}

nav { display: flex; align-items: center; gap: 0; }
nav a {
  font-family: var(--font-ui); font-weight: 500; font-size: .875rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); text-decoration: none;
  padding-block: 6px;
}
nav a:hover { color: var(--hot); }
nav a[aria-current="page"] { color: var(--ink); }
nav a[aria-current="page"]:hover { color: var(--hot); }
.bento { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; margin-left: -6px; transition: color .15s ease; }
.bento svg { display: block; width: 100%; height: 100%; }
/* Theme toggle: moon in light mode (fills in on hover), sun in dark mode (hover light yellow) */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 9px; margin: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 4px; transition: color .15s ease; }
.theme-toggle:hover { color: var(--muted); } /* moon keeps its outline color on hover */
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-toggle svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle:hover .icon-moon path { fill: currentColor; } /* moon fills in on hover */
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle:hover { color: #ffe680; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle:hover { color: #ffe680; }
}
.logo { transition: color .15s ease; }
.logo:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Content */
.page { padding-block: 40px 72px; display: grid; gap: 40px; }
h1, h2 { font-family: var(--font-logo); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.1; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
p { margin: 0; max-width: 62ch; }
.lede { font-size: var(--step-1); color: var(--muted); }
.stack { display: grid; gap: 16px; }
.eyebrow {
  font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
}

a.text { color: var(--accent); text-underline-offset: 3px; }

footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--bg); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
main { padding-bottom: 64px; } /* room for the fixed footer */
footer .wrap { padding-block: 14px; font-family: var(--font-wordmark); font-weight: 400; letter-spacing: .02em; font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; text-align: center; }

.logo { font-size: 1.2rem; letter-spacing: 0.04em; text-box: trim-both cap alphabetic; margin-bottom: 13px; } /* smaller than page titles (1.75rem); trimmed to the caps and lifted 13px so its bottom lines up with the bottom of the visible icons */
header .wrap { align-items: flex-end; } /* logo and icons share a bottom edge */
.bento { padding: 11px; } /* 18px icon in a 40px tap target */
.theme-toggle { padding: 12px; } /* 16px icon in a 40px tap target; if these paddings change, change the logo's margin-bottom by the same amount */

/* Random gradient (like "Peek Into the Future" on ohlonesky.com), faded in and out.
   theme.js sets --g1 / --g2 to two random colors. The gradient always sits behind the logo text;
   on hover (or while the Works title is hovered: .lit) the solid ink fades to transparent and reveals it.
   Fade-in is quicker than fade-out, so colors arrive briskly and linger as they leave.
   --g1 / --g2 are registered (@property) so a new gradient also blends in instead of jumping. */
:root { --fade-in: .6s; --fade-out: 1.2s; --blend: .8s; }
@media (prefers-reduced-motion: reduce) { :root { --fade-in: .01s; --fade-out: .01s; --blend: .01s; } }
@property --g1 { syntax: '<color>'; inherits: true; initial-value: #4a90c8; }
@property --g2 { syntax: '<color>'; inherits: true; initial-value: #4a90c8; }
.logo {
  background-image: linear-gradient(to right, var(--g1), var(--g2));
  -webkit-background-clip: text; background-clip: text;
  padding-block: 3px; margin-top: -3px; margin-bottom: 10px; /* room so round letters (O, S) aren't clipped; bottom edge unchanged (3 + 10 = 13px) */
  transition: color var(--fade-out) ease, --g1 var(--blend) ease, --g2 var(--blend) ease; /* fade-out */
}
.logo:hover, .logo.lit {
  color: transparent;
  transition: color var(--fade-in) ease, --g1 var(--blend) ease, --g2 var(--blend) ease; /* fade-in */
}
/* Bento squares are filled with a gradient that matches the icon color until lit */
.bento stop { stop-color: currentColor; transition: stop-color var(--fade-out) ease, --g1 var(--blend) ease, --g2 var(--blend) ease; }
.bento:hover stop, .bento.lit stop { transition: stop-color var(--fade-in) ease, --g1 var(--blend) ease, --g2 var(--blend) ease; }
.bento:hover .g1, .bento.lit .g1 { stop-color: var(--g1); }
.bento:hover .g2, .bento.lit .g2 { stop-color: var(--g2); }

.theme-toggle .icon-sun { transition: color 1.5s ease; } /* sun drifts between yellow and orange (theme.js) */

/* Dark mode: bento matches the logo (bright ink) instead of the dimmer muted gray */
:root[data-theme="dark"] .bento { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bento { color: var(--ink); }
}
.braille { color: var(--muted); text-decoration: none; letter-spacing: .08em; font-size: 1rem; }
.braille:hover { color: var(--accent); }

/* Data gallery: one column of full, uncropped images */
.gallery { list-style: none; margin: 0 auto; padding: 0; width: 95%; display: grid; gap: 40px; } /* images run 95% of the window width on every page */
.gallery li { min-width: 0; }
.gallery img { display: block; width: 100%; height: auto; }
.gallery a { display: block; }
.gallery.works { gap: 16px; } /* Works page: tighter spacing between banners */
.works-title { width: 95%; margin-inline: auto; } /* heading lines up with the left edge of the banners */
/* Works title and top bar: one fixed sky-blue gradient on every page (no random colors).
   Light mode: deeper sky → the original sky blue, both at least 3:1 on --bg (3.75 and 3.02).
   Dark mode: light sky blues (8.6:1 and 12.5:1 on the navy --bg). */
:root { --title-1: #2f7fc1; --title-2: #4a90c8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --title-1: #7cc4f0; --title-2: #bfe6fb; } }
:root[data-theme="dark"] { --title-1: #7cc4f0; --title-2: #bfe6fb; }
.works-title h2 {
  width: fit-content; /* gradient spans the words, not the whole row */
  background-image: linear-gradient(to right, var(--title-1), var(--title-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Top bar on every page: 8px across the top, in the same gradient as the works title */
body {
  border-top: 8px solid var(--title-1); /* fallback if border-image is unsupported */
  border-image: linear-gradient(to right, var(--title-1), var(--title-2)) 1;
}

/* About page top bar: warming stripes, one stripe per year (143 years), colors sampled from
   the #ShowYourStripes graphic by Ed Hawkins, University of Reading (showyourstripes.info, CC BY 4.0).
   Blue = cooler than average, red = warmer. Turn on with <body class="stripes">.
   Hard color stops, so each year is a crisp band; neighboring years with the same color share one stop. */
body.stripes {
  border-image: linear-gradient(to right,
    #4292c6 0% 0.6993%,
    #08519c 0.6993% 2.0979%,
    #4292c6 2.0979% 2.7972%,
    #08306b 2.7972% 3.4965%,
    #4292c6 3.4965% 4.8951%,
    #2171b5 4.8951% 6.2937%,
    #4292c6 6.2937% 6.993%,
    #2171b5 6.993% 7.6923%,
    #08306b 7.6923% 8.3916%,
    #2171b5 8.3916% 9.0909%,
    #6baed6 9.0909% 10.4895%,
    #001944 10.4895% 11.1888%,
    #4292c6 11.1888% 11.8881%,
    #9ecae1 11.8881% 12.5874%,
    #4292c6 12.5874% 13.2867%,
    #08519c 13.2867% 13.986%,
    #001944 13.986% 14.6853%,
    #2171b5 14.6853% 15.3846%,
    #08519c 15.3846% 16.0839%,
    #6baed6 16.0839% 17.4825%,
    #08306b 17.4825% 18.1818%,
    #001944 18.1818% 19.5804%,
    #08519c 19.5804% 20.979%,
    #4292c6 20.979% 22.3776%,
    #6baed6 22.3776% 23.0769%,
    #4292c6 23.0769% 26.5734%,
    #6baed6 26.5734% 27.2727%,
    #2171b5 27.2727% 27.972%,
    #4292c6 27.972% 28.6713%,
    #2171b5 28.6713% 30.0699%,
    #9ecae1 30.0699% 31.4685%,
    #4292c6 31.4685% 32.1678%,
    #c6dbef 32.1678% 32.8671%,
    #9ecae1 32.8671% 33.5664%,
    #6baed6 33.5664% 34.2657%,
    #2171b5 34.2657% 34.965%,
    #001944 34.965% 35.6643%,
    #c6dbef 35.6643% 36.3636%,
    #6baed6 36.3636% 37.0629%,
    #4292c6 37.0629% 38.4615%,
    #c6dbef 38.4615% 39.1608%,
    #08519c 39.1608% 39.8601%,
    #fcbba1 39.8601% 40.5594%,
    #9ecae1 40.5594% 41.2587%,
    #c6dbef 41.2587% 42.6573%,
    #4292c6 42.6573% 43.3566%,
    #deebf7 43.3566% 44.0559%,
    #9ecae1 44.0559% 44.7552%,
    #6baed6 44.7552% 45.4545%,
    #4292c6 45.4545% 46.1538%,
    #08306b 46.1538% 46.8531%,
    #4292c6 46.8531% 47.5524%,
    #9ecae1 47.5524% 48.2517%,
    #08519c 48.2517% 48.951%,
    #4292c6 48.951% 49.6503%,
    #9ecae1 49.6503% 50.3497%,
    #001944 50.3497% 51.049%,
    #4292c6 51.049% 52.4476%,
    #2171b5 52.4476% 53.1469%,
    #c6dbef 53.1469% 53.8462%,
    #9ecae1 53.8462% 54.5455%,
    #c6dbef 54.5455% 55.2448%,
    #6baed6 55.2448% 55.9441%,
    #deebf7 55.9441% 56.6434%,
    #9ecae1 56.6434% 57.3427%,
    #4292c6 57.3427% 58.042%,
    #9ecae1 58.042% 58.7413%,
    #deebf7 58.7413% 59.4406%,
    #fc9272 59.4406% 60.1399%,
    #9ecae1 60.1399% 61.5385%,
    #4292c6 61.5385% 63.6364%,
    #deebf7 63.6364% 64.3357%,
    #08519c 64.3357% 65.035%,
    #2171b5 65.035% 65.7343%,
    #deebf7 65.7343% 67.1329%,
    #c6dbef 67.1329% 67.8322%,
    #fcbba1 67.8322% 68.5315%,
    #fee0d2 68.5315% 69.2308%,
    #c6dbef 69.2308% 69.9301%,
    #9ecae1 69.9301% 70.6294%,
    #fc9272 70.6294% 71.3287%,
    #9ecae1 71.3287% 72.028%,
    #ef3b2c 72.028% 72.7273%,
    #fee0d2 72.7273% 73.4266%,
    #fc9272 73.4266% 74.1259%,
    #deebf7 74.1259% 74.8252%,
    #fee0d2 74.8252% 76.2238%,
    #fcbba1 76.2238% 76.9231%,
    #c6dbef 76.9231% 77.6224%,
    #fcbba1 77.6224% 78.3217%,
    #fb6a4a 78.3217% 79.021%,
    #ef3b2c 79.021% 79.7203%,
    #fc9272 79.7203% 80.4196%,
    #c6dbef 80.4196% 81.8182%,
    #fcbba1 81.8182% 82.5175%,
    #fb6a4a 82.5175% 83.9161%,
    #ef3b2c 83.9161% 84.6154%,
    #cb181d 84.6154% 85.3147%,
    #ef3b2c 85.3147% 86.014%,
    #fb6a4a 86.014% 86.7133%,
    #fc9272 86.7133% 87.4126%,
    #fee0d2 87.4126% 88.1119%,
    #fcbba1 88.1119% 90.2098%,
    #fee0d2 90.2098% 90.9091%,
    #fc9272 90.9091% 91.6084%,
    #cb181d 91.6084% 92.3077%,
    #440007 92.3077% 93.007%,
    #a50f15 93.007% 93.7063%,
    #cb181d 93.7063% 94.4056%,
    #a50f15 94.4056% 95.1049%,
    #440007 95.1049% 95.8042%,
    #67000d 95.8042% 96.5035%,
    #fb6a4a 96.5035% 97.2028%,
    #a50f15 97.2028% 97.9021%,
    #cb181d 97.9021% 98.6014%,
    #a50f15 98.6014% 99.3007%,
    #440007 99.3007% 100%
  ) 1;
}
.caption { margin: 10px 0 0; max-width: none; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.contact { display: grid; gap: 6px; }

/* Long-form pages (e.g. Maps): each project = heading, image(s), text */
.project { display: grid; gap: 20px; padding-top: 32px; border-top: 1px solid var(--line); width: calc(100% - 40px); max-width: 44rem; margin-inline: auto; } /* article = same width as the intro text column, divider included */
.project > .wrap { padding-inline: 0; }
.project h2 { font-size: var(--step-1); letter-spacing: .02em; }
.page > .wrap, .project > .wrap { width: 100%; } /* keep text columns left-aligned inside grid sections */
.prose a { color: var(--accent); text-underline-offset: 3px; }
.project .gallery { width: 100%; max-width: none; } /* images fill the article */
.project .gallery a { transition: opacity .15s ease; }
.project .gallery a:hover { opacity: .85; } /* preview dims slightly on hover */
.view-link { margin-top: -12px; } /* sits close under its image */
.view-link a { font-size: .9rem; font-weight: 600; letter-spacing: .02em; color: var(--accent); text-decoration: none; transition: color .15s ease; }
.view-link a:hover { color: var(--hot); }

/* Wide pages (Maps): a wider column; text and images share the same edges */
.wide .wrap { max-width: calc(52rem + 40px); }
.wide .page > .wrap:not(.works-title) h2 { color: #4a90c8; } /* :not() so the works title keeps its gradient (it was forced solid blue, so it didn't match the top bar) */
.wide .project { max-width: 52rem; }
.wide .lede, .wide .prose p { max-width: none; }
.wide .prose { font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.25rem); line-height: 1.6; } /* 20px on desktop, 17px on phones */
.wide .project h2 { font-size: var(--step-2); } /* section titles stay larger than the bigger body text */
.wide .page > .gallery { width: calc(100% - 40px); max-width: 52rem; } /* Data on wide pages: images share the column with the title and intro */

/* 404 page (same layout as ohlonesky.com's): full-screen photo, multilingual "Lost in the fog?", click anywhere to go home */
.lost main { padding-bottom: 56px; }
.lost-hero { position: relative; height: max(420px, calc(100svh - 170px)); overflow: hidden; color: #fff; text-align: center; }
.lost-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); }
.lost-home { position: absolute; inset: 0; z-index: 1; }
.lost-text { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 8px; padding: 24px; pointer-events: none; font-size: 1.125rem; font-weight: 500; line-height: 1.55; }
.lost-text p { max-width: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.lost-credit { margin: 8px auto 0; text-align: center; font-size: .75rem; color: var(--muted); max-width: none; }
.lost-credit a { color: inherit; }

/* Flavor Pairings: one ingredient per line, alternating colors so each neighbor pair reads at a glance */
:root { --pair-a: #00246a; --pair-b: #567514; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pair-a: #9cc0ff; --pair-b: #b5d67a; } }
:root[data-theme="dark"] { --pair-a: #9cc0ff; --pair-b: #b5d67a; }
.pairings { list-style: none; margin: 0; padding: 0 0 0 50px; font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); line-height: 1.35; font-weight: 500; }
.pairings li:nth-child(odd) { color: var(--pair-a); }
.pairings li:nth-child(even) { color: var(--pair-b); }