:root {
    color-scheme: light;
    --navy: #18233D;       --plum: #2B1B2E;       --terracotta: #A64228; --black: #17140F;      --field: var(--navy);
    --ink: #17140F;        --surface: #FDFCF9;    --band: #F1ECDD;       --soft: #5C5850;       --mid: #77705F;        --hair: rgba(23, 20, 15, 0.14);
    --on-field: #F7F3EA;
    --on-field-soft: rgba(247, 243, 234, 0.82);
    --mark: #FFDD4A;       --display: "Libre Caslon Condensed", "Iowan Old Style", Georgia, serif;
    --text: "Google Sans Flex", "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --max: 1208px;
    --gutter: clamp(20px, 4vw, 40px);
    --edge: max(var(--gutter), calc((100vw - var(--max)) / 2));
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
  body {
    margin: 0; background: var(--surface); color: var(--ink);
    font-family: var(--text); font-size: 1.125rem; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -0.005em; text-wrap: balance; }
  h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 1.05; }
  h1 .turn { display: block; }   h2 { font-size: clamp(2rem, 3.1vw, 2.6rem); line-height: 1.12; }
  p { max-width: 60ch; text-wrap: pretty; }

  a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .field :focus-visible, .foot :focus-visible { outline-color: var(--mark); }

  .wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .skip { position: absolute; left: 12px; top: -80px; background: var(--mark); color: var(--ink); padding: 10px 14px; z-index: 20; }
  .skip:focus { top: 12px; }
  .draft-note { background: var(--band); font-size: 0.85rem; max-width: none; padding: 6px var(--gutter); color: var(--soft); }

  .btn {
    display: inline-block; border-radius: 999px; padding: 13px 27px;
    background: var(--ink); color: var(--surface);
    font-weight: 600; font-size: 1rem; line-height: 1.4; text-decoration: none;
  }
  .btn:hover { background: #3B362D; }
  .btn.bright { background: var(--mark); color: var(--ink); }
  .btn.bright:hover { background: #FFE878; }
  .btn.small { padding: 9px 22px; }

  .top { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--hair); }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; min-height: 72px; padding-block: 12px; }
  .name { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1; text-decoration: none; }
  .top nav { display: flex; flex-wrap: wrap; gap: 6px 34px; font-size: 1rem; }
  .top nav a { text-decoration-line: none; }
  .top nav a:hover { text-decoration-line: underline; }
  .menu-box { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .menu-btn { display: none; }

  .field { background: var(--field); color: var(--on-field); }
  body.workshops { --field: var(--plum); }
  body.workflow { --field: var(--terracotta); --on-field-soft: var(--on-field); }
  body.workflow .page-hero .btn.bright { background: var(--on-field); }   body.workflow .page-hero .btn.bright:hover { background: #FFFFFF; }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-text {
    padding: clamp(56px, 7.5vw, 112px) clamp(28px, 5vw, 72px) clamp(56px, 7.5vw, 112px) var(--edge);
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero .lede { margin-top: 28px; font-size: 1.25rem; line-height: 1.55; color: var(--on-field-soft); max-width: 31em; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
  .hero-photo { position: relative; min-height: 460px; }
  .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }

  .glance { border-bottom: 1px solid var(--hair); }
  .glance .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 16px; }
  .glance ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.95rem; }
  .glance li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  .glance svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--mid); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .glance .btn { flex: none; }

  .sec { padding-block: clamp(64px, 8vw, 112px); }
  .band { background: var(--band); }
  .lead { margin-top: 14px; font-size: 1.25rem; line-height: 1.55; color: var(--soft); max-width: 44em; }
  .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 28px; align-items: start; }
  .row > .head { grid-column: 1 / span 5; }
  .row > .body { grid-column: 6 / span 7; }
  .body p, .body dd { color: var(--soft); }
  .flow > * + * { margin-top: 1.05em; }

  .kind { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; }
  .claim { margin-top: 12px; font-size: 1.25rem; line-height: 1.5; color: var(--soft); max-width: 22em; }
  .why h3, .faq dt, .steps strong { font-family: var(--text); font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
  .why h3 { margin-bottom: 4px; }

  .days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: clamp(32px, 4vw, 56px); }
  .day { background: var(--band); border-top: 4px solid var(--field); padding: 32px 36px 36px; }
  .day h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 2.3vw, 2.05rem); line-height: 1.14; }
  .day p:not(.kind) { margin-top: 12px; color: var(--soft); }
  .day ul { margin: 18px 0 0; padding-left: 1.1em; color: var(--soft); }
  .day li + li { margin-top: 6px; }
  .fine { margin-top: 20px; font-size: 0.95rem; color: var(--mid); }
  .head .kind { margin-bottom: 10px; }
  .mission .mission-note { font-family: var(--text); font-size: 1.25rem; line-height: 1.55; font-weight: 400; color: var(--soft); max-width: 40em; margin-top: 30px; }

  .steps { margin: 0; padding-left: 1.3em; }
  .steps li + li { margin-top: 1.05em; }
  .steps li::marker { color: var(--mid); font-weight: 600; }

  .faq > div { padding-block: 22px; border-top: 1px solid var(--hair); }
  .faq > div:first-child { padding-top: 0; border-top: 0; }
  .faq dt { margin-bottom: 4px; }
  .faq dd { max-width: 60ch; }

  .ruled { border-top: 1px solid var(--hair); }

  .contact { padding-block: clamp(72px, 9vw, 128px); background: var(--black); }
  .contact h2 { font-size: clamp(2.4rem, 4.5vw, 4.1rem); line-height: 1.04; max-width: 12em; }
  .contact p { margin-top: 28px; font-size: 1.25rem; line-height: 1.55; color: var(--on-field-soft); max-width: 34em; }
  .address { font-size: 1.125rem; user-select: all; }

  .foot { background: var(--ink); color: var(--on-field-soft); font-size: 0.95rem; border-top: 1px solid rgba(247, 243, 234, 0.16); }
  .foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 26px; }

  .mission { padding-block: clamp(64px, 8vw, 112px) clamp(8px, 2vw, 24px); }
  .mission p { max-width: none; font-family: var(--display); font-size: clamp(2rem, 3.7vw, 3.3rem); line-height: 1.14; letter-spacing: -0.005em; font-weight: 500; }
  .mission .lead-in { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 500; line-height: 1.25; letter-spacing: 0; color: var(--mid); margin-bottom: 14px; }
  .mission .s2 { margin-left: 1.3em; }

  .tiles { margin-top: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .tile { display: flex; flex-direction: column; background: var(--surface); border-top: 4px solid var(--plum); padding: 32px 36px 36px; text-decoration: none; }
  .tile:nth-child(2) { border-top-color: var(--terracotta); }   .tile:hover { background: #FFFFFF; }
  .tile h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 2.3vw, 2.05rem); line-height: 1.14; }
  .tile .claim { max-width: none; }
  .tile .desc { margin-top: 14px; color: var(--soft); font-size: 1.0625rem; }
  .tile .more { margin-top: auto; padding-top: 26px; font-weight: 600; font-size: 1rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .tile:hover .more { text-decoration-thickness: 2px; }

  .asks { list-style: none; padding: 0; }
  .asks li { font-family: var(--display); font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 500; line-height: 1.22; padding-block: 16px; border-top: 1px solid var(--hair); color: var(--ink); }
  .asks li:first-child { border-top: 0; padding-top: 0; }
  .asks + p { margin-top: 22px; }

  .page-hero { padding-block: clamp(56px, 7vw, 104px); }
  .page-hero .kind { color: var(--on-field-soft); }
  .page-hero .lede { margin-top: 20px; font-size: 1.35rem; line-height: 1.5; color: var(--on-field-soft); }
  .intro { padding-block: clamp(56px, 7vw, 96px); }
  .intro p { font-size: 1.25rem; line-height: 1.55; max-width: 44em; }
  .intro p + p { margin-top: 1em; }
  .back { margin-top: 28px; font-size: 1rem; }

  @media (max-width: 900px) {
    .mission .s2 { margin-left: 0.8em; }
    .tiles { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .days { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .day { padding: 24px 26px 28px; }
    .tile { padding: 24px 26px 28px; }
  }

  @media (max-width: 900px) {
    .top { position: static; }
    .top nav { gap: 6px 20px; font-size: 0.95rem; }
    .hero { grid-template-columns: minmax(0, 1fr); }
    .hero-text { padding-right: var(--gutter); }
    .hero-photo { min-height: 0; aspect-ratio: 5 / 4; }
    .glance .btn { display: none; }
    .row > .head, .row > .body { grid-column: 1 / -1; }
  }
  @media (max-width: 480px) {
    .menu-btn { display: inline-block; border: 1px solid var(--ink); border-radius: 999px; padding: 7px 20px; font-size: 0.95rem; font-weight: 600; line-height: 1.4; cursor: pointer; }
    .menu-box:focus-visible + .menu-btn { outline: 3px solid var(--ink); outline-offset: 3px; }
    .menu-box:checked + .menu-btn { background: var(--ink); color: var(--surface); }
    .top nav { display: none; width: 100%; flex-direction: column; gap: 0; font-size: 1.05rem; }
    .menu-box:checked ~ nav { display: flex; }
    .top nav a { padding-block: 12px; border-top: 1px solid var(--hair); }
    .hero-photo { aspect-ratio: 1 / 1; }
    .actions .btn { width: 100%; text-align: center; }
    .glance ul { flex-direction: column; }
  }
  @media print {
    .draft-only, .top nav, .skip, .glance .btn { display: none; }
    .top { position: static; }
    .field, .band, .foot { background: none; color: #000; }
    .hero .lede, .contact p, .foot { color: #000; }
    .btn { background: none; color: #000; padding: 0; text-decoration: underline; }
  }

  @media (min-width: 1600px) {
    .hero { grid-template-columns: minmax(0, 1fr) min(40vw, 760px); min-height: min(78vh, 900px); }
    .hero-text { padding-left: max(var(--gutter), calc((100% - 660px) / 2)); padding-right: max(var(--gutter), calc((100% - 660px) / 2)); }   }