/* The house: in the manner of a heritage maison. Material, objects, few words, one idea per screen.
       Mobile-first: the base styles are the phone layout; wider screens build on them. */
    :root {
      color-scheme: only light;   /* the site is light only: stops phone browsers forcing a dark theme on it */
      --plum: #411c32; --taupe: #c6b8ac; --rosewood: #9a7474; --sage: #454733;
      --stone: #717169; --paper: #f3efea; --white: #ffffff;
      --serif: 'Zodiak', Georgia, serif;
      --sans: 'Jost', system-ui, 'Helvetica Neue', Arial, sans-serif;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --gutter: 20px;
      /* Text shades of rosewood and stone, deep enough to read at small sizes (WCAG AA) */
      --rosewood-ink: #835c5d; --stone-ink: #66665e;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: var(--sans); font-size: 16px; line-height: 1.75; color: var(--plum); background: var(--paper); -webkit-font-smoothing: antialiased; }
    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    .u { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

    /* ---------- Masthead ---------- */
    .masthead {
      position: sticky; top: 0; z-index: 20;
      display: flex; justify-content: space-between; align-items: center;
      padding: 16px var(--gutter); padding-top: max(16px, env(safe-area-inset-top));
      background: rgba(243, 239, 234, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      font-size: 13px; letter-spacing: 0.04em;
    }
    .masthead nav { display: none; }
    .brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; }
    .brand svg { width: 24px; height: 24px; flex: none; }
    /* Menu button: two thin lines */
    .menu-btn { background: none; border: 0; padding: 14px 0 14px 18px; margin-right: -2px; cursor: pointer; color: var(--plum); }
    .menu-btn .lines, .menu-btn .lines::after { display: block; width: 24px; height: 1px; background: currentColor; }
    .menu-btn .lines { position: relative; }
    .menu-btn .lines::after { content: ''; position: absolute; left: 0; top: 7px; }
    .menu-btn .lines { transform: translateY(-3.5px); }

    /* ---------- Menu: a full-screen page of plum linen ---------- */
    .menu {
      position: fixed; inset: 0; z-index: 30;
      background: #34142a; color: var(--white);
      display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
      padding: 80px var(--gutter); overflow: hidden;
      opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
    }
    .menu.open { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease); }
    /* A soft photograph behind a paper veil */
    .menu-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; z-index: 0; }
    .menu::before { content: ''; position: absolute; inset: 0; background: #34142a; opacity: 0.9; z-index: 1; }
    .menu > *:not(.menu-bg) { position: relative; z-index: 2; }
    .menu-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 44px; }
    .menu-logo svg { width: 84px; height: 84px; }
    .menu-logo span { font-family: var(--serif); font-size: 11px; letter-spacing: 0.3em; margin-right: -0.3em; text-transform: uppercase; }
    .menu-logo span::before { content: ''; display: block; width: 40px; height: 1px; background: var(--taupe); opacity: 0.6; margin: 0 auto 12px; }
    .menu .close { position: absolute; top: calc(max(16px, env(safe-area-inset-top)) - 15px); right: var(--gutter); background: none; border: 0; padding: 18px 0 18px 18px; cursor: pointer; color: var(--taupe); z-index: 2; }
    .menu .close .cross { position: relative; display: block; width: 24px; height: 24px; }
    .menu .close .cross::before, .menu .close .cross::after { content: ''; position: absolute; left: 0; top: 11.5px; width: 24px; height: 1px; background: currentColor; }
    .menu .close .cross::before { transform: rotate(45deg); }
    .menu .close .cross::after { transform: rotate(-45deg); }
    .menu a { display: block; font-family: var(--serif); font-size: 1.8rem; line-height: 1.3; padding: 9px 0; color: var(--white); }
    .menu .small { font-family: var(--sans); font-size: 14px; color: var(--taupe); margin-top: 30px; }

    /* ---------- Material: linen and deboss ---------- */
    .linen-surface { position: relative; overflow: hidden; }
    svg.linen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.11; mix-blend-mode: soft-light; }
    .debossed { filter: url(#deboss-text); }

    /* ---------- Photographs (placeholders until your photos are in) ---------- */
    .photo { position: relative; background: #d6cdc3; overflow: hidden; }
    /* Photos in colour, gently graded so the set feels like one family: a little softer, a little warmer */
    .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) sepia(0.08) contrast(1.02); }
    /* The brief describes the shot to take; it sits at the top so it never collides with captions */
    .photo .brief {
      position: absolute; top: 20px; left: 20px; right: 20px; z-index: 1; max-width: 26em;
      font-size: 13px; line-height: 1.6; color: var(--stone-ink);
      border-bottom: 1px dashed rgba(113, 113, 105, 0.6); padding-bottom: 10px;
    }

    /* ---------- 1. Opening photograph ---------- */
    .opening { height: calc(100svh - 58px); min-height: 480px; }
    .opening .caption {
      position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; z-index: 1;
      font-family: var(--serif); font-size: 1.05rem; line-height: 1.4;
    }

    /* ---------- 1a. The pairs: two words at a time, fading in and out over the hero ----------
       The first word takes the mark's main colour, the second its accent: one pair, two hands. */
    .opening::after { content: ''; position: absolute; inset: 0; background: #34142a; opacity: 0.8; z-index: 0; }
    .opening::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1; background: linear-gradient(to top, rgba(26, 8, 18, 0.55), rgba(26, 8, 18, 0)); pointer-events: none; }
    .opening .brief { z-index: 2; color: var(--taupe); border-color: rgba(198, 184, 172, 0.5); }
    .opening .caption { z-index: 2; color: var(--white); }
    .pairs {
      position: absolute; inset: 0; z-index: 1;
      display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 36px;
      padding: 0 var(--gutter);
    }
    .pair {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; letter-spacing: 0.02em;
      transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
    }
    .hero-mark { width: 250px; height: 250px; display: block; margin: -24px 0 -20px; }
    .pair { min-height: 5.2em; justify-content: flex-start; }
    .pair .a { color: var(--white); }
    .pair .b { color: var(--taupe); }
    .pair .dot { color: var(--taupe); font-size: 0.6em; opacity: 0.8; }
    .pair.out { opacity: 0; transform: translateY(6px); }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    /* ---------- 2. A line from something read ---------- */
    .quote { padding: 104px var(--gutter); text-align: center; }
    .quote blockquote { font-family: var(--serif); font-size: 1.5rem; line-height: 1.45; max-width: 24em; margin: 0 auto; }
    .quote br.wide { display: none; }
    .quote .echo { width: 56px; margin: 32px auto 0; color: var(--rosewood-ink); }
    .quote .echo::before, .quote .echo::after { content: ''; display: block; background: currentColor; }
    .quote .echo::before { height: 1.5px; }
    .quote .echo::after { height: 0.75px; width: 84%; margin: 3px auto 0; opacity: 0.6; }
    .quote cite { display: block; margin-top: 22px; font-style: normal; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rosewood-ink); }

    /* ---------- 3. Three ways in: use, create, learn ----------
       Each is a picture with one word. Tapping it opens a short description beneath, like an accordion. */
    .ways { padding: 8px 0 104px; }
    .ways-grid { display: grid; gap: 14px; padding: 0 var(--gutter); }
    .way-btn {
      position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0;
      cursor: pointer; text-align: left; overflow: hidden; color: var(--white); font: inherit;
    }
    .way-btn .photo { position: absolute; inset: 0; }
    .way-btn .photo .brief { color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.35); }
    .way-btn .word {
      position: absolute; left: 20px; bottom: 16px; z-index: 2;
      font-family: var(--serif); font-size: 1.7rem; line-height: 1; letter-spacing: 0.01em;
    }
    .way-btn .sign {
      position: absolute; right: 20px; bottom: 21px; z-index: 2; width: 16px; height: 16px;
    }
    .way-btn .sign::before, .way-btn .sign::after { content: ''; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: currentColor; transition: transform 0.6s var(--ease); }
    .way-btn .sign::after { transform: rotate(90deg); }
    .way-btn[aria-expanded="true"] .sign::after { transform: rotate(0deg); }
    .way-btn .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 8, 18, 0.35), rgba(26, 8, 18, 0) 45%); }
    .way-panel {
      display: grid; grid-template-rows: 0fr; align-self: start;
      visibility: hidden; transition: grid-template-rows 0.7s var(--ease), visibility 0s linear 0.7s;
    }
    .way-panel > div { overflow: hidden; }
    .way-panel.open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.7s var(--ease), visibility 0s; }
    .way-panel .inner { padding: 22px 0 28px; }
    .way-panel .eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rosewood-ink); }
    .way-panel h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.25; margin-top: 8px; }
    .way-panel p.body { margin-top: 12px; max-width: 34em; }
    .way-panel .discover { display: inline-block; margin-top: 18px; padding: 6px 0 2px; font-size: 14px; }

    /* ---------- 4. The founder ---------- */
    .founder .photo { aspect-ratio: 4 / 5; }
    .founder .words { display: flex; flex-direction: column; padding: 64px var(--gutter) 80px; background: var(--white); }
    .founder h2 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.2; }
    .founder p { margin-top: 20px; max-width: 28em; }
    .founder h2 { font-size: 1.9rem; line-height: 1.25; }
    .founder .sign { font-family: var(--serif); color: var(--rosewood-ink); margin-top: 24px; }
    .founder .more { margin-top: 28px; font-size: 14px; align-self: flex-start; }

    /* ---------- 5. From the diary ---------- */
    .journal { display: grid; gap: 32px; padding: 96px var(--gutter); max-width: 1280px; margin: 0 auto; }
    .journal .photo { aspect-ratio: 3 / 4; }
    .journal .date { font-size: 13px; color: var(--rosewood-ink); }
    .journal h2 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.2; margin: 12px 0 18px; }
    .journal p { max-width: 30em; color: var(--stone-ink); }
    .journal .more { display: inline-block; margin-top: 24px; font-size: 14px; color: var(--plum); }

    /* ---------- 6. Write to me ---------- */
    .write { padding: 104px var(--gutter); text-align: center; color: var(--plum); background: var(--taupe); }
    .write h2 { font-family: var(--serif); font-weight: 400; font-size: 2.1rem; line-height: 1.2; position: relative; z-index: 1; }
    .write p { position: relative; z-index: 1; margin: 18px auto 0; max-width: 30em; color: #4a3942; }
    .write a { position: relative; z-index: 1; display: inline-block; margin-top: 32px; font-family: var(--serif); font-size: 1.2rem; border-bottom: 1px solid var(--plum); padding-bottom: 3px; }

    /* ---------- Footer: plum linen, the mark at the centre ---------- */
    .site-footer {
      position: relative; background: var(--plum); color: var(--taupe);
      display: grid; justify-items: center; text-align: center; gap: 28px;
      padding: 64px var(--gutter); padding-bottom: max(40px, env(safe-area-inset-bottom));
    }
    .site-footer > *:not(svg.linen) { position: relative; z-index: 1; }
    .foot-mark { order: -1; display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--white); }
    .foot-mark svg { width: 72px; height: 72px; }
    .foot-word { font-family: var(--serif); font-size: 13px; letter-spacing: 0.3em; margin-right: -0.3em; text-transform: uppercase; }
    .site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-size: 14px; }
    .site-footer nav a { color: var(--taupe); }
    .site-footer nav a:hover { color: var(--white); }
    .foot-base { font-size: 12px; color: rgba(198, 184, 172, 0.7); letter-spacing: 0.02em; padding-top: 22px; border-top: 1px solid rgba(198, 184, 172, 0.18); width: 100%; max-width: 1200px; }

    /* ---------- Motion: soft fades, a gentle parallax, hairlines that draw in ---------- */
    :root { --slow: cubic-bezier(0.19, 1, 0.22, 1); }
    @media (prefers-reduced-motion: no-preference) {
      /* Page arrives and leaves softly */
      body { animation: page-in 0.9s var(--ease) both; }
      html.leaving body { animation: page-out 0.42s var(--ease) forwards; }
      .masthead { animation: settle-down 1.2s var(--slow) 0.1s both; }

      /* Blocks rise in, one after another */
      .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.4s var(--slow), transform 1.4s var(--slow); transition-delay: calc(var(--i, 0) * 110ms); }
      .js .reveal.in { opacity: 1; transform: none; }

      /* Pictures lift like a curtain, easing out of a slight zoom */
      .js .unveil { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--slow); }
      .js .unveil.in { clip-path: inset(0 0 0 0); }
      .js .unveil > svg.linen, .js .unveil > img { transform: scale(1.08); transition: transform 2.4s var(--slow); }
      .js .unveil.in > svg.linen, .js .unveil.in > img { transform: none; }

      /* Hairlines draw across */
      .js .echo.reveal { transform: scaleX(0); }
      .js .echo.reveal.in { transform: none; transition: opacity 0.6s var(--ease), transform 1.6s var(--slow) 0.2s; }
      .js .included li { border-top-color: transparent; position: relative; }
      .js .included li::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(65, 28, 50, 0.14); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--slow); }
      .js .included.in li::before { transform: none; }
      .js .included li:nth-child(2)::before { transition-delay: 0.12s; }
      .js .included li:nth-child(3)::before { transition-delay: 0.24s; }
      .js .included li:nth-child(4)::before { transition-delay: 0.36s; }

      /* Hero: the wash deepens and the first pair surfaces from a soft blur */
      .opening::after { animation: wash 2.2s var(--ease) both; }
      .pair { animation: surface 1.8s var(--slow) 0.9s both; }
      .hero-mark { animation: surface 1.8s var(--slow) 0.3s both; }
      .pair { transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), filter 1.3s var(--ease); }
      .pair.out { filter: blur(4px); transition-duration: 2.2s; }
      .sub-hero .photo > svg.linen, .sub-hero .photo > img { animation: ease-in-zoom 2.6s var(--slow) both; }
      .sub-hero .word, .opening .caption { animation: surface 1.6s var(--slow) 0.6s both; }

      /* Accordion: the text rises just after the panel opens */
      .way-panel .inner { opacity: 0; transform: translateY(10px); transition: opacity 0.9s var(--ease), transform 0.9s var(--slow); }
      .way-panel.open .inner { opacity: 1; transform: none; transition-delay: 0.18s; }

      /* Menu: links arrive one by one */
      .menu-logo, .menu a, .menu .small { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.8s var(--slow); }
      .menu.open .menu-logo, .menu.open a, .menu.open .small { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 80ms + 150ms); }
    }
    /* Phones: the two words of each pair arrive from opposite sides, like two hands meeting */
    @media (prefers-reduced-motion: no-preference) and (max-width: 699px) {
      .pair, .pair.out { animation: none; transform: none; filter: none; opacity: 1; transition: none; }
      .pair .a, .pair .b, .pair .dot { transition: opacity 1.3s var(--ease), transform 1.3s var(--slow), filter 1.3s var(--ease); }
      /* Arrive from opposite sides, leave by crossing over: the top word exits right, the bottom exits left */
      .pair.out .a, .pair.out .b, .pair.out .dot { transition-duration: 2.2s; }
      .pair.out .a { opacity: 0; transform: translateX(32px); filter: blur(3px); }
      .pair.out .b { opacity: 0; transform: translateX(-32px); filter: blur(3px); }
      .pair.enter .a, .pair.enter .b, .pair.enter .dot { transition: none; }
      .pair.enter .a { opacity: 0; transform: translateX(-32px); filter: blur(3px); }
      .pair.enter .b { opacity: 0; transform: translateX(32px); filter: blur(3px); }
      .pair.enter .dot { opacity: 0; }
      .pair.out .dot { opacity: 0; }
      .pair .a { animation: from-left 1.8s var(--slow) 0.9s both; }
      .pair .dot { animation: fade-in 1.2s var(--ease) 1.2s both; }
      .pair .b { animation: from-right 1.8s var(--slow) 1.1s both; }
    }
    @keyframes from-left { from { opacity: 0; transform: translateX(-32px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
    @keyframes from-right { from { opacity: 0; transform: translateX(32px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 0.8; } }
    @keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes page-out { from { opacity: 1; } to { opacity: 0; } }
    @keyframes settle-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
    @keyframes wash { from { opacity: 0.3; } to { opacity: 0.8; } }
    @keyframes surface { from { opacity: 0; filter: blur(6px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: none; } }
    @keyframes ease-in-zoom { from { transform: scale(1.08); } to { transform: none; } }

    /* Underlines: on hover the line slides away and returns */
    .u { border-bottom: 0; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; padding-bottom: 3px; }
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      .u { transition: background-size 0.7s var(--slow); }
      .u:hover { background-size: 0% 1px; background-position: right bottom; }
    }

    @media (hover: hover) {
      .way-btn .photo { transition: transform 1.2s var(--ease); }
      .way-btn:hover .photo { transform: scale(1.02); }
    }

    /* ---------- Tablet and up ---------- */
    @media (min-width: 700px) {
      :root { --gutter: 32px; }
      .quote { padding: 140px var(--gutter); }
      .quote blockquote { font-size: 2rem; }
      .quote br.wide { display: inline; }
      .journal { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; padding: 130px var(--gutter); }
      /* Side by side from tablet up: pictures in one row, the open panel spans the full width beneath */
      .ways-grid { grid-template-columns: repeat(3, 1fr); column-gap: 16px; row-gap: 0; }
      .way { display: contents; }
      .way-btn { grid-row: 1; aspect-ratio: 3 / 4; }
      .way-panel { grid-row: 2; grid-column: 1 / -1; }
      .way-panel .inner { padding: 36px 0 8px; max-width: 40em; }
    }

    /* ---------- Desktop ---------- */
    @media (min-width: 1024px) {
      :root { --gutter: 40px; }
      .masthead { display: grid; grid-template-columns: 1fr auto 1fr; padding: 22px var(--gutter); }
      .masthead nav { display: flex; gap: 32px; }
      .masthead nav.right { justify-content: flex-end; }
      /* Desktop: the wordmark sits beneath the mark, centred */
      .brand { flex-direction: column; gap: 7px; font-size: 12px; margin-right: -0.3em; }
      .brand svg { width: 30px; height: 30px; }
      .masthead { padding-top: 14px; padding-bottom: 12px; }
      .menu-btn { display: none; }
      .opening { height: calc(100svh - 84px); }
      .opening .caption { left: auto; right: var(--gutter); bottom: 36px; text-align: right; font-size: 1.2rem; }
      .pair { flex-direction: row; gap: 0.6em; font-size: clamp(1.6rem, 2.3vw, 2.1rem); min-height: 0; letter-spacing: 0; }
      .hero-mark { width: 310px; height: 310px; margin: -30px 0 -24px; }
      .pairs { gap: 44px; }
      .quote { padding: 160px var(--gutter); }
      .quote blockquote { font-size: 2.3rem; }
      .founder { display: grid; grid-template-columns: 1fr 1fr; min-height: 90svh; }
      .founder .photo { aspect-ratio: auto; min-height: 560px; }
      .founder .words { justify-content: center; padding: 80px clamp(48px, 7vw, 110px); }
      .founder h2 { font-size: 2.6rem; }
      .journal { gap: 96px; padding: 150px var(--gutter); }
      .ways { padding: 24px 0 140px; }
      .ways-grid { column-gap: 20px; }
      .way-btn .word { left: 28px; bottom: 26px; font-size: 2rem; }
      .way-btn .sign { right: 28px; bottom: 32px; }
      .way-panel h3 { font-size: 2.1rem; }
      .journal h2 { font-size: 2.8rem; }
      .write { padding: 150px var(--gutter); }
      .write h2 { font-size: 3.2rem; }
      .write a { font-size: 1.3rem; }
      .site-footer { grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 48px; row-gap: 48px; padding: 88px var(--gutter) 40px; }
      .foot-mark { order: 0; }
      .foot-left { justify-self: start; justify-content: flex-start; }
      .foot-right { justify-self: end; justify-content: flex-end; }
      .foot-base { grid-column: 1 / -1; }
      .foot-mark svg { width: 84px; height: 84px; }
    }

    /* App mockups inside the Use panel */
    .app-shots { display: grid; gap: 14px; margin-top: 22px; }
    .app-shots a { display: block; }
    .app-shots img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
    .app-shots span { display: block; margin-top: 8px; font-size: 13px; color: var(--stone-ink); }
    @media (min-width: 700px) { .app-shots { grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; } }
    .foot-base a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(198, 184, 172, 0.4); }

    /* ---------- Accessibility ---------- */
    .skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--plum); color: var(--white); padding: 10px 16px; font-size: 14px; transition: top 0.2s; }
    .skip:focus { top: 12px; }
    :focus-visible { outline: 2px solid var(--rosewood-ink); outline-offset: 3px; }
    .opening :focus-visible, .menu :focus-visible, .site-footer :focus-visible, .price-card :focus-visible { outline-color: var(--taupe); }
    .way-btn:focus-visible { outline-offset: -4px; outline-color: var(--white); }
    .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    h1.caption { font-weight: 400; }

    /* Founder portraits: keep the face in frame, and skip the stock grade */
    .founder-photo img, img[src$="founder-about.jpg"], img[src$="founder-home.jpg"], img[src$="podcast-melody.jpg"], img[src$="founder-reading.jpg"] { object-position: 50% 22%; filter: none; }
    .write .write-alt { margin-top: 18px; font-size: 14px; }
    .write .write-alt a { font-family: var(--sans); font-size: 14px; margin-top: 0; border-bottom: 0; background: none; padding-bottom: 0; }


    /* ---------- Layered photographs: a larger picture behind, a smaller print laid over its corner ---------- */
    .layered { position: relative; aspect-ratio: 1 / 1.02; width: 100%; }
    .layered .photo { position: absolute; }
    .layered .back { top: 0; right: 0; width: 80%; aspect-ratio: 4 / 5; }
    .layered .front { left: 0; bottom: 0; width: 50%; aspect-ratio: 4 / 5; outline: 6px solid var(--paper); box-shadow: 0 24px 40px -24px rgba(26, 8, 18, 0.45); }
    .tint .layered .front { outline-color: var(--white); }

    /* Home founder section on Weathered Sage, pictures layered */
    .founder.sage { background: var(--sage); color: var(--paper); }
    .founder.sage .words { background: transparent; }
    .founder.sage .sign { color: var(--taupe); }
    .founder.sage .more { color: var(--paper); }
    .founder.sage .layered .front { outline-color: var(--sage); }
    .founder-pics { padding: 56px var(--gutter) 0; }
    @media (min-width: 1024px) {
      .founder.sage { grid-template-columns: 5fr 6fr; align-items: center; }
      .founder-pics { padding: 96px 0 96px clamp(40px, 6vw, 96px); }
      .founder.sage .layered { max-width: 560px; }
    }
    .founder .layered .photo { min-height: 0; }
    .founder .layered .back { aspect-ratio: 4 / 5; }
    .founder .layered .front { aspect-ratio: 4 / 5; }
    /* Founder: two equal prints, offset diagonally */
    .founder .layered { aspect-ratio: 1 / 1.08; }
    .founder .layered .back, .founder .layered .front { width: 64%; }

    /* ---------- Desktop dropdowns: float over the page, so nothing below moves ---------- */
    .dd { position: relative; }
    .dd-panel {
      position: absolute; top: 100%; left: -18px; min-width: 210px; padding: 14px 18px; margin-top: 10px;
      display: flex; flex-direction: column; gap: 2px;
      background: var(--paper); border-top: 1px solid var(--rosewood); box-shadow: 0 18px 36px -20px rgba(26, 8, 18, 0.35);
      opacity: 0; visibility: hidden; transform: translateY(-4px);
      transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
    }
    .dd-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
    .dd-panel a { padding: 7px 0; white-space: nowrap; font-size: 13px; }
    .dd-panel a:hover { color: var(--rosewood-ink); }
    .dd:hover .dd-panel, .dd:focus-within .dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
    /* Founder: portrait top right and in front, books below left */
    .founder .layered .front { left: auto; bottom: auto; top: 0; right: 0; z-index: 2; }
    .founder .layered .back { top: auto; right: auto; bottom: 0; left: 0; z-index: 1; }
    /* All layered photos: two equal prints, offset diagonally */
    .layered { aspect-ratio: 1 / 1.08; }
    .layered .back, .layered .front { width: 64%; aspect-ratio: 4 / 5; }
    /* Founder: books top left, portrait bottom right and in front */
    .founder .layered .back { top: 0; left: 0; right: auto; bottom: auto; z-index: 1; }
    .founder .layered .front { top: auto; left: auto; right: 0; bottom: 0; z-index: 2; }



    /* Text on plum is white; only eyebrows keep the taupe */
    .menu .small, .menu .close { color: var(--white); }
    .site-footer, .site-footer nav a { color: var(--white); }
    .site-footer nav a:hover { color: var(--taupe); }
    .foot-base { color: rgba(255, 255, 255, 0.78); }

    /* Proof: a few facts and clients' own words. Home page and service pages. */
    .proof { padding: 72px var(--gutter); background: var(--paper); }
    .proof.tint { background: var(--white); }
    .proof-inner { max-width: 1100px; margin: 0 auto; }
    .proof .kicker { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rosewood-ink); }
    .proof h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.15; margin-top: 10px; }
    .proof-facts { list-style: none; display: grid; gap: 24px; margin-top: 36px; }
    .proof-facts li { border-top: 1px solid rgba(65, 28, 50, 0.18); padding-top: 16px; }
    .proof-facts .big { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; }
    .proof-facts .lbl { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: #4a3942; }
    .proof-quotes { display: grid; gap: 20px; margin-top: 48px; }
    .proof-quotes figure { background: var(--white); padding: 28px 28px 24px; display: flex; flex-direction: column; justify-content: space-between; }
    .proof.tint .proof-quotes figure { background: var(--paper); }
    .proof-quotes blockquote { font-family: var(--serif); font-size: 1.15rem; line-height: 1.45; }
    .proof-quotes blockquote::before { content: '“'; display: block; font-size: 2.6rem; line-height: 0.8; color: var(--rosewood); margin-bottom: 6px; }
    .proof-quotes figcaption { margin-top: 18px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rosewood-ink); }
    .proof .more { display: inline-block; margin-top: 32px; font-family: var(--serif); font-size: 1.1rem; }
    @media (min-width: 700px) {
      .proof { padding: 104px var(--gutter); }
      .proof h2 { font-size: 2.6rem; }
      .proof-facts { grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 32px; }
      .proof-quotes { grid-template-columns: repeat(var(--qcols, 3), 1fr); }
    }

    /* Design standards, 28 September 2026 (see the "Designed by hand" review) */
    /* The signature: the mirrored-A mark between two short hairlines, above a few key moments */
    .orn { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--rosewood); }
    .orn.left { justify-content: flex-start; }
    .orn::before, .orn::after { content: ''; height: 1px; width: 56px; background: currentColor; opacity: 0.55; }
    .orn svg { width: 22px; height: 22px; display: block; }
    /* A double hairline between sections */
    .dbl { height: 5px; border-top: 1px solid rgba(154, 116, 116, 0.45); border-bottom: 1px solid rgba(154, 116, 116, 0.45); max-width: 1200px; margin: 0 auto; }
    /* The one button on a page: small, square, plum, upright Zodiak */
    .btn { display: inline-block; background: #8a6465; color: var(--white); font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; padding: 13px 28px; border: 0; transition: background-color 0.4s var(--ease); }
    .btn:hover { background: #74504f; }
    .btn:focus-visible { outline: 2px solid var(--rosewood); outline-offset: 3px; }
    /* The one italic on the site: Mary Oliver's line */
    .keep-italic { font-style: italic; }
    .write a.btn { border-bottom: 0; padding: 13px 28px; font-size: 1.05rem; color: var(--white); }
    .write .orn { position: relative; z-index: 1; margin-bottom: 18px; }
    .quote .orn { margin-bottom: 30px; }

    /* Home: Use, Create, Learn as three stepped doors, words under each photo */
    .doors { display: grid; gap: 48px; padding: 0 var(--gutter); max-width: 1200px; margin: 0 auto; }
    .door { display: flex; flex-direction: column; color: var(--plum); }
    .door .photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
    .door .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .door .eyebrow { margin-top: 20px; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rosewood-ink); }
    .door .title { font-family: var(--serif); font-size: 1.7rem; line-height: 1.2; margin-top: 6px; text-wrap: balance; }
    .door .body { margin-top: 10px; font-size: 15px; color: #4a3942; max-width: 24em; }
    .door .discover { align-self: flex-start; margin-top: 14px; font-family: var(--serif); font-size: 1rem; }
    @media (prefers-reduced-motion: no-preference) { .door .photo img { transition: transform 1.2s var(--ease); } .door:hover .photo img { transform: scale(1.03); } }
    @media (min-width: 900px) {
      .doors { grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0 clamp(40px, 7vw, 120px); }
      .door:nth-child(2) { margin-top: 110px; }
      .door:nth-child(3) { margin-top: 40px; }
    }

    /* Home: kind words beside a collage of real work */
    .kindwords { padding: 96px var(--gutter) 88px; background: var(--paper); }
    .kw-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 56px; align-items: center; }
    .collage { position: relative; aspect-ratio: 1 / 0.95; max-width: 580px; width: 100%; margin: 0 auto; }
    .collage .p { position: absolute; display: block; overflow: hidden; background: var(--white); box-shadow: 0 30px 50px -28px rgba(65, 28, 50, 0.45); }
    .collage .p img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
    .collage .p1 { left: 0; top: 5%; width: 52%; height: 40%; transform: rotate(-3deg); }
    .collage .p2 { left: 50%; top: 0; width: 48%; height: 37%; transform: rotate(2.5deg); }
    .collage .p3 { left: 5%; top: 53%; width: 50%; height: 39%; transform: rotate(2deg); }
    .collage .p4 { left: 52%; top: 46%; width: 46%; height: 48%; transform: rotate(-2deg); }
    .kindwords .kicker, .spoken .kicker { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rosewood-ink); }
    .kindwords h2 { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; line-height: 1.1; margin-top: 10px; }
    .kw-words blockquote { font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; margin-top: 24px; }
    .kw-words mark { background: linear-gradient(transparent 62%, rgba(198, 184, 172, 0.6) 62%); color: inherit; }
    .kindwords .att { margin-top: 20px; font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rosewood-ink); }
    .quote-row { max-width: 1200px; margin: 72px auto 0; display: grid; border-top: 1px solid rgba(65, 28, 50, 0.18); border-bottom: 1px solid rgba(65, 28, 50, 0.18); }
    .quote-row figure { margin: 0; padding: 28px 24px; text-align: center; }
    .quote-row figure + figure { border-top: 1px solid rgba(65, 28, 50, 0.12); }
    .quote-row blockquote { font-family: var(--serif); font-size: 1.15rem; line-height: 1.45; }
    .quote-row figcaption { margin-top: 10px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rosewood-ink); }
    .spoken { text-align: center; margin-top: 64px; }
    .spoken .names { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; margin-top: 18px; font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; }
    .spoken .names a { color: var(--stone-ink); }
    .kindwords .more-row { text-align: center; margin-top: 44px; font-family: var(--serif); font-size: 1.05rem; }
    @media (min-width: 900px) {
      .kindwords { padding: 140px clamp(40px, 7vw, 120px) 110px; }
      .kw-inner { grid-template-columns: 1fr 1fr; gap: 72px; }
      .kindwords h2 { font-size: 3rem; }
      .kw-words blockquote { font-size: 1.35rem; }
      .quote-row { grid-template-columns: repeat(3, 1fr); }
      .quote-row figure + figure { border-top: 0; border-left: 1px solid rgba(65, 28, 50, 0.12); }
    }

    /* A subtle linen weave on white and taupe cards */
    .proof-quotes figure, .lights li, .tier:not(.feature), .hs-frame, .founder:not(.sage) .words { background-image: url(images/linen-light.svg); background-size: 360px 360px; }
    /* Home founder section: words on the left, pictures on the right */
    @media (min-width: 900px) {
      .founder.sage { grid-template-columns: 6fr 5fr; }
      .founder.sage .founder-pics { order: 2; padding: 96px clamp(40px, 6vw, 96px) 96px 0; }
      .founder.sage .words { padding-left: clamp(40px, 7vw, 120px); }
    }
    /* Home founder: portrait bottom left and in front, books top right behind it */
    .founder.sage .layered .back { top: 0; right: 0; left: auto; bottom: auto; z-index: 1; }
    .founder.sage .layered .front { bottom: 0; left: 0; right: auto; top: auto; z-index: 2; }

    /* Client love collage: the four pages drift in from four directions as it comes into view */
    @media (prefers-reduced-motion: no-preference) {
      .js .collage.reveal { opacity: 1; transform: none; }
      .js .collage .p { opacity: 0; transition: opacity 1.3s var(--ease), transform 1.6s var(--slow); }
      .js .collage .p1 { transform: translate(-70px, 0) rotate(-7deg); }
      .js .collage .p2 { transform: translate(0, -70px) rotate(7deg); transition-delay: 0.15s; }
      .js .collage .p3 { transform: translate(0, 70px) rotate(6deg); transition-delay: 0.3s; }
      .js .collage .p4 { transform: translate(70px, 0) rotate(-6deg); transition-delay: 0.45s; }
      .js .collage.in .p { opacity: 1; }
      .js .collage.in .p1 { transform: rotate(-3deg); }
      .js .collage.in .p2 { transform: rotate(2.5deg); }
      .js .collage.in .p3 { transform: rotate(2deg); }
      .js .collage.in .p4 { transform: rotate(-2deg); }
    }
    /* Keep the collage's drift inside its section, so the page never runs wider than the screen */
    .kindwords { overflow-x: clip; }
    /* Home founder: on wide screens the words line up with the page's content column instead of hugging the edge */
    @media (min-width: 900px) {
      .founder.sage .words { padding-left: max(clamp(48px, 7vw, 120px), calc((100vw - 1200px) / 2)); }
      .founder.sage .founder-pics { padding-right: max(clamp(40px, 6vw, 96px), calc((100vw - 1200px) / 2)); }
    }

    /* Motion: only photographs fade in as you scroll. Text is simply there. */
    @media (prefers-reduced-motion: no-preference) {
      .js .reveal { opacity: 1; transform: none; }
      .js .reveal .photo, .js .reveal.feat-pic, .js .reveal .lb-pic, .js .reveal.photo { opacity: 0; transform: translateY(18px); transition: opacity 1.4s var(--slow), transform 1.4s var(--slow); }
      .js .reveal.in .photo, .js .reveal.feat-pic.in, .js .reveal.in .lb-pic, .js .reveal.photo.in { opacity: 1; transform: none; }
    }

    /* One left edge for every section: a generous margin that grows with the screen,
       and on very wide screens a centred 1100px column */
    @media (min-width: 1024px) {
      :root { --edge: max(clamp(56px, 8vw, 150px), calc((100vw - 1100px) / 2)); }
      .doors { padding-left: var(--edge); padding-right: var(--edge); max-width: none; }
      .founder.sage .words { padding-left: var(--edge); }
      .founder.sage .founder-pics { padding-right: var(--edge); }
      .kindwords { padding-left: var(--edge); padding-right: var(--edge); }
      .kw-inner, .quote-row { max-width: none; }
      .proof { padding-left: var(--edge); padding-right: var(--edge); }
      .proof-inner { max-width: none; }
    }
    /* The plum footer carries the same pale linen as the plum cards */
    .site-footer { background-image: url(images/linen-dark.svg); background-size: 360px 360px; }
    /* Home: bring the three doors closer to the quote */
    .quote { padding-bottom: 56px; }
    @media (min-width: 700px) { .quote { padding-bottom: 72px; } }
    /* Layered photos: no outline around the front photo; the soft shadow separates the two */
    .layered .front, .tint .layered .front, .founder.sage .layered .front { outline: none; }
    /* Right-hand menus open from their right edge, so they never run past the screen */
    .masthead .right .dd-panel { left: auto; right: -18px; transform-origin: top right; }
    .masthead .right .dd:last-of-type .dd-panel { right: 0; }

    /* Phone menu: sections slide sideways to reveal their pages */
    .menu-panes { position: relative; width: 100%; max-width: 420px; overflow: hidden; }
    .menu-pane { display: flex; flex-direction: column; align-items: center; transition: transform 0.55s var(--ease), opacity 0.4s var(--ease); }
    .menu-sub { position: absolute; inset: 0 0 auto 0; transform: translateX(100%); opacity: 0; }
    .menu.sub-open .menu-main { transform: translateX(-100%); opacity: 0; pointer-events: none; }
    .menu.sub-open .menu-sub:not([hidden]) { transform: none; opacity: 1; }
    .menu-sub[hidden] { display: none; }
    .menu-item { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; cursor: pointer; font-family: var(--serif); font-size: 1.8rem; line-height: 1.3; padding: 9px 0; color: var(--white); }
    .menu-arrow { width: 9px; height: 9px; border-right: 1.5px solid var(--taupe); border-bottom: 1.5px solid var(--taupe); transform: rotate(-45deg); margin-top: 4px; }
    .menu-arrow.back { transform: rotate(135deg); margin: 0 10px 0 0; }
    .menu-back { display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer; color: var(--taupe); font-family: var(--sans); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 0; margin-bottom: 18px; }
    .menu-eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--taupe); margin-bottom: 8px; }
    .menu-sub a { font-size: 1.55rem; padding: 7px 0; }
    .menu-item:focus-visible, .menu-back:focus-visible { outline: 2px solid var(--taupe); outline-offset: 4px; }
    @media (prefers-reduced-motion: no-preference) {
      .menu-item { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.8s var(--slow); }
      .menu.open .menu-item { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 80ms + 150ms); }
      .menu.open .menu-sub a { transition-delay: 0s; }
    }
    @media (prefers-reduced-motion: reduce) { .menu-pane { transition: none; } }
    /* Section names only, no arrows; Back keeps its chevron */
    .menu-item .menu-arrow { display: none; }
    /* Sub-menus: Back sits top left, opposite the close cross, as navigation; the section name is a heading with a hairline */
    .menu-back { position: fixed; top: calc(max(16px, env(safe-area-inset-top)) - 6px); left: var(--gutter); margin: 0; padding: 12px 0; font-size: 12px; z-index: 3; }
    .menu-eyebrow { font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0.02em; text-transform: none; color: var(--taupe); margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
    .menu-eyebrow::before, .menu-eyebrow::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.5; }