:root{
  --paper:      #FFFFFF;
  --paper-alt:  #F7F5F0;
  --ink:        #2B241D;
  --ink-soft:   #5C5142;
  --ink-faint:  #8C816E;
  --line:       #D9CCAF;
  --accent:     #874141;

  --display: 'Crimson Pro', 'Times New Roman', serif;
  --body:    'Crimson Pro', 'Times New Roman', serif;

  --max: 660px;
}

*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  /* Keeps the gutter reserved even on pages that don't need to scroll
     (like the no-scroll title page), so the viewport's usable width
     stays constant across pages. Without this, the centered masthead
     shifts by the scrollbar's width whenever you navigate between a
     scrolling page and a non-scrolling one — which is what was causing
     the jump/overlap during the pinned masthead transition. */
  scrollbar-gutter: stable;
  /* Fluid type scale: root font-size flows between 14px (narrow phones)
     and 19px (the original desktop body size), so every element below
     that's sized in rem scales together in lockstep with the viewport. */
  font-size:clamp(14px, calc(14px + (100vw - 375px) * 5 / 1225), 19px);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; } *{ transition:none !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.7;
}

a{ color:inherit; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 44px; }

h1,h2{ font-family:var(--display); font-weight:600; margin:0; }

.small-caps{
  font-family:var(--body);
  font-size:0.684rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.rule{ border:none; border-top:1px solid var(--line); margin:0; width:100%; }
.flourish{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0; color:var(--ink-faint); }
.flourish .rule{ flex:1; }
.flourish span{ font-family:var(--display); font-size:0.789rem; }

/* ============ MASTHEAD ============ */
header{ padding:clamp(48px, 8vh, 244px) 0 0; }
.masthead{ max-width:var(--max); margin:0 auto; padding:0 44px 28px; text-align:center; }
.masthead .brand{
  font-family:var(--display); font-size:0.789rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:var(--brand-mb, 16px); text-decoration:none; display:inline-block;
}
.masthead .brand:hover{ color:var(--accent); }
.frontispiece-wrap{
  display:inline-block;
  position:relative;
  width:var(--frontispiece-w, min(280px, 70%));
  margin:0 auto var(--frontispiece-mb, 30px);
  border:1px solid var(--line);
  padding:6px;
  background:var(--paper);
  overflow:hidden;
}
.frontispiece{
  display:block;
  width:100%;
}
.frontispiece-caption{
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  transform:translateY(100%);
  text-align:center;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-style:normal;
  font-size:0.684rem;
  letter-spacing:.03em;
  padding:8px 14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.frontispiece-caption em{ font-family:var(--display); font-style:italic; }
.frontispiece-wrap:hover .frontispiece-caption{
  opacity:1;
  transform:translateY(0);
}
.nav-links{ display:flex; justify-content:center; gap:0; list-style:none; margin:var(--nav-mt, 16px) 0 0; padding:0; flex-wrap:wrap; }
.nav-links li{ display:flex; align-items:center; }
.nav-links li + li::before{ content:"·"; margin:0 20px; color:var(--ink-faint); }
.nav-links a{
  font-family:var(--body); font-size:0.947rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--accent); }

/* ============ BREADCRUMB ============ */
.breadcrumb{
  font-family:var(--body); font-size:0.684rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); text-decoration:none; display:inline-block; margin-bottom:6px;
}
.breadcrumb:hover{ color:var(--accent); }

