@charset "UTF-8";

/* ---------------------------------------------------------------------
   screen.css -- Thirty Three Hours v42
   Tokens + Base + Components in one file.
   --------------------------------------------------------------------- */

/* ===================================================================
   TOKENS
   =================================================================== */

:root {
  /* -- Fonts */
  --font-display: "Spectral", Georgia, serif;
  --font-body:    "Spectral", Georgia, serif;
  --font-ui:      "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  /* -- Type scale */
  --fs-section-masthead: 160px;
  --fs-hero-h1:          120px;
  --fs-article-h1:       clamp(44px, 5.8vw, 80px);
  --fs-h1-lg:             96px;
  --fs-h2:                64px;
  --fs-h2-sm:             56px;
  --fs-h3:                44px;
  --fs-h3-sm:             36px;
  --fs-h4:                28px;
  --fs-h5:                22px;
  --fs-dek:               22px;
  --fs-body:              21px;
  --fs-body-sm:           18px;
  --fs-ui:                14px;
  --fs-ui-sm:             13px;
  --fs-eyebrow:           11px;
  --fs-caption:         10.5px;
  --fs-micro:             10px;

  /* -- Letter spacing */
  --ls-display-xl:    -3px;
  --ls-display-lg:  -2.4px;
  --ls-display-md:  -1.2px;
  --ls-display-sm:  -0.7px;
  --ls-display-xs:  -0.4px;
  --ls-mono-eyebrow:  2px;
  --ls-mono-caption: 1.6px;
  --ls-mono-micro:   1.2px;

  /* -- Colors */
  --bg:           #0d0c0a;
  --fg:           #f0ece4;
  --dim:          rgba(240, 236, 228, 0.55);
  --faint:        rgba(240, 236, 228, 0.18);
  --accent:       #c69d5f;
  --accent-soft:  rgba(198, 157, 95, 0.04);

  --fg-82: rgba(240, 236, 228, 0.82);
  --fg-78: rgba(240, 236, 228, 0.78);
  --fg-75: rgba(240, 236, 228, 0.75);
  --fg-72: rgba(240, 236, 228, 0.72);
  --fg-70: rgba(240, 236, 228, 0.70);
  --fg-65: rgba(240, 236, 228, 0.65);

  /* -- Spacing */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  40px;
  --sp-10: 48px;
  --sp-11: 56px;
  --sp-12: 64px;
  --sp-14: 80px;
  --sp-16: 96px;
  --sp-18: 112px;
  --sp-20: 128px;

  --page-padding-x:    56px;
  --page-padding-x-sm: 24px;
  --col-body:  720px;
  --col-wide: 1100px;
  --col-max:  1340px;

  /* -- Borders */
  --rule-thin:   1px solid var(--faint);
  --rule-accent: 1px solid var(--accent);

  /* -- Radii */
  --radius-none: 0;
  --radius-pill: 999px;

  /* -- Transitions */
  --t-fast: 120ms ease-out;
  --t-base: 200ms ease-out;
  --ease:   cubic-bezier(.4,0,.2,1);
}

/* ===================================================================
   BASE RESETS + TYPOGRAPHY
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture, video {
  max-width: 100%;
  display: block;
}

ul, ol { padding-left: 0; list-style: none; margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--t-fast);
}
a:hover { opacity: 0.78; }

em, i { font-style: italic; }
strong, b { font-weight: 600; }

/* -- Headings */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  letter-spacing: var(--ls-display-md);
  line-height: 1.05;
}
h1 { font-size: var(--fs-h1-lg);  line-height: 0.98; letter-spacing: var(--ls-display-lg); }
h2 { font-size: var(--fs-h2);     line-height: 1.05; }
h3 { font-size: var(--fs-h3);     line-height: 1.05; }
h4 { font-size: var(--fs-h4);     line-height: 1.15; letter-spacing: var(--ls-display-sm); }
h5 { font-size: var(--fs-h5);     line-height: 1.2;  letter-spacing: var(--ls-display-xs); }

p {
  margin: 0 0 1.5em;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--fg);
}
p.dek {
  font-style: italic;
  font-size: var(--fs-dek);
  line-height: 1.45;
  color: var(--fg-78);
  margin-bottom: 1.5em;
}
p.micro {
  font-size: var(--fs-ui-sm);
  color: var(--dim);
}

/* -- Utility classes */
.display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}
.mono { font-family: var(--font-mono); }
.accent { color: var(--accent); }

/* ===================================================================
   COMPONENTS
   =================================================================== */

