/* ===========================================================================
   Rylus — "The Still Room"
   ---------------------------------------------------------------------------
   Two grounds, one metal. Deep pine ink for the immersive bands, warm
   limestone for everything you read at length, and brass as the only accent.
   The element hues (water / earth / spirit) are tints, not brand colours —
   they identify a principle and never shout.

   Type: Newsreader (display, literary, used with restraint) over Archivo
   (body, grotesque, executive-legible).
   =========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Grounds */
  --ink: #14201f;
  --ink-2: #1b2b29;
  --ink-3: #243634;
  --stone: #e8e4db;
  --paper: #f7f5f1;
  --white: #fffefb;

  /* Metal */
  --brass: #a8823f;
  --brass-lit: #c9a567;

  /* Elements. Muted on purpose — these identify a feeling, they are not
     brand colours and they never compete with the brass. */
  --water: #3f6e7d;
  --fire: #a8583f;
  --air: #7f939c;
  --earth: #97815c;
  --spirit: #6e6a8f;

  /* Text */
  --fg: #14201f;
  --fg-soft: #5b6360;
  --fg-mute: #868c88;
  --on-ink: #ece8df;
  --on-ink-soft: #a3aeaa;

  /* Lines */
  --rule: rgba(20, 32, 31, 0.13);
  --rule-strong: rgba(20, 32, 31, 0.26);
  --rule-ink: rgba(236, 232, 223, 0.16);

  /* Type */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Measure & rhythm */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --band: clamp(5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

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

/* Focus is never removed, only made to match the design. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: var(--brass);
  color: var(--white);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--on-ink);
  padding: 0.85rem 1.25rem;
}
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* -------------------------------------------------------------- primitives */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: 760px;
}

.band {
  padding-block: var(--band);
}

.band--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.band--stone {
  background: var(--stone);
}

.band--tight {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* ------------------------------------------------------------------- type */
.eyebrow {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* A short brass stroke, drawn once when the eyebrow scrolls in. Structural,
   not decorative: it marks where a new idea starts. */
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(var(--stroke, 1));
  transition: transform 1.1s var(--ease);
}

.band--ink .eyebrow {
  color: var(--brass-lit);
}

.eyebrow--center {
  justify-content: center;
}

.h1,
.h2,
.h3 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.06;
  text-wrap: balance;
}

.h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.65rem);
}

.h2 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  line-height: 1.1;
}