/* ============ HERO / TITLE PAGE ============ */
.hero{ padding:64px 0 56px; text-align:center; }
body.title-page{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
body.title-page main{ padding-top:var(--main-pt, 40px); padding-bottom:var(--main-pb, 100px); }
body.title-page footer{ padding-bottom:var(--footer-pb, clamp(48px, 20vh, 244px)); }
.hero-title{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  overflow:hidden;
  padding:var(--hero-pad, clamp(12px, 3vh, 32px)) 0;
}
.hero .kicker{ font-family:var(--display); font-style:italic; font-weight:600; font-size:0.895rem; color:var(--ink-faint); margin-bottom:18px; }
.hero h1{ font-family:'Cormorant Garamond', 'Times New Roman', serif; font-size:var(--h1-size, clamp(44px, 7.5vw, 72px)); line-height:1.12; margin-bottom:var(--h1-mb, 26px); font-weight:600; }

/* No-scroll mode only engages once the window is comfortably large in both
   dimensions. Below this range the page falls back to full, uncompressed
   spacing and normal scrolling — never a partial squeeze. */
@media (min-width:700px) and (min-height:920px){
  html:has(body.title-page){ height:100%; overflow:hidden; }
  body.title-page{
    height:100svh;
    overflow:hidden;
    --brand-mb: clamp(8px, 2vh, 16px);
    --nav-mt: clamp(8px, 2vh, 16px);
    --frontispiece-w: min(280px, 32vh, 70%);
    --frontispiece-mb: clamp(14px, 3vh, 30px);
    --h1-size: clamp(32px, min(7.5vw, 8vh), 72px);
    --h1-mb: clamp(12px, 2.5vh, 26px);
    --hero-pad: clamp(8px, 1.5vh, 32px);
    --main-pt: clamp(12px, 2vh, 40px);
    --main-pb: clamp(20px, 5vh, 100px);
    --footer-pb: clamp(20px, 7vh, 220px);
  }
}

/* CSS can't detect physical monitor resolution directly, so this uses a wide
   viewport as a proxy: a browser window this wide is realistically only
   possible on a large/high-resolution display. If the browser isn't
   maximized, this won't trigger even on a high-res screen — there's no way
   around that limitation with CSS alone. The vh cap is kept so this can
   never reopen the no-scroll overlap issue if it happens to coincide with
   the compact layout above. */
@media (min-width:2000px){
  body.title-page{ --frontispiece-w: min(340px, 34vh, 78%); }
}
.btn{ font-family:var(--body); font-size:0.789rem; text-decoration:none; padding:10px 4px; border-bottom:1px solid var(--ink); }
.btn:hover{ border-color:var(--accent); color:var(--accent); }

/* ============ SECTION SCAFFOLD ============ */
main{ padding:20px 0 60px; }
.section-head{ margin-bottom:30px; display:flex; align-items:baseline; gap:14px; }
.section-head .numeral{ font-family:var(--display); font-style:italic; font-size:1.158rem; color:var(--accent); }
.section-head h2{ font-size:1.579rem; }
.section-intro{ font-family:var(--display); font-style:italic; font-size:0.947rem; color:var(--ink-soft); margin:-14px 0 34px; }

/* ============ ABOUT ============ */
.about p{ color:var(--ink-soft); margin:0 0 18px; }
.about .drop-name{
  font-weight:700; font-variant:small-caps; color:var(--accent); font-size:1.3em;
}
.marginalia{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--display); font-style:italic; font-size:0.842rem; color:var(--ink-faint); }
.marginalia div{ margin-bottom:7px; }
.marginalia div:last-child{ margin-bottom:0; }
.marginalia b{ font-style:normal; color:var(--ink-soft); font-family:var(--body); font-size:0.684rem; letter-spacing:.06em; text-transform:uppercase; margin-right:6px; }

/* ============ RESUME / EXPERIENCE ============ */
.exp-item{ padding:24px 0; border-top:1px solid var(--line); }
.exp-item:first-of-type{ border-top:none; padding-top:0; }
.exp-top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.exp-top h3{ font-family:var(--display); font-weight:600; font-style:italic; font-size:1.105rem; margin:0; }
.exp-dates{ font-size:0.737rem; color:var(--ink-faint); font-family:var(--display); white-space:nowrap; }
.exp-role{ font-size:0.737rem; color:var(--ink-faint); margin:4px 0 12px; letter-spacing:.02em; }
.exp-item p{ margin:0 0 8px; color:var(--ink-soft); font-size:0.895rem; text-indent:-1em; margin-left:1em; }
.exp-item p::before{ content:"— "; color:var(--ink-faint); }
.resume-cta{ margin-top:28px; display:inline-block; }

/* ============ PORTFOLIO LANDING (two-link split) ============ */
.portfolio-center{ text-align:center; max-width:820px; }
.portfolio-eyebrow{
  font-family:var(--body);
  font-size:0.684rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.portfolio-split{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:56px;
  margin-top:clamp(20px, 4vh, 44px);
  flex-wrap:wrap;
}
.split-link{
  font-family:'Cormorant Garamond', 'Times New Roman', serif; font-style:italic; font-size:1.895rem;
  text-decoration:none; color:var(--ink); text-align:center; line-height:1.3;
}
.split-link:hover{ color:var(--accent); }
.split-numeral{ color:var(--accent); margin-right:6px; }
.split-divider{ width:1px; height:52px; background:var(--line); }
@media (max-width:560px){
  .portfolio-split{ flex-direction:column; gap:32px; }
  .split-divider{ width:60px; height:1px; }
}

/* ============ SUBSECTIONS (nested numbering, e.g. I.i / I.ii) ============ */
.subsection-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:48px 0 24px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.subsection-head:first-of-type{ margin-top:38px; }
.subsection-head + .sample-item{ border-top:none; padding-top:0; }
.subsection-head .sub-numeral{
  font-family:var(--display); font-style:italic; font-size:0.842rem; color:var(--accent);
  white-space:nowrap;
}
.subsection-head h3{
  font-family:var(--body); font-size:0.737rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--ink-soft); margin:0;
}