/* -- Eyebrow -------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
}
.eyebrow--accent { color: var(--accent); }
.eyebrow .rule,
.rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent);
  margin-right: 14px;
  vertical-align: middle;
}

/* -- Breadcrumb ----------------------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px var(--page-padding-x);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: var(--rule-thin);
}
.breadcrumb a { color: var(--dim); }
.breadcrumb a:hover { color: var(--accent); opacity: 1; }
.breadcrumb__current {
  color: var(--fg-70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}

/* -- CTA buttons ---------------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  font-family: var(--font-ui);
}
.cta--primary {
  padding: 14px 22px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.cta--underline {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
}
.cta--secondary { color: var(--dim); }

/* -- Nav ------------------------------------------------------------ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px var(--page-padding-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  z-index: 100;
  background: rgba(13, 12, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--rule-thin);
}

.nav__brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: var(--fg);
}

.nav__links {
  display: flex;
  gap: 28px;
  font-size: var(--fs-ui-sm);
  font-weight: 500;
  justify-content: center;
  font-family: var(--font-ui);
}
.nav__links a { color: var(--fg-82); }
.nav__links a:hover { color: var(--fg); opacity: 1; }
.nav__links .active a { color: var(--accent); opacity: 1; }

.nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}

/* Ghost search button override */
.gh-search-btn,
.gh-search {
  color: var(--fg-70) !important;
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
}
.gh-search-btn:hover { color: var(--fg) !important; }

.nav__cta {
  font-size: var(--fs-ui-sm);
  font-weight: 500;
  font-family: var(--font-ui);
  padding: 8px 18px;
  border: 1px solid var(--fg);
  border-radius: var(--radius-pill);
  color: var(--fg);
  white-space: nowrap;
}
.nav__cta:hover { background: var(--fg); color: var(--bg); opacity: 1; border-color: var(--fg); }

/* Hamburger -- hidden on desktop */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  flex-shrink: 0;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--fg);
  border-radius: 1px;
  transition: transform var(--t-base);
}

/* -- Mobile drawer -------------------------------------------------- */

.nav-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 85vw);
  height: 100dvh;
  background: #0d0c0a;
  border-left: var(--rule-thin);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 80px 32px 48px;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer__close {
  position: absolute;
  top: 20px; right: 20px;
  background: none;
  border: none;
  color: var(--fg-70);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.nav-drawer__close:hover { color: var(--fg); }

.nav-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 40px;
}
.nav-drawer__links li a {
  display: block;
  padding: 12px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--fg);
  border-bottom: var(--rule-thin);
}
.nav-drawer__links li a:hover { color: var(--accent); opacity: 1; }

.nav-drawer__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-ui-sm);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: auto;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 150;
  display: none;
  cursor: pointer;
}
.nav-overlay.is-open { display: block; }

/* Spacer so content clears fixed nav */
.nav-spacer { height: 64px; }

/* -- Ghost Members hidden portal helpers ---------------------------- */
/* These placeholders satisfy GScan without showing ugly HTML */
.gh-portal-close,
.members-form-hidden { display: none; }

/* ===================================================================
   HOMEPAGE
   =================================================================== */

/* -- Cinematic hero ------------------------------------------------- */

.hp-hero {
  position: relative;
  height: 820px;
  overflow: hidden;
}
.hp-hero__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease-out;
}
.hp-hero:hover .hp-hero__image { transform: scale(1.02); }
.hp-hero__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(13,12,10,0.55) 0%,
    rgba(13,12,10,0.05) 38%,
    rgba(13,12,10,0.9) 100%);
}
.hp-hero__eyebrow {
  margin-bottom: 20px;
}
.hp-hero__title-block {
  position: absolute;
  bottom: 72px;
  left: var(--page-padding-x);
  right: 320px;
  max-width: 860px;
}
.hp-hero__title-block h1 {
  font-size: var(--fs-h1-lg);
  letter-spacing: var(--ls-display-lg);
  margin-bottom: 20px;
  color: var(--fg);
  line-height: 0.96;
}
.hp-hero__dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  color: var(--fg-78);
  margin-bottom: 24px;
  line-height: 1.4;
}
.hp-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
}
.hp-hero__cta:hover { opacity: 1; color: var(--fg); border-color: var(--fg); }

/* Inline meta row: Words · Author · dot · read time · dot · date */
.hp-hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--dim);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.hp-hero__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
}

.hp-hero__coords {
  position: absolute;
  bottom: 72px;
  right: var(--page-padding-x);
  text-align: right;
  font-size: var(--fs-eyebrow);
  color: var(--dim);
  letter-spacing: 1px;
  line-height: 2;
}
.hp-hero__coords a { color: var(--accent); }
.hp-hero__coords a:hover { color: var(--fg); opacity: 1; }