.h3 {
  font-size: clamp(1.35rem, 2.1vw, 1.72rem);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.lede {
  font-size: clamp(1.08rem, 1.45vw, 1.24rem);
  line-height: 1.62;
  color: var(--fg-soft);
  max-width: 56ch;
}

.band--ink .lede {
  color: var(--on-ink-soft);
}

.prose p + p {
  margin-top: 1.05em;
}

.prose a {
  color: inherit;
  text-decoration-color: var(--brass);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  color: var(--brass);
}

.prose em {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.06em;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-bg);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.btn__arrow {
  transition: transform 0.35s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn:hover {
  --btn-bg: var(--brass);
  border-color: var(--brass);
  color: var(--white);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--rule-strong);
}

.band--ink .btn--ghost {
  --btn-fg: var(--on-ink);
  border-color: var(--rule-ink);
}

.band--ink .btn--solid {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: inherit;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.band--ink .textlink {
  border-color: var(--rule-ink);
}

.textlink:hover {
  color: var(--brass);
  border-color: var(--brass);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.8rem;
  margin-top: 2.4rem;
}

/* -------------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 76px;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav__brand {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav__brand img {
  height: 30px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.1rem;
}

.nav__link {
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-soft);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.3s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--fg);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.72rem 1.3rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.35s var(--ease);
}

.nav__cta:hover {
  background: var(--brass);
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-strong);
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  line-height: 1;
}

.nav__toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--fg);
}

.nav__toggle span + span {
  margin-top: 5px;
}

/* Bar the admin sees on public pages — a way back into the editor from
   whatever they are looking at. */
.editbar {
  background: var(--ink-2);
  color: var(--on-ink);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.editbar__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.55rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.editbar a {
  color: var(--brass-lit);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.editbar a:hover {
  border-color: currentColor;
}

/* ------------------------------------------------------------------- hero */
/* The banners are cinematic ~2.5:1 landscapes, every one of them composed
   with its subject on the right and open sky, mist or water on the left. So
   the type sits left and the scrim is directional rather than a flat wash —
   the photograph keeps the half it was composed for. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 78vh, 46rem);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* A slow settle on load — the image arrives rather than appearing. */
  animation: settle 2.8s var(--ease) both;
}

@keyframes settle {
  from {
    transform: scale(1.05);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Two scrims: one from the left to hold the type, one from the bottom to
   seat the whole frame. Kept off the right third, where the subject is. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(12, 20, 19, 0.9) 0%,
      rgba(12, 20, 19, 0.72) 34%,
      rgba(12, 20, 19, 0.2) 62%,
      rgba(12, 20, 19, 0.08) 100%
    ),
    linear-gradient(to top, rgba(12, 20, 19, 0.72) 0%, transparent 45%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 6.5rem) var(--gutter) clamp(3rem, 7vw, 5rem);
  color: var(--on-ink);
}

/* Sized in rem, not ch. A `ch` resolves against THIS element's font-size —
   the body 1rem — not the display size of the h1 inside it, so a ch-based
   measure here computes to ~300px and breaks the headline into six lines. */
.hero__copy {
  max-width: 40rem;
}

.hero .eyebrow {
  color: var(--brass-lit);
}

.hero__title {
  margin-bottom: 1.6rem;
  color: #fff;
  text-shadow: 0 1px 40px rgba(10, 16, 15, 0.45);
}

.hero__sub {
  color: rgba(236, 232, 223, 0.88);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.62;
  max-width: 34rem;
}

/* The hero sits on a dark scrim, so the primary button inverts — ink-on-ink
   reads as a hole in the image rather than the main action. */
.hero .btn--solid,
.banner .btn--solid {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
}

.hero .btn--ghost {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.hero .textlink {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* Interior page banner — same treatment, shorter. */
.banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(19rem, 44vh, 27rem);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.banner .hero__media img {
  animation: none;
}

.banner .hero__inner {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* A page header with no banner image behind it. */
.pagehead {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------- impact */
/* The page's main argument: what changes in a business. Outcomes read as a
   set of equal claims, so they get equal cells rather than a hierarchy. */
.impact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: var(--rule-ink);
  border: 1px solid var(--rule-ink);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.impact__item {
  background: var(--ink);
  padding: clamp(1.75rem, 2.8vw, 2.4rem);
}

.impact__title {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 0.7rem;
}

.impact__title::before {
  content: "";
  display: block;
  width: 1.4rem;
  height: 1px;
  background: var(--brass);
  margin-bottom: 1rem;
}

.impact__body {
  color: var(--on-ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* --------------------------------------------------- the elements (five) */
/* The signature, and deliberately the quietest thing on the page. It names
   the five feelings and nothing else — the teaching itself belongs in the
   workshops and the writing, which is where this section sends you.
   Each panel carries the motion of its own element: water runs, fire rises,
   air drifts, spirit breathes, and earth does not move at all, because
   contentment doesn't. */
.elements {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.element {
  position: relative;
  background: var(--paper);
  padding: clamp(2rem, 3vw, 2.9rem) clamp(1.1rem, 1.6vw, 1.5rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.band--stone .element {
  background: var(--stone);
}

/* The elemental wash. Faint by design — this is a watermark behind a name,
   not a coloured tile. */
.element::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  background: radial-gradient(
    120% 90% at 50% 100%,
    var(--el) 0%,
    transparent 70%
  );
}

.element--water  { --el: var(--water); }
.element--fire   { --el: var(--fire); }
.element--air    { --el: var(--air); }
.element--earth  { --el: var(--earth); }
.element--spirit { --el: var(--spirit); }

/* Water: a current, running one way, continuously. */
.element--water::before {
  background: linear-gradient(
      180deg,
      transparent 0%,
      var(--water) 45%,
      transparent 100%
    ),
    radial-gradient(120% 90% at 50% 100%, var(--water) 0%, transparent 70%);
  background-size: 100% 240%, 100% 100%;
  animation: drift 16s linear infinite;
}

@keyframes drift {
  from { background-position: 0 0%, 0 0; }
  to   { background-position: 0 240%, 0 0; }
}

/* Fire: rises from the base. Slow and steady — a held flame, not a flicker. */
.element--fire::before {
  animation: rise 7s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes rise {
  0%, 100% { opacity: 0.12; transform: scaleY(0.9); }
  50%      { opacity: 0.26; transform: scaleY(1.12); }
}

/* Air: a wide, slow lateral drift. The layer is inset well beyond the panel
   so the gradient's own bounding box never slides into view as a hard edge —
   overflow:hidden crops the excess. */
.element--air::before {
  inset: -30%;
  background: radial-gradient(52% 46% at 50% 76%, var(--air) 0%, transparent 70%);
  animation: waft 19s ease-in-out infinite;
}

@keyframes waft {
  0%, 100% { transform: translateX(-12%); opacity: 0.13; }
  50%      { transform: translateX(12%);  opacity: 0.22; }
}

/* Earth: no animation, on purpose. */

/* Spirit: a breath, at about the pace of a resting one. */
.element--spirit::before {
  animation: breathe 9s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.11; transform: scale(1); }
  50%      { opacity: 0.24; transform: scale(1.08); }
}

.element__mark {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--el) 72%, var(--fg));
  margin-bottom: 1.1rem;
}

/* Sized against a fifth of the container. "Contentment" is the longest of the
   five at 11 characters, but two of the pairings are still unconfirmed, so the
   headroom here is deliberate — it was verified to hold 13. Scale it up only
   after checking the actual longest word against the narrowest column. */
.element__name {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
  overflow-wrap: break-word;
}

/* Optional, and empty until someone writes one. */
.element__line {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--fg-soft);
}

/* --------------------------------------------------------------- feature */
/* A full-bleed banner carrying copy, for the images that are already dark
   enough to read type against. Same left-weighted composition as the hero. */
.feature {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(28rem, 62vh, 40rem);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
  color: var(--on-ink);
}

.feature__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    95deg,
    rgba(12, 20, 19, 0.93) 0%,
    rgba(12, 20, 19, 0.8) 38%,
    rgba(12, 20, 19, 0.3) 68%,
    rgba(12, 20, 19, 0.05) 100%
  );
}

.feature__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter);
}

.feature__copy {
  max-width: 38rem;
}

.feature .lede,
.feature .prose {
  color: var(--on-ink-soft);
}

.feature .h2 {
  color: #fff;
}

.feature .practice-list {
  border-color: var(--rule-ink);
}

.feature .practice-list li {
  border-color: var(--rule-ink);
  color: rgba(236, 232, 223, 0.9);
}

/* ---------------------------------------------------------------- split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.split--flip .split__media {
  order: -1;
}

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

/* A checklist that reads as practice, not as features. */
.practice-list {
  margin-top: 2.4rem;
  border-top: 1px solid var(--rule);
}

.practice-list li {
  padding: 1.1rem 0 1.1rem 2.4rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: 1rem;
  line-height: 1.55;
}

.practice-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 1.1rem;
  height: 1px;
  background: var(--brass);
}

/* ---------------------------------------------------------------- offers */
.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.offer {
  background: var(--paper);
  padding: clamp(2rem, 3.2vw, 2.9rem);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.4s var(--ease);
}

.band--stone .offer {
  background: var(--stone);
}

.offer:hover {
  background: var(--white);
}

.offer__title {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.offer__body {
  color: var(--fg-soft);
  font-size: 0.96rem;
  flex: 1;
}

.offer__go {
  margin-top: 1.8rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.offer:hover .offer__go span {
  transform: translateX(4px);
}

.offer__go span {
  transition: transform 0.35s var(--ease);
}

/* --------------------------------------------------------------- beliefs */
.beliefs {
  counter-reset: belief;
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.beliefs li {
  background: var(--paper);
  padding: 1.65rem 0 1.65rem 3.5rem;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 300;
  line-height: 1.4;
}

.band--stone .beliefs li {
  background: var(--stone);
}

/* Numbered because these are enumerated beliefs the reader is meant to be
   able to refer back to — "the second one" — not because numbers look tidy. */
.beliefs li::before {
  counter-increment: belief;
  content: counter(belief, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.95rem;
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brass);
}

/* ------------------------------------------------------------- capture */
.capture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  /* Top-aligned, not centred: the two columns have very different heights,
     and centring makes the headline float below the first line of body copy,
     which reads as a mistake rather than a composition. */
  align-items: start;
}

.capture__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.capture__form .field {
  flex: 1 1 15rem;
  margin: 0;
}

.capture__note {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--on-ink-soft);
}

.band--stone .capture__note,
.paper .capture__note {
  color: var(--fg-mute);
}

/* ---------------------------------------------------------------- forms */
.field {
  margin-bottom: 1.35rem;
}

.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 0.55rem;
}

.band--ink .field label {
  color: var(--on-ink-soft);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  font-size: 0.98rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.band--ink .input,
.band--ink .select,
.band--ink .textarea {
  background: transparent;
  border-color: var(--rule-ink);
  color: var(--on-ink);
}

.band--ink .input::placeholder {
  color: var(--on-ink-soft);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 1px var(--brass);
}

.textarea {
  resize: vertical;
  min-height: 8.5rem;
  line-height: 1.6;
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.85rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1.35rem;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: var(--fg-soft);
  line-height: 1.5;
  cursor: pointer;
}

.check input {
  margin-top: 0.28rem;
  accent-color: var(--brass);
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* The honeypot. Off-screen rather than display:none — some bots skip fields
   that are explicitly hidden. */
.hp {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  padding: 0.95rem 1.15rem;
  margin-bottom: 1.6rem;
  border-left: 2px solid var(--brass);
  background: color-mix(in srgb, var(--brass) 9%, transparent);
  font-size: 0.92rem;
}

.alert--error {
  border-color: #a8443f;
  background: rgba(168, 68, 63, 0.08);
}

.form-note {
  font-size: 0.8rem;
  color: var(--fg-mute);
  margin-top: 1rem;
}

/* --------------------------------------------------------------- article */
.article-head {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 1.6rem;
}

.article-meta .dot {
  color: var(--brass);
}

.article-cover {
  margin-block: clamp(2rem, 4vw, 3rem);
}

.article-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Long-form reading column. Everything an admin can produce from the editor
   is styled here, so pasted HTML never lands unformatted. */
.article-body {
  font-size: 1.09rem;
  line-height: 1.78;
  color: #232e2c;
}

.article-body > * + * {
  margin-top: 1.35em;
}

.article-body h2 {
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin-top: 2.4em;
}

.article-body h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  margin-top: 2em;
}

.article-body ul,
.article-body ol {
  padding-left: 1.4rem;
  list-style: disc;
}

.article-body ol {
  list-style: decimal;
}

.article-body li + li {
  margin-top: 0.5em;
}

.article-body blockquote {
  border-left: 2px solid var(--brass);
  padding: 0.3rem 0 0.3rem 1.6rem;
  margin-block: 2em;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--ink);
}

.article-body blockquote p + p {
  margin-top: 0.7em;
}

.article-body img {
  width: 100%;
}

.article-body a {
  color: inherit;
  text-decoration-color: var(--brass);
  text-underline-offset: 3px;
}

.article-body a:hover {
  color: var(--brass);
}

.article-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 2.5em;
}

.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--stone);
  padding: 0.15em 0.4em;
}

