:root {
  --parchment: #f6f1e6;
  --ink: #2b2620;
  --ink-soft: #5c5346;
  --forest: #45573f;
  --crimson: #8c3a2b;
  --gold: #a9834f;
  --line: rgba(43, 38, 32, 0.16);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --wave-h: clamp(50px, 7vw, 100px);
  --fade-h: clamp(240px, 30vw, 420px);

  /* Eased alpha ramp rather than a plain two-stop linear one. A linear ramp
     changes alpha at a constant rate, so it ends with a hard corner exactly
     where alpha reaches 0 -- the eye reads that corner as a line no matter
     how tall the fade is. This curve is an ease-in (roughly alpha = t^2.2),
     which is deliberately asymmetric: it leaves 0 almost imperceptibly, so
     the veil has a very long faint tail where it meets the artwork, and does
     its steep climb to fully-opaque only in the last 10% -- which sits under
     the wave and against the section boundary, where steepness is hidden.
     Still lands on exactly alpha 1 at 100%, so the boundary stays seamless. */
  --fade-ramp:
    rgba(246, 241, 230, 0) 0%,
    rgba(246, 241, 230, 0.004) 10%,
    rgba(246, 241, 230, 0.018) 20%,
    rgba(246, 241, 230, 0.045) 30%,
    rgba(246, 241, 230, 0.09) 40%,
    rgba(246, 241, 230, 0.155) 50%,
    rgba(246, 241, 230, 0.245) 60%,
    rgba(246, 241, 230, 0.37) 70%,
    rgba(246, 241, 230, 0.53) 80%,
    rgba(246, 241, 230, 0.73) 90%,
    rgba(246, 241, 230, 1) 100%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 23px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Faint drifting film-grain, like light static over old paper. Fixed so it
   reads as a texture over the whole viewport rather than scrolling with
   the page. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.16  0 0 0 0 0.14  0 0 0 0 0.11  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainDrift 9s steps(10) infinite;
}

@keyframes grainDrift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-1.5%, 0.5%); }
  20%  { transform: translate(1%, -1%); }
  30%  { transform: translate(-0.5%, 1.5%); }
  40%  { transform: translate(1.5%, 1%); }
  50%  { transform: translate(-1%, -0.5%); }
  60%  { transform: translate(0.5%, -1.5%); }
  70%  { transform: translate(-2%, 0%); }
  80%  { transform: translate(0%, 2%); }
  90%  { transform: translate(1.2%, -0.8%); }
  100% { transform: translate(0, 0); }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  margin: 0;
  letter-spacing: 0.005em;
}

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

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.6rem clamp(1.5rem, 5vw, 4rem);
  color: #fdfaf2;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}

.site-nav.scrolled {
  background: rgba(246, 241, 230, 0.92);
  backdrop-filter: blur(6px);
  color: var(--ink);
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 0 1px 0 var(--line);
}

.nav-links {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}

.nav-links a {
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.88;
  transition: opacity 0.2s ease;
}

.nav-links a:hover {
  opacity: 1;
  color: var(--crimson);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.art-credit {
  position: absolute;
  z-index: 2;
  right: clamp(0.9rem, 2.5vw, 1.6rem);
  bottom: calc(var(--wave-h) + 0.6rem);
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: rgba(253, 250, 242, 0.55);
  text-align: right;
  pointer-events: none;
}

.art-credit em {
  font-style: italic;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 26, 0.42) 0%,
    rgba(20, 20, 26, 0.12) 32%,
    rgba(20, 20, 26, 0.18) 68%,
    rgba(15, 15, 18, 0.55) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #fdfaf2;
  padding: 0 1.5rem;
}

.hero h1 {
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 5.6rem);
  line-height: 1.1;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}

.hero-tagline {
  margin: 1.2rem auto 0;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  font-style: normal;
  color: #f1e4c8;
}

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

.about {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(5rem, 12vw, 8rem) clamp(2rem, 5vw, 3rem);
}

