/* Homepage editorial system. Case-study layouts retain their own styles. */
:root {
  --font-editorial: "Instrument Serif", Georgia, serif;
  --bg: #201e1a;
  --bg-raise: #292720;
  --ink: #f1ede4;
  --ink-dim: #b2aca0;
  --ink-faint: #918a7d;
  --accent: #d7ad8b;
  --rule: #f1ede426;
  --grain-o: .16;
  --content-x: max(6rem, calc((100vw - 1120px) / 2));
}
:root[data-theme="light"] {
  --bg: #f5f2ea;
  --bg-raise: #ede9df;
  --ink: #302e29;
  --ink-dim: #6e6a60;
  --ink-faint: #827b6e;
  --accent: #946045;
  --rule: #302e292b;
  --grain-o: .12;
}
section { padding-inline: var(--content-x); scroll-margin-top: 8rem; }
.label { color: var(--ink-dim); letter-spacing: .16em; font-size: .65rem; margin-bottom: 1.8rem; }
.label::before { content: none; }
.section-title { font: 400 clamp(3rem, 5.5vw, 5rem)/1.04 var(--font-editorial); letter-spacing: -.03em; max-width: none; margin-bottom: 3rem; text-wrap: balance; }
.section-title em { font-weight: 400; color: var(--accent); }
.hand { display: none; }
.identity-name { font: 400 1.6rem/1.1 var(--font-editorial); letter-spacing: -.025em; }
.status { font-size: .6rem; margin-top: .5rem; }
.status-dot { width: 5px; height: 5px; box-shadow: none; animation: none; }
.frame--nav { flex-direction: row; gap: 1.8rem; top: 2.7rem; }
.frame--nav a { font-family: var(--font-body); font-size: .8rem; letter-spacing: 0; text-transform: none; }
.frame--nav a.is-active .nav-inner::after { left: 50%; top: auto; bottom: -.55rem; width: 3px; height: 3px; box-shadow: none; }
.frame--theme { bottom: 2rem; }
.frame--rail { display: none; }
.work--hero { min-height: 0; padding-top: 10rem; padding-bottom: 4rem; }
.work--hero .bookshelf { --book-h: clamp(280px, 46svh, 410px); }
.projects-note {
  width: max-content;
  margin: 0 max(1rem, calc((100% - 740px) / 2)) .25rem auto;
  color: var(--ink-dim);
  font: 500 1.65rem/1.1 "Caveat", cursive;
  pointer-events: none;
}
.projects-note span { display: block; transform: rotate(-4deg); }
.projects-note svg {
  display: block;
  width: 112px;
  height: 58px;
  margin: .25rem 1rem 0 auto;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.about, .history, .skills, .contact { padding-block: clamp(4rem, 8vw, 7rem); }
.about::before, .history::before, .skills::before, .contact::before { content: ""; display: block; height: 1px; background: var(--rule); margin-bottom: clamp(3rem, 5vw, 5rem); }
.about { padding-top: 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.about-heading .section-title { font-size: clamp(2.8rem, 4.2vw, 4.2rem); margin-bottom: 1.5rem; }
.about-location { color: var(--ink-dim); font-size: .8rem; }
.about-copy { padding-top: 3rem; }
.about-lede { font: 400 clamp(1.3rem, 2vw, 1.65rem)/1.45 var(--font-body); letter-spacing: -.025em; max-width: none; }
.about-sub { margin-top: 1.4rem; font-size: 1rem; line-height: 1.75; max-width: none; }
.stats { max-width: none; margin-top: 4rem; background: none; gap: 2rem; border-bottom: 0; }
.stat { background: transparent; padding: 1.8rem 0 0; }
.stat:hover { background: transparent; }
.stat-num { font: 400 clamp(3rem, 5vw, 4.5rem)/1 var(--font-editorial); color: var(--ink); text-shadow: none; }
.stat:hover .stat-num { text-shadow: none; }
.stat-cap { font: .8rem/1.5 var(--font-body); letter-spacing: 0; text-transform: none; }
.history { padding-top: 0; }
.entry { grid-template-columns: 5rem 1fr; padding: 1.8rem 0; gap: 2rem; }
.entry-year { font-size: .75rem; padding-top: .6rem; }
.timeline--xp .entry-body { grid-template-columns: 1fr; }
.entry-detail { grid-column: 1; grid-row: 2; }
.entry h3, .entry.is-open h3 { font: 400 clamp(1.7rem, 2.6vw, 2.5rem)/1.15 var(--font-editorial); letter-spacing: -.02em; }
.entry-org { font: .88rem/1.6 var(--font-body); letter-spacing: 0; }
.entry-note { max-width: 65ch; font-size: .95rem; }
.entry.is-open { background: none; box-shadow: none; }
.entry.is-open .entry-note { padding-top: 1.1rem; }
.entry-plus { color: var(--ink-dim); }
.label--edu { margin-top: 4rem; }
.timeline--edu .entry h3 { font: 400 clamp(1.25rem, 2vw, 1.75rem)/1.25 var(--font-editorial); }
.skills { padding-top: 0; overflow: visible; }
.practice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
.practice-item { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.practice-number { font: .65rem var(--font-mono); color: var(--accent); }
.practice-item h3 { font: 400 2rem/1.15 var(--font-editorial); margin: 1.4rem 0 1rem; }
.practice-item p { color: var(--ink-dim); font-size: .95rem; line-height: 1.7; }
.practice-item .practice-tools { font-size: .75rem; margin-top: 1.8rem; }
.contact { padding-top: 0; padding-bottom: 7rem; }
.contact .section-title { font-size: clamp(3.5rem, 7vw, 6.5rem); margin-bottom: 1.5rem; }
.contact-intro { color: var(--ink-dim); max-width: 42ch; margin-bottom: 3rem; }
.contact-card { background: none; color: var(--ink); border: 0; max-width: none; padding: 0; }
.contact-card::before { content: none; }
.contact-link { color: var(--ink); border-top: 1px solid var(--rule); padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; text-decoration: none; }
.contact-kind { font: .72rem var(--font-mono); color: var(--ink-dim); }
.contact-value { font: 400 clamp(1rem, 2vw, 1.5rem)/1.4 var(--font-body); color: var(--ink); }
.contact-value::after { content: " ↗"; color: var(--accent); margin-left: .6rem; }
.contact-link:hover .contact-value { color: var(--accent); }
.copyright { border-top: 1px solid var(--rule); margin-top: 0; padding-top: 2rem; color: var(--ink-dim); font: .72rem var(--font-body); }
.to-top { left: auto; right: var(--content-x); bottom: 2rem; transform: none; }
.to-top:hover { transform: translateY(-3px); box-shadow: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (max-width: 900px) {
  :root { --content-x: 3rem; }
  .about-grid { gap: 2rem; }
  .practice-grid { gap: 1.5rem; }
}
@media (max-width: 760px) {
  :root { --content-x: 1.5rem; }
  .frame--nav { top: 5.1rem; gap: 1.5rem; }
  .frame--nav a { font-size: .75rem; }
  .frame--identity { top: 1.2rem; }
  .identity-name { font-size: 1.5rem; }
  .frame--theme { bottom: 1.1rem; }
  .work--hero { padding-top: 9rem; padding-bottom: 3rem; }
  .work--hero .bookshelf { --book-h: clamp(200px, 61vw, 350px); }
  .projects-note { font-size: 1.4rem; margin-right: 1.25rem; }
  .projects-note svg { width: 88px; height: 46px; }
  .about-grid, .practice-grid { grid-template-columns: 1fr; }
  .about-copy { padding-top: 0; }
  .about-grid { gap: 2rem; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
  .stat-num { font-size: 2.8rem; }
  .stat-cap { font-size: .72rem; }
  .entry { grid-template-columns: 1fr; gap: .65rem; }
  .entry-year { padding-top: 0; }
  .practice-grid { gap: 2rem; }
  .practice-item h3 { margin-top: .8rem; }
  .contact-link { gap: .5rem; }
  .contact-value { overflow-wrap: anywhere; font-size: 1rem; }
  .copyright { font-size: .65rem; }
}
/* Keep the fixed controls legible as content passes behind them. */
body::before { height: 8rem; background: linear-gradient(180deg, var(--bg) 60%, transparent); }
.frame--theme { background: var(--bg); }
.contact-link { border-bottom: 0; }
.contact-value { letter-spacing: -.01em; }
.contact-link:hover .contact-kind { text-shadow: none; }
.copyright { letter-spacing: .02em; text-transform: none; }
@media (max-width: 760px) {
  body::before { height: 8rem; background: linear-gradient(180deg, var(--bg) 78%, transparent); }
}
.skills { padding-inline: var(--content-x); }
#skills-title { scroll-margin-top: 9rem; }