/* The website's nav, phone menu and footer, cut from index.html by build-site.py. Do not edit here:
   change index.html, then run  python3 case-study/build-site.py */

:root {
  /* Type scale (his ask, 12 Oct): a perfect fourth, each step 1.333 times the one below, on a 16 px base, rounded
     to whole px: 12 · 16 · 21 · 28 · 38 · 50 · 67 · 90. Every text on the page takes a step: the nav and the footer
     here, the hero headline in its layout (HERO_STEPS), the cards in work-cards/web/card.css. */
  --step--1: 12px; --step-0: 16px; --step-1: 21px; --step-2: 28px; --step-3: 38px; --step-4: 50px; --step-5: 67px; --step-6: 90px;
  --ground: #FFFFFF;
  --paper: #F5F4F0;
  --ink: #141414;
  --muted: #5E5C57;
  --line: #E4E2DC;
  --rose: #760918;
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --in: cubic-bezier(0.5, 0, 0.75, 0);
  --back: cubic-bezier(0.4, 0, 0.6, 1); /* the flower's turn back: moves from the start, so you see it turn */
  --soft: cubic-bezier(0.33, 1, 0.68, 1);   /* colour growing: quick to start, a long gentle settle */
  --inout: cubic-bezier(0.37, 0, 0.63, 1);  /* colour going back: a gentle ease in and out, no sudden start or end */

  /* One rhythm for every hover in the nav, so the flower coming out and the frame growing move at the same speed.
     Hover in: the old thing (word, rose, stroke) fades in --leave; after --lead the new thing grows for --grow.
     Hover out: everything goes back in --undo, and the old thing returns over its last part. */
  --lead: 100ms;
  --grow: 900ms;
  --leave: 250ms;
  --undo: 700ms;
  --undo-late: 450ms;
  --turn: cubic-bezier(0.45, 0, 0.55, 1); /* the rose's half turn: even, clean start and end */
  --rose-turn: 420ms;                     /* the logo frame starts once the rose has mostly turned */
}
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; background: var(--ground); color: var(--ink); font-family: Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; border-radius: 4px; }
[data-landed]:focus { outline: none; }          /* a part of the page a link slid to (see slide() in the nav) */


/* ================= The nav (same as nav.html) ================= */
.nav { position: relative; overflow: hidden; height: 80px; padding: 0 48px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.nav .left { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; }
.nav .links { position: relative; z-index: 1; }

/* ---------- The glow: one out-of-focus bloom that lives in the nav bar and travels with you ---------- */
.glow-pos { position: absolute; left: 0; top: 50%; width: 0; height: 0; z-index: 0; pointer-events: none;
  will-change: transform; transition: transform 820ms var(--soft); }
.glow { position: absolute; left: -160px; top: -160px; width: 320px; height: 320px;
  will-change: transform, opacity; opacity: 0; scale: 0.3;
  transition: opacity 700ms ease 400ms, scale 1300ms var(--inout); }
.glow.on { opacity: 1; scale: 1;
  transition: opacity 600ms ease, scale 1300ms var(--soft); }
.glow .layer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; filter: blur(36px);
  will-change: opacity; transition: opacity 700ms ease; }