/* ----------------------------------------------------------------- cards */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.post-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.post-card__media {
  overflow: hidden;
  background: var(--stone);
  aspect-ratio: 3 / 2;
  margin-bottom: 1.4rem;
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.post-card:hover .post-card__media img {
  transform: scale(1.04);
}

.post-card__meta {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 0.75rem;
}

.post-card__title {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 400;
  line-height: 1.22;
  margin-bottom: 0.7rem;
  transition: color 0.3s var(--ease);
}

.post-card:hover .post-card__title {
  color: var(--brass);
}

.post-card__excerpt {
  color: var(--fg-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Writing samples read as a list of works, not a grid of blog posts. */
.works {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}

.work {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: baseline;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.4s var(--ease);
}

.work:hover {
  padding-left: 0.75rem;
}

.work__year {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.work__title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 300;
  line-height: 1.2;
  transition: color 0.3s var(--ease);
}

.work:hover .work__title {
  color: var(--brass);
}

.work__excerpt {
  color: var(--fg-soft);
  font-size: 0.95rem;
  margin-top: 0.55rem;
  max-width: 60ch;
}

.work__source {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pagination a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 3px;
}

.pagination a:hover {
  color: var(--brass);
  border-color: var(--brass);
}

.pagination span {
  color: var(--fg-mute);
}

.empty {
  padding: clamp(3rem, 6vw, 5rem) 0;
  color: var(--fg-soft);
  font-family: var(--display);
  font-size: 1.3rem;
  font-style: italic;
}

/* ----------------------------------------------------------------- steps */
.steps {
  counter-reset: step;
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 1rem;
  align-items: baseline;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--fg-soft);
}

/* A real sequence — these steps happen in order, so they are numbered. */
.steps li::before {
  content: counter(step);
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--brass);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2rem;
}

.band--ink .steps li {
  color: var(--on-ink-soft);
}

.band--ink .steps li::before {
  border-color: var(--rule-ink);
}

/* ---------------------------------------------------------------- footer */
.footer {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.25rem;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
  gap: clamp(2.25rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule-ink);
}

.footer__brand {
  font-family: var(--display);
  font-size: 1.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
  display: inline-block;
  text-decoration: none;
}

.footer__blurb {
  color: var(--on-ink-soft);
  font-size: 0.94rem;
  max-width: 44ch;
}

.footer__heading {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-lit);
  margin-bottom: 1.2rem;
}

