/* Page C: only the rules for the nav, hero, chat box, closing call to action and footer.
   Copied from B (site.css, story.css). Nothing for any other section. */

/* ---- from site.css ---- */
:root{--paper:#fafaf9;--mist:#ededeb;--ink:#111111;--line:#d9d9d6;--line-strong:#bfc3bf;--body:#454c48;--quiet:#5c625e;--deep:#1f4a44;--deep-on-dark:#7fb3a8;--wash:#cfe3dd;--wash-strong:#b5d4cb;--mark:#e3ede8;--sans:Manrope,Arial,sans-serif;--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;--serif:Sentient,Georgia,serif;--pad:112px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.skip{position:fixed;top:8px;left:16px;padding:8px 16px;background:var(--ink);color:#fff;transform:translateY(calc(-100% - 16px));z-index:100}
.skip:focus{transform:none}
h1{margin:0;font:300 clamp(42px,4.6vw,66px)/1.14 var(--serif);letter-spacing:-.035em;text-wrap:balance}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 13px 20px;color:var(--ink);background:var(--wash);border:1.5px solid var(--ink);border-radius:16px 20px 15px 19px / 19px 15px 20px 16px;font:500 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);transition-duration:.08s}
.btn::after{content:"";position:absolute;inset:-1.5px;border:1px solid var(--ink);border-radius:20px 15px 19px 16px / 15px 19px 16px 20px;opacity:.45;transform:translate(3px,3px) rotate(.5deg);transition:transform .25s cubic-bezier(.16,1,.3,1);pointer-events:none}
.btn:hover{background:var(--wash-strong)}
.btn:hover::after{transform:translate(1px,1px) rotate(0deg)}
.btn svg{width:22px;height:14px;flex:0 0 auto;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn:hover svg{transform:translateX(3px)}
.btn--plain{background:var(--paper)}
.btn--plain:hover{background:var(--mist)}
.wordmark{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font:600 19px/1 var(--sans);letter-spacing:-.035em;text-decoration:none;white-space:nowrap}
:root{--blush:#ecccc6;--blush-strong:#e0b4ac;--teal:#2f8f80;--teal-ink:#1f6b60;--teal-soft:#d9e8e2;--pink:#d9958c;--pink-ink:#8f4a40;--small-print:#6b716d}
@media (max-width:1000px){
  :root{--pad:88px}
  html{scroll-padding-top:96px}
}
@media (max-width:760px){
  :root{--pad:48px}
  h1{font-size:36px}
  .wordmark{font-size:18px}
}
@media (max-width:430px){
  .wordmark{font-size:17px}
  h1{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
/* Wordmark: JetBrains Mono 500 in deep green, the same weight in header and footer, so it sits with the lighter type. */
.wordmark{gap:0;font:500 22px/1 var(--mono);letter-spacing:-.04em;color:var(--deep)}
.wordmark .cur{color:var(--teal);margin-left:.02em;animation:cur-blink 1.1s steps(1) 0s 4}
@media (prefers-reduced-motion:reduce){
  .wordmark .cur{animation:none}
}
.wordmark{padding-block:11px;margin-block:-11px}
@keyframes cur-blink{50%{opacity:0}}

/* ---- from story.css ---- */
.fresh{--blush:#f3dcd6;--deep-dark:#173d36;--soft:#7b817d;--gutter:clamp(20px,5.6vw,80px);--wrap:min(1200px,calc(100% - 2 * var(--gutter)));--gap:24px;--t-h2:clamp(38px,4.3vw,62px);--t-h3:clamp(23px,1.9vw,27px);--t-lead:clamp(18px,1.35vw,20px);--t-bridge:clamp(25px,2.3vw,33px);--section:clamp(112px,12vw,176px);--type-section:clamp(34px,3.15vw,46px);--type-copy:18px;--leading-copy:1.68;--type-action:15.5px;--space-within:clamp(32px,3vw,48px);--card-shadow:0 26px 50px -30px rgba(23,61,54,.28),0 1px 3px rgba(23,61,54,.05);--ease:cubic-bezier(.16,1,.3,1)}
.fresh ::selection{background:var(--wash);color:var(--deep)}
.fresh i{font-style:normal}
.f-wrap{width:var(--wrap);margin-inline:auto}

/* Buttons */
.f-btn{min-height:54px;padding:0 24px;justify-content:center;font-size:var(--type-action);line-height:1.2;white-space:nowrap}
.f-btn--solid{background:var(--deep);color:var(--paper);border-color:var(--deep)}
.f-btn--solid::after{border-color:var(--deep)}
.f-btn--solid:hover{background:var(--teal-ink);border-color:var(--teal-ink)}
.f-btn--solid:hover::after{border-color:var(--teal-ink)}
.f-btn--lg{min-height:60px;padding:0 30px;font-size:17px}

/* Header */
.fresh .f-links a,.fresh .f-menu a:not(.btn){text-decoration:none}
.f-header{position:fixed;z-index:40;top:14px;left:0;right:0;pointer-events:none}
.f-nav{pointer-events:auto;position:relative;width:calc(var(--wrap) + 40px);max-width:calc(100% - 24px);min-height:64px;margin:auto;padding:9px 10px 9px 20px;display:flex;align-items:center;gap:22px;background:var(--paper);border:1.5px solid var(--deep);border-radius:22px 28px 20px 26px / 26px 20px 28px 22px;transition:background .35s,border-color .35s,padding .35s,width .35s}
/* The nav is drawn like the buttons: a deep-green line with uneven corners and a fainter offset second line.
   At the very top of the page it opens up: no bar, just the wordmark, small links and the green button on the paper.
   Once you scroll, the drawn bar comes in so the nav stays easy to find. */
.f-nav::after{content:"";position:absolute;inset:-1.5px;border:1px solid var(--deep);border-radius:28px 21px 26px 22px / 21px 26px 22px 28px;opacity:.3;transform:translate(4px,4px) rotate(.25deg);transition:opacity .35s;pointer-events:none}
.f-header:not(.is-scrolled) .f-nav{width:var(--wrap);padding-inline:0;background:transparent;border-color:transparent}
.f-header:not(.is-scrolled) .f-nav::after{opacity:0}
/* At the top the links step back so they do not compete with the hero: the lightest grey that still passes AA. */
.fresh .f-header:not(.is-scrolled) .f-links a:not([aria-current]):not(:hover){color:var(--small-print)}
.f-nav .wordmark{font-size:20px}
/* Nav links: the same highlighter as the body links. The current page carries the low band; hover fills it. */
.fresh .f-links{display:flex;gap:24px;margin-left:auto;font-size:13.5px;letter-spacing:.01em}
.fresh .f-links a,.fresh .f-menu>div a:not(.btn){position:relative;isolation:isolate;text-decoration:none;transition:color .2s}
.fresh .f-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--quiet);font-weight:500;padding:8px 0}
.fresh .f-links a::after,.fresh .f-menu>div a:not(.btn)::after{content:"";position:absolute;z-index:-1;left:-3px;right:-3px;bottom:10px;height:0;border-radius:3px;background:var(--teal-soft);transition:height .25s var(--ease)}
.fresh .f-links a[aria-current],.fresh .f-menu>div a[aria-current]{color:var(--deep)}
.fresh .f-links a[aria-current]::after,.fresh .f-menu>div a[aria-current]::after{height:9px}
.fresh .f-links a:hover,.fresh .f-menu>div a:not(.btn):hover{color:var(--teal-ink)}
.fresh .f-links a:hover::after,.fresh .f-menu>div a:not(.btn):hover::after{height:24px}
.f-nav-book{min-height:44px;padding:0 16px;font-size:14px;background:var(--deep);color:var(--paper);border-color:var(--deep)}
.f-nav-book::after{border-color:var(--deep)}
.f-nav-book:hover{background:var(--teal-ink);border-color:var(--teal-ink)}
.f-nav-book::after{transform:translate(2px,2px) rotate(.5deg)}
.f-menu{display:none}

/* Hero */
.f-hero{padding-top:clamp(136px,11vw,168px)}
.f-hero-grid{--hs:clamp(40px,7vw,96px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.f-hero-premise{grid-column:1 / -1;margin:0 0 clamp(14px,1.6vw,24px);font:300 clamp(21px,2.05vw,30px)/1.3 var(--serif);letter-spacing:-.02em;color:#29302c}
.f-hero-title{grid-column:1 / -1;margin:0;font:300 var(--hs)/1.06 var(--serif);letter-spacing:-.035em;color:#1b3832}
.f-hero-title>span{display:block}
.f-hero-title>span:last-child{color:var(--deep)}
.f-hero-intro{grid-column:8 / -1;margin-top:calc(var(--hs) * -.8)}
/* One statement on the first screen: the headline. Every hero intro (not article standfirsts) is in the body font,
   its first paragraph a touch stronger in deep green so it still leads. */
.f-hero-lede{max-width:460px;margin:0;font:400 19px/1.6 var(--sans);color:var(--deep);text-wrap:pretty}
.f-hero-body{margin:12px 0 0;max-width:460px;font-size:17px;line-height:1.65;color:var(--body);text-wrap:pretty}
.f-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.f-hero .f-btn{min-height:50px;padding:0 20px;font-size:var(--type-action)}
.f-stage{position:relative;display:grid;margin-top:clamp(16px,2vw,32px)}
.f-stage>*{grid-area:1 / 1}
.f-stage-art{display:block;align-self:center}
.f-stage-art img{width:100%;height:auto;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(transparent 0,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 14%,#000 80%,transparent 100%)}

/* Hero picture labels: small paper tags with a short pointer line down to their building, clear of the chat box.
   760px and less: the tags leave the picture and the same two lines become a small caption under the stage. */
.f-stage-tags{position:relative;z-index:1;align-self:stretch;justify-self:stretch;margin:0;pointer-events:none}
.f-stage-tag{--reach:clamp(16px,1.8vw,24px);position:absolute;display:grid;padding:8px 12px;background:rgba(250,250,249,.9);border-radius:10px;box-shadow:0 10px 24px -12px rgba(23,61,54,.35),0 1px 3px rgba(23,61,54,.08);font:400 14px/1.4 var(--sans);color:var(--body);white-space:nowrap}
.f-stage-tag>span{display:block}
.f-stage-tag>span:first-child{font-weight:500;color:var(--deep)}
.f-stage-tag::before{content:"";position:absolute;left:50%;top:100%;width:1px;height:var(--reach);background:var(--deep);opacity:.75}
.f-stage-tag::after{content:"";position:absolute;left:calc(50% - 2.5px);top:calc(100% + var(--reach) - 2.5px);width:5px;height:5px;border-radius:50%;background:var(--deep)}
.f-stage-tag--them{left:max(var(--gutter),3%);top:24%}
.f-stage-tag--you{right:6%;bottom:calc(84% + var(--reach))}
@media (max-width:1180px){
  .f-stage-tag--them{top:14%}
}
@media (max-width:760px){
  .f-stage-tags{grid-area:2 / 1;display:grid;gap:6px;width:var(--wrap);margin:24px auto 0}
  .f-stage-tag{position:static;display:block;padding:0;background:none;box-shadow:none;border-radius:0;font-size:13px;line-height:1.5;color:var(--quiet);white-space:normal}
  .f-stage-tag>span{display:inline}
  .f-stage-tag>span:first-child{color:var(--deep)}
  .f-stage-tag::before,.f-stage-tag::after{content:none}
}

/* Chat box */
.f-chat{position:relative;z-index:2;place-self:center;width:min(560px,calc(100% - 2 * var(--gutter)));margin:0;background:var(--paper);border:1px solid rgba(31,74,68,.14);border-radius:16px;box-shadow:0 50px 90px -40px rgba(23,61,54,.45),0 2px 8px rgba(23,61,54,.06);overflow:hidden}
.f-chat-top{display:flex;align-items:center;gap:16px;padding:14px 22px;background:var(--mist);border-bottom:1px solid rgba(31,74,68,.1)}
.f-chat-dots{display:flex;gap:6px}
.f-chat-dots i{width:10px;height:10px;border-radius:50%;background:#d9ddd9}
.f-chat-dots i:first-child{background:var(--blush-strong)}
.f-chat-dots i:nth-child(2){background:var(--wash-strong)}
.f-chat-channel{font:500 13px/1 var(--mono);letter-spacing:-.02em;color:var(--deep)}
.f-chat-tag{margin-left:auto;padding:3px 10px;background:var(--teal-soft);border-radius:999px;font-size:12.5px;font-weight:500;color:var(--teal-ink)}
.f-chat-thread{list-style:none;margin:0;padding:10px 22px 6px}
.f-msg{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:14px 0}
.f-av{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--teal-soft);color:var(--teal-ink);font:400 17px/1 var(--serif)}
.f-msg--you .f-av{background:var(--blush);color:var(--pink-ink)}
.f-msg p{margin:0;font-size:15.5px;line-height:1.55;color:var(--body)}
.f-msg .f-sender{margin-bottom:3px;font-weight:500;font-size:14.5px;color:var(--ink)}
.f-sender time{margin-left:8px;font:500 12px/1 var(--mono);color:var(--small-print)}
.f-yes{position:relative;display:inline-flex;align-items:center;min-height:44px;gap:6px;margin-top:10px;padding:8px 14px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:12px 15px 11px 14px;font:500 13.5px/1.3 var(--sans);cursor:pointer;transition:background .2s}
.f-yes:hover{background:var(--wash)}
.f-yes[aria-pressed="true"]{background:var(--wash-strong);border-color:var(--teal-ink);color:var(--teal-ink)}
.f-chat-foot{margin:0;padding:14px 22px 16px;background:var(--teal-soft);border-top:1px solid rgba(31,74,68,.1);font-size:14.5px;color:var(--teal-ink)}
/* Typing dots: a worker is writing. Shown for a moment before each reply arrives. */
.f-typing{display:inline-flex;gap:4px;align-items:center;height:22px;margin-top:4px}
.f-typing i{width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:.35;animation:f-dot 1s ease-in-out infinite}
.f-typing i:nth-child(2){animation-delay:.15s}
.f-typing i:nth-child(3){animation-delay:.3s}
@keyframes f-dot{50%{opacity:1;transform:translateY(-2px)}}
.f-msg.is-waiting>div>p:not(.f-sender),.f-msg.is-waiting .f-yes{display:none}
.f-chat-foot span{font-weight:500}

/* Section 1: I went all in. One calm section: photo frame and the story. */
.f-allin{margin-top:var(--section)}
.f-allin-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.f-photo{grid-column:1 / span 5;margin:0;aspect-ratio:4 / 5;display:grid;place-items:center;overflow:hidden;background:var(--mark);border:1px solid rgba(31,74,68,.14);border-radius:16px;box-shadow:var(--card-shadow);position:sticky;top:120px}
.f-photo img{width:100%;height:100%;object-fit:cover}
.f-photo--quay img{object-position:34% 62%}
.f-photo--book img{transform:scale(1.32);transform-origin:50% 16%}
.f-photo span{font:500 13px/1 var(--mono);letter-spacing:-.01em;color:var(--quiet)}
.f-allin-text{grid-column:7 / -1;max-width:600px}
.f-allin h2{margin:0 0 32px;font:300 var(--type-section)/1.12 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.f-allin-text p{margin:0 0 22px;font-size:var(--type-copy);line-height:var(--leading-copy);color:var(--body);text-wrap:pretty}
.f-allin-text .f-allin-punch{position:relative;margin:56px 0 28px;padding-left:24px;font:300 var(--t-bridge)/1.25 var(--serif);letter-spacing:-.02em;color:var(--deep);text-wrap:balance}
.f-punch-rule,.f-allin-punch::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:1.5px;background:var(--teal);transform-origin:top;transition:transform .6s var(--ease) .2s}
html.js [data-reveal]:not(.is-in) .f-allin-punch::before,html.js [data-reveal]:not(.is-in) .f-punch-rule{transform:scaleY(0)}
.f-allin-punch strong{font-weight:300}
.f-allin-text .f-allin-turn{margin:0;font:300 clamp(21px,1.6vw,24px)/1.4 var(--serif);letter-spacing:-.01em;color:var(--deep)}
.f-allin-turn::after{content:"_";margin-left:.08em;color:var(--teal);font-weight:400}
html.js [data-reveal].is-in .f-allin-turn:not(.is-typing):not(.is-typed)::after{animation:cur-blink 1.1s steps(1) .3s 3}
.f-allin-turn.is-typing,.f-allin-turn.is-typed{display:grid}
.f-allin-turn.is-typing>span,.f-allin-turn.is-typed>span{grid-area:1 / 1}
.f-allin-turn .f-type-ghost{visibility:hidden}
.f-allin-turn.is-typing::after,.f-allin-turn.is-typed::after{content:none}
.f-allin-turn .f-type-out::after{content:"_";margin-left:.08em;color:var(--teal)}
.f-allin-turn.is-typed .f-type-out::after{animation:cur-blink 1.1s steps(1) 0s 3}
@media (max-width:960px){
  .f-photo{grid-column:1 / -1;position:static;width:min(100%,420px);margin-bottom:48px}
  .f-allin-text{grid-column:1 / -1}
}
@media (max-width:760px){
  .f-photo{aspect-ratio:auto;height:260px;margin-bottom:40px}
  .f-allin h2{margin-bottom:24px}
  .f-allin-text p{font-size:17px}
  .f-allin-text .f-allin-punch{margin:40px 0 20px;padding-left:18px}
}

/* Chapter 3: same layout as Chapter 2, mirrored (text left, photo frame right). */
.f-allin--flip .f-allin-text{grid-column:1 / span 6;grid-row:1}
.f-allin--flip .f-photo{grid-column:8 / -1;grid-row:1}
@media (max-width:960px){
  .f-allin--flip .f-allin-text,.f-allin--flip .f-photo{grid-column:1 / -1;grid-row:auto}
  .f-allin--flip .f-photo{margin:48px 0 0}
}
@media (max-width:760px){
  .f-allin--flip .f-photo{margin-top:40px}
}

/* Chapter 4: the jobs nobody hired you for, as a to-do list handed over. Rows, not tiles. */
.f-todo .f-todo-intro{grid-column:1 / span 6;max-width:600px}
.f-todo-list{grid-column:1 / -1;list-style:none;margin:var(--space-within) 0 0;padding:0;border-bottom:1px solid var(--line)}
.f-todo-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 210px;column-gap:var(--gap);align-items:baseline;padding:24px 0;border-top:1px solid var(--line)}
.f-todo-job{font:300 clamp(21px,1.75vw,24px)/1.3 var(--serif);letter-spacing:-.02em;color:var(--deep);text-wrap:balance}
.f-todo-what{font-size:17px;line-height:var(--leading-copy);color:var(--body)}
.f-todo-desk{justify-self:end;align-self:center;padding:5px 12px 6px;background:var(--teal-soft);border-radius:999px;font:500 12.5px/1.2 var(--sans);color:var(--teal-ink);white-space:nowrap}
.f-todo .f-todo-close{grid-column:1 / span 7;max-width:none}
@media (max-width:960px){
  .f-todo .f-todo-intro,.f-todo .f-todo-close{grid-column:1 / -1}
  .f-todo-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .f-todo-desk{grid-column:1 / -1;justify-self:start;margin-top:12px}
}
@media (max-width:760px){
  .f-todo-list{margin-top:40px}
  .f-todo-row{grid-template-columns:1fr;padding:20px 0}
  .f-todo-desk{margin-top:10px}
  .f-todo-job{font-size:21px;margin-bottom:6px}
  .f-todo-what{font-size:16px}
}

/* Chapter 5: Tell me about last Tuesday. Tick list as calm rows on the left; your numbers on the right.
   Built from B's Tuesday section (story.css), restyled: no white card, no boxes round the ticks. */
.f-tues-ch .f-tues-intro{grid-column:1 / span 6;max-width:600px}
.f-jobs{grid-column:1 / span 7;grid-row:2;margin:clamp(48px,5vw,64px) 0 0;padding:0;border:0;border-bottom:1px solid var(--line);min-width:0}
.f-jobs legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.f-job{border-top:1px solid var(--line)}
.f-job label{display:grid;grid-template-columns:24px 1fr;gap:18px;align-items:center;min-height:64px;padding:16px 0;cursor:pointer}
.f-job input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;position:relative;border:1.5px solid var(--ink);border-radius:6px 7px 5px 7px;background:var(--paper);cursor:pointer}
.f-job input{transition:background .2s,border-color .2s}
.f-job input::after{content:'';position:absolute;left:5px;top:2px;width:13px;height:8px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-48deg) skewX(-6deg);clip-path:inset(0 100% 0 0);transition:clip-path .25s var(--ease)}
.f-job input:checked{background:var(--wash-strong);border-color:var(--teal-ink)}
.f-job input:checked::after{clip-path:inset(0)}
.f-job label span{font:300 clamp(19px,1.5vw,21px)/1.35 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.f-job label span{transition:color .2s}
.f-job label:hover span,.f-job.is-on label span{color:var(--teal-ink)}
.f-job-more{display:none;align-items:center;justify-content:space-between;gap:16px;padding:0 0 18px 42px}
.f-job.is-on .f-job-more{display:flex}
.f-job-desk{max-width:100%;padding:5px 12px 6px;background:var(--teal-soft);border-radius:999px;font:500 12.5px/1.2 var(--sans);color:var(--teal-ink);white-space:normal}
.f-step{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--body)}
.f-step button{display:grid;place-items:center;width:44px;height:44px;padding:0;background:var(--paper);border:1.5px solid var(--ink);border-radius:9px 11px 8px 10px;font:500 16px/1 var(--sans);color:var(--ink);cursor:pointer}
.f-step button:hover{background:var(--wash)}
.f-step output{min-width:118px;text-align:center;font-variant-numeric:tabular-nums}
.f-tally{grid-column:9 / -1;grid-row:2;position:sticky;top:110px;margin-top:clamp(48px,5vw,64px);padding-top:20px}
.f-tally .f-tally-verdict{margin:0;font:300 var(--t-bridge)/1.25 var(--serif);letter-spacing:-.02em;color:var(--deep);text-wrap:balance}
.f-tally-numbers[hidden],.f-tally-lot[hidden]{display:none}
.f-tally .f-tally-lot{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--body);text-wrap:balance}
.f-tally-numbers{margin-top:28px}
.f-tally-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.f-tally .f-tally-stats p{margin:0;font-size:15px;line-height:1.4;color:var(--body)}
.f-tally-stats strong{display:block;width:fit-content;margin-bottom:8px;font:300 44px/1 var(--serif);letter-spacing:-.03em;color:var(--deep);font-variant-numeric:lining-nums tabular-nums}
.f-tally .f-tally-year{margin:18px 0 0;font-size:16px;line-height:1.5;color:var(--body)}
.f-rate{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:16px;color:var(--body)}
.f-rate span{display:inline-flex;align-items:center;gap:2px;padding:4px 10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:10px 12px 9px 11px;font-weight:500;color:var(--ink)}
.f-rate input{width:64px;border:0;background:transparent;font:500 16px/1.3 var(--sans);color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.f-rate input::-webkit-inner-spin-button,.f-rate input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.f-rate input:focus{outline:none}
.f-rate span:focus-within{outline:3px solid var(--teal);outline-offset:3px}
.f-tally .f-tally-small{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--quiet);text-wrap:pretty}
.f-tally .f-btn{max-width:100%;margin-top:28px;white-space:normal;text-align:center}
@media (max-width:960px){
  .f-tues-ch .f-tues-intro,.f-jobs,.f-tally{grid-column:1 / -1;grid-row:auto}
  .f-tally{position:static;margin-top:40px;padding-top:0}
}
@media (max-width:760px){
  .f-jobs{margin-top:36px}
  .f-job label span{font-size:18px}
  .f-job-more{flex-wrap:wrap;padding-left:42px}
}
@media (max-width:440px){
  .f-tally-stats{gap:12px}
  .f-tally-stats strong{font-size:34px}
}

/* Chapter 6: Yours, not rented. Chapter 2's text styles; the prices reuse Chapter 4's rows, with the price where the pill sits. */
.f-own-ch .f-own-text{grid-column:1 / span 6;max-width:600px}
.f-own-ch .f-own-text>p:last-child{margin-bottom:0}
.f-todo-price{justify-self:end;text-align:right;font:400 clamp(21px,1.75vw,24px)/1.3 var(--serif);letter-spacing:-.02em;color:var(--deep);white-space:nowrap}
.f-own-ch .f-own-run{grid-column:1 / -1;margin:28px 0 0;font-size:17px;line-height:1.6}
.f-own-ch .f-own-aside{grid-column:8 / -1;grid-row:1;align-self:center}
.f-own-ch .f-own-aside .f-allin-punch{margin:0;font-size:calc(var(--t-bridge) * 1.2);line-height:1.2}
@media (max-width:960px){
  .f-own-ch .f-own-text,.f-own-ch .f-own-aside{grid-column:1 / -1;grid-row:auto}
  .f-own-ch .f-own-aside .f-allin-punch{margin:40px 0 0;font-size:var(--t-bridge);line-height:1.25}
  .f-todo-price{grid-column:1 / -1;justify-self:start;text-align:left;margin-top:8px}
}
@media (max-width:760px){
  .f-todo-price{margin-top:8px;font-size:21px}
}

/* FAQ: Straight answers. Same rows as Chapters 4 and 6; one plus/minus marker on the right. */
.f-faq-ch .f-faq-intro{grid-column:1 / span 6;max-width:600px}
.f-faq-ch .f-faq-intro h2{margin-bottom:0}
.f-faq-list{grid-column:1 / -1;margin-top:clamp(40px,4.5vw,56px);border-bottom:1px solid var(--line)}
.f-faq-row{border-top:1px solid var(--line)}
.f-faq-row summary{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:24px 0;cursor:pointer;list-style:none;font:300 clamp(21px,1.75vw,24px)/1.3 var(--serif);letter-spacing:-.02em;color:var(--deep);text-wrap:balance}
.f-faq-row summary::-webkit-details-marker{display:none}
.f-faq-row summary::marker{content:""}
.f-faq-mark{position:relative;flex:none;width:16px;height:16px;margin-right:4px}
.f-faq-row summary{transition:color .2s}
.f-faq-row summary:hover,.f-faq-row[open] summary{color:var(--teal-ink)}
.f-faq-mark::before,.f-faq-mark::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--teal-ink);transition:transform .25s var(--ease)}
.f-faq-mark::after{transform:rotate(90deg)}
.f-faq-row[open] .f-faq-mark::after{transform:rotate(0deg)}
.f-faq-row p{max-width:680px;margin:-8px 0 0;padding:0 0 26px;font-size:17px;line-height:1.7;color:var(--body);text-wrap:pretty}
@media (max-width:960px){
  .f-faq-ch .f-faq-intro{grid-column:1 / -1}
}
@media (max-width:760px){
  .f-faq-list{margin-top:32px}
  .f-faq-row summary{padding:20px 0;font-size:20px}
  .f-faq-row p{margin-top:-6px;padding-bottom:22px;font-size:16px}
}

/* Ending: the call to action and footer sit in the evening painting */
.f-ending{--art-top:clamp(170px,16vw,250px);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:calc(var(--art-top) + 66.67vw + 90px);margin-top:var(--section);background:linear-gradient(var(--paper) 0 calc(var(--art-top) + 40px),var(--deep-dark) 0);color:var(--paper)}
.f-ending::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:var(--art-top);height:22vw;background:linear-gradient(var(--paper),rgba(250,250,249,.82) 30%,rgba(250,250,249,0));pointer-events:none}
.f-ending::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:46%;background:linear-gradient(rgba(23,61,54,0),rgba(23,61,54,.8) 45%,var(--deep-dark) 85%);pointer-events:none}
.f-ending-art{position:absolute;z-index:-2;top:var(--art-top);left:0;width:100%;height:auto}

/* Call to action */
.f-cta{width:min(880px,calc(100% - 2 * var(--gutter)));margin:0 auto;text-align:center;color:var(--ink)}
.f-cta h2{margin:0;font:300 var(--t-h2)/1.08 var(--serif);letter-spacing:-.035em;color:var(--deep);text-wrap:balance}
.f-cta p{max-width:560px;margin:24px auto 0;font-size:var(--t-lead);line-height:1.6;color:var(--body)}
.f-cta .f-btn{margin-top:34px}

/* Footer */
.f-footer{margin-top:auto;padding:0 0 34px}
.f-footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:56px}
/* Footer: the links are set in the same serif as the tagline, so the whole block reads as one piece of type on the painting.
   Column headings are small and quiet. Hover draws a thin line under the link. */