.about-bloom {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  /* Centered mid-section, NOT at the top edge: a bloom peaking at y=0 puts
     its strongest tint exactly on the section boundary, where it meets the
     wave's untinted parchment fill -- a guaranteed hard step that no amount
     of tuning the fade overlay can hide. Centering it here makes the tint
     fall to zero at both edges, so the boundary is genuinely continuous. */
  background: radial-gradient(ellipse 45% 55% at 32% 50%, rgba(169, 131, 79, 0.20), rgba(169, 131, 79, 0) 72%);
}

.about-portrait,
.about-copy {
  position: relative;
  z-index: 1;
}

.about-portrait {
  display: flex;
  justify-content: center;
}

.portrait-frame {
  position: relative;
  width: min(100%, 360px);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(43, 38, 32, 0.45);
  outline: 1px solid var(--line);
  outline-offset: 8px;
}

.portrait-frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
}

.about-copy h2 {
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.7rem);
  margin-bottom: 1.3rem;
}

.about-copy p {
  color: var(--ink-soft);
  max-width: 46em;
}

.about-copy p + p {
  margin-top: 1.1rem;
}

.social-row {
  display: flex;
  gap: 1.1rem;
  margin-top: 1.8rem;
}

.social-row a {
  color: var(--ink-soft);
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-row a:hover {
  color: var(--crimson);
  transform: translateY(-2px);
}

/* ---------- Organic section-transition waves ---------- */

.section-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--wave-h);
  z-index: 2;
  pointer-events: none;
}

.wave-solid {
  fill: var(--parchment);
}

.section-wave--hero {
  bottom: -1px;
}

.section-wave--book-top {
  top: -1px;
}

.section-wave--book-bottom {
  bottom: -1px;
}

/* The overlay fades to fully-solid before the wave, so the wave's own
   silhouette needs its own soft shadow to stay visible -- it can no longer
   rely on a not-quite-finished fade behind it for contrast. */
.section-wave--hero .wave-solid,
.section-wave--book-bottom .wave-solid {
  filter: drop-shadow(0 -3px 4px rgba(43, 38, 32, 0.12));
}

.section-wave--book-top .wave-solid {
  filter: drop-shadow(0 3px 4px rgba(43, 38, 32, 0.12));
}

/* A plain rectangular gradient that does the actual color dissolve; the
   organic wave shape sits on top of it, at the boundary, as a crisp
   silhouette rather than trying to fade itself (a single gradient across
   a wavy shape fades at wildly different rates per column -- this keeps
   the two jobs separate so the dissolve is always smooth). It must reach
   *exactly* full opacity right at the section's edge -- anything less
   (e.g. 90%) leaves a permanent, faint image-tinted residue that reads as
   a hard seam against the next section's flat, untinted background,
   however subtle the shortfall. The wave's own drop-shadow (below) is
   what keeps it visible, not a not-quite-finished fade underneath it. */
.fade-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--fade-h);
  z-index: 1;
  pointer-events: none;
}

/* Fading through the "transparent" keyword interpolates toward black, not
   just toward zero alpha, which shows up as a muddy gray band partway
   through the dissolve -- use two stops of the same RGB with only the
   alpha changing instead. */
.fade-overlay--down {
  bottom: 0;
  background: linear-gradient(to bottom, var(--fade-ramp));
}

.fade-overlay--up {
  top: 0;
  background: linear-gradient(to top, var(--fade-ramp));
}

/* ---------- Book / Crimson Knight ---------- */

.book {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.book-media {
  position: absolute;
  inset: 0;
}

.book-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.book-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 6, 8, 0.55) 0%,
    rgba(10, 6, 8, 0.18) 38%,
    rgba(10, 6, 8, 0.35) 75%,
    rgba(10, 6, 8, 0.75) 100%
  );
}

.book-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #fbf1e4;
  padding: clamp(2rem, 6vw, 3rem) 1.5rem;
  max-width: 54em;
}

