:root{
    color-scheme: light;

    /* Katya's specified brand colors */
    --blue: #a8d1e9;          /* H202 S28 B91 */
    --orange: #ff9f52;        /* H27 */
    --orange-brand: #ff6622;   /* the inline "mothwick" in the bio */
    --purple: #a142f4;         /* the "guides coming soon" flag */

    /* Same hues, deepened for text that must stay legible on white */
    --blue-head: #5199c2;     /* H202 S58 B76 — the headings, 3.1:1 on white */
    --blue-ink: #2175a6;      /* H202 — 5.1:1 on white */
    --orange-ink: #b25a12;    /* H27  — 4.8:1 on white */

    --ground: #ffffff;
    --ink: #000000;
    --ink-soft: #55565a;      /* neutral pulled a touch toward the blue */
    --rule: #e4eef5;

    /* Two families, used the way Brûlé uses theirs: the serif is the
       logotype and nothing else; the grotesque carries all the text.
       Libre Caslon stands in for Caslon 540, Archivo for Akzidenz-Grotesk. */
    --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
    --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --measure: 34rem;

    /* The wordmark's size drives the logo's, so the moth always matches
       the width of the "mo" in "mothwick". 1.488 is that glyph pair's
       width in Libre Caslon Text italic (at 0.02em tracking), as a
       multiple of the font size — measured, not guessed. Caslon sets
       wider than Times, so the point size drops to keep the wordmark
       the same apparent size. */
    --wordmark-size: clamp(2.2rem, 8.9vw, 3.9rem);
    --logo-width: calc(1.488 * var(--wordmark-size));

    /* Vertical rhythm. Everything above the footer is set at the tight
       gap; only the footer keeps the full one. */
    --section-gap: clamp(3rem, 7vw, 4.75rem);
    --tight-gap: calc(var(--section-gap) / 2);
  }

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

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

  body{
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
  }

  .page{
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(1.25rem, 3.5vw, 2.5rem) clamp(1.25rem, 5vw, 2.5rem) 3rem;
    display: flex;
    flex-direction: column;
  }

  .page > * + *{ margin-top: var(--section-gap); }
  .page > .about,
  .page > .materials{ margin-top: var(--tight-gap); }

  /* ---------- masthead ---------- */

  .masthead{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-align: center;
  }

  .masthead img{
    display: block;
    width: var(--logo-width);
    max-width: 100%;
    height: auto;
  }

  .wordmark{
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--wordmark-size);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--blue);
  }

  /* The promise line. Sits under the wordmark, set in the heading blue
     so the masthead reads as one unit. */
  .tagline{
    margin: 0;
    max-width: 24rem;
    font-size: clamp(0.95rem, 3.1vw, 1.15rem);
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: var(--blue-head);
    text-wrap: balance;
  }

  /* ---------- about ---------- */

  .about{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;   /* photo on the right, text on the left */
    align-items: flex-start;
    gap: clamp(1.5rem, 4vw, 2.25rem);
  }

  .portrait{
    flex: 0 0 auto;
    width: 12.5rem;
    max-width: 100%;
    margin-inline: auto;
  }

  .portrait img{
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--blue);
  }

  .about-text{
    flex: 1 1 20rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .bio{
    margin: 0 0 0.75rem;
    max-width: var(--measure);
    color: var(--ink);
    text-align: justify;
    hyphens: auto;            /* keeps justified lines from opening up */
  }

  .brand{
    font-family: var(--serif);   /* the logotype, wherever it appears */
    font-style: italic;
    color: var(--orange-brand);
  }

  .contact{
    margin: 0;
    max-width: var(--measure);
    color: var(--ink);
  }

  .contact a{
    color: var(--orange-brand);
    text-decoration: none;
  }

  .contact a:hover,
  .contact a:focus-visible{
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  .contact a:focus-visible{
    outline: 2px solid var(--blue-ink);
    outline-offset: 3px;
  }

  .disclaimer a{
    color: var(--orange-brand);
    text-decoration: none;
  }

  .disclaimer a:hover,
  .disclaimer a:focus-visible{
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  .disclaimer{
    margin: 0;
    max-width: var(--measure);
    font-style: italic;
    font-size: 0.815rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  /* ---------- materials ---------- */

  .materials{
    display: flex;
    flex-direction: column;
    gap: clamp(1.125rem, 2.5vw, 1.5rem);
  }

  .section h2{
    margin: 0 0 0.85rem;
    font-weight: 600;
    font-size: clamp(1.05rem, 3.6vw, 1.5rem);
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.09em;   /* tracking eases off as the caps get bigger */
    color: var(--blue-head);
    text-wrap: balance;
  }

  .section > hr{
    border: 0;
    border-top: 1px solid var(--blue);
    margin: 0 0 1.15rem;
  }

  .kicker{
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
  }

  .files{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .files li{
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
  }

  .files li::before{
    content: "\2193";           /* download arrow, matching the link */
    color: var(--orange-brand);
    font-size: 1.05em;
    line-height: 1;
    flex: 0 0 auto;
  }

  .files a{
    color: var(--orange-brand);
    text-decoration: none;
  }

  .files a:hover,
  .files a:focus-visible{
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  .files a:focus-visible{
    outline: 2px solid var(--blue-ink);
    outline-offset: 3px;
    border-radius: 1px;
  }

  .meta{
    color: var(--ink-soft);
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .note{
    color: var(--ink-soft);
    font-size: 0.85rem;
  }

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

  .site-footer{
    border-top: 1px solid var(--rule);
    padding-top: 1.5rem;
    text-align: center;
  }

  .site-footer p{
    margin: 0 auto;
    max-width: 32rem;
    font-style: italic;
    font-size: 0.815rem;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  /* ---------- services ---------- */

  .capacity{
    margin: 0 0 0.95rem;
    max-width: var(--measure);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  .offers{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .offer{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  /* name — hairline leader — price, the way a menu sets a line */
  .offer-line{
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
  }

  .offer-name{
    flex: 0 1 auto;
    font-weight: 500;
  }

  .offer-dur{
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  .offer-lead{
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    height: 1px;
    background: var(--rule);
    transform: translateY(-0.28em);
  }

  .offer-price{
    flex: 0 0 auto;
    color: var(--orange-brand);
    white-space: nowrap;
  }

  .offer-note{
    margin: 0.05rem 0 0;
    max-width: var(--measure);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  /* The scope boundary. Upright among the italic notes so it is findable
     by someone scanning the page to decide whether to refer a student. */
  .offer-note.boundary{
    margin-top: 0.6rem;
    font-style: normal;
    color: var(--ink);
  }

  .cta{
    margin: 1.6rem 0 0;
  }

  .button{
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 0;
    color: #ffffff;
    background: var(--orange-brand);
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
  }

  .button:hover,
  .button:focus-visible{
    background: #e5551a;
  }

  .button:focus-visible{
    outline: 2px solid var(--orange-brand);
    outline-offset: 3px;
  }

  /* ---------- intake form ---------- */

  .back{
    margin: 0 0 1.35rem;
    font-size: 0.85rem;
  }

  .back a{
    color: var(--orange-brand);
    text-decoration: none;
  }

  .back a:hover,
  .back a:focus-visible{ text-decoration: underline; text-underline-offset: 3px; }

  .form{
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: var(--measure);
  }

  .field{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .field > label,
  .field > .legend{
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .field .hint{
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ink-soft);
    margin: -0.15rem 0 0;
  }

  .field input[type="text"],
  .field input[type="email"],
  .field textarea{
    width: 100%;
    padding: 0.35rem 0.1rem;
    border: 0;
    border-bottom: 1px solid var(--blue);
    border-radius: 0;
    background: none;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
  }

  .field textarea{
    min-height: 6.5rem;
    resize: vertical;
  }

  .field input:focus,
  .field textarea:focus{
    outline: 0;
    border-bottom-color: var(--orange-brand);
  }

  fieldset.field{
    border: 0;
    margin: 0;
    padding: 0;
  }

  .choices{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    margin-top: 0.1rem;
  }

  .choices label{
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.95rem;
    cursor: pointer;
  }

  .choices input{
    accent-color: var(--blue-ink);
    margin: 0;
  }

  .choices input:focus-visible{
    outline: 2px solid var(--blue-ink);
    outline-offset: 2px;
  }

  .hp{ position: absolute; left: -9999px; }

  .form-foot{
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: flex-start;
  }

  @media (max-width: 34rem){
    .about{ flex-direction: column; align-items: center; text-align: center; }
    .about-text{ align-items: center; }
    .bio{ text-align: justify; }
    .contact, .disclaimer{ text-align: left; }
    .files li{ justify-content: flex-start; }

    /* the leader has nowhere to go once the name wraps, so the price
       drops to its own line and the rule is retired */
    .offer-line{ flex-wrap: wrap; gap: 0.15rem 0.6rem; }
    .offer-lead{ display: none; }
    .offer-price{ flex-basis: 100%; }
    .button{ width: 100%; text-align: center; }
  }

  /* ---------- guides coming soon + notify sign-up ---------- */

  .coming-soon{
    margin: 1.35rem 0 0;
    color: var(--purple);
    font-size: 0.95rem;
  }

  .notify{
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.55rem 0 0;
    max-width: var(--measure);
  }

  .notify-label{
    font-size: 0.9rem;
    color: var(--ink-soft);
  }

  .notify-row{
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
  }

  .notify-row input[type="email"]{
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--blue);
    border-radius: 0;
    background: none;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
  }

  .notify-row input[type="email"]:focus{
    outline: 0;
    border-color: var(--orange-brand);
  }

  .notify-row .button{
    flex: 0 0 auto;
  }

  ::placeholder{
    color: #a9adb3;
    opacity: 1;
  }

  @media (max-width: 34rem){
    .notify-row{ flex-direction: column; }
  }

  /* ---------- outlined button ---------- */
  /* Same shape as .button, but stated quietly: for a link that sits beside
     or below the main call to action rather than competing with it. */

  .button.ghost{
    background: transparent;
    color: var(--orange-brand);
    border: 1px solid var(--orange-brand);
    padding: calc(0.75rem - 1px) calc(1.5rem - 1px);
  }

  .button.ghost:hover,
  .button.ghost:focus-visible{
    background: var(--orange-brand);
    color: #ffffff;
  }

  /* Application actions start filled and become outlined on hover/focus. */
  .button.application-action{
    background: var(--orange-brand);
    color: #ffffff;
    border: 1px solid var(--orange-brand);
    padding: calc(0.75rem - 1px) calc(1.5rem - 1px);
  }

  .button.application-action:hover,
  .button.application-action:focus-visible{
    background: #ffffff;
    color: var(--orange-brand);
  }

  /* Match the outlined statement-navigation buttons on the homepage. */
  .home-page .sample-link{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
  }

  .home-page .sample-link .button{
    flex: 0 0 auto;
  }

  .home-page .button{
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-align: center;
    max-width: 100%;
  }

  /* Stack the shared application actions at the bottom of each guide. */
  .page > .btn-row{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  .page > .btn-row .button{
    max-width: 100%;
    text-align: center;
  }

  .contact-cta{
    margin: 1.1rem 0 0;
  }