.fresh .f-footer a{color:var(--paper);font-weight:400;text-decoration:none}
.f-footer a:focus-visible{outline-color:var(--wash)}
.f-footer-brand{grid-column:1 / span 5}
.fresh .f-footer .wordmark{font-size:26px;font-weight:500;color:var(--paper)}
.f-footer .wordmark .cur{color:var(--wash)}
.f-footer-brand p{margin:20px 0 0;font:300 clamp(26px,2.2vw,32px)/1.18 var(--serif);letter-spacing:-.02em;color:var(--paper)}
.f-footer-links{grid-column:7 / -1;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.f-footer-links h2{margin:0 0 8px;font:500 11.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#b8ccc6}
.fresh .f-footer-links a{position:relative;display:flex;align-items:center;width:fit-content;min-height:44px;font:400 15px/1.4 var(--sans);color:rgba(250,250,249,.8);transition:color .2s}
.fresh .f-footer-links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--wash);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.fresh .f-footer-links a:hover{color:#fff}
.fresh .f-footer-links a:hover::after,.fresh .f-footer-links a:focus-visible::after{transform:scaleX(1)}
.f-footer-base{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:28px;border-top:1px solid rgba(250,250,249,.14);font-size:14px;color:#b8ccc6}
.f-footer-base p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin:0}
.fresh .f-footer-base a{display:inline-flex;align-items:center;min-height:44px;color:rgba(250,250,249,.78);transition:color .2s}
.fresh .f-footer-base a:hover{color:#fff}

/* One footer everywhere. A page that ends with its own call to action skips the shared one, so the scene starts at the top. */
.f-ending:not(:has(.f-cta)){--art-top:-9vw;margin-top:clamp(32px,4vw,56px)}
.f-ending:not(:has(.f-cta))::before{top:0;height:16vw}

/* Motion: hero rise, chat messages, call to action reveal */
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  html.js [data-reveal].is-in{opacity:1;transform:none}
  html.js .f-hero-premise,html.js .f-hero-title>span,html.js .f-hero-intro{animation:f-rise 1.1s var(--ease) both}
  html.js .f-hero-title>span:nth-child(2){animation-delay:.08s}
  html.js .f-hero-intro{animation-delay:.24s}
  html.js .f-chat .f-msg{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  html.js .f-chat.is-live .f-msg{opacity:1;transform:none}
  html.js .f-chat.is-live .f-msg:nth-child(2){transition-delay:.5s}
  html.js .f-chat.is-live .f-msg:nth-child(3){transition-delay:1s}
}
@keyframes f-rise{0%{opacity:0;transform:translateY(.35em)}}

/* Responsive */
@media (max-width:1180px){
  .f-links{display:none!important}
  .f-menu{display:block}
  .f-nav-book{margin-left:auto}
  .f-menu summary{display:grid;place-items:center;width:44px;height:44px;list-style:none;cursor:pointer}
  .f-menu summary::-webkit-details-marker{display:none}
  .f-menu summary svg{width:23px;fill:none;stroke:var(--deep);stroke-width:1.5}
  .f-menu>div{position:absolute;top:calc(100% + 8px);left:0;right:0;display:grid;max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain;padding:12px 20px 20px;background:var(--paper);border:1.5px solid var(--deep);border-radius:20px 24px 18px 22px / 22px 18px 24px 20px;box-shadow:0 18px 40px -18px rgba(17,17,17,.2)}
  .fresh .f-menu>div a:not(.btn){display:flex;align-items:center;min-height:44px;padding:8px 0;font:400 19px/1.3 var(--serif);color:var(--ink)}
  .fresh .f-menu>div a:not(.btn){justify-self:start}
  .fresh .f-menu>div a[aria-current]:not(.btn){color:var(--deep)}
  .f-menu>div .btn{justify-self:start;margin-top:14px;margin-left:0}
}
@media (max-width:1200px){
  .f-hero-intro{grid-column:1 / span 9;max-width:600px;margin-top:32px}
}
@media (max-width:1180px){
  .f-stage-art{align-self:start}
  .f-chat{align-self:start;margin-top:24vw}
}
@media (max-width:960px){
  .f-hero-intro{grid-column:1 / -1;max-width:560px;margin-top:28px}
  .f-footer-brand,.f-footer-links{grid-column:1 / -1}
}
@media (max-width:760px){
  .fresh{--gap:16px;--type-section:clamp(30px,8.5vw,36px);--type-copy:17px;--space-within:32px}
  .f-header{top:10px}
  .f-nav{min-height:58px;padding:7px 8px 7px 16px;gap:12px}
  .f-nav .wordmark{font-size:18px}
  .f-nav-book{min-height:44px;padding:0 13px;font-size:14px}
  .f-hero{padding-top:118px}
  .f-hero-grid{--hs:clamp(40px,11.5vw,56px)}
  .f-hero-premise{font-size:19px;margin-bottom:14px}
  .f-hero-title{text-wrap:balance}
  .f-hero-title>span{display:inline}
  .f-hero-lede{font-size:18px}
  .f-hero-intro{margin-top:22px}
  .f-hero-body{margin-top:14px}
  .f-actions{margin-top:20px}
  .f-hero .f-btn{width:100%;min-height:52px;font-size:15px}
  .f-actions{display:grid;gap:12px}
  .f-actions .f-btn{width:100%}
  .f-stage-art{align-self:start}
  .f-chat{align-self:start;width:calc(100% - 24px);margin-top:62vw;border-radius:14px}
  .f-chat-top{padding:12px 16px}
  .f-chat-tag{display:none}
  .f-chat-thread{padding:6px 16px 2px}
  .f-msg{grid-template-columns:32px 1fr;gap:12px}
  .f-av{width:32px;height:32px;font-size:15px}
  .f-msg p{font-size:15px}
  .f-chat-foot{padding:13px 16px 15px}
  .f-ending{--art-top:300px;min-height:0;background:linear-gradient(var(--paper) 0 calc(var(--art-top) + 30px),var(--deep-dark) 0)}
  .f-ending::before{height:44vw}
  .f-ending::after{top:calc(var(--art-top) + 75vw);bottom:auto;height:60vw;background:linear-gradient(rgba(23,61,54,0),var(--deep-dark) 70%)}
  .f-ending-art{width:170vw;max-width:none;left:-38vw}
  .f-footer{margin-top:108vw;padding-bottom:28px}
  .f-ending:not(:has(.f-cta)){--art-top:0px}
  .f-ending:not(:has(.f-cta))::before{height:30vw}
  .f-footer-grid{row-gap:40px}
  .f-footer-links{gap:16px}
  .fresh .f-footer-links a{font-size:15px;min-height:44px}
  .f-footer-base{flex-direction:column;gap:8px}
}
@media (max-width:440px){
  .f-nav>.f-nav-book{display:none}
  .f-menu{margin-left:auto}
}

/* C only: hero in two tidy columns, with a quieter eyebrow line */
@media (min-width:961px){
  .f-hero-grid{--hs:clamp(40px,5.3vw,74px)}
  .f-hero-premise{font-size:clamp(18px,1.45vw,20px);color:var(--quiet);margin-bottom:clamp(16px,1.6vw,22px)}
  .f-hero-title{grid-column:1 / span 7;grid-row:2}
  .f-hero-intro{grid-column:8 / -1;grid-row:2;margin-top:.45em;align-self:start;max-width:none}
}


/* ---- Links (6 Oct): one style. A highlighter band sits behind the lower part of the words; on hover it fills them. ---- */
.fresh main p a:not(.btn),.fresh main li a:not(.btn):not(.tr-read-link),.fresh main td a,.fresh main .f-todo-price a,.fresh .f-link{color:var(--deep);font-weight:500;text-decoration:none;padding:0 2px;margin:0 -2px;border-radius:3px;background:linear-gradient(var(--teal-soft),var(--teal-soft)) no-repeat 0 100%/100% 38%;transition:background-size .25s var(--ease),color .2s}
.fresh main p a:not(.btn):hover,.fresh main li a:not(.btn):not(.tr-read-link):hover,.fresh main td a:hover,.fresh main .f-todo-price a:hover,.fresh .f-link:hover{color:var(--teal-ink);background-size:100% 100%}
.fresh main .f-hero-premise a{background:none;padding:0;margin:0;font-weight:inherit;color:inherit}
.fresh main .f-hero-premise a:hover{color:var(--deep)}
.f-arr{display:inline-block;width:20px;height:12px;margin-left:3px;vertical-align:-1px;transition:transform .25s var(--ease)}
a:hover .f-arr{transform:translateX(3px)}


/* ---- Shared quote (6 Oct): every pull quote on the site. The teal rule draws down as it scrolls in. ---- */
.f-quote{position:relative;padding-left:24px;font:300 var(--t-bridge)/1.25 var(--serif);letter-spacing:-.02em;color:var(--deep);text-wrap:balance}
.f-quote strong{font-weight:400}
.f-quote::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:2px;background:var(--teal);transform-origin:top;transition:transform .6s var(--ease) .2s}
html.js [data-reveal]:not(.is-in) .f-quote::before,html.js [data-reveal]:not(.is-in).f-quote::before{transform:scaleY(0)}
@media (max-width:760px){.f-quote{padding-left:18px}}

/* ---- Small print: one colour everywhere. ---- */
.f-small{font-size:14px;line-height:1.6;color:var(--small-print);text-wrap:pretty}

/* ---- Form fields: the button's hand. Ink line, paper fill, teal on focus. ---- */
.bk-form input,.bk-form textarea{background:var(--paper);border:1.5px solid var(--ink);border-radius:14px 18px 13px 17px / 17px 13px 18px 14px;transition:border-color .2s,box-shadow .2s}
.bk-form input:focus-visible,.bk-form textarea:focus-visible{outline:none;border-color:var(--teal-ink);box-shadow:0 0 0 3px var(--teal-soft)}
.bk-form input::placeholder,.bk-form textarea::placeholder{color:var(--soft)}
.bk-form [aria-invalid="true"]{border-color:var(--pink-ink)}
.bk-form .err{color:var(--pink-ink)}


/* Wide scene hero (service pages, from the Tea Room): words first on plain paper in an editorial split, title large on
   the left, intro and buttons on the right; then a wide painting as a strip, every edge dissolving into the paper.
   Markup: section.f-hero-wide > figure.f-wide-art (first, so it can sit outside the wrap) + .f-wrap > .f-wide-text
   (.f-hero-premise, .f-wide-title, .f-wide-lede, .f-wide-actions). The painting's own paper is whitened so multiply melts it in. */
.f-hero-wide{display:flex;flex-direction:column-reverse}
section.f-hero-wide{padding-top:0}
.f-hero-wide > .f-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding-top:clamp(150px,13vw,200px)}
.f-hero-wide .f-wide-text{display:contents}
.f-hero-wide .f-hero-premise{grid-column:1 / -1;margin:0 0 clamp(20px,2vw,28px)}
.f-hero-wide .f-wide-title{grid-column:1 / span 7;margin:0;padding-right:24px;font:300 clamp(46px,5.4vw,80px)/1.04 var(--serif);letter-spacing:-.04em;color:#1b3832;text-wrap:balance}
.f-hero-wide .f-wide-lede{grid-column:8 / -1;grid-row:2;max-width:none;margin:0;font:400 19px/1.6 var(--sans);letter-spacing:0;color:var(--deep);text-wrap:pretty}
.f-hero-wide .f-wide-actions{grid-column:8 / -1;display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:28px}
.f-hero-wide .f-wide-actions .f-btn{min-height:50px;padding:0 20px;font-size:14.5px}
.f-hero-wide .f-wide-art{position:relative;width:min(1440px,100%);margin:clamp(40px,4vw,64px) auto 0}
.f-hero-wide .f-wide-art picture{mix-blend-mode:multiply}
.f-hero-wide .f-wide-art picture,.f-hero-wide .f-wide-art img{display:block;width:100%}
.f-hero-wide .f-wide-art img{height:auto;aspect-ratio:2.35;object-fit:cover;object-position:50% 55%;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 14%,#000 84%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 14%,#000 84%,transparent);mask-composite:intersect}
@media (prefers-reduced-motion:no-preference){
  html.js .f-hero-wide .f-hero-premise,html.js .f-hero-wide .f-wide-title,html.js .f-hero-wide .f-wide-lede,html.js .f-hero-wide .f-wide-actions{animation:f-rise 1.1s var(--ease) both}
  html.js .f-hero-wide .f-wide-title{animation-delay:.06s}
  html.js .f-hero-wide .f-wide-lede{animation-delay:.2s}
  html.js .f-hero-wide .f-wide-actions{animation-delay:.28s}
  html.js .f-hero-wide .f-wide-art picture{animation:f-wide-fade 1.8s var(--ease) .25s both}
  html.js .f-wide-tag{animation:f-rise 1s var(--ease) 1.1s both}
}
@keyframes f-wide-fade{0%{opacity:0;transform:translateY(14px)}}
/* Below 1100px the two columns get too narrow for the buttons side by side, so the words stack in one column. */
@media (max-width:1100px){
  .f-hero-wide .f-wide-title,.f-hero-wide .f-wide-lede,.f-hero-wide .f-wide-actions{grid-column:1 / -1;grid-row:auto}
  .f-hero-wide .f-wide-title{padding-right:0}
  .f-hero-wide .f-wide-lede{max-width:560px;margin-top:24px}
}
@media (max-width:960px){
  .f-hero-wide > .f-wrap{padding-top:136px}
  .f-hero-wide .f-wide-art img{aspect-ratio:auto;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 10%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 10%,#000 88%,transparent);mask-composite:intersect}
}
@media (max-width:760px){
  .f-hero-wide .f-wide-title{font-size:clamp(40px,11.5vw,56px);line-height:1.06}
  .f-hero-wide .f-wide-lede{font-size:18px}
  .f-hero-wide .f-wide-actions{display:grid;gap:12px}
  .f-hero-wide .f-wide-actions .f-btn{width:100%;min-height:52px;font-size:15px}
  .f-hero-wide .f-wide-art{margin-top:24px}
}

/* Glen's portrait (homepage chapter 1 and About): no box. The greyscale photo is multiplied onto light teal inside the
   pebble shape the buttons use, so the grey wall behind him becomes brand teal. A thin drawn outline sits offset behind
   it, like each button's second line. Markup: figure.f-portrait > span.f-portrait-shape > img. The photo is temporary. */
.f-portrait{position:relative;overflow:visible;display:block;background:none;border:0;border-radius:0;box-shadow:none}
.f-portrait::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/story/img/portrait-outline.svg) center / 100% 100% no-repeat;opacity:.45;transform:translate(12px,12px) rotate(1.2deg);transition:transform .6s var(--ease)}
.f-portrait:hover::before{transform:translate(6px,6px) rotate(.4deg)}
.f-portrait-shape{display:block;width:100%;height:100%;background:var(--teal-soft);-webkit-mask:url(/story/img/portrait-shape.svg) center / 100% 100% no-repeat;mask:url(/story/img/portrait-shape.svg) center / 100% 100% no-repeat}
.f-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;mix-blend-mode:multiply}
/* The second photo mirrors the first: shape and outline flipped, the outline offset to the other side. */
.f-portrait--flip::before{background-image:url(/story/img/portrait-outline-flip.svg);transform:translate(-12px,12px) rotate(-1.2deg)}
.f-portrait--flip:hover::before{transform:translate(-6px,6px) rotate(-.4deg)}
.f-portrait--flip .f-portrait-shape{-webkit-mask-image:url(/story/img/portrait-shape-flip.svg);mask-image:url(/story/img/portrait-shape-flip.svg)}
.f-portrait-wait{display:grid;place-items:center;width:100%;height:100%;font:500 13px/1 var(--mono);letter-spacing:-.01em;color:var(--teal-ink)}
/* .f-portrait is position:relative, so .f-photo's sticky top:120px became a 120px push onto the heading once stacked. */
@media (max-width:960px){
  .f-portrait{top:auto}
}
@media (max-width:760px){
  .f-portrait::before{transform:translate(8px,8px) rotate(1deg)}
  .f-portrait--flip::before{transform:translate(-8px,8px) rotate(-1deg)}
}

/* Picture labels on the wide heroes: the home hero's paper tags, one per painting, saying where in the story we are.
   Each page places its tag over its subject with --tag-x / --tag-y. 960px and less: a small caption under the picture. */
.f-wide-art .f-stage-tags{position:absolute;inset:0;margin:0}
.f-wide-tag{left:var(--tag-x);top:var(--tag-y);translate:-50% 0}
@media (max-width:960px){
  .f-wide-art .f-stage-tags{position:static;width:var(--wrap);margin:16px auto 0}
  .f-wide-art .f-wide-tag{position:static;display:block;padding:0;background:none;box-shadow:none;border-radius:0;translate:none;font-size:13px;line-height:1.5;color:var(--quiet);white-space:normal}
  .f-wide-art .f-wide-tag>span{display:inline}
  .f-wide-art .f-wide-tag::before,.f-wide-art .f-wide-tag::after{content:none}
}
/* Launch photos (6 Oct): cut-outs on transparent ground, so the pebble's teal shows behind Glen. The iPad shot is
   landscape: anchor it to the right so the face, pen and iPad stay in the frame. */
.f-portrait-ipad{object-position:72% 0!important}
.f-portrait-top{object-position:50% 0!important}
@media (max-width:760px){
  /* Phones: keep the portrait frame tall (4:5) so the whole upper body shows, not a zoomed-in face. */
  .f-photo.f-portrait{height:auto;aspect-ratio:4 / 5;width:min(calc(100% - 14px),340px)}
}

/* Gate 6 Oct (Simon): 44 px tap targets on phones without moving the layout. */
.fresh .f-footer-base a{min-width:44px;justify-content:center}
.wordmark{padding-block:13px;margin-block:-13px}
.f-hero-premise a{display:inline-block;padding-block:10px;margin-block:-10px}

/* Gate 6 Oct (Simon): text never fades in from invisible. Blocks still lift gently. */
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal],html.js [data-reveal]:not(.is-in){opacity:1}
  html.js .f-chat .f-msg{opacity:1}
}
@keyframes f-wide-fade{0%{transform:translateY(14px)}}
@keyframes f-rise{0%{transform:translateY(.35em)}}
/* Second price on its own line under the main price (Digital Home rows). */
.f-todo-price-alt{display:block;margin-top:4px;font:400 15px/1.4 var(--sans);letter-spacing:0;color:var(--body);white-space:normal}
/* Phone menu uses the body font (Kit v1.2). */
.fresh .f-menu>div a:not(.btn){font-family:var(--sans)}
@media (max-width:600px){ .f-allin-punch{margin-top:28px} }

/* Gate re-check 6 Oct (Simon): bigger tap areas, no layout move. */
.fresh main p.f-hero-premise a:not(.btn){display:inline-block;padding-block:10px;margin-block:-10px}
.fresh .f-footer-links a{min-width:44px}
.f-rate span{min-height:44px;box-sizing:border-box}
.f-rate input{min-height:36px}