/* The Inner Break — V1
   Plain CSS, mobile-first. No build step, no framework. */

:root {
  --color-navy-deep: #0d1620;
  --color-navy: #16232f;
  --color-navy-light: #223244;
  --color-cream: #f6f0e4;
  --color-cream-dim: #ece3d1;
  --color-orange: #db6b34;
  --color-orange-deep: #b8502a;
  --color-text-on-cream: #1c2530;
  --color-text-on-navy: #f2ead9;
  --color-text-muted-on-cream: #55605e;
  --color-text-muted-on-navy: #b7c1c9;

  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max-width: 1080px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 9rem;

  --radius: 6px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text-on-cream);
  background: var(--color-cream);
  line-height: 1.6;
  font-size: 17px;
}

h1, h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
}

p {
  margin: 0 0 var(--space-sm);
}

a {
  color: inherit;
}

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

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

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-orange);
  color: var(--color-cream);
  padding: var(--space-xs) var(--space-sm);
  z-index: 100;
}

.skip-link:focus {
  left: var(--space-sm);
  top: var(--space-sm);
}

/* Wordmark */

.wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
}

.wordmark--small {
  font-size: 1.25rem;
}

/* Header */

.site-header {
  background: var(--color-navy-deep);
  color: var(--color-text-on-navy);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header--over-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(13, 22, 32, 0.55) 0%, rgba(13, 22, 32, 0) 100%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.95rem;
}

.site-nav a {
  text-decoration: none;
  color: var(--color-text-muted-on-navy);
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--color-text-on-navy);
}

.site-nav__cta {
  color: var(--color-orange) !important;
  font-weight: 600;
}

/* Buttons */

.button {
  display: inline-block;
  padding: 0.85em 1.75em;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-sans);
}

.button--primary {
  background: var(--color-orange);
  color: var(--color-cream);
}

.button--primary:hover,
.button--primary:focus {
  background: var(--color-orange-deep);
}

/* Hero — the video owns the viewport; minimal chrome, no card framing */

.hero {
  background: var(--color-navy-deep);
  color: var(--color-text-on-navy);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The frame holds two layers of the same footage: a blurred, scaled-up
   backdrop that fills the whole viewport width (atmosphere, not meant to
   be read as a sharp image), and the real, uncropped video centered on
   top. This dissolves the hard edge of a "video floating on a page"
   without cropping any of the actual footage to force full-bleed. */

.hero__frame {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 96svh;
  overflow: hidden;
  background: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(60px) brightness(0.4) saturate(1.15);
  transform: scale(1.2);
  z-index: 0;
}

.hero__stage {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  max-width: 100vw;
  aspect-ratio: 540 / 960;
  overflow: hidden;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__content {
  max-width: 640px;
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  opacity: 0;
  transform: translateY(0.75rem);
  animation: hero-content-in 900ms ease-out 600ms forwards;
}

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--color-orange);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.hero__headline {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  color: var(--color-cream);
  margin: 0;
}

@keyframes hero-content-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__content {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Editorial asymmetric blocks — a short fragment beside a photograph, */
/* scaled to contribute to rhythm rather than stop the page */

.editorial {
  padding: var(--space-xl) 0;
  background: var(--color-cream);
}

.editorial--b {
  background: var(--color-cream-dim);
}

.editorial__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.editorial__text {
  width: 100%;
  max-width: 34ch;
}

.fragment {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0;
}

.editorial__media {
  width: 100%;
  max-width: 420px;
  margin: 0;
}

.editorial__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

.editorial__media--small {
  max-width: 320px;
}

/* Secondary motion moment — small, quiet, no card chrome */

.motion-moment {
  padding: var(--space-xl) var(--space-md);
  background: var(--color-navy-deep);
  display: flex;
  justify-content: center;
}

.motion-moment__frame {
  position: relative;
}

.motion-moment__backdrop {
  display: none;
}

.motion-moment__video {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 608 / 1080;
  object-fit: cover;
  display: block;
}

/* Sections */

.section {
  padding: var(--space-xl) 0;
}

.section--cream {
  background: var(--color-cream);
  color: var(--color-text-on-cream);
}

.section--navy {
  background: var(--color-navy-deep);
  color: var(--color-text-on-navy);
}

.section--navy .section__lede,
.section--navy .placeholder-copy {
  color: var(--color-text-muted-on-navy);
}

.section__inner {
  max-width: 720px;
}

.section__heading {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.section__lede {
  font-size: 1.15rem;
  color: var(--color-text-muted-on-cream);
}

.section__note {
  font-size: 0.95rem;
  color: var(--color-text-muted-on-cream);
}

/* Aside (experimenting) — reflective, not a feature block */

.section--aside {
  padding: var(--space-lg) 0;
}

.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--color-orange);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.aside-question {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
  max-width: 34ch;
}

.section--aside .section__note {
  color: var(--color-text-muted-on-navy);
  max-width: 55ch;
}

/* Themes — a quiet interstitial, not a boxed section */

.themes {
  padding: var(--space-lg) 0;
  background: var(--color-cream);
}

.theme-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-text-muted-on-cream);
}