/* -- Section header shared ------------------------------------------ */

.hp-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: var(--rule-thin);
}
.hp-section-header h2 { font-size: var(--fs-h2-sm); }
.hp-section-header a { color: var(--accent); font-size: var(--fs-eyebrow); font-family: var(--font-mono); letter-spacing: var(--ls-mono-eyebrow); text-transform: uppercase; }
.hp-section-header a:hover { opacity: 1; color: var(--fg); }

/* -- Latest dispatches ---------------------------------------------- */

.hp-latest {
  padding: 88px var(--page-padding-x);
  max-width: var(--col-max);
  margin: 0 auto;
}
.hp-latest__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 40px;
  align-items: start;
}
.hp-latest__main { /* big card */ }
.hp-latest__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: var(--rule-thin);
  padding-left: 40px;
}

/* Horizontal side-cards in the sidebar */
.side-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  color: var(--fg);
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: var(--rule-thin);
}
.side-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.side-card__img {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  transition: transform 6s ease-out;
}
.side-card:hover .side-card__img { transform: scale(1.03); }
.side-card__body { flex: 1; min-width: 0; }
.side-card__title {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: var(--ls-display-xs);
  margin-bottom: 12px;
  color: var(--fg);
}

/* -- Departments (Browse the magazine) ----------------------------- */

.hp-departments {
  padding: 88px var(--page-padding-x);
  max-width: var(--col-max);
  margin: 0 auto;
  border-top: var(--rule-thin);
}
.hp-departments > .eyebrow { margin-bottom: 40px; }
.hp-departments__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.dept-card {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--fg);
}
.dept-card__img {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  transition: transform 6s ease-out;
}
.dept-card:hover .dept-card__img { transform: scale(1.04); }
.dept-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(13,12,10,0.85) 100%);
}
.dept-card__text {
  position: absolute;
  bottom: 28px;
  left: 24px;
  right: 24px;
}
.dept-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3-sm);
  line-height: 1.05;
  margin-bottom: 6px;
}
.dept-card__count {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
}
.dept-card__cta {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* -- From the road: photograph strip -------------------------------- */

.hp-road {
  padding: 40px var(--page-padding-x) 80px;
  max-width: var(--col-max);
  margin: 0 auto;
  border-top: var(--rule-thin);
}
.hp-road__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.plate-card {
  display: block;
  color: var(--fg);
  text-decoration: none;
}
.plate-card__img {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  margin-bottom: 12px;
  overflow: hidden;
  transition: transform 6s ease-out;
}
.plate-card:hover .plate-card__img { transform: scale(1.04); }
.plate-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.plate-card__meta .accent { color: var(--accent); }
.plate-card__loc {
  font-size: 18px;
  line-height: 1.1;
  color: var(--fg);
}

/* -- About block ---------------------------------------------------- */

.hp-about {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 64px;
  align-items: baseline;
  padding: 88px var(--page-padding-x);
  max-width: var(--col-max);
  margin: 0 auto;
  border-top: var(--rule-thin);
  border-bottom: var(--rule-thin);
}
.hp-about__left .eyebrow { margin-bottom: 16px; }
.hp-about__left h2 {
  font-size: var(--fs-h2-sm);
  line-height: 1.0;
  letter-spacing: var(--ls-display-md);
}
.hp-about__left h2 .accent { color: var(--accent); }
.hp-about__right { padding-top: 8px; }
.hp-about__right p { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--dim); line-height: 1.55; }
.hp-about__right p.dek { font-size: var(--fs-dek); color: var(--fg-82); font-style: italic; line-height: 1.5; margin-bottom: 24px; }
.hp-about__right .cta { margin-top: 8px; }

/* -- Concept band --------------------------------------------------- */

.hp-concept {
  padding: 120px var(--page-padding-x);
  max-width: var(--col-max);
  margin: 0 auto;
  border-top: var(--rule-thin);
  border-bottom: var(--rule-thin);
  text-align: center;
  position: relative;
}
.hp-concept__eyebrow { margin-bottom: 40px; }
.hp-concept__statement {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--ls-display-md);
  max-width: 1100px;
  margin: 0 auto;
  color: var(--fg-82);
}
.hp-concept__statement .accent { color: var(--accent); }

/* -- Newsletter ----------------------------------------------------- */