.footer__list li + li {
  margin-top: 0.7rem;
}

.footer__list a {
  color: var(--on-ink-soft);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 0.3s var(--ease);
}

.footer__list a:hover {
  color: var(--on-ink);
}

.footer__bottom {
  padding-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--on-ink-soft);
}

.footer__bottom a {
  color: inherit;
  text-decoration: none;
}

.footer__bottom a:hover {
  color: var(--on-ink);
}

/* ----------------------------------------------------------- shell pages */
/* Sign-in, thank-you, 404 — a single centred plate. */
.plate-wrap {
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.plate {
  width: 100%;
  max-width: 430px;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: clamp(2rem, 4vw, 3rem);
}

.plate--wide {
  max-width: 620px;
  text-align: center;
  background: transparent;
  border: 0;
}

.plate__title {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 0.6rem;
}

.plate__sub {
  color: var(--fg-soft);
  margin-bottom: 2rem;
}

.plate__foot {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
  color: var(--fg-soft);
}

/* ----------------------------------------------------------- scroll reveal */
/* Applied by site.js only when JS is available, so a no-JS visitor sees
   everything immediately rather than a blank page. */
.js .r {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js .r.in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 960px) {
  /* The left-weighted scrims assume a wide frame with the subject parked on
     the right. On a phone the copy spans the full width and sits straight
     over the subject, so the wash goes vertical — dark at the top where the
     text is, clearing toward the bottom so the photograph still reads. */
  .hero__media::after,
  .feature__media::after {
    background: linear-gradient(
      180deg,
      rgba(12, 20, 19, 0.92) 0%,
      rgba(12, 20, 19, 0.82) 55%,
      rgba(12, 20, 19, 0.66) 100%
    );
  }

  .hero__grid,
  .split,
  .capture,
  .footer__top {
    grid-template-columns: 1fr;
  }

  .split--flip .split__media {
    order: 0;
  }

  .hero__figure {
    aspect-ratio: 3 / 2;
  }

  /* Five across needs ~200px a column to breathe. Step down rather than
     letting the names wrap. */
  .elements {
    grid-template-columns: repeat(3, 1fr);
  }

  .work {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .work__source {
    margin-top: 0.4rem;
  }
}

@media (max-width: 780px) {
  .nav__toggle {
    display: block;
    order: 3;
  }

  .nav__links {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 1.25rem;
  }

  .nav.is-open .nav__links {
    display: flex;
  }

  .nav__links .nav__link {
    width: 100%;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.95rem;
  }

  .nav__inner {
    flex-wrap: wrap;
    gap: 0.9rem;
    padding-block: 0.9rem;
  }

  .nav__cta {
    order: 2;
  }

  .footer__top {
    gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  /* Two up on a phone. The panels hold two short words, so they stay
     legible where a six-word card would not. */
  .elements {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-row {
    gap: 0.85rem;
  }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .r {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ print */
@media print {
  .nav,
  .footer,
  .editbar,
  .capture,
  .cta-row {
    display: none !important;
  }

  body {
    background: #fff;
  }
}