.theme-list li::after {
  content: "";
}

.theme-list li {
  position: relative;
}

.theme-list li:not(:last-child)::after {
  content: "\00b7";
  margin-left: var(--space-md);
  color: var(--color-orange);
  position: absolute;
  right: calc(-1 * var(--space-md) / 2 - 4px);
}

/* Writing feature — Issue 001 gets real editorial presence: this is
   where the visitor moves from watching Rob's life to engaging with
   the thinking behind it. The photo (Rob backpacking the Appalachian
   Trail) now shows on mobile too, capped and centered the same way
   the editorial photos elsewhere on the page are — restrained, not
   full-bleed. It sits after the title/teaser/link in source order, so
   the text stays the first thing read and stays fully scannable; the
   photo reads as a quiet closing beat, not an interruption. */

.writing-feature__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.writing-feature__media {
  display: block;
  max-width: 420px;
  margin: 0 auto;
}

.writing-feature__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Writing entry */

.writing-entry {
  border-top: 1px solid var(--color-cream-dim);
  padding-top: var(--space-md);
}

.writing-entry__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.writing-entry__title a {
  text-decoration: none;
}

.writing-entry__title a:hover,
.writing-entry__title a:focus {
  text-decoration: underline;
  text-decoration-color: var(--color-orange);
}

.writing-entry__teaser {
  color: var(--color-text-muted-on-cream);
  max-width: 60ch;
}

.writing-entry__link {
  display: inline-block;
  font-weight: 600;
  color: var(--color-orange-deep);
  text-decoration: none;
}

.writing-entry__link:hover,
.writing-entry__link:focus {
  text-decoration: underline;
}

/* Subscribe — a quiet closing invitation, not a conversion block */

.subscribe__mark {
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.subscribe__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-text-muted-on-navy);
  max-width: 40ch;
  margin-bottom: 0;
}

.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 420px;
  margin-top: var(--space-md);
}

.subscribe-form input[type="email"] {
  padding: 0.85em 1em;
  border-radius: var(--radius);
  border: 1px solid var(--color-navy-light);
  font-size: 1rem;
  font-family: var(--font-sans);
  background: var(--color-cream);
  color: var(--color-text-on-cream);
}

.form-note {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-text-muted-on-navy);
  min-height: 1.2em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Article (single newsletter issue) */

.article__inner {
  max-width: 640px;
}

.article__back {
  font-size: 0.9rem;
}

.article__back a {
  text-decoration: none;
  color: var(--color-orange-deep);
}

.article__back a:hover,
.article__back a:focus {
  text-decoration: underline;
}

.article__title {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  margin-bottom: var(--space-md);
}

.article h2 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin-top: var(--space-lg);
}

.article__signoff {
  font-family: var(--font-serif);
  font-style: italic;
  margin-top: var(--space-md);
}

.article__back--bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-cream-dim);
  font-size: 1rem;
  font-weight: 600;
}

/* Footer */

.site-footer {
  background: var(--color-navy-deep);
  color: var(--color-text-muted-on-navy);
  padding: var(--space-lg) 0;
  text-align: center;
  font-size: 0.9rem;
}

.site-footer__inner > * {
  margin-bottom: var(--space-xs);
}

.site-footer .wordmark {
  color: var(--color-text-on-navy);
  margin-bottom: var(--space-sm);
  display: inline-block;
}

/* Tablet and up */

@media (min-width: 640px) {
  .subscribe-form {
    flex-direction: row;
  }

  .subscribe-form input[type="email"] {
    flex: 1;
  }
}

/* Desktop and up */

@media (min-width: 860px) {
  .section__inner {
    text-align: left;
  }

  .hero {
    text-align: center;
  }

  .editorial__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
  }

  .editorial__text {
    max-width: 30ch;
  }

  .editorial--a .editorial__inner {
    justify-content: flex-start;
  }

  .editorial--a .editorial__media {
    margin-right: var(--space-md);
  }

  .editorial--b .editorial__inner {
    justify-content: flex-end;
  }

  .editorial--b .editorial__media {
    margin-left: var(--space-md);
  }
}