.newsletter {
  position: relative;
  padding: 120px var(--page-padding-x);
  overflow: hidden;
  text-align: center;
}
.newsletter__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.newsletter__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 12, 10, 0.80);
}
.newsletter__inner {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}
.newsletter__inner .eyebrow { margin-bottom: 20px; }
.newsletter h2 {
  font-size: var(--fs-h2-sm);
  letter-spacing: var(--ls-display-md);
  line-height: 1.05;
  margin-bottom: 16px;
}
.newsletter > p,
.newsletter__inner > p {
  font-family: var(--font-body);
  color: var(--fg-70);
  font-size: var(--fs-body-sm);
}
.newsletter__form {
  display: flex;
  max-width: 480px;
  margin: 38px auto 0;
  border: 1px solid var(--faint);
}
.newsletter__form input {
  flex: 1;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 15px;
  outline: none;
}
.newsletter__form input::placeholder { color: var(--dim); }
.newsletter__form button {
  padding: 14px 22px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font-ui);
  white-space: nowrap;
}
.newsletter__form button:hover { background: var(--fg); color: var(--bg); }

/* -- Post cards ----------------------------------------------------- */

.post-card {
  display: block;
  color: var(--fg);
}
.post-card__img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 6s ease-out;
}
.post-card:hover .post-card__img { transform: scale(1.03); }
.post-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.post-card__meta .accent { color: var(--accent); }
.post-card__title {
  font-size: var(--fs-h3);
  margin-bottom: 14px;
  color: var(--fg);
}
.post-card__dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body-sm);
  color: var(--fg-70);
  line-height: 1.45;
  margin-bottom: 14px;
}
.post-card__byline {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
}

/* -- Post rows (section list) --------------------------------------- */

.post-row {
  display: grid;
  grid-template-columns: 56px 280px 1fr 32px;
  gap: 32px;
  padding: 36px 0;
  border-top: var(--rule-thin);
  align-items: center;
  color: var(--fg);
}
.post-row:hover { opacity: 0.85; }
.post-row__n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: -0.8px;
}
.post-row__img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
}
.post-row__text { min-width: 0; }
.post-row__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}
.post-row__meta .accent { color: var(--accent); }
.post-row h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-display-md);
  margin-bottom: 10px;
  color: var(--fg);
}
.post-row__dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body-sm);
  color: var(--fg-70);
  line-height: 1.4;
  margin: 0;
}
.post-row__arrow {
  font-size: 20px;
  color: var(--accent);
  justify-self: end;
}

/* ===================================================================
   ARTICLE / POST
   =================================================================== */

.article__header {
  max-width: calc(var(--col-body) + var(--page-padding-x) * 2);
  margin: 0 auto;
  padding: 60px var(--page-padding-x) 48px;
}
.article__header .eyebrow { margin-bottom: 24px; }
.article__title {
  font-size: var(--fs-article-h1);
  letter-spacing: var(--ls-display-lg);
  line-height: 0.95;
  margin-bottom: 28px;
  color: var(--fg);
}
.article__dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-dek);
  color: var(--fg-78);
  line-height: 1.45;
  margin-bottom: 0;
}
.article__credits {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: var(--rule-thin);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
}
.article__credits dt { color: var(--dim); margin-bottom: 4px; }
.article__credits dd { color: var(--fg-82); margin: 0 0 16px; }

.article__hero {
  margin: 0;
}
.article__hero img {
  width: 100%;
  height: 640px;
  object-fit: cover;
  display: block;
}
.article__hero figcaption {
  display: flex;
  justify-content: space-between;
  padding: 12px var(--page-padding-x);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-mono-caption);
  text-transform: uppercase;
  color: var(--dim);
}

/* Article body / prose */
.article__body {
  max-width: calc(var(--col-body) + var(--page-padding-x) * 2);
  margin: 0 auto;
  padding: 56px var(--page-padding-x);
}
.article__body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 128px;
  line-height: 0.85;
  float: left;
  padding-right: 18px;
  padding-top: 8px;
  margin-bottom: -6px;
  color: var(--accent);
  letter-spacing: -4px;
}
.article__body p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  margin-bottom: 1.5em;
  color: var(--fg-82);
}
.article__body h2 { font-size: var(--fs-h2-sm); margin: 2em 0 0.6em; }
.article__body h3 { font-size: var(--fs-h3); margin: 1.8em 0 0.5em; }
.article__body h4 { font-size: var(--fs-h4); margin: 1.5em 0 0.4em; }
.article__body blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h2-sm);
  line-height: 1.15;
  letter-spacing: var(--ls-display-sm);
  border-left: 2px solid var(--accent);
  padding: 0 32px;
  margin: 1.5em 0 1.5em -32px;
  color: var(--fg-82);
}
.article__body a { color: var(--accent); border-bottom: 1px solid rgba(198,157,95,0.4); }
.article__body a:hover { opacity: 1; color: var(--fg); border-color: var(--faint); }

