/*
 * snowjeweldesign.com base styles.
 * Structure only: the visual design pass will replace most values here.
 * Colors and fonts carry over from the 2013 site; logo colors from source/logo-test.html.
 */

/* Fonts (self-hosted, latin subset; licenses in /fonts/) */

@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 200; font-display: swap; src: url("/fonts/titillium-web-200.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/titillium-web-300.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/titillium-web-400.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/titillium-web-600.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/titillium-web-700.woff2") format("woff2"); }
@font-face { font-family: "Dawning of a New Day"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dawning-of-a-new-day-400.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* 2013 site palette */
  --color-text: #222;
  --color-slate: #3a5257;
  --color-mist: #d1d3db;
  --color-stone: #666;
  --color-paper: #fff;
  --color-selection: #b3d4fc;

  /* Logo */
  --color-logo-ink: #2d3748;
  --color-logo-line: #4a90e2;
  --color-logo-facet: #79a7db;

  --font-body: "Titillium Web", system-ui, sans-serif;
  --font-script: "Dawning of a New Day", cursive;

  --text-s: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
  --text-m: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-l: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --text-xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 3rem;
  --space-xl: clamp(4rem, 3rem + 5vw, 7rem);

  --measure: 65ch;
  --container: 72rem;
  --fade: 450ms;
}

/* Dark theme. data-theme is set in layout.erb before first paint, and by js/theme.js. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-paper: #16191c;
  --color-text: #e3e6e8;
  --color-slate: #8ab6bc;
  --color-mist: #2c3238;
  --color-stone: #9ba1a6;
  --color-selection: #23476d;

  --color-logo-ink: #e3e6e8;
}

/* Reset */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { text-size-adjust: none; -webkit-text-size-adjust: none; }
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-paper);
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; }
p, li, h1, h2, h3 { overflow-wrap: break-word; }
h1, h2, h3 { font-weight: 300; line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--text-xl); font-weight: 200; }
h2, h3 { font-size: var(--text-l); }
::selection { background: var(--color-selection); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

a { color: var(--color-slate); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-logo-line); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-s);
  z-index: 10;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-slate);
  color: var(--color-paper);
}
.skip-link:focus { top: var(--space-s); }

/* Layout */

.container { width: min(100% - 2 * var(--space-m), var(--container)); margin-inline: auto; }
.prose { max-width: var(--measure); }
.container.prose { margin-inline: max(var(--space-m), (100% - var(--container)) / 2); }
.prose > * + * { margin-top: var(--space-s); }
.prose > h3 { margin-top: var(--space-l); }
.prose li + li { margin-top: var(--space-xs); }

.section { padding-block: var(--space-xl); }
.section-title { font-family: var(--font-script); font-size: var(--text-xl); font-weight: 400; }
.section-dark { background: var(--color-slate); color: var(--color-paper); }
.section-dark a { color: inherit; }
.section-alt { background: var(--color-mist); }

.lede, .opening-lede { font-size: var(--text-l); }

/* Header and logo */

.site-header { padding-block: var(--space-s); }
.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
}
.site-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
.site-logo { color: inherit; text-decoration: none; }

/* Logo layout, mark and size differ per design: see css/designs/*.css and partials/designs/*/_logo.erb */
.logo-text { line-height: 1; color: var(--color-logo-ink); }
.logo-snow { font-weight: 300; }
.logo-jewel { font-weight: 700; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); padding: 0; list-style: none; }
.site-nav a { font-weight: 400; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; }

/* Theme toggle: shows a moon in light mode, a sun in dark mode. Hidden until js/theme.js runs. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--color-mist);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--color-slate); }
.theme-icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle[aria-pressed="true"] .theme-icon-moon,
.theme-toggle[aria-pressed="false"] .theme-icon-sun { display: none; }

/* Home */

.opening-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-l); }
.opening-text { flex: 1 1 30rem; }
.opening-text > * + * { margin-top: var(--space-s); }
.opening-text .eyebrow { color: var(--color-stone); }
.opening-lede { max-width: 40ch; }
.opening-portrait { flex: 0 0 auto; width: min(18rem, 100%); }

/* Photo left, text right; stacks with the photo first on narrow screens */
.short-version { display: grid; gap: var(--space-l); align-items: start; }
.short-version-photo { width: min(20rem, 100%); }
@media (min-width: 48rem) {
  .short-version { grid-template-columns: minmax(12rem, 20rem) minmax(0, var(--measure)); align-items: stretch; }
  /* The photo stretches to the height of the text and crops to fit. Positioning the img
     absolutely keeps the photo's own height from making the row taller than the text. */
  .short-version-photo { position: relative; width: 100%; }
  .short-version-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-l);
  margin-top: var(--space-l);
  padding: 0;
  list-style: none;
}
.card > * + * { margin-top: var(--space-xs); }
.card-meta, .case-study-meta, .history-years, .history-org { font-size: var(--text-s); color: var(--color-stone); }