/* ============ PORTFOLIO / WRITING SAMPLES ============ */
.sample-item{ padding:34px 0; border-top:1px solid var(--line); }
.sample-item:first-of-type{ border-top:none; padding-top:0; }
.sample-top{ display:flex; flex-direction:column; gap:4px; }
.sample-top h3{ font-family:var(--display); font-weight:600; font-style:italic; font-size:1.158rem; margin:0; }
.sample-meta{ font-size:0.737rem; color:var(--ink-faint); font-family:var(--display); }
.sample-desc{ color:var(--ink-soft); font-size:0.842rem; margin:8px 0 18px; }
blockquote.excerpt{
  margin:12px 0 18px; padding-left:20px; border-left:2px solid var(--accent);
  font-family:var(--display); font-style:italic; font-size:0.947rem; color:var(--ink-soft); line-height:1.6;
}
.sample-item a.read-link{ font-family:var(--body); font-size:0.737rem; text-decoration:none; border-bottom:1px solid var(--line); }
.sample-item a.read-link:hover{ border-color:var(--accent); color:var(--accent); }

/* ============ CONTACT / COLOPHON ============ */
.contact p{ color:var(--ink-soft); margin:0 0 24px; }
.contact-links{ display:flex; flex-direction:column; gap:10px; }
.contact-links a{
  font-family:var(--display); font-style:italic; font-size:1rem; text-decoration:none;
  border-bottom:1px solid var(--line); width:fit-content;
}
.contact-links a:hover{ border-color:var(--accent); color:var(--accent); }

footer{ max-width:var(--max); margin:0 auto; padding:36px 44px 56px; text-align:center; }
footer .colophon{ font-family:var(--display); font-style:italic; font-size:0.737rem; color:var(--ink-faint); margin-top:16px; }

/* ============ PAGE TRANSITIONS ============ */
@media not (prefers-reduced-motion: reduce){
  @view-transition{ navigation: auto; }

  ::view-transition-old(root){ animation: page-out .32s ease both; }
  ::view-transition-new(root){ animation: page-in .38s ease both; }

  @keyframes page-out{ to{ opacity:0; transform:translateY(-10px); } }
  @keyframes page-in{ from{ opacity:0; transform:translateY(10px); } }

  /* Exempt the masthead from the page transition — it gets its own
     named view-transition-group so the browser tracks it as continuous
     across the navigation, then we strip that group's animation so it
     just stays put instead of fading with the rest of the page. */
  header{ view-transition-name: masthead; }
  ::view-transition-group(masthead){ animation: none; }
  /* Hide the outgoing masthead snapshot immediately rather than leaving
     it stacked at full opacity under the new one — with both old and
     new visible for the transition's duration, the un-animated pair
     rendered on top of each other, which is what made the masthead
     look doubled/thicker for a moment. */
  ::view-transition-old(masthead){ display: none; }
  ::view-transition-new(masthead){ animation: none; mix-blend-mode: normal; }

  /* JS fallback (browsers without native cross-document view-transitions) */
  html.vt-fallback header{ opacity:1; transform:none; }
  html.vt-fallback main,
  html.vt-fallback footer{ opacity:0; }
  html.vt-fallback.fade-in main,
  html.vt-fallback.fade-in footer{ opacity:1; transform:translateY(0); transition:opacity .3s ease, transform .34s ease; }
  html.vt-fallback.fade-out main,
  html.vt-fallback.fade-out footer{ opacity:0; transform:translateY(-10px); transition:opacity .26s ease, transform .28s ease; }
}

@media (prefers-reduced-motion: reduce){
  html.vt-fallback{ opacity:1; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:560px){
  .wrap, .masthead, footer{ padding-left:26px; padding-right:26px; }
  .nav-links li + li::before{ margin:0 10px; }
  .exp-top{ flex-direction:column; gap:2px; }
}