/* Ghost's Koenig image cards inside article */
.article__body .kg-image-card,
.article__body figure {
  margin: 40px 0;
}
.article__body .kg-image-card img,
.article__body figure img {
  width: 100%;
  height: auto;
  display: block;
}
.article__body figcaption,
.article__body .kg-image-card figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-mono-caption);
  text-transform: uppercase;
  color: var(--dim);
  padding: 10px 0 0;
}

/* End mark — removed per design decision */
.article__end-mark { display: none; }

/* -- Author bio ----------------------------------------------------- */

.author-bio {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 64px var(--page-padding-x);
  border-top: var(--rule-thin);
  border-bottom: var(--rule-thin);
}
.author-bio__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: linear-gradient(135deg, rgba(198,157,95,0.4), rgba(198,157,95,0.1));
}
.author-bio__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-bio__initial {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(198,157,95,0.4), rgba(198,157,95,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0; /* hide full name — only ::first-letter shows */
  color: var(--accent);
}
.author-bio__initial::first-letter {
  font-size: 52px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  line-height: 1;
}
.author-bio__text .eyebrow { margin-bottom: 10px; }
.author-bio__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1.1;
  color: var(--fg);
  display: block;
  margin-bottom: 14px;
}
.author-bio__text p { font-size: var(--fs-body-sm); color: var(--fg-75); margin: 0; line-height: 1.55; max-width: 600px; }
.author-bio__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-ui-sm);
  white-space: nowrap;
  text-align: right;
}
.author-bio__links a { color: var(--dim); }
.author-bio__links a:hover { color: var(--accent); opacity: 1; }
.author-bio__links a.accent { color: var(--accent); font-size: var(--fs-ui); }

/* -- Related stories ------------------------------------------------ */

.article__related {
  padding: 64px var(--page-padding-x);
  max-width: var(--col-max);
  margin: 0 auto;
  border-top: var(--rule-thin);
}
.article__related header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: var(--rule-thin);
}
.article__related header .eyebrow { margin-bottom: 8px; }
.article__related header h2 { font-size: var(--fs-h2-sm); }
.article__related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* Ghost Koenig card width classes (required by GScan) */
/* Prefixed with .article__body to beat .article__body .kg-image-card specificity */
.kg-width-wide { position: relative; }
.kg-width-full { position: relative; }
.article__body .kg-width-wide {
  width: 85vw;
  min-width: 100%;
  margin: 40px calc(50% - 42.5vw);
}
.article__body .kg-width-full {
  width: 100vw;
  margin: 40px calc(50% - 50vw);
}
.article__body .kg-width-wide img,
.article__body .kg-width-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* Ghost Comments */
.article__comments {
  max-width: calc(var(--col-body) + var(--page-padding-x) * 2);
  margin: 0 auto;
  padding: 0 var(--page-padding-x) 64px;
}
.article__comments:empty { padding: 0; }

/* ===================================================================
   TAG / SECTION PAGE
   =================================================================== */

.tag-page { }

.tag-page__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 80px var(--page-padding-x) 60px;
  max-width: var(--col-max);
  margin: 0 auto;
  border-bottom: var(--rule-thin);
}
.tag-page__hero-left .eyebrow { margin-bottom: 20px; }
.tag-page__name {
  font-size: var(--fs-h1-lg);
  letter-spacing: var(--ls-display-lg);
  margin-bottom: 24px;
}
.tag-page__hero-left .dek { color: var(--fg-78); }

.tag-page__stats {
  display: flex;
  gap: 40px;
  margin-top: 24px;
}
.tag-page__stats dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.tag-page__stats dd {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h2-sm);
  color: var(--accent);
  margin: 0;
}