.glow .layer.on { opacity: var(--o, 0.45); }
.glow [data-k="work"] { filter: blur(36px) brightness(1.5) saturate(1.1); }
.glow [data-k="logo"] { filter: blur(36px) brightness(1.35); }
.glow .wash { inset: 60px 40px; width: auto; height: auto; border-radius: 50%; }
.glow .violet { background: #6A3FA8; }

/* ---------- The bar colour: the flower's pale colour spreads out from it and fills the whole nav bar ---------- */
.blooms { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bloom { position: absolute; left: 0; top: -140px; width: 3400px; height: 360px; margin-left: -1700px;
  will-change: transform, opacity; opacity: 0; scale: 1 0.12;
  transition: scale 1300ms var(--inout), opacity 600ms ease 700ms; }
.bloom.grow { opacity: 1; scale: 1 1;
  transition: scale 900ms var(--soft), opacity 500ms ease; }
.bloom .bx { position: absolute; inset: 0; will-change: transform; scale: 0.02 1;
  background: radial-gradient(closest-side, var(--c) 78%, transparent 100%);
  transition: scale 1300ms var(--inout); }
.bloom.grow .bx { scale: 1 1; transition: scale 1800ms var(--soft); }
.bloom.reset, .bloom.reset .bx { transition: none !important; }
.links { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 32px; }

@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --v { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ---------- Logo (settled: Frame 3, thin stem, colour matched, looping wave) ---------- */
.logo { position: relative; display: inline-flex; align-items: center; gap: 0.3333em; font-size: var(--step-0); cursor: default; }
.rose { width: 2em; height: 2em; flex-shrink: 0; display: block;                 /* the mark stays 32 px */
  transition: opacity 200ms ease 450ms, scale 650ms var(--turn) 450ms, rotate 650ms var(--turn) 450ms; }
.name { position: relative; font-weight: 600; line-height: 1.2em; letter-spacing: -0.01em; white-space: nowrap;
  transition: letter-spacing var(--undo) var(--back) 0ms; }
.logo .frame { position: absolute; left: calc(50% - 6.72em); top: calc(50% - 2.24em); width: 13.44em; height: 4.48em;
  background: center / 100% 100% no-repeat; }
.late .logo .frame { background-image: url("../logo/webp/frame3-thin-rose.webp"); }            /* hover only: loads last */
.logo:hover .name, .logo.on .name { letter-spacing: 0.02em; transition: letter-spacing var(--grow) var(--soft) var(--rose-turn); }
.logo:hover .rose, .logo.on .rose { opacity: 0; scale: 0.5; rotate: -180deg;
  transition: opacity 180ms ease 420ms, scale 600ms var(--turn) 0ms, rotate 600ms var(--turn) 0ms; }
.frame { pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--p) - 10%), transparent var(--p)),
                      linear-gradient(to bottom, transparent calc(50% - var(--v)), #000 calc(50% - var(--v) + 8%), #000 calc(50% + var(--v) - 8%), transparent calc(50% + var(--v)));
          mask-image: linear-gradient(to right, #000 calc(var(--p) - 10%), transparent var(--p)),
                      linear-gradient(to bottom, transparent calc(50% - var(--v)), #000 calc(50% - var(--v) + 8%), #000 calc(50% + var(--v) - 8%), transparent calc(50% + var(--v)));
  -webkit-mask-composite: source-in; mask-composite: intersect;
  scale: 0.985;
  transition: --p var(--undo) var(--back) 0ms, --v 250ms var(--back) var(--undo-late), scale var(--undo) var(--back) 0ms; }
.logo:hover .frame, .logo.on .frame, .resume:hover .frame, .resume:focus-visible .frame, .resume.on .frame { --p: 115%; --v: 60%; scale: 1;
  transition: --v 350ms cubic-bezier(0.33, 0, 0.2, 1) var(--lead), --p var(--grow) var(--soft) var(--lead), scale var(--grow) var(--soft) var(--lead); }
.logo:hover .frame, .logo.on .frame {
  transition: --v 350ms cubic-bezier(0.33, 0, 0.2, 1) var(--rose-turn), --p var(--grow) var(--soft) var(--rose-turn), scale var(--grow) var(--soft) var(--rose-turn); }
.l { position: relative; }

/* ---------- Links: on hover the word fades and its flower turns in and grows in its place ---------- */
.link { display: flex; align-items: center; gap: 7px; font-size: var(--step-0); font-weight: 500; line-height: 20px; color: var(--muted); }
.link.current { color: var(--ink); }
.slot { position: relative; display: block; }
.word { display: block;
  transition: opacity var(--leave) ease var(--undo-late), scale 350ms var(--out) 350ms; }
.flower { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none;
  opacity: 0; scale: 0.25; rotate: -40deg;
  transition: opacity var(--leave) ease var(--undo-late), scale var(--undo) var(--back) 0ms, rotate var(--undo) var(--back) 0ms; }
.link:hover .word, .link:focus-visible .word { opacity: 0; scale: 0.85;
  transition: opacity var(--leave) ease 0ms, scale 300ms var(--out) 0ms; }
.link:hover .flower, .link:focus-visible .flower { opacity: 1; scale: 1; rotate: 0deg;
  transition: opacity 300ms ease var(--lead), scale var(--grow) var(--soft) var(--lead), rotate var(--grow) var(--soft) var(--lead); }

/* ---------- Résumé: on hover the stroke fades into a clematis frame, and the word waves like the logo ---------- */
.resume { position: relative; margin-left: 32px; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; font-size: var(--step-0); font-weight: 500; line-height: 20px; color: var(--ink); }
.stroke { position: absolute; inset: 0; border: 1px solid var(--ink); border-radius: 999px; pointer-events: none;
  transition: opacity var(--leave) ease var(--undo-late), scale 350ms var(--out) 350ms; }
.resume:hover .stroke, .resume:focus-visible .stroke, .resume.on .stroke { opacity: 0; scale: 1.08;
  transition: opacity var(--leave) ease 0ms, scale 350ms var(--out) 0ms; }
.resume .frame { position: absolute; left: calc(50% - 94px); top: calc(50% - 31px); width: 188px; height: 62px;
  background: center / 100% 100% no-repeat; }
.late .resume .frame { background-image: url("../nav-flowers/webp/resume-frame-888.webp"); }
.resume .letters { transition: letter-spacing var(--undo) var(--back) 0ms; }
.resume:hover .letters, .resume:focus-visible .letters, .resume.on .letters { letter-spacing: 0.02em; transition: letter-spacing var(--grow) var(--soft) var(--lead); }

@media (prefers-reduced-motion: reduce) {
  .logo .frame { display: none; }
  .logo:hover .rose, .logo.on .rose { opacity: 1; scale: 1; rotate: 0deg; }
  .flower, .link:hover .flower, .link:focus-visible .flower { rotate: 0deg; scale: 1; }
  .word, .link:hover .word, .link:focus-visible .word { scale: 1; }
  .resume .frame { -webkit-mask-image: none; mask-image: none; opacity: 0; scale: 1; transition: opacity 240ms ease; }
  .resume:hover .frame, .resume:focus-visible .frame, .resume.on .frame { opacity: 1; }
  .glow-pos { transition: none; }
  .glow, .glow.on { scale: 1; }
  .bloom, .bloom.grow, .bloom .bx, .bloom.grow .bx { scale: 1 1; }
}

body.loading { overflow: hidden; }
body.loading .nav .links { z-index: auto; }


/* ---------- Phone nav (A, his call 6 Oct) ---------- */
.menu-btn, .sheet { display: none; }
@media (max-width: 860px) {
  .nav { position: sticky; top: 0; z-index: 44; height: 64px; background: var(--ground); transition: translate 320ms var(--out); }
  .nav.tuck { translate: 0 -100%; transition: translate 260ms cubic-bezier(0.4, 0, 1, 1); }
  body.loading .nav { position: relative; z-index: auto; }
  .links { gap: 4px; }
  .links > .link, .links > .resume { display: none; }
  .menu-btn { display: grid; justify-items: end; align-items: center; height: 44px; min-width: 52px; padding: 0 0 0 8px;
    border: 0; background: none; font: inherit; font-size: var(--step-0); font-weight: 500; line-height: 20px; color: var(--ink);
    cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .menu-btn span { grid-area: 1 / 1; transition: opacity 220ms ease, translate 420ms var(--out); }
  .menu-btn .mb-close { opacity: 0; translate: 0 7px; }
  .menu-open .menu-btn .mb-open { opacity: 0; translate: 0 -7px; }
  .menu-open .menu-btn .mb-close { opacity: 1; translate: 0 0; }
  .menu-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
  body.menu-open { overflow: hidden; }
  body.menu-open .home, body.menu-open .site { padding-top: 65px; }
  body.menu-open .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 46; background: transparent; }
  .sheet { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; overflow: hidden auto;
    padding: 65px 20px calc(32px + env(safe-area-inset-bottom)); background: var(--ground);
    opacity: 0; transition: opacity 260ms ease 60ms; }
  .sheet[hidden] { display: none; }
  .sheet.open { opacity: 1; transition: opacity 280ms ease; }
  .sheet-links, .sheet-resume, .sheet-foot { position: relative; z-index: 1; }
  .sheet-links { display: flex; flex-direction: column; padding-top: 28px; }
  .sheet-link { display: flex; align-items: center; gap: 16px; height: 84px; border-bottom: 1px solid var(--line);
    color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .sheet-link:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
  .sheet-link img { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain;
    opacity: 0; scale: 0.25; rotate: -40deg;
    transition: scale 320ms var(--back), rotate 320ms var(--back), opacity 200ms ease; }
  .sheet-link span { font-size: var(--step-3); font-weight: 500; line-height: 44px; letter-spacing: -0.02em;
    opacity: 0; translate: 0 10px; transition: opacity 180ms ease, translate 300ms var(--back); }
  .sheet.open .sheet-link img { opacity: 1; scale: 1; rotate: 0deg;
    transition: opacity 300ms ease calc(120ms + var(--i) * 60ms), scale var(--grow) var(--soft) calc(120ms + var(--i) * 60ms),
      rotate var(--grow) var(--soft) calc(120ms + var(--i) * 60ms); }
  .sheet.open .sheet-link span { opacity: 1; translate: 0 0;
    transition: opacity 400ms ease calc(80ms + var(--i) * 60ms), translate 600ms var(--out) calc(80ms + var(--i) * 60ms); }
  .sheet .resume { align-self: flex-start; margin: 36px 0 0 60px; padding: 11px 20px; font-size: var(--step-0); line-height: 20px; }
  .sheet .resume .frame { left: calc(50% - 122px); top: calc(50% - 40px); width: 244px; height: 80px; }
  .sheet-foot { display: flex; gap: 24px; margin-top: auto; padding-top: 32px; }
  .sheet-foot a { padding: 10px 0; font-size: var(--step-0); line-height: 22px; color: var(--muted); text-decoration: none; }
  .sheet-resume, .sheet-foot { opacity: 0; transition: opacity 180ms ease; }
  .sheet.open .sheet-resume, .sheet.open .sheet-foot { opacity: 1; transition: opacity 400ms ease calc(80ms + var(--i) * 60ms); }
  .sheet-fill { position: fixed; left: var(--x, 50%); top: var(--y, 50%); width: 300vmax; height: 300vmax;
    margin: -150vmax 0 0 -150vmax; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, var(--c, transparent) 72%, transparent 100%); scale: 0; }
  .sheet-fill.grow { scale: 1; transition: scale 900ms var(--soft); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .sheet-link img, .sheet-link span, .sheet-resume, .sheet-foot { opacity: 1; scale: 1; rotate: 0deg; translate: none; transition: none !important; }
  .sheet-fill { display: none; }
}

/* ================= Contact: the footer (same as footer-petals.html) ================= */
/* the words on white, then the bed: 1440 x 300 board px, scaled with the window (never under 0.55, the sides crop
   on a phone); its canvas reaches 180 px above the bed, so a petal lifted by the gust has open air to drift in */
.ft { position: relative; overflow: hidden; padding-top: 64px; --grey: #87847D; }
.ft-words { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 0 16px; text-align: center; }
.ft-line { font-size: var(--step-3); font-weight: 400; letter-spacing: -0.03em; line-height: 46px; }
.ft-line span { display: block; text-wrap: balance; }        /* no word left alone on a line when it wraps */
.ft-line .ft-grey { color: var(--grey); }
.ft-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; font-size: var(--step-0); line-height: 22px; }
.ft-links .ft-mail { padding-bottom: 2px; border-bottom: 1px solid var(--ink); }
.ft-fine { font-family: "Geist Mono", monospace; font-size: var(--step--1); letter-spacing: 0.06em; line-height: 16px; text-transform: uppercase; color: var(--muted); }
.ft-bed { position: relative; height: calc(300px * var(--s, 1)); margin-top: 32px; }
.ft-bed canvas, .ft-bed .ft-still { position: absolute; left: 50%; bottom: 0; width: 1440px; height: 480px; margin-left: -720px;
       transform: scale(var(--s, 1)); transform-origin: 50% 100%; pointer-events: none; }
.ft-bed .ft-still img { position: absolute; bottom: 0; }
.ft-bed.gl .ft-still { display: none; }
@media (max-width: 720px) {
  .ft { padding-top: 40px; }
  .ft-line { font-size: var(--step-2); line-height: 34px; }
}
/* on a phone (the board's footer, 17 Oct): the words to the left at the board's measures, the email on its own line,
   the three links 44 px tall to tap, the small print on two lines; the bed is nine whole stems (the script below) */
@media (max-width: 640px) {
  .ft { padding-top: 56px; }
  .ft-words { align-items: flex-start; padding: 0 20px; text-align: left; }
  .ft-line { width: 330px; max-width: 100%; }
  .ft-line span { width: 240px; max-width: 100%; text-wrap: wrap; }
  .ft-line .ft-grey { width: 290px; }
  .ft-links { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; }
  .ft-links .ft-mail { grid-column: 1 / -1; justify-self: start; }
  .ft-links a:not(.ft-mail) { display: flex; align-items: center; height: 44px; }
  .ft-fine span { display: block; }
  .ft-fine .ft-dot { display: none; }
}


/* the nav's side padding on smaller screens (index.html sets it with the page's own padding) */
@media (max-width: 900px) { .nav { padding: 0 32px; } }
@media (max-width: 640px) { .nav { padding: 0 20px; } }