:root {
  --pine: #2d6b45;
  --fern: #5db87a;
  --deep-earth: #1a2419;
  --bark: #2c2a26;
  --amber: #c4a55a;
  --linen: #f4f1ec;
  --stone: #9c9789;

  --fern-bright: #7ed99a;
  --hairline: rgba(93, 184, 122, 0.16);
  --text-bright: #e8e4dc;
  --text-mid: #9a958c;
  --text-dim: #7a7670;

}

* { margin: 0; padding: 0; box-sizing: border-box; }


html { height: 100%; }

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Nunito', sans-serif;
  background: var(--deep-earth);
  color: var(--bark);
  padding: 0 24px;
  -webkit-font-smoothing: antialiased;
}

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

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: fadeIn 1.2s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wordmark {
  display: flex;
  align-items: baseline;
  font-weight: 600;
  font-size: 42px;
  letter-spacing: 4px;
  color: var(--text-bright);
  margin-bottom: 28px;
}

.wordmark .letter,
.mark-home .letter {
  display: inline-block;
  animation: bob var(--bob-duration, 3s) ease-in-out var(--bob-delay, 0s) infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(var(--bob-amount, -2px)); }
  70% { transform: translateY(0); }
  85% { transform: translateY(var(--bob-dip, 1px)); }
}

.wordmark svg,
.mark-home svg {
  position: relative;
  top: 1px;
  margin: 0 -1px;
  animation: bob var(--bob-duration, 3s) ease-in-out var(--bob-delay, 0s) infinite;
}

/* Scrolling the homepage carries the wordmark up into the same header slot the
   subpages use, so both pages share one piece of furniture rather than swapping
   one logo for another.

   Driven by the scroll timeline, not a scroll handler, so it tracks the scroll
   exactly and can't judder. Transform and opacity only — the hero's layout is
   never touched, and a browser without scroll timelines just scrolls the
   wordmark away as it does today. nav.js supplies the offsets. */
/* Only wide enough viewports: the parked wordmark lives in the margin beside the
   560px column, and below ~900px that margin isn't wide enough to clear the
   copy — the logo would sit on top of the text. Narrower screens keep today's
   behaviour and simply scroll it away. */
@media (min-width: 900px) {
  @supports (animation-timeline: scroll()) {
    .hero .wordmark {
      position: relative;
      z-index: 5;
      pointer-events: none;        /* it passes over the copy on the way up */
      transform-origin: left top;
      animation: mark-to-header linear both;
      animation-timeline: scroll(root block);
      /* nav.js sets the range so the collapse takes a fixed distance rather
         than a share of the page — otherwise adding a section further down
         would make the wordmark take longer to reach the corner. */
      animation-range: 0 var(--mark-range, 100%);
      will-change: transform;
    }

    /* The tagline belongs to the wordmark, not to the page. Once the wordmark
       starts leaving for the header it would sit there on its own, so it goes
       early — a fixed 260px of scroll rather than a share of the page, since
       it's a short dissolve and not a journey. */
    .hero .tagline {
      animation: tagline-out linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 260px;
    }
  }

}

@keyframes tagline-out {
  to { opacity: 0; transform: translateY(-6px); }
}

/* Reaches the corner 30% of the way through its scroll range, then holds
   station there — the last keyframe keeps cancelling the scroll, which is what
   pins it. nav.js sizes the range so that 30% lands on a fixed pixel distance;
   keyframe percentages can't be variables, so this 30% and BREAK_AT in nav.js
   are paired by hand. */
@keyframes mark-to-header {
  0% { transform: none; opacity: 1; }
  30% {
    transform: translate(var(--mark-tx, 0px), var(--mark-ty-a, 0px)) scale(var(--mark-scale, 1));
    opacity: 0.7;
  }
  100% {
    transform: translate(var(--mark-tx, 0px), var(--mark-ty-b, 0px)) scale(var(--mark-scale, 1));
    opacity: 0.7;
  }
}

.tagline {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 28px;
  cursor: default;
}

.tagline .char {
  display: inline-block;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Preserve spaces */
.tagline .space {
  display: inline;
}

/* ---- nav ---- */

.nav {
  position: absolute;
  top: 28px;
  right: 32px;
  display: flex;
  gap: 20px;
  font-size: 13px;
  letter-spacing: 1px;
  z-index: 3;
}

.nav a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.4s ease;
}

.nav a:hover { color: var(--fern); }

/* ---- scroll affordance ---- */

.scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-dim);
  opacity: 0.35;
  animation: driftDown 3.2s ease-in-out infinite;
}

@keyframes driftDown {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 5px); }
}

/* ---- page sections ---- */

.section {
  width: 100%;
  max-width: 560px;
  padding: 24px 0 96px;
  scroll-margin-top: 56px;   /* the #making anchor shouldn't jam the heading to the edge */
}

.section-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-bright);
  margin-bottom: 36px;
  text-wrap: balance;   /* narrow screens split it evenly instead of orphaning "now" */
}

/* Hidden only when JS is present to reveal it again — the section must never
   depend on a script to be readable. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint { animation: none; }
  .hero .wordmark,
  .hero .tagline { animation: none; }
}

/* ---- the works ----
   No panels. The rest of the site is type on flat colour, so these are
   typographic entries divided by hairlines, not cards. */

.work {
  padding: 34px 0;
  border-top: 1px solid var(--hairline);
}

.work:last-child {
  border-bottom: 1px solid var(--hairline);
}

.work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.work-name {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-bright);
}

.work-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--accent, var(--fern));
  white-space: nowrap;
  opacity: 0.9;
}

.work p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
}

.work p + p { margin-top: 12px; }

.work .quiet {
  color: var(--text-dim);
}

/* ---- prose pages ---- */

.prose {
  width: 100%;
  max-width: 560px;
  padding: 96px 0 64px;
}

.prose .page-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-bright);
  margin-bottom: 28px;
}

.prose p,
.copy p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-mid);
  margin-bottom: 20px;
}

.prose em,
.copy em { color: var(--text-mid); }

.prose a,
.copy a {
  color: var(--fern);
  text-decoration: none;
  border-bottom: 1px solid rgba(93, 184, 122, 0.3);
  transition: border-color 0.4s ease;
}

.prose a:hover,
.copy a:hover { border-bottom-color: var(--fern); }

/* The page is a letter, so it gets signed. Space above it does the work;
   nothing else needs to change. */
.prose .signature,
.copy .signature {
  margin-top: 34px;
  color: var(--text-mid);
}

.prose .rule,
.copy .rule {
  width: 32px;
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 36px 0;
}

.prose .legal,
.copy .legal {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-dim);
}

.prose .stamp,
.copy .stamp {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  opacity: 0.7;
  margin-top: 36px;
}

/* wordmark as a home link on subpages — same glyph and same drift as the hero,
   just quieter. Brightens on hover; the ᴏᴏ warms toward the light fern. */

.mark-home {
  position: absolute;   /* becomes fixed at >=900px, where the margin clears the copy */
  top: 26px;
  left: 32px;
  z-index: 3;
  display: flex;
  align-items: baseline;
  font-size: 20px;
  font-weight: 600;
  /* 4px at the hero's 42px, scaled to 20px — so this mark is a true reduction of
     the hero wordmark and the morph between them is a move, not a squish. */
  letter-spacing: 1.9px;
  color: var(--text-bright);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.5s ease;
}

.mark-home:hover { opacity: 1; }

/* Pinned wherever the homepage's wordmark also parks (see the collapse above),
   so the corner is occupied on every page at every scroll position. Must come
   after the base rule — a media query adds no specificity. */
@media (min-width: 900px) {
  .mark-home { position: fixed; }
}

.mark-home svg circle {
  transition: stroke 0.5s ease;
}

.mark-home:hover svg circle {
  stroke: var(--fern-bright);
}

/* ---- footer ---- */

.footer {
  width: 100%;
  text-align: center;
  padding: 24px 24px 40px;
  margin-top: auto;
}

.footer-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--text-dim);
  opacity: 0.4;
}

.footer-legal {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  opacity: 0.7;
}

.footer-legal a {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(122, 118, 112, 0.3);
  transition: color 0.4s ease;
}

.footer-legal a:hover { color: var(--fern); }

@media (max-width: 480px) {
  .wordmark { font-size: 30px; letter-spacing: 3px; margin-bottom: 22px; }
  .wordmark svg { width: 34px; height: 22px; }
  .tagline { font-size: 14px; }
  .nav { top: 22px; right: 24px; }
  .mark-home { top: 20px; left: 24px; font-size: 17px; letter-spacing: 2px; }
  .mark-home svg { width: 20px; height: 13px; }
  .work { padding: 28px 0; }
  .work-name { font-size: 19px; }
  .prose { padding: 80px 0 48px; }
}