/* Education logbooks by Amy Garside Media: the front page moment ("the shelf").
   Her brand holds the page (logo, paper white, graphite, Hedvig Letters Serif, Rethink Sans, magenta buttons).
   Each logbook is an exercise book in its own colour: card cover, name label, staples, a block of pages. */
@font-face { font-family: "Hedvig Letters Serif"; src: url("fonts/hedvig-letters-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rethink Sans"; src: url("fonts/rethink-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  --paper: #F3F4F1; --sheet: #FFFFFF; --graphite: #1F2125; --soft: #5A5E66; --pencil: #A7ABB2; --rule: #DCDEDA;
  --gel: #D6006F; --gel-deep: #A8005A;
  --serif: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
  --sans: "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bar: 4.5rem; --gut: clamp(1.1rem, 4.6vw, 4.75rem);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--graphite); font: 400 1.0625rem/1.6 var(--sans); font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gel); outline-offset: 4px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .7rem 1.5rem; border: 1.5px solid transparent; border-radius: 3px; font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .18s, color .18s, border-color .18s, transform .18s var(--ease), box-shadow .18s; }
.btn-gel { background: var(--gel); color: #fff; }
.btn-gel:hover { background: var(--gel-deep); transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(168, 0, 90, .7); }
.btn-paper { background: var(--sheet); color: var(--graphite); box-shadow: 0 3px 0 rgba(0, 0, 0, .28); }
.btn-paper:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

/* ------------------------------------------------------------ the bar */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar); display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); padding: 0 var(--gut); background: rgba(243, 244, 241, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.bar-brand { margin-right: auto; display: inline-flex; align-items: center; gap: .95rem; text-decoration: none; }
.bar-brand img { display: block; height: 2.15rem; width: auto; }
.bar-brand .bar-mono { display: none; }
.bar-brand span { padding-left: .95rem; border-left: 1px solid var(--pencil); font: 600 1rem/1.15 var(--sans); }
.bar-nav { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.bar-nav a { font-weight: 500; text-decoration: none; padding: .4rem 0; background: linear-gradient(var(--gel), var(--gel)) no-repeat 0 100% / 0 2px; transition: background-size .25s var(--ease); }
.bar-nav a:hover { background-size: 100% 2px; }
.bar .btn { min-height: 2.75rem; padding: .55rem 1.15rem; }

/* ------------------------------------------------------------ the first screen: what this is, then the shelf */
.hero { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--bar) + clamp(1.4rem, 6vh, 3.9rem)) var(--gut) clamp(1rem, 3vh, 2rem); }
.hero-text { text-align: center; }
.hero h1 { max-width: 16.5em; margin: 0 auto; font: 400 clamp(2.3rem, 5.1vw, 4.75rem)/1.04 var(--serif); letter-spacing: -.022em; text-wrap: balance; }
.hero-text p { max-width: 37rem; margin: clamp(.8rem, 2vh, 1.35rem) auto 0; font-size: clamp(1.0625rem, 1.3vw, 1.22rem); line-height: 1.55; color: var(--soft); text-wrap: pretty; }

.shelf { --bw: clamp(11.5rem, min(19vw, 31vh), 17.5rem); align-self: center; display: grid; grid-template-columns: repeat(4, var(--bw)); justify-content: center; gap: clamp(1.1rem, 2.8vw, 2.9rem); margin-top: clamp(1.5rem, 5vh, 3.25rem); perspective: 1700px; perspective-origin: 50% 20%; }
.shelf li { display: block; }

/* ------------------------------------------------------------ one exercise book */
.book { --lift: 0px; --rx: 7deg; --ry: 0deg; --open: 0deg; position: relative; display: block; width: var(--bw); aspect-ratio: 3 / 4; margin: 0; padding: 0; border: 0; background: none; color: var(--on); text-decoration: none; cursor: pointer; transform-style: preserve-3d;
  transform: translate3d(0, var(--lift), 70px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--r));   /* held forward of the page so every part of it can be reached */ transition: transform .5s var(--ease); -webkit-tap-highlight-color: transparent; }
.book:hover, .book:focus-visible, .book.blank:focus-within { --lift: -16px; --rx: 1deg; --open: -34deg; }
.book:focus-visible { outline-offset: 12px; }
/* the shadow it throws on the desk: tighter when it lies flat, wider and softer when it is lifted */
.bk-shadow { position: absolute; left: 4%; right: -2%; bottom: -9%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 33, 37, .42), rgba(31, 33, 37, 0)); filter: blur(7px); transform: translateZ(-30px); opacity: .8; transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s; }
.book:hover .bk-shadow, .book:focus-visible .bk-shadow, .book.blank:focus-within .bk-shadow { opacity: .5; filter: blur(14px); transform: translateZ(-30px) translateY(14px) scale(1.08); }
/* the block of pages: white, ruled, a little thicker than the cover at the fore edge and the foot */
.bk-inside { position: absolute; inset: 0; border-radius: 2px 5px 5px 2px; background: repeating-linear-gradient(to bottom, #fff 0, #fff 6.2%, var(--rule) 6.2%, var(--rule) 6.7%) 0 14% / 100% 86% no-repeat, #fff; box-shadow: 1px 1px 0 #fff, 2px 2px 0 #cfd1cc, 3px 3px 0 #fff, 4px 4px 0 #c6c8c3, 5px 5px 0 #fdfdfc, 6px 6px 0 #bfc1bc; overflow: hidden; }
.peek { position: absolute; right: 7%; top: 12%; width: 30%; display: grid; gap: 9%; justify-items: end; }
.peek svg { display: block; width: 100%; height: auto; }
.peek b { font: 400 calc(var(--bw) * .1)/1 var(--serif); color: var(--graphite); white-space: nowrap; }
.peek i { display: block; width: 100%; height: calc(var(--bw) * .014); border-radius: 2px; background: #2a2c31; opacity: .7; }
.peek i.g { background: #0A7D4F; opacity: .85; }
.peek i.s { width: 60%; }
.peek-yours i { background: var(--pencil); opacity: .5; }
/* the cover: coloured card with a grain, a darker fold at the spine, two staples */
.bk-cover { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; padding: 9% 8% 8% 12%; border-radius: 2px 5px 5px 2px; background: var(--grain), linear-gradient(90deg, var(--c2) 0, var(--c2) 3.5%, rgba(0, 0, 0, .14) 4%, rgba(255, 255, 255, .1) 6.5%, rgba(255, 255, 255, 0) 16%), linear-gradient(118deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .1)), var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .12); transform-origin: 0 50%; transform: rotateY(var(--open)); transition: transform .55s var(--ease), background-color .35s; backface-visibility: hidden; }
.staple { position: absolute; left: 2.2%; width: 1.5%; min-width: 3px; height: 9%; border-radius: 2px; background: linear-gradient(90deg, #7f8389, #eceef0 45%, #9a9ea4); box-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.staple.a { top: 23%; } .staple.b { bottom: 23%; }
.bk-word { align-self: start; font: 400 calc(var(--bw) * .148)/1.02 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.book[data-book="pastoral"] .bk-word { font-size: calc(var(--bw) * .102); line-height: 1.06; }
/* the name label, as on the cover of the drama journal */
.bk-label { display: block; padding: 2.4%; background: #F7F7F3; color: var(--graphite); border-radius: 2px; transform: rotate(-1.2deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 8px 16px -10px rgba(0, 0, 0, .55); }
.bk-rows { display: grid; gap: calc(var(--bw) * .022); padding: 5% 6% 6%; border: 1.5px solid var(--c); border-radius: 1px; }
.blank .bk-rows { border-color: var(--pencil); }
.bk-rows > span { display: grid; gap: .1em; padding-bottom: .22em; border-bottom: 1px solid rgba(31, 33, 37, .32); }
.bk-rows i { font: 500 calc(var(--bw) * .043)/1.2 var(--sans); font-style: normal; color: var(--soft); }
.bk-rows b { font: 400 calc(var(--bw) * .066)/1.15 var(--serif); }

/* the last book is blank until you write your subject on it */
.book.blank { --c: #FBFBF9; --c2: #e4e5e1; --on: #1F2125; cursor: default; }
.book.blank:hover, .book.blank:focus-within { --open: 0deg; }   /* it lifts but stays shut, so you can write on it */
.book.blank .bk-cover { box-shadow: inset 0 0 0 1px var(--pencil); }
.bk-write { align-self: start; display: grid; gap: .35em; cursor: text; }
.bk-write span { font: 500 calc(var(--bw) * .05)/1.2 var(--sans); color: var(--soft); transition: color .3s; }
.bk-write input { width: 100%; padding: 0 0 .12em; border: 0; border-bottom: 1.5px solid var(--pencil); border-radius: 0; background: none; color: inherit; font: 400 calc(var(--bw) * .135)/1.1 var(--serif); letter-spacing: -.02em; outline: none; transition: border-color .3s; }
.bk-write input::placeholder { color: var(--pencil); opacity: 1; }
.bk-write input:focus-visible { border-bottom-color: var(--gel); }
.bk-go { display: block; width: calc(100% - 6%); margin: 4% 3% 3%; min-height: 2.4rem; border: 0; border-radius: 2px; background: var(--graphite); color: #fff; font: 600 calc(var(--bw) * .058)/1 var(--sans); cursor: pointer; opacity: .35; transition: opacity .25s, background-color .2s, transform .15s; }
.blank.inked .bk-go { opacity: 1; background: var(--gel); }
.blank.inked .bk-go:hover { background: var(--gel-deep); }
.bk-go:active { transform: translateY(1px); }
/* written on: the blank card takes ink and becomes a book of its own */
.book.blank.inked { --c: #26282d; --c2: #17181b; --on: #ffffff; }
.book.blank.inked .bk-cover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.blank.inked .bk-write span { color: rgba(255, 255, 255, .72); }
.blank.inked .bk-write input { border-bottom-color: rgba(255, 255, 255, .5); }

.shelf-note { margin-top: clamp(1.4rem, 4.2vh, 2.6rem); text-align: center; font-size: .98rem; color: var(--soft); }

/* ------------------------------------------------------------ picking one up: its colour takes the screen and you arrive at its cover */
.flood { position: fixed; z-index: 40; left: 0; top: 0; width: 100px; height: 100px; border-radius: 3px; background: var(--grain), var(--c, #116149); visibility: hidden; pointer-events: none; will-change: transform, border-radius; transform-origin: 0 0; }
.arrive { position: fixed; z-index: 41; inset: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "head label" "btns note"; gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 5vw, 5rem); padding: clamp(4.5rem, 12vh, 7rem) clamp(1.5rem, 5.6vw, 5.5rem) clamp(1.5rem, 6vh, 3.5rem) clamp(2.4rem, 6.6vw, 6.5rem); color: var(--on, #fff); }
.arrive .staple { left: 9px; width: 4px; height: 34px; }
.arrive-head { grid-area: head; align-self: center; }
.arrive h2 { font: 400 clamp(2.4rem, 6.2vw, 5.9rem)/1.02 var(--serif); letter-spacing: -.022em; text-wrap: balance; outline: none; }
.arrive-head p { margin-top: clamp(1rem, 2.4vh, 1.6rem); max-width: 34rem; font-size: clamp(1.0625rem, 1.5vw, 1.3rem); line-height: 1.5; }
.arrive-label { grid-area: label; align-self: center; justify-self: end; width: min(100%, 26rem); padding: 7px; background: #F7F7F3; color: var(--graphite); border-radius: 3px; transform: rotate(-1.4deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .22), 0 10px 22px -14px rgba(0, 0, 0, .7); }
.arrive-label dl { display: grid; gap: .7rem; padding: 1rem 1.15rem 1.15rem; border: 2px solid var(--c, #116149); border-radius: 2px; }
.arrive-label dl > div { display: grid; grid-template-columns: 4.6rem 1fr; align-items: baseline; padding-bottom: .15rem; border-bottom: 1px solid rgba(23, 24, 28, .38); }
.arrive-label dt { font-size: .82rem; font-weight: 500; color: var(--soft); }
.arrive-label dd { font: 400 clamp(1.25rem, 1.9vw, 1.6rem)/1.2 var(--serif); }
.arrive-note { grid-area: note; align-self: end; justify-self: end; max-width: 26rem; font-size: .95rem; text-align: right; opacity: .9; }
.arrive-btns { grid-area: btns; align-self: end; }

/* ------------------------------------------------------------ small screens: two books by two */
@media (max-width: 1340px) { .bar-brand span { display: none; } }
@media (max-width: 899px) {
  :root { --bar: 3.75rem; }
  .bar .btn { padding: .5rem .8rem; font-size: .95rem; }
  .hero { padding-top: calc(var(--bar) + 1.6rem); }
  .shelf { --bw: min(41vw, 15rem); grid-template-columns: repeat(2, var(--bw)); gap: 2.2rem 1.4rem; perspective: 1100px; }
  .book { --rx: 4deg; }
  .arrive { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; grid-template-areas: "head" "label" "note" "btns"; padding-top: 4.5rem; }
  .arrive-label { justify-self: start; align-self: start; }
  .arrive-note { justify-self: start; text-align: left; }
}
@media (max-width: 560px) {
  .bar-brand .bar-logo { display: none; }
  .bar-brand .bar-mono { display: block; height: 2.6rem; }
}
@media (hover: none) { .book:hover { --lift: 0px; --rx: 4deg; --open: 0deg; } }
@media (prefers-reduced-motion: reduce) { .book, .bk-cover, .bk-shadow { transition: none; } }

/* the cover you arrive at carries the book's own colour, grain and spine */
.arrive { background: var(--grain), linear-gradient(90deg, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .1) 14px, rgba(0, 0, 0, 0) 60px), var(--c, #116149); }
.shelf li { transform-style: preserve-3d; }

/* ============================================================ the rest of the front page ============================================================ */
html { scroll-behavior: smooth; }
html.held { overflow: hidden; }
[id] { scroll-margin-top: calc(var(--bar) + 1rem); }
.skip { position: fixed; z-index: 60; left: 1rem; top: -4rem; padding: .7rem 1rem; background: var(--graphite); color: #fff; border-radius: 3px; transition: top .15s; }
.skip:focus { top: 1rem; }
h2, h3 { margin: 0; }
ol, dl, dd { margin: 0; padding: 0; }
ol { list-style: none; }
.btn-ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn-ghost:hover { background: rgba(255, 255, 255, .16); }
.arrive-btns { display: flex; flex-wrap: wrap; gap: .7rem; }

/* the menu: links in the bar where there is room, behind a Menu button where there is not */
.bar-menu { display: none; min-height: 2.75rem; padding: .5rem .9rem; border: 1.5px solid var(--graphite); border-radius: 3px; background: transparent; color: var(--graphite); font: 600 1rem/1.2 var(--sans); cursor: pointer; }
.bar-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 1099px) {
  .bar { gap: .6rem; }
  .bar-menu { display: inline-flex; align-items: center; }
  .bar-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: .4rem var(--gut) 1rem; background: var(--paper); border-bottom: 1px solid var(--pencil); box-shadow: 0 18px 28px -18px rgba(31, 33, 37, .45); }
  .bar.open .bar-nav { display: flex; }
  .bar-nav a { min-height: 3.1rem; font-size: 1.1rem; border-bottom: 1px solid var(--rule); background: none; }
}

/* ------------------------------------------------------------ sections */
.sec { max-width: 84rem; margin: 0 auto; padding: clamp(4.25rem, 12vh, 8rem) var(--gut) 0; }
.sec-head h2, .how-text h2, .about-text h2, .send-text h2 { font: 400 clamp(2rem, 3.7vw, 3.35rem)/1.05 var(--serif); letter-spacing: -.021em; text-wrap: balance; }
.sec-head p, .how-text > p:not(.how-fine) { max-width: 39rem; margin-top: .95rem; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--soft); text-wrap: pretty; }

/* ------------------------------------------------------------ the same book for each subject: one open book that turns its page */
.how { position: relative; margin-top: clamp(3rem, 9vh, 6rem); }
.how-pin { display: grid; gap: 1.6rem; padding: 0 var(--gut); max-width: 98rem; margin: 0 auto; }
.how-tabs { display: grid; margin-top: 1.5rem; border-top: 1px solid var(--pencil); }
.how-tabs button { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 3rem; padding: .55rem .1rem; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--soft); font: 500 1.0625rem/1.25 var(--sans); text-align: left; cursor: pointer; transition: color .2s, padding-left .25s var(--ease); }
.how-tabs button::before { content: ""; flex: none; width: .8rem; height: 1.1rem; border-radius: 1px 3px 3px 1px; background: var(--c); opacity: .4; transition: opacity .2s, transform .25s var(--ease); }
.how-tabs button:hover { color: var(--graphite); padding-left: .35rem; }
.how-tabs button[aria-pressed="true"] { color: var(--graphite); font-weight: 650; }
.how-tabs button[aria-pressed="true"]::before { opacity: 1; transform: scale(1.18) rotate(-4deg); }
.how-fine { margin-top: 1rem; font-size: .92rem; color: var(--soft); }
.spread { --c: #116149; --sp: clamp(.45rem, .8vw, .75rem); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--sp); border-radius: 6px; background: var(--grain), var(--c); box-shadow: 0 2px 0 rgba(0, 0, 0, .16), 0 34px 60px -32px rgba(31, 33, 37, .6); transition: background-color .5s; perspective: 2400px; }
.leaf { position: relative; min-width: 0; padding: clamp(1rem, 1.7vw, 1.6rem) clamp(1rem, 1.9vw, 1.8rem) clamp(1.1rem, 1.9vw, 1.8rem); background: #fff; }
.leaf-l { border-radius: 3px 3px 0 0; }
.leaf-r { border-radius: 0 0 3px 3px; border-top: 1px solid var(--rule); }
.spread-turn { display: none; }
.lf-k { display: inline-block; padding-top: .55rem; border-top: 2.5px solid var(--c); font: 650 1rem/1.25 var(--sans); }
.lf-cap + .lf-k, .lf-strength + .lf-k { margin-top: 1.35rem; }
.lf-img { display: block; width: 100%; height: auto; max-height: 27vh; aspect-ratio: 16 / 9; object-fit: cover; margin-top: .7rem; border-radius: 3px; }
.lf-cap { margin-top: .55rem; font-size: .95rem; line-height: 1.45; color: var(--soft); }
.lf-write { margin-top: .65rem; font: 400 clamp(1.05rem, 1.3vw, 1.22rem)/1.55 var(--serif); }
.lf-write .g { color: #0A7D4F; }
.lf-band { margin-top: .5rem; }
.lf-band b { display: block; font: 400 clamp(3.2rem, 5.6vw, 5.2rem)/1 var(--serif); letter-spacing: -.035em; }
.lf-band span { display: block; margin-top: .35rem; font-size: .95rem; line-height: 1.45; color: var(--soft); }
.lf-rows { margin-top: 1rem; border-top: 1px solid var(--pencil); }
.lf-rows li { display: flex; justify-content: space-between; gap: 1rem; padding: .44rem 0; border-bottom: 1px solid var(--rule); line-height: 1.3; }
.lf-rows li b { font-weight: 500; color: var(--soft); white-space: nowrap; }
.lf-rows li.you, .lf-rows li.you b { font-weight: 650; color: var(--graphite); }
.lf-rows.ticks li { justify-content: flex-start; gap: .6rem; }
.lf-rows svg, .lf-cards svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .14rem; fill: none; stroke: #0A7D4F; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.lf-cards { display: grid; gap: .45rem; margin-top: .7rem; }
.lf-cards li { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .8rem; border: 1.5px solid var(--pencil); border-radius: 4px; font-size: .98rem; line-height: 1.3; }
.lf-cards li.on { border-color: var(--graphite); background: #FBF2D9; font-weight: 600; }
.lf-cards svg { stroke: var(--graphite); }
.lf-strength { margin-top: .8rem; }
.lf-strength b { display: block; font: 400 clamp(1.9rem, 3vw, 2.7rem)/1.02 var(--serif); letter-spacing: -.02em; }
.lf-strength span { display: block; margin-top: .25rem; font-size: .95rem; color: var(--soft); }
.lf-breath { display: flex; align-items: center; gap: 1rem; margin-top: .7rem; color: var(--soft); }
.lf-breath i { width: 3.3rem; height: 3.3rem; border-radius: 50%; border: 3px solid #E2A21B; background: #FBF2D9; animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.7); } 45%, 55% { transform: scale(1); } }
.lf-sun { display: grid; grid-template-columns: clamp(6rem, 9vw, 8.5rem) minmax(0, 1fr); align-items: center; gap: 1.1rem; margin-top: .6rem; }
.lf-sun svg { display: block; width: 100%; height: auto; }
.lf-sun b { display: block; font: 650 1.08rem/1.25 var(--sans); }
.lf-sun span { display: block; color: var(--soft); }
@media (min-width: 900px) {
  .how { height: calc(100svh + 170vh); }
  .how-pin { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); grid-template-columns: minmax(0, .78fr) minmax(0, 1.6fr); align-items: center; gap: clamp(1.75rem, 4.4vw, 5rem); padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-self: center; }
  .leaf-l { border-radius: 3px 0 0 3px; box-shadow: inset -24px 0 26px -24px rgba(31, 33, 37, .3); }
  .leaf-r { border-radius: 0 3px 3px 0; border-top: 0; box-shadow: inset 24px 0 26px -24px rgba(31, 33, 37, .3); }
  .spread-turn { display: block; position: absolute; z-index: 3; top: var(--sp); bottom: var(--sp); left: 50%; width: calc(50% - var(--sp)); border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #e9eae6, #fff 22%, #fbfbfa); box-shadow: 0 14px 34px -10px rgba(31, 33, 37, .4); transform-origin: 0 50%; visibility: hidden; opacity: 0; }
}

/* ------------------------------------------------------------ how a logbook gets built: four steps on one line that draws itself */
.steps { --p: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.8vw, 2.8rem); margin-top: clamp(2.2rem, 5vh, 3.2rem); padding-top: 3.1rem; counter-reset: step; }
.steps::before, .steps::after { content: ""; position: absolute; left: 0; right: 0; top: 1rem; height: 2px; background: var(--pencil); }
.steps::after { background: var(--gel); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.steps li { position: relative; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; z-index: 1; left: 0; top: -3.1rem; display: grid; place-items: center; width: 2.05rem; height: 2.05rem; border: 1.5px solid var(--graphite); border-radius: 50%; background: var(--paper); font: 600 .95rem/1 var(--sans); }
.steps h3 { font: 400 clamp(1.3rem, 1.8vw, 1.55rem)/1.15 var(--serif); letter-spacing: -.01em; }
.steps p { margin-top: .5rem; color: var(--soft); line-height: 1.5; }

/* ------------------------------------------------------------ prices */
.price-box { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 1.4rem clamp(2rem, 5.5vw, 5.5rem); margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.price-rows { grid-row: span 4; border-top: 2px solid var(--graphite); }
.price-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.05rem 0; border-bottom: 1px solid var(--pencil); }
.price-rows dt { font-size: 1.0625rem; line-height: 1.35; }
.price-rows dd { font: 400 clamp(1.9rem, 2.9vw, 2.6rem)/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.price-pilot { padding-left: 1rem; border-left: 3px solid var(--gel); font-weight: 600; line-height: 1.5; }
.price-notes { display: grid; gap: .8rem; color: var(--soft); line-height: 1.55; }

/* ------------------------------------------------------------ data, about, questions */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5.5vw, 5.5rem); margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.facts div { padding: 1.05rem 0 1.15rem; border-top: 1px solid var(--pencil); }
.facts dt { font: 650 1.0625rem/1.3 var(--sans); }
.facts dd { margin-top: .35rem; color: var(--soft); line-height: 1.55; }
.about { display: grid; grid-template-columns: clamp(9rem, 20vw, 17rem) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 5rem); }
.about-photo { display: block; width: 100%; height: auto; border-radius: 4px; }
.about-text p { max-width: 41rem; margin-top: 1rem; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); line-height: 1.6; }
.about-text a { text-decoration-color: var(--gel); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.faq-list { max-width: 54rem; margin-top: clamp(1.6rem, 3.5vh, 2.3rem); border-top: 2px solid var(--graphite); }
.faq-list details { border-bottom: 1px solid var(--pencil); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 0; font: 400 clamp(1.2rem, 1.75vw, 1.5rem)/1.2 var(--serif); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: .95rem; height: .95rem; background: linear-gradient(var(--graphite), var(--graphite)) 50% / 100% 2px no-repeat, linear-gradient(var(--graphite), var(--graphite)) 50% / 2px 100% no-repeat; transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { max-width: 44rem; padding: 0 0 1.2rem; color: var(--soft); line-height: 1.6; }

/* ------------------------------------------------------------ send me one unit: the form is a ruled page */
.send { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(1.5rem, 5vw, 5rem); padding-bottom: clamp(4rem, 11vh, 7rem); }
.send-text p { max-width: 31rem; margin-top: 1rem; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--soft); }
.send-form { padding: clamp(1.25rem, 2.6vw, 2.2rem); background: var(--sheet); border-radius: 3px; box-shadow: 0 0 0 1px rgba(31, 33, 37, .06), 0 28px 54px -30px rgba(31, 33, 37, .5); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send-fields { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); align-items: baseline; gap: .95rem 1rem; }
.send-fields label { font-size: .98rem; font-weight: 600; }
.send-fields input, .send-fields textarea { width: 100%; padding: .4rem 0 .35rem; border: 0; border-bottom: 1.5px solid var(--pencil); border-radius: 0; background: none; color: var(--graphite); font: 400 1.1rem/1.4 var(--sans); outline: none; transition: border-color .2s; }
.send-fields textarea { padding: .6rem .7rem; border: 1.5px solid var(--pencil); border-radius: 3px; resize: vertical; }
.send-fields input:focus-visible, .send-fields textarea:focus-visible { border-color: var(--gel); box-shadow: 0 2px 0 var(--gel); }
.send-fields .help { grid-column: 2; margin-top: -.55rem; font-size: .9rem; color: var(--soft); }
.send-foot { display: grid; gap: 1rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.send-foot .fine { font-size: .9rem; line-height: 1.5; color: var(--soft); }
.send-foot .btn { justify-self: start; min-width: 9rem; }

/* ------------------------------------------------------------ footer */
.foot { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem clamp(1.5rem, 4vw, 3.5rem); padding: 2rem var(--gut) 2.2rem; border-top: 1px solid var(--pencil); font-size: .98rem; }
.foot-logo img { display: block; width: auto; height: 2.2rem; }
.foot-name { font-weight: 600; }
.foot a { text-underline-offset: .22em; }
.foot p:nth-of-type(2) { justify-self: end; }
.credit { grid-column: 1 / -1; color: var(--soft); }
.credit span { color: var(--gel); }
.credit a { gap: .27em; }

@media (max-width: 899px) {
  .hero { min-height: 0; padding-bottom: 2.5rem; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding: 0 0 0 3.2rem; }
  .steps::before, .steps::after { left: 1rem; right: auto; top: .2rem; bottom: .2rem; width: 2px; height: auto; }
  .steps::after { transform-origin: 50% 0; transform: scaleY(var(--p)); }
  .steps li::before { left: -3.2rem; top: 0; }
  .price-box, .facts, .send { grid-template-columns: minmax(0, 1fr); }
  .price-rows { grid-row: auto; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .about-photo { max-width: 11rem; }
  .send-fields { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .send-fields label { margin-top: .7rem; }
  .send-fields .help { grid-column: 1; margin-top: .1rem; }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .foot p:nth-of-type(2) { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .lf-breath i { animation: none; } }
@media print { .bar, .flood, .arrive { display: none; } }

/* ---- first hard look, 11 Nov 2026 ---- */
* { font-variant-ligatures: no-common-ligatures !important; }   /* the headline face has no joined ff, so "different" must not ask for one (the font shorthand would switch it back on, hence important) */
.lf-sum { margin-top: .9rem; font-weight: 600; line-height: 1.45; }
/* the blank book's button is a plain outline until there is a subject, then it takes the brand colour */
.bk-go { background: transparent; color: var(--graphite); box-shadow: inset 0 0 0 1.5px var(--graphite); opacity: 1; }
.blank.inked .bk-go { background: var(--gel); color: #fff; box-shadow: none; }
.bk-write input::placeholder { color: var(--soft); }
/* the data: everything sits inside one line drawn round the school, and the line draws itself as you reach it */
.school { --d: 0; position: relative; margin-top: clamp(2.2rem, 5vh, 3.2rem); padding: clamp(1.6rem, 3.2vw, 2.8rem) clamp(1.1rem, 3vw, 2.8rem) clamp(.6rem, 1.6vw, 1.4rem); }
.school-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.school-line rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: 10px; fill: none; stroke: var(--graphite); stroke-width: 1.5px; stroke-dasharray: 1; stroke-dashoffset: var(--d); }
.school-tag { position: absolute; left: clamp(1.1rem, 3vw, 2.8rem); top: 0; transform: translateY(-50%); padding: 0 .7rem; margin-left: -.7rem; background: var(--paper); font: 650 1rem/1.2 var(--sans); }
.school .facts { margin-top: 0; }
.school .facts div:nth-child(-n+2) { border-top: 0; }
.school-out { margin-top: 1.1rem; padding-left: clamp(1.1rem, 3vw, 2.8rem); color: var(--soft); }
@media (max-width: 899px) { .school .facts div:nth-child(2) { border-top: 1px solid var(--pencil); } }
.lf-eg { margin-top: .7rem; font-size: .95rem; font-weight: 600; color: var(--soft); }
.lf-eg + .lf-band { margin-top: .15rem; }

/* ---- after the design review, 11 Nov 2026 ---- */
.btn-line { background: transparent; border-color: var(--graphite); color: var(--graphite); }
.btn-line:hover { background: var(--graphite); color: #fff; }
/* each subject's next step sits at the foot of its right hand page, so the page is never half empty */
.leaf-r { display: flex; flex-direction: column; }
.lf-go { display: grid; justify-items: start; gap: .6rem; margin-top: auto; padding-top: 1.4rem; }
.lf-go span { font-size: .95rem; color: var(--soft); }
.lf-go .btn { min-height: 2.9rem; padding: .6rem 1.2rem; }
.spread { transform-origin: 50% 0; }
/* the offer to the first two schools is a row of the price list like the others */
.price-rows .pilot dt { max-width: 24rem; }
.price-rows .pilot dd { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
.price-rows { grid-row: span 3; }
.peek b { font-size: calc(var(--bw) * .078); }
.send-fields textarea + .help { margin-top: -.45rem; }
.leaf-r > .lf-k, .leaf-r > .lf-eg { align-self: flex-start; }

/* the journal's own breathing box on the pastoral page */
.lf-boxrow { display: grid; grid-template-columns: clamp(8.5rem, 12.5vw, 11.5rem) minmax(0, 1fr); align-items: center; gap: 1.1rem; margin-top: .6rem; }
.lf-boxrow .lf-cap { margin-top: 0; }
.lf-box { aspect-ratio: 1; }
.bbox { display: block; width: 100%; height: 100%; overflow: visible; }
.bbox-side { font-family: var(--sans); font-size: 30px; font-weight: 650; fill: #5d6b80; opacity: 1; transition: fill .6s, opacity .6s; }
.bbox-side.now { fill: #1f6b62; opacity: 1; }
.bbox-count { font-family: var(--serif); font-size: 150px; paint-order: stroke; stroke: #fff; stroke-width: 12px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.lf-box { width: min(100%, clamp(11rem, 15.5vw, 14.5rem)); margin-top: .7rem; }
.lf-box + .lf-cap { margin-top: .7rem; }
@media (max-width: 899px) { .lf-box { width: min(100%, 15rem); } }

/* ---- after the measured review, 11 Nov 2026 ---- */
.bar-brand span, .bar-nav a { white-space: nowrap; }
.bar-brand { min-height: 2.75rem; }
/* everything you tap is at least 44px high */
.bk-go { min-height: 2.75rem; font-size: max(.82rem, calc(var(--bw) * .058)); }
.bk-write input { min-height: 2.75rem; }
.send-fields input { min-height: 2.75rem; }
.foot-logo { display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot p a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* on a phone the labels on the books keep only their main line, at a size that can be read */
@media (max-width: 560px) {
  .bk-rows i { display: none; }
  .bk-rows b { font-size: calc(var(--bw) * .082); }
  .bk-rows { gap: calc(var(--bw) * .03); }
}
/* with movement turned down the open book is not held on screen while you scroll */
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .how { height: auto; }
  .how-pin { position: static; height: auto; padding-top: 2rem; padding-bottom: 2rem; }
}
/* real pictures of the tutor time journal in the open book */
.lf-shot { max-height: none; aspect-ratio: 16 / 10; object-position: 0 0; box-shadow: 0 0 0 1px rgba(31, 33, 37, .1); }
.leaf-r .lf-shot { max-height: 21vh; }
.lf-cap + .lf-shot { margin-top: 1rem; }