:root {
  color-scheme: light;
  --ink: oklch(22% 0.028 70);
  --muted: oklch(48% 0.035 72);
  --paper: oklch(96.5% 0.012 83);
  --panel: oklch(98.8% 0.006 86);
  --navy: oklch(13% 0.035 248);
  --navy-soft: oklch(25% 0.052 246);
  --copper: oklch(70% 0.07 62);
  --copper-dark: oklch(39% 0.08 50);
  --line: oklch(84% 0.012 82);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  color: var(--ink);
  background: oklch(10% 0.025 248);
}

a {
  color: inherit;
  text-decoration: none;
}

.topbar {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  width: min(96rem, calc(100% - clamp(1.5rem, 4vw, 4rem)));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.1rem, 3vw, 2rem);
  color: oklch(96% 0.012 83);
  background: transparent;
  border-bottom: 1px solid oklch(96% 0.01 85 / 0.14);
}

.brand {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.topnav {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  color: oklch(91% 0.02 85 / 0.82);
  font-size: 0.95rem;
}

.topnav a {
  transition: color 160ms ease;
}

.topnav a:hover,
.topnav a:focus-visible {
  color: var(--copper);
}

.site-shell {
  width: 100%;
  margin: 0;
  background: linear-gradient(180deg, oklch(11% 0.03 248) 0, oklch(11% 0.03 248) 46rem, var(--paper) 46rem);
  box-shadow: none;
}

.hero-panel {
  position: relative;
  min-height: clamp(32rem, 68vw, 48rem);
  overflow: hidden;
  background: oklch(10% 0.025 248);
}

.hero-panel img {
  width: 100%;
  height: 100%;
  min-height: clamp(32rem, 68vw, 48rem);
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.03) brightness(1.04);
}

.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, oklch(8% 0.03 248 / 0.06), oklch(7% 0.03 248 / 0.46)),
    linear-gradient(to right, oklch(6% 0.03 248 / 0.58), transparent 58%);
}

.hero-copy {
  position: absolute;
  z-index: 1;
  left: max(clamp(1.5rem, 5vw, 4.5rem), calc((100vw - 96rem) / 2 + 2rem));
  bottom: clamp(3rem, 8vw, 6rem);
  max-width: 42rem;
  color: oklch(97% 0.018 83);
}

.eyebrow,
.section-kicker,
.entry-meta {
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 0.8rem;
  color: oklch(84% 0.09 65);
  font-size: 0.86rem;
}

h1,
h2,
h3 {
  font-family: "Fraunces", "Noto Serif SC", Georgia, serif;
  letter-spacing: 0;
}

h1 {
  margin: 0;
  font-size: clamp(4.2rem, 12vw, 9rem);
  line-height: 0.9;
}

.hero-copy p:last-child {
  margin: 1.3rem 0 0;
  max-width: 37rem;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  line-height: 1.38;
  font-style: italic;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  width: min(96rem, calc(100% - clamp(1.5rem, 4vw, 4rem)));
  margin: 0 auto;
  padding: clamp(2.3rem, 5vw, 4.8rem) 0 clamp(2.5rem, 6vw, 5rem);
  background: var(--paper);
}

.module {
  background: var(--panel);
  border: 1px solid oklch(82% 0.012 82 / 0.72);
  border-radius: 4px;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.92) inset,
    0 20px 60px oklch(20% 0.035 70 / 0.075);
}

.module-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--line);
}

.module-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
}

.module-head > a {
  color: var(--copper-dark);
  font-weight: 700;
  white-space: nowrap;
}

.section-kicker {
  margin: 0 0 0.38rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.entry-card {
  margin-top: 1rem;
  border: 1px solid oklch(84% 0.018 80 / 0.75);
  border-radius: 4px;
  background: oklch(97.4% 0.008 86);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.entry-card a {
  display: block;
  padding: clamp(1.15rem, 2.8vw, 1.65rem);
}

.entry-card:hover,
.entry-card:focus-within {
  transform: translateY(-2px);
  border-color: oklch(66% 0.06 58);
  box-shadow: 0 22px 52px oklch(22% 0.04 70 / 0.12);
}

.entry-meta {
  display: block;
  color: var(--copper-dark);
  font-size: 0.74rem;
  font-weight: 700;
}

.entry-card h3 {
  margin: 0.45rem 0 0;
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  line-height: 1.18;
}

.entry-card p {
  margin: 0.65rem 0 0;
  color: var(--muted);
  line-height: 1.64;
}

.entry p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standalone {
  width: min(68rem, calc(100% - 0.5rem));
  min-height: calc(100vh - 0.5rem);
  margin: 0.25rem auto;
  padding: clamp(1.3rem, 5vw, 4rem);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 30px 90px oklch(18% 0.04 70 / 0.18);
}

.content-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.content-header h2,
.article-page h2 {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  line-height: 0.95;
}

.content-header a,
.back-link {
  color: var(--copper-dark);
  font-weight: 700;
}

.article-page p:not(.section-kicker) {
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.75;
}

.empty-note {
  margin: 1rem 0 0;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  color: var(--muted);
  border: 1px dashed oklch(76% 0.026 78);
  border-radius: 4px;
  background: oklch(98% 0.01 86);
}

@media (max-width: 840px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .topbar,
  .site-shell,
  .standalone {
    width: 100%;
    margin: 0;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topnav {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .hero-panel,
  .hero-panel img {
    min-height: 31rem;
  }

  .module-head,
  .content-header {
    align-items: flex-start;
    flex-direction: column;
  }
}