figcaption { margin-top: var(--space-xs); font-size: var(--text-s); }

.testimonials { display: grid; gap: var(--space-l); margin-top: var(--space-l); padding: 0; list-style: none; }
.testimonials blockquote { font-size: var(--text-l); }

.contact-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); padding: 0; list-style: none; }
.contact-links > li { margin-top: var(--space-xs); }

/* Off the clock: text left, photo right; stacks on narrow screens */
.life { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 56rem) {
  .life { grid-template-columns: minmax(0, var(--measure)) minmax(18rem, 1fr); }
}

/* People: text left, photo right; stacks with the photo below the text on narrow screens */
.people { display: grid; gap: var(--space-l); align-items: start; }
.people-photo { width: min(20rem, 100%); }
@media (min-width: 56rem) {
  .people { grid-template-columns: minmax(0, var(--measure)) minmax(12rem, 18rem); }
  /* Sticky so the photo stays in view alongside the long text column */
  .people-photo { position: sticky; top: var(--space-l); width: 100%; }
}

/* "What I'm looking for": the body text is light (300), so bold alone barely registers.
   Marked phrases get a highlighter band in the selection color, plus a small weight bump. */
#contact strong {
  font-weight: 600;
  background: linear-gradient(to top, var(--color-stone) 0.2em, transparent 0.1em);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Case studies */

.case-study-header { padding-bottom: var(--space-l); }
.eyebrow { font-size: var(--text-s); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0; list-style: none; }
.tags li { padding: 0.1em 0.6em; border: 1px solid var(--color-mist); font-size: var(--text-s); }
.case-study-body { padding-block: var(--space-l); }
.case-study-footer { padding-bottom: var(--space-xl); }

/* Work history
 * Default (no JS, narrow screens): the timeline is a list of links, panels stack.
 * .is-enhanced (added by js/work-history.js): the timeline scrolls on the left while
 * the panels sit pinned on the right and fade between milestones. */

.history { padding-bottom: var(--space-xl); }
.history-timeline ol { display: grid; gap: var(--space-xs); padding: 0; list-style: none; }
.history-milestone a { display: block; text-decoration: none; }
.history-milestone .history-years { display: block; }
.history-panel { padding-block: var(--space-l); scroll-margin-top: var(--space-s); }
.history-panel > * + * { margin-top: var(--space-xs); }

/* Category colors: a neutral nature palette (moss, clay, slate, lichen), lightened for dark mode
   so they stay visible. Used on the timeline marker and the panel's left rule. */
[data-category="work"] { --category-color: #4f6b5a; }
[data-category="life"] { --category-color: #9a6b4f; }
[data-category="education"] { --category-color: #5d7284; }
[data-category="civic"] { --category-color: #7c7f55; }
:root[data-theme="dark"] [data-category="work"] { --category-color: #9ec4ad; }
:root[data-theme="dark"] [data-category="life"] { --category-color: #d9a985; }
:root[data-theme="dark"] [data-category="education"] { --category-color: #a9c0d6; }
:root[data-theme="dark"] [data-category="civic"] { --category-color: #c2c58f; }

.history-panel[data-category] {
  border-left: 3px solid var(--category-color, var(--color-mist));
  padding-left: var(--space-m);
}

.history.is-enhanced {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2fr;
  gap: var(--space-l);
  align-items: start;
}
/* Padding lets the first and last milestones reach the middle of the screen */
.history.is-enhanced .history-timeline ol { gap: 0; padding-block: 45vh; }
.history.is-enhanced .history-milestone a {
  padding: var(--space-m) var(--space-s);
  border-left: 3px solid var(--color-mist);
  color: var(--color-stone);
}
.history.is-enhanced .history-milestone.is-active a {
  border-left-color: var(--category-color, var(--color-slate));
  color: var(--color-text);
}
.history.is-enhanced .history-stage {
  position: sticky;
  top: 0;
  display: grid;
  height: 100vh;
  height: 100dvh;
}
.history.is-enhanced .history-panel {
  grid-area: 1 / 1;
  align-self: center;
  max-height: 100%;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade) ease, visibility 0s linear var(--fade);
}
.history.is-enhanced .history-panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fade) ease calc(var(--fade) / 3), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .history.is-enhanced .history-panel,
  .history.is-enhanced .history-panel.is-active { transition: none; }
}

/* Footer */

.site-footer { padding-block: var(--space-l); background: var(--color-stone); color: var(--color-paper); }
.site-footer a { color: inherit; }
.site-footer .container > * + * { margin-top: var(--space-s); }
.site-footer-legal { font-size: var(--text-s); }