/* Featured post on section page */
.featured-post {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  border-bottom: var(--rule-thin);
}
.featured-post__img {
  display: block;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.featured-post__img:hover { opacity: 0.9; }
.featured-post__sticker {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  padding: 6px 12px;
}
.featured-post__text {
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.featured-post__text .eyebrow { margin-bottom: 20px; }
.featured-post__text h2 {
  font-size: var(--fs-h2-sm);
  margin-bottom: 20px;
  color: var(--fg);
}
.featured-post__text .dek { margin-bottom: 28px; }
.featured-post__byline {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 28px;
}
.featured-post__byline .sep::before { content: '\00B7'; }

/* Tag all stories list */
.tag-page__list {
  padding: 0 var(--page-padding-x) 80px;
  max-width: var(--col-max);
  margin: 0 auto;
}
.tag-page__list > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 48px 0 32px;
  border-bottom: var(--rule-thin);
  margin-bottom: 0;
}
.tag-page__list > header h2 { font-size: var(--fs-h2-sm); }
.tag-page__filters {
  display: flex;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
}
.tag-page__filters .active { color: var(--accent); }

/* Other desks teaser */
.other-desks {
  padding: 80px var(--page-padding-x);
  max-width: var(--col-max);
  margin: 0 auto;
  border-top: var(--rule-thin);
}
.other-desks .eyebrow { margin-bottom: 40px; }
.other-desks__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ===================================================================
   AUTHOR PAGE
   =================================================================== */

.author-page { }

.author-page__header {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
  padding: 64px var(--page-padding-x);
  max-width: var(--col-max);
  margin: 0 auto;
  border-bottom: var(--rule-thin);
}
.author-page__portrait img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}
.author-page__portrait-initial {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0; /* show only first letter via ::first-letter */
  color: var(--accent);
}
.author-page__portrait-initial::first-letter {
  font-size: 120px;
  line-height: 1;
}
.author-page__portrait figcaption {
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-mono-caption);
  text-transform: uppercase;
  color: var(--dim);
}
.author-page__intro .eyebrow { margin-bottom: 20px; }
.author-page__intro h1 {
  font-size: var(--fs-h1-lg);
  letter-spacing: var(--ls-display-lg);
  margin-bottom: 24px;
}
.author-page__intro .dek { margin-bottom: 28px; }
.author-page__stats {
  display: flex;
  gap: 32px;
  padding-top: 24px;
  border-top: var(--rule-thin);
}
.author-page__stats dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.author-page__stats dd {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h2-sm);
  color: var(--accent);
  margin: 0;
}

.author-page__beat,
.author-page__list,
.author-page__contact {
  padding: 56px var(--page-padding-x);
  max-width: var(--col-max);
  margin: 0 auto;
  border-top: var(--rule-thin);
}
.author-page__beat .eyebrow { margin-bottom: 20px; }
.author-page__beat p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h2-sm);
  color: var(--fg-82);
  line-height: 1.15;
  margin: 0;
}
.author-page__list header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0;
  padding-bottom: 24px;
  border-bottom: var(--rule-thin);
}
.author-page__list header h2 { font-size: var(--fs-h2-sm); }
.author-page__contact dl {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.author-page__contact dl > div {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.author-page__contact dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
  min-width: 80px;
}
.author-page__contact dd { color: var(--accent); margin: 0; }

/* ===================================================================
   STATIC PAGES (about, contribute, etc.)
   =================================================================== */

.static-page {
  max-width: calc(var(--col-body) + var(--page-padding-x) * 2);
  margin: 0 auto;
}
.static-page__header {
  padding: 64px var(--page-padding-x) 48px;
  border-bottom: var(--rule-thin);
  margin-bottom: 0;
}
.static-page__header h1 {
  font-size: var(--fs-article-h1);
  letter-spacing: var(--ls-display-lg);
  margin-bottom: 20px;
}
.static-page__body {
  padding: 48px var(--page-padding-x) 88px;
}
.static-page__body p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--fg-82);
  margin-bottom: 1.5em;
}
.static-page__body h2 { font-size: var(--fs-h2-sm); margin: 2em 0 0.6em; }
.static-page__body h3 { font-size: var(--fs-h3); margin: 1.8em 0 0.5em; }
.static-page__body a { color: var(--accent); }
.static-page__body blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  border-left: 2px solid var(--accent);
  padding-left: 28px;
  margin: 1.5em 0;
  color: var(--fg-82);
}

/* ===================================================================
   PHOTOGRAPHS PAGE
   =================================================================== */

.photos-page {
  max-width: var(--col-max);
  margin: 0 auto;
}
.photos-page__header {
  padding: 64px var(--page-padding-x) 56px;
  border-bottom: var(--rule-thin);
}
.photos-page__header .eyebrow { margin-bottom: 20px; }
.photos-page__header h1 {
  font-size: var(--fs-h1-lg);
  letter-spacing: var(--ls-display-lg);
  line-height: 0.96;
  margin-bottom: 20px;
}
.photos-page__header .dek { color: var(--fg-70); }