.book-title {
  font-weight: 500;
  font-size: clamp(2.6rem, 6.5vw, 4.4rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.book-blurb {
  margin: 1.6rem auto 0;
  font-size: clamp(1.25rem, 1.8vw, 1.4rem);
  color: #ecdcc5;
  text-align: left;
}

.book-hook {
  margin: 1.4rem auto 0;
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  font-family: var(--font-display);
  font-style: italic;
  color: #f1e4c8;
}

.book-status {
  margin-top: 2rem;
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  letter-spacing: 0.04em;
  font-size: 1rem;
  color: #f1e4c8;
}

/* ---------- Works in progress ---------- */

.wip {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 6.5rem) clamp(2rem, 5vw, 3rem) 0;
  text-align: center;
}

.wip h2 {
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.7rem);
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

.wip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  text-align: left;
}

.wip-item {
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

/* Inset rather than full-bleed: the page already carries two full-bleed
   paintings, and two more would make the whole layout read as a repeating
   band. Keeping these contained also preserves full-bleed as the visual
   signal for the lead title. */
.wip-figure {
  display: block;
  margin-bottom: 0.6rem;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1rem 2rem -1rem rgba(43, 38, 32, 0.4);
}

.wip-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.wip-credit {
  margin: 0 0 1.9rem;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  opacity: 0.7;
}

.wip-credit em {
  font-style: italic;
}

.wip-item h3 {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}

.wip-meta {
  margin: 0 0 1.3rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--gold);
}

.wip-item p {
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Contact ---------- */

.contact {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(5rem, 12vw, 8rem) clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.contact-bloom {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  /* Centered mid-section for the same reason as .about-bloom above. */
  background: radial-gradient(ellipse 32% 50% at 50% 45%, rgba(140, 58, 43, 0.14), rgba(140, 58, 43, 0) 72%);
}

.contact > :not(.contact-bloom) {
  position: relative;
  z-index: 1;
}

.contact h2 {
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.7rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.contact-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  text-align: left;
}

.contact-col {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.contact-col h3 {
  font-size: 1.3rem;
  font-style: italic;
  margin-bottom: 0.8rem;
}

.contact-col p {
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

.contact-name {
  margin-top: 1rem !important;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink) !important;
}

.contact-col p > a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.contact-col p > a:hover {
  color: var(--crimson);
  border-color: var(--crimson);
}

.contact-col .social-row {
  margin-top: 1.4rem;
}

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  padding: 2.5rem 1.5rem 3rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--line);
}

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
  .site-nav {
    padding: 1.1rem 1.2rem;
  }

  .nav-links {
    gap: 0.85rem;
  }

  .nav-links a {
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .about {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  /* The frame's outline sits 8px outside its box, so a full-width frame
     leaves the outline nearly flush with the screen edge. Pull the frame
     in so the outline keeps the same margin as the body copy. */
  .portrait-frame {
    width: min(100%, 320px);
  }

  .social-row {
    justify-content: center;
  }

  .contact-columns,
  .wip-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* The art credit is anchored to the bottom of the section while the
     blurb grows taller as it wraps, so at narrow widths the status line
     collided with it. Reserve a lane at the bottom of the content for the
     credit to live in. */
  .book-content {
    padding-bottom: 7rem;
  }

  .br-desktop {
    display: none;
  }
}

/* ---------- Motion ---------- */

.parallax-img {
  will-change: transform;
}

/* Continuous slow drift-zoom ("Ken Burns") on the two paintings. Scroll
   parallax alone is easy to miss on soft, misty artwork -- there are no
   sharp features to read the movement against, and it stops the moment you
   stop scrolling. This runs regardless of scroll so the page is never fully
   still, and it lives on the <picture> wrapper so it can't collide with the
   inline transform the parallax script writes onto the <img> itself.
   Different durations keep the two from moving in lockstep. */
.hero-media,
.book-media {
  will-change: transform;
  animation: driftZoom 48s ease-in-out infinite;
}

.book-media {
  animation-duration: 62s;
  animation-delay: -18s;
}

@keyframes driftZoom {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  50%  { transform: scale(1.075) translate3d(-1.2%, -0.9%, 0); }
  100% { transform: scale(1) translate3d(0, 0, 0); }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"] {
  transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal] {
    transition: none;
  }
  .parallax-img {
    transform: none !important;
  }
  body::after,
  .hero-media,
  .book-media {
    animation: none;
  }
}