/* Desktop hero — full-bleed, not a scaled-up mobile one and not a
   split-screen panel either. Mobile/tablet (below 1024px) keep the
   frame-then-content stack above untouched. Here the sharp footage
   itself becomes the full viewport background (object-fit: cover,
   deliberately cropped — the ambient blur layer is no longer needed
   since the sharp video now fills the frame), with the headline
   overlaid directly on it, low, against a soft gradient for legibility. */

@media (min-width: 1024px) {
  .hero {
    position: relative;
  }

  .hero__frame {
    height: 100svh;
  }

  .hero__backdrop {
    display: none;
  }

  .hero__stage {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
  }

  .hero__video {
    object-position: center 40%;
  }

  .hero__content {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    max-width: 40rem;
    margin: 0;
    padding: 12vh clamp(2rem, 6vw, 5rem) clamp(3rem, 8vh, 5rem);
    display: block;
    text-align: left;
    background: linear-gradient(180deg, rgba(13, 22, 32, 0) 0%, rgba(13, 22, 32, 0.35) 45%, rgba(13, 22, 32, 0.65) 100%);
  }

  .hero__headline {
    font-size: clamp(2rem, 2.6vw, 2.75rem);
  }

  /* Melissa/Nikko/Kai secondary moment — same idea as the hero, at a
     quieter scale: the real portrait video stays exactly as it already
     was (uncropped, same size, still the focal point). The first two
     passes still left a visible navy border around the backdrop — a
     bounded 96vw/82vh box plus the section's own 6rem/2rem padding —
     which is exactly what read as "a box," not an environment. This
     pass removes the section padding and the frame's width/height caps
     on desktop entirely, so the frame is genuinely edge-to-edge like
     the hero's, and the backdrop actually meets the top/bottom/side of
     the viewport instead of stopping short of it. Still no dynamic
     reframing, no full-bleed sharp footage, and noticeably shorter
     than the hero's 100svh — this stays a secondary beat, not another
     hero. */

  .motion-moment {
    padding: 0;
  }

  .motion-moment__frame {
    z-index: 0;
    width: 100%;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .motion-moment__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(24px) brightness(0.7) saturate(1.25);
    transform: scale(1.15);
    z-index: 0;
  }

  .motion-moment__video {
    z-index: 1;
    max-width: 360px;
    height: 88%;
    width: auto;
    aspect-ratio: 608 / 1080;
    border-radius: var(--radius);
  }

  /* Tighter vertical rhythm for the SUP -> motion-moment -> Rob/Nikko ->
     themes run — same content, same restraint, just less dead cream
     space between beats so they read as connected rather than as
     separate, sparse screens. */

  .editorial {
    padding: 3.5rem 0;
  }

  .themes {
    padding: 3rem 0;
  }

  /* Latest writing — given real editorial weight instead of reading as
     a footnote: larger type, a genuine supporting photograph, an
     asymmetric layout instead of a centered text block. */

  .writing-feature__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
  }

  .writing-feature__text {
    flex: 1 1 52%;
    min-width: 0;
  }

  .writing-feature__media {
    display: block;
    flex: 1 1 42%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  .writing-feature__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
  }

  .writing-entry__title {
    font-size: clamp(2rem, 3vw, 2.75rem);
  }

  .writing-entry__teaser {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.5;
  }

  /* Currently + newsletter — recomposed as one closing chapter instead
     of two small, disconnected blocks in a large navy field. Centered,
     larger type, pulled close together (tight padding between them),
     so the ending has real presence without adding new copy or filling
     the space with imagery. Footer stays quiet underneath, as a coda. */

  .section--aside {
    padding: var(--space-xl) 0 var(--space-md);
    text-align: center;
  }

  .section--aside .section__inner {
    max-width: 780px;
    margin: 0 auto;
  }

  .section--aside .section__eyebrow {
    text-align: center;
  }

  .aside-question {
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
  }

  .subscribe {
    padding-top: var(--space-md);
  }

  .subscribe .section__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
  }

  .subscribe__mark {
    font-size: 2.5rem;
  }

  .subscribe__line {
    font-size: 1.3rem;
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
  }

  .subscribe-form {
    margin-left: auto;
    margin-right: auto;
  }
}