/* -- Square grid gallery (Instagram-style) ---------------------------- */
.photos-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 2px var(--page-padding-x) 80px;
}
.photo-brick {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-decoration: none;
}
.photo-brick__fig {
  margin: 0;
  width: 100%;
  height: 100%;
}
.photo-brick__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.photo-brick:hover .photo-brick__fig img {
  transform: scale(1.05);
}
.photo-brick__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,12,10,0.78) 0%, rgba(13,12,10,0) 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.photo-brick:hover .photo-brick__overlay {
  opacity: 1;
}
.photo-brick__loc {
  font-size: var(--fs-body-sm);
  color: var(--fg);
  line-height: 1.2;
  margin-bottom: 4px;
}
.photo-brick__date {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--fg-70);
}
@media (max-width: 900px) {
  .photos-masonry { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .photos-masonry { grid-template-columns: repeat(2, 1fr); }
}

.photos-page__empty {
  padding: 120px var(--page-padding-x);
  text-align: center;
  color: var(--dim);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
}

/* -- Photographs embed zone ------------------------------------------- */
.photos-embed {
  padding: 48px var(--page-padding-x) 80px;
}
.photos-embed iframe,
.photos-embed img {
  width: 100%;
  max-width: 100%;
  border: none;
  display: block;
}
/* Ghost gallery card in photographs embed */
.photos-embed .kg-gallery-card {
  margin: 0;
  padding: 0;
}
.photos-embed .kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.photos-embed .kg-gallery-row {
  display: flex;
  gap: 4px;
}
.photos-embed .kg-gallery-image {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.photos-embed .kg-gallery-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.photos-embed .kg-gallery-image img:hover {
  opacity: 0.88;
}
.photos-embed .kg-card,
.photos-embed .kg-width-full,
.photos-embed .kg-width-wide {
  margin: 0;
}

/* ===================================================================
   PHOTOGRAPH POST
   =================================================================== */

.photo-post {
  max-width: 100%;
}
.photo-post__hero {
  margin: 0;
  background: var(--bg);
  text-align: center;
  line-height: 0;
  padding: 40px var(--page-padding-x) 0;
}
.photo-post__hero img {
  max-height: 68vh;
  max-width: 820px;
  width: 100%;
  display: inline-block;
  object-fit: contain;
}
.photo-post__hero figcaption {
  padding: 10px var(--page-padding-x);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-caption);
  text-transform: uppercase;
  color: var(--dim);
  text-align: left;
}
.photo-post__info {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px var(--page-padding-x) 24px;
  border-bottom: var(--rule-thin);
}
.photo-post__title {
  font-size: var(--fs-h2-sm);
  letter-spacing: var(--ls-display-md);
  line-height: 1;
  margin-bottom: 12px;
}
.photo-post__meta {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  gap: 16px;
}
.photo-post__dek {
  margin-top: 16px;
  font-size: var(--fs-body-sm);
  color: var(--fg-70);
  font-style: italic;
}
.photo-post__body {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px var(--page-padding-x);
}
.photo-post__back {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--page-padding-x) 80px;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono-eyebrow);
  text-transform: uppercase;
}

/* ===================================================================
   FOOTER
   =================================================================== */

.footer {
  padding: 72px var(--page-padding-x) 36px;
  border-top: var(--rule-thin);
  margin-top: 80px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
.footer__wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  margin-bottom: 12px;
  color: var(--fg);
}
.footer__brand p {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--dim);
  margin: 0;
  line-height: 1.5;
}
.footer .eyebrow { margin-bottom: 16px; display: block; }
.footer ul { display: grid; gap: 10px; margin-top: 4px; }
.footer ul a { color: var(--fg-70); font-size: 14px; font-family: var(--font-ui); }
.footer ul a:hover { color: var(--accent); opacity: 1; }
.footer__base {
  border-top: var(--rule-thin);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--dim);
}

/* ===================================================================
   ERROR PAGES
   =================================================================== */

