/* Ceramic, Tighter. Ported from documentation/plans/2026-09-29_site-style-prototype.html */

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 450 600;
  font-display: swap;
  src: url(/fonts/literata-v1.woff2) format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/nunito-sans-v1.woff2) format("woff2");
}

:root {
  color-scheme: light dark;
  --bg: #EEE7DC; --surface: #F7F2EA; --ink: #2E322D; --muted: #5C6259;
  --accent: #4F6343; --rule: #DCD3C4; --tint: #DCE2D2; --hl: #C4896A;
  --display: "Literata", Georgia, serif;
  --body: "Nunito Sans", system-ui, sans-serif;
  --r-pill: 8px; --r-btn: 8px; --r-card: 10px; --r-tile: 10px; --r-chip: 6px;
  --measure: 52rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1E1A; --surface: #252821; --ink: #E8E5DC; --muted: #A7AA9F;
    --accent: #AFC39C; --rule: #34382F; --tint: #2F3628; --hl: #B97D5F;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1.03125rem; line-height: 1.7; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
:is(h1, h2, p, ul) { margin: 0; }
ul { list-style: none; padding: 0; }
:is(h1, h2) { font-family: var(--display); font-weight: 450; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
:where(a) { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: clamp(1.25rem, 6vw, 3rem); }
.main { flex: 1; }

.mh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: 1.6rem; }
.name { font-family: var(--display); font-weight: 450; font-size: 1.2rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; }
.name::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; background: var(--hl); }
.nav { display: flex; flex-wrap: wrap; gap: .3rem; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .3em .95em; border-radius: var(--r-pill); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { background: var(--tint); color: var(--accent); }

.page { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 3rem 4rem; }
.kicker { color: var(--muted); font-weight: 600; font-size: .92rem; }
.hello { font-size: 2.7rem; letter-spacing: -.015em; }
.intro { display: flex; flex-direction: column; gap: 1rem; max-width: 36em; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.facts li { display: grid; gap: .15rem; background: var(--tint); border-radius: var(--r-tile); padding: 1rem 1.15rem; line-height: 1.5; }
.facts .k { font-size: .78rem; font-weight: 700; color: var(--accent); }
.elsewhere { display: grid; gap: .5rem; }
.elsewhere li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; }
.k { color: var(--muted); }
.cta, .dl { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.btn { display: inline-block; padding: .6em 1.4em; border-radius: var(--r-btn); background: var(--accent); color: var(--bg); text-decoration: none; font-weight: 700; line-height: 1.3; }
.btn.ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.ph { display: flex; flex-direction: column; gap: .4rem; }
.ph h1 { font-size: 2.1rem; letter-spacing: -.01em; }
.sub { color: var(--muted); }

.plist { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.proj { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .4rem; border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-card); padding: 1.4rem; }
.pmeta { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; }
.pmeta .tag { background: var(--tint); color: var(--accent); border-radius: var(--r-chip); padding: .05em .7em; font-weight: 700; }
.pbody { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.proj h2 { font-size: 1.25rem; font-weight: 600; }
.stack { font-size: .85rem; color: var(--muted); }
.plinks { display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-self: start; }
.plinks a { white-space: nowrap; font-size: .9rem; font-weight: 700; }

.viewer { background: var(--surface); border-radius: var(--r-card); padding: clamp(1rem, 4vw, 2rem); }
.viewer object { display: block; width: 100%; aspect-ratio: 8.5 / 11; height: auto; max-height: 85vh; border: 0; }
.viewer p { text-align: center; padding: 1rem; }
.fine { font-size: .85rem; color: var(--muted); }

.email { font-family: var(--display); font-weight: 450; font-size: 1.4rem; overflow-wrap: anywhere; }
.email a { display: inline-block; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-pill); padding: .35em 1em; text-decoration: none; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-block: 1.5rem 2rem; font-size: .85rem; color: var(--muted); }

@media (max-width: 640px) {
  .nav a { padding: .25em .7em; }
  .hello { font-size: 2.25rem; }
}