.error {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 88px var(--page-padding-x);
  text-align: center;
}
.error__inner { max-width: 720px; }
.error__inner .eyebrow { margin-bottom: 24px; }
.error h1 {
  font-size: 140px;
  line-height: 0.95;
  letter-spacing: -3.5px;
  margin: 0 0 24px;
  color: var(--accent);
}
.error__inner .dek { color: var(--fg-70); margin-bottom: 40px; }
.error__actions {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

/* ===================================================================
   GHOST MEMBERS / PORTAL OVERRIDES
   =================================================================== */

/* Hiding GScan placeholders */
.members-hidden { display: none !important; }

/* Ghost search styling */
.gh-search-modal { font-family: var(--font-ui) !important; }

/* ===================================================================
   RESPONSIVE -- TABLET (max 1199px)
   =================================================================== */

@media (max-width: 1199px) {
  :root {
    --fs-section-masthead: 120px;
    --fs-hero-h1:           96px;
    --fs-article-h1:        80px;
    --fs-h1-lg:             72px;
    --fs-h2:                48px;
    --fs-h2-sm:             44px;
    --fs-h3:                36px;
    --fs-h3-sm:             28px;
    --page-padding-x:       40px;
  }

  .hp-hero { height: 680px; }
  .hp-hero__title-block { right: 260px; }
  .hp-latest__grid { grid-template-columns: 1fr; }
  .hp-latest__sidebar {
    border-left: none;
    padding-left: 0;
    border-top: var(--rule-thin);
    padding-top: 40px;
  }
  .hp-road__grid { grid-template-columns: repeat(3, 1fr); }
  .hp-about { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .author-page__header { grid-template-columns: 240px 1fr; }
  .tag-page__hero { grid-template-columns: 1fr; }
  .featured-post { grid-template-columns: 1fr; }
  .article__related-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   RESPONSIVE -- MOBILE (max 767px)
   =================================================================== */

@media (max-width: 767px) {
  :root {
    --fs-section-masthead:  72px;
    --fs-hero-h1:           56px;
    --fs-article-h1:        48px;
    --fs-h1-lg:             40px;
    --fs-h2:                32px;
    --fs-h2-sm:             28px;
    --fs-h3:                24px;
    --fs-h3-sm:             22px;
    --fs-dek:               18px;
    --fs-body:              18px;
    --page-padding-x:       20px;
  }

  /* Nav: hide links, show hamburger */
  .nav {
    grid-template-columns: 1fr auto;
    padding: 16px var(--page-padding-x);
  }
  .nav__links { display: none; }
  .nav__right { gap: 8px; }
  .nav__cta { display: none; }
  .nav__hamburger { display: flex; }

  /* Hero */
  .hp-hero { height: 580px; }
  .hp-hero__title-block { right: var(--page-padding-x); bottom: 48px; }
  .hp-hero__coords { display: none; }
  .hp-hero__title-block h1 { font-size: 40px; }

  /* Homepage sections */
  .hp-latest { padding: 56px var(--page-padding-x); }
  .hp-departments__grid { grid-template-columns: 1fr; gap: 12px; }
  .dept-card__img { aspect-ratio: 3/2; }
  .hp-about { padding: 60px var(--page-padding-x); gap: 32px; grid-template-columns: 1fr; }
  .hp-concept { padding: 72px var(--page-padding-x); }
  .hp-concept__statement { font-size: 26px; }
  .hp-road { padding: 40px var(--page-padding-x) 56px; }
  .hp-road__grid { grid-template-columns: repeat(2, 1fr); }
  .side-card__img { width: 120px; height: 120px; }

  /* Post rows */
  .post-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px 0;
  }
  .post-row__n { font-size: 28px; }
  .post-row__img { aspect-ratio: 16/9; }
  .post-row__arrow { display: none; }

  /* Article */
  .article__header { padding: 40px var(--page-padding-x); }
  .article__title { font-size: 48px; }
  .article__hero img { height: 300px; }
  .article__body { padding: 40px var(--page-padding-x); }
  .article__body > p:first-of-type::first-letter {
    font-size: 80px;
    padding-right: 12px;
  }
  .article__body blockquote { margin-left: 0; font-size: 22px; }

  /* Author bio */
  .author-bio {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    padding: 40px var(--page-padding-x);
  }
  .author-bio__avatar,
  .author-bio__initial { width: 64px; height: 64px; font-size: 28px; }
  .author-bio__links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 12px; text-align: left; }

  /* Section page */
  .tag-page__hero { padding: 40px var(--page-padding-x) 36px; }
  .tag-page__name { font-size: 40px; }
  .featured-post__text { padding: 32px var(--page-padding-x); }
  .tag-page__list { padding: 0 var(--page-padding-x) 48px; }

  /* Author page */
  .author-page__header { grid-template-columns: 1fr; }
  .author-page__portrait img { aspect-ratio: 1/1; }

  /* Footer */
  .footer { padding: 56px var(--page-padding-x) 28px; margin-top: 48px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__brand { grid-column: 1 / -1; }

  /* Error */
  .error h1 { font-size: 80px; }

  /* Newsletter */
  .newsletter { padding: 72px var(--page-padding-x); }
  .newsletter__form { flex-direction: column; }
  .newsletter__form button { width: 100%; }

  /* Static pages */
  .static-page__header { padding: 40px var(--page-padding-x) 32px; }
  .static-page__header h1 { font-size: 48px; }

  /* Nav spacer */
  .nav-spacer { height: 58px; }
}