@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/Archivo-400-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexMono-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexMono-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/IBMPlexMono-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  :root {
    --mat: #6b9164;
    --mat-deep: #5d8257;
    --chalk: #f1ecdc;
    --line: rgba(241,236,220,.13);
    --line-major: rgba(241,236,220,.30);
    --ink: #1f2421;
    --ink-2: #4a4f49;
    --cyan: #2b8fc4;
    --red: #c4472f;
    --kraft: #bf9663;
    --stock: #d6d2c5;
    --legal: #f1e6ae;
    --cream: #efe9da;
    --grain: url("/img/grain.png");
    --band: rgba(28,48,26,.35);   /* header/footer tint: keeps small chalk text above 4.5:1 contrast */
    --blue-ink: #185d85;          /* blue for small text on paper (4.7:1) */
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --sans: "Archivo", system-ui, sans-serif;
    --shadow-obj: drop-shadow(1px 3px 2px rgba(18,32,16,.32)) drop-shadow(3px 8px 10px rgba(18,32,16,.18));
    --shadow-card: 0 1px 1px rgba(18,32,16,.18), 3px 10px 22px rgba(18,32,16,.28);
    --shadow-lift: 0 2px 2px rgba(18,32,16,.18), 8px 24px 40px rgba(18,32,16,.34);
    --card-h: 500px;   /* the two blue lines: everything on the mat sits between these */
    --rule: 28px;      /* legal pad line spacing */
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  body {
    font-family: var(--sans);
    color: var(--chalk);
    background:
      var(--grain),
      linear-gradient(var(--line-major) 1px, transparent 1px) 0 0 / 120px 120px,
      linear-gradient(90deg, var(--line-major) 1px, transparent 1px) 0 0 / 120px 120px,
      linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 24px 24px,
      var(--mat);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh; min-height: 100svh;
  }
  body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(120% 90% at 20% 0%, rgba(255,250,230,.10), transparent 60%),
                radial-gradient(90% 80% at 100% 100%, rgba(10,25,10,.18), transparent 70%);
  }
  a { color: inherit; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }
  .defs { position: absolute; width: 0; height: 0; }

  /* ---------- board ---------- */
  .board {
    position: relative; z-index: 1; margin: 22px; min-height: calc(100vh - 44px); min-height: calc(100svh - 44px);
    border: 2px solid rgba(241,236,220,.85); border-radius: 18px;
    display: flex; flex-direction: column;
  }
  .edge-num { position: fixed; z-index: 0; font: 500 8px/1 var(--mono); color: rgba(241,236,220,.55); pointer-events: none; }

  header { display: flex; align-items: center; justify-content: space-between; padding: 18px 30px; border-bottom: 2px solid rgba(241,236,220,.85); position: relative; z-index: 20; background: var(--band); border-radius: 16px 16px 0 0; }
  .title span { white-space: nowrap; }
  .title { font: 600 clamp(24px, 2.3vw, 32px)/1.05 var(--sans); letter-spacing: -.025em; margin: 0; }
  nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
  nav a { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .2s; }
  nav a i { font-style: normal; font-weight: 400; margin-right: 6px; }
  nav a:hover { border-color: var(--chalk); }
  .head-right { display: flex; align-items: center; gap: 26px; }
  .socials { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .socials a {
    width: 34px; height: 34px; display: grid; place-items: center; color: var(--chalk);
    border: 1.5px solid rgba(241,236,220,.85); border-radius: 2px; transition: background .2s, color .2s;
  }
  .socials a:hover { background: var(--chalk); color: var(--mat-deep); }
  .socials svg { width: 16px; height: 16px; fill: currentColor; }
  .socials a, .menu-btn { position: relative; }
  .socials a::after, .menu-btn::after { content: ""; position: absolute; inset: -7px -3px; }
  .socials a.yt { background: #d8392b; border-color: #d8392b; color: #fff; }
  .socials a.yt:hover { background: #e94a3b; border-color: #e94a3b; color: #fff; }
  .menu-btn { display: none; width: 34px; height: 34px; padding: 0; place-items: center; background: transparent; border: 1.5px solid rgba(241,236,220,.85); border-radius: 2px; cursor: pointer; }
  .menu-btn svg { width: 18px; height: 18px; }
  .menu-btn { background: var(--chalk); border-color: var(--chalk); color: var(--ink); }
  .menu-btn:hover, .menu-btn[aria-expanded="true"] { background: #fff; border-color: #fff; }
  /* nav collapses into the menu square before it runs into the heading */
  @media (max-width: 1180px) {
    .menu-btn { display: grid; }
    nav ul { display: none; position: absolute; right: 12px; top: calc(100% + 8px); flex-direction: column; gap: 0; background: var(--cream); color: var(--ink); box-shadow: var(--shadow-card); min-width: 220px; z-index: 30; }
    nav.open ul { display: flex; }
    nav li a { display: block; padding: 14px 16px; border-bottom: 1px solid #d8d2c2; }
    .head-right { gap: 8px; flex-direction: row-reverse; }
  }

  .eyebrow { font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .85; display: inline-flex; align-items: center; gap: 12px; }
  .eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1px; background: currentColor; }

  /* ---------- field ---------- */
  .field {
    flex: 1; display: grid; align-items: start; align-content: center;
    grid-template-columns: 1fr auto 1fr; grid-template-areas: "left cards right";
    column-gap: 56px; padding: 60px 30px 52px;
  }
  .side { height: var(--card-h); display: flex; }
  .side.left { grid-area: left; justify-self: end; flex-direction: column; justify-content: space-between; align-items: center; }
  .side.right { grid-area: right; justify-self: start; align-items: flex-end; gap: 22px; }

  figure.k { margin: 0; position: relative; }
  .field { position: relative; }   /* holds the knife-cut layer, which sits under everything on the mat */
  figure.knife-fig { align-self: center; }
  .knife-fig svg { width: 258px; height: 44px; }
  figure.k figcaption { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); font: 500 9px/1 var(--mono); letter-spacing: .1em; color: rgba(241,236,220,.85); white-space: nowrap; pointer-events: none; }
  figure.k figcaption span { position: absolute; left: calc(100% + 7px); top: 0; opacity: 0; transition: opacity .2s; text-transform: uppercase; }
  figure.k:hover figcaption span { opacity: 1; }
  .obj { position: relative; display: block; filter: var(--shadow-obj); transform: translate(var(--dx,0px), var(--dy,0px)); transition: scale .2s; user-select: none; -webkit-user-select: none; }
  .obj svg { display: block; overflow: visible; }
  .draggable .obj { cursor: grab; touch-action: none; }
  .obj.dragging { cursor: grabbing !important; scale: 1.03; z-index: 50; filter: drop-shadow(2px 6px 3px rgba(18,32,16,.28)) drop-shadow(8px 22px 22px rgba(18,32,16,.28)); }
  .obj.snapping { transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .2s, scale .2s; }
  .compass { width: 280px; height: 77px; }

  /* ---------- calculator ---------- */
  .calc {
    width: 230px; border-radius: 16px; padding: 16px 16px 18px; color: var(--ink); cursor: default;
    background: var(--grain), linear-gradient(165deg, #f8f7f2 0%, #eceae3 55%, #dedad0 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(0,0,0,.07), inset 0 0 0 1px rgba(0,0,0,.05);
  }
  .calc:focus-visible { outline-offset: 5px; }
  .calc .top { display: flex; justify-content: space-between; align-items: flex-start; }
  .calc .brand { font: 600 9px/1 var(--mono); letter-spacing: .22em; color: #6f6b62; text-transform: uppercase; }
  .calc .brand small { display: block; font-weight: 400; font-size: 6.5px; letter-spacing: .16em; margin-top: 5px; color: #9a968b; }
  .calc .solar { width: 86px; height: 22px; border-radius: 2px; background: #2f2a28; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 1px; box-shadow: 0 0 0 2px #d3cfc5, inset 0 1px 2px rgba(0,0,0,.5); }
  .calc .solar i { background: linear-gradient(160deg, #5f554f, #3b3330); }
  .calc .lcd {
    position: relative; margin: 16px 0 0; height: 60px; border-radius: 4px; padding: 0 10px;
    background: linear-gradient(#b7bda1, #c8cdb1); box-shadow: inset 0 3px 4px rgba(0,0,0,.28), 0 0 0 5px #d6d2c8, 0 0 0 6px #c3bfb4;
    font: 500 27px/64px var(--mono); text-align: right; color: #262b21; overflow: hidden; white-space: nowrap;
  }
  .calc .lcd .ghost { position: absolute; right: 10px; top: 0; color: rgba(0,0,0,.055); }
  .calc .lcd output { position: relative; }
  .calc .ind { position: absolute; left: 8px; top: 6px; display: flex; gap: 7px; font: 600 8px/1 var(--mono); }
  .calc .ind b { opacity: 0; transition: opacity .1s; }
  .calc .ind b.on { opacity: .75; }
  .calc .sub { font: 400 6.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #9a968b; text-align: right; margin: 15px 0 12px; }
  .calc .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px 10px; }
  .calc button {
    height: 29px; border: 0; border-radius: 5px; cursor: pointer; padding: 0;
    font: 500 12px/29px var(--mono); color: #3a3d39;
    background: linear-gradient(#fdfcf9, #ebe8e0);
    box-shadow: 0 1.5px 0 #b7b3a8, 0 3px 4px rgba(0,0,0,.10), inset 0 1px 0 #fff;
    transition: transform .05s;
  }
  .calc button.fn { height: 22px; line-height: 22px; font-size: 9px; letter-spacing: .04em; color: #6f6b62; background: linear-gradient(#efede7, #e0ddd4); }
  .calc button.op { color: var(--red); }
  .calc button.ac { color: var(--red); font-weight: 600; }
  .calc button.eq { background: linear-gradient(#d0583f, #b63f28); color: #fff; box-shadow: 0 1.5px 0 #8a2d1b, 0 3px 4px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.2); }
  .calc button:active, .calc button.pressed { transform: translateY(1.5px); box-shadow: 0 0 0 #b7b3a8, inset 0 1px 2px rgba(0,0,0,.14); }

  /* ---------- booking cards ---------- */
  .cards { grid-area: cards; display: flex; gap: 30px; }
  .card {
    position: relative; width: 340px; height: var(--card-h); display: flex; flex-direction: column; cursor: pointer;
    box-shadow: var(--shadow-card); color: var(--ink);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  }
  .card:hover, .card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
  .card .tab { position: absolute; top: -30px; width: 58px; height: 30px; overflow: hidden; z-index: 1; transition: top .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1); }
  .card .tab svg { display: block; }
  .card:hover .tab, .card:focus-within .tab { top: -37px; height: 37px; }   /* pulls out of the folder; never crosses the card */
  .card h2 { font: 600 30px/1.04 var(--sans); letter-spacing: -.025em; margin: 0; }
  .card p { font-size: 14.5px; line-height: 1.5; margin: 0; color: #1f2421; font-weight: 600; }
  .card ul { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
  .card li { padding-left: 20px; position: relative; }
  .card li::before { content: ""; position: absolute; left: 0; top: calc(.5lh - 6px); width: 8px; height: 8px; border: 1.5px solid var(--dot); }
  .card .more { position: relative; appearance: none; background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
  .card .more::after { content: ""; position: absolute; inset: -8px -6px; }   /* bigger tap area */
  .card.home .more { color: #a63a24; height: var(--rule); min-height: 0; line-height: var(--rule); }
  .card .more i { font: 600 12px/1 var(--mono); font-style: normal; width: 16px; height: 16px; border: 1.5px solid currentColor; display: grid; place-items: center; transition: transform .2s; }
  .card .more[aria-expanded="true"] i { transform: rotate(45deg); }
  .card .more:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  .card .more + ul { display: none; }
  .card .more[aria-expanded="true"] + ul { display: block; }
  @media (min-width: 861px) { .card .more { display: none; } .card .more + ul { display: block; } }   /* desktop cards have a fixed height: room for the bullets */
  .card .fine { font: 400 9px/1.3 var(--mono); letter-spacing: .06em; color: var(--print); }

  /* both buttons: identical size, identical height on the page */
  .card .cta {
    position: absolute; bottom: 67px; width: 230px; height: 56px; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--btn);
    color: #fff; border: 0; cursor: pointer; text-decoration: none;
    font: 600 15px/1 var(--sans); padding: 0 12px 0 20px; border-radius: 4px;
    text-shadow: 0 1px 0 rgba(0,0,0,.18);
    box-shadow: 0 0 14px 1px var(--glow);   /* slight glow at rest, stronger on hover */
    transition: transform .15s, box-shadow .2s;
  }
  .card:hover .cta, .card .cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0 30px 6px var(--glow);
  }
  .card .cta:active, .card:active .cta {
    transform: translateY(3px);
    box-shadow: none;
  }
  .card .cta svg { width: 32px; height: 32px; padding: 8px; border-radius: 3px; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.08)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.15); transition: transform .25s; }
  .card:hover .cta svg { transform: translateX(4px); }

  /* 01 · student: kraft folder + grey exercise book printed in cyan */
  .card.student { --dot: var(--cyan); --btn: #1f78ab; --lip: #155a82; --print: var(--cyan); --glow: rgba(43,143,196,.55); padding: 18px 18px 18px 42px; border-radius: 2px 14px 14px 2px; background: var(--grain), var(--kraft); }
  .card.student .tab { left: 74px; }
  .card.student .cta { left: 78px; }
  .card.student .gtape {
    position: absolute; left: 8px; top: 0; bottom: 0; width: 24px;
    background:
      radial-gradient(circle, #d4533c 2.6px, transparent 3px) 50% 34px / 24px 92px repeat-y,
      linear-gradient(rgba(43,143,196,.55) 1px, transparent 1px) 0 0 / 6px 6px,
      linear-gradient(90deg, rgba(43,143,196,.55) 1px, transparent 1px) 0 0 / 6px 6px,
      linear-gradient(rgba(196,71,47,.5) 1px, transparent 1px) 0 0 / 30px 30px,
      #f6f8f6;
    box-shadow: 1px 0 2px rgba(0,0,0,.15);
  }
  .card.student .paper { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 12px 18px 18px;   /* headline lines up with the homeowner's */ background: var(--grain), var(--stock); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
  .label-box { margin: 0; border: 2px solid var(--cyan); padding: 10px 12px 10px; }
  .label-box .tag { font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: 8px; }
  .label-box .ln { height: 1px; background: var(--cyan); opacity: .7; margin-top: 9px; }
  .card.student li { margin-bottom: 6px; line-height: 1.4; }
  .card.student h2 { color: #1f78ab; }
  @media (min-width: 861px) { .card.student h2 { font-size: 26px; white-space: nowrap; } .card.student .label-box { padding: 10px 11px; } }   /* one line, fits the box */
  .card.student li { color: var(--blue-ink); }   /* darker than the button blue so it stays legible */
  .card.home li { color: #a63a24; }

  /* 02 · homeowner: yellow legal pad; every line of text sits on a ruled line */
  .card.home { --dot: var(--red); --btn: var(--red); --lip: #8a2c1a; --print: #9a5246; --glow: rgba(214,74,46,.5); background: var(--grain), var(--legal); border-radius: 1px; }
  .card.home .tab { left: 196px; }
  .card.home .cta { left: 62px; }
  .card.home .bind { height: 14px; flex: none; background: linear-gradient(#e4c44c, #c9a52c); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
  .card.home .pad {
    flex: 1; padding: 32px 22px 0 62px;
    background:
      linear-gradient(90deg, transparent 44px, rgba(205,80,65,.75) 44px 45px, transparent 45px 48px, rgba(205,80,65,.75) 48px 49px, transparent 49px),
      repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), rgba(80,130,175,.34) calc(var(--rule) - 1px) var(--rule));
  }
  .card.home .pad > * { margin: 0; line-height: var(--rule); }
  .card.home .tag { font: 500 9.5px/var(--rule) var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
  .card.home h2 { font-size: 27px; color: var(--red); position: relative; top: -4px; } /* centred in its ruled band */
  .card.home h2::after { content: ""; position: absolute; left: 0; width: var(--rule-w, 100%); bottom: -1px; height: 2px; background: var(--red); } /* sits on the ruled line, ends at the "?" */
  .card.home .pad > h2 { margin-bottom: var(--rule); }
  .card.home .fine { font-size: 9px; }
  .card.home p { font-size: 14px; }
  .card.home li { font-size: 13.5px; }
  @media (max-width: 860px) { .card.home p { font-size: 16px; } .card.home li { font-size: 15px; } }

  /* footer strip */
  .strip { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 16px; background: var(--band); border-radius: 0 0 16px 16px; border-top: 2px solid rgba(241,236,220,.85); font: 400 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .strip div { padding: 12px 16px 13px; }
  .strip a { text-decoration: none; }
  .strip a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .strip a[href^="mailto"] { text-transform: none; }
  .strip a { display: inline-block; padding: 13px 0; margin: -13px 0; background-clip: content-box; }  /* 44px tap height */

  .xh { position: fixed; z-index: 30; pointer-events: none; background: rgba(241,236,220,.28); display: none; }
  .xh-v { top: 0; bottom: 0; left: 0; width: 1px; }
  .xh-h { left: 0; right: 0; top: 0; height: 1px; }
  .xh-read { left: 0; top: 0; position: fixed; z-index: 30; pointer-events: none; display: none; font: 500 9.5px/1 var(--mono); letter-spacing: .06em; color: var(--chalk); background: rgba(93,130,87,.92); padding: 4px 6px; }
  .xh-box { position: fixed; z-index: 30; left: 0; top: 0; width: 11px; height: 11px; margin: -5px 0 0 -5px; border: 1px solid rgba(241,236,220,.95); pointer-events: none; display: none; }
  body.has-cursor .xh, body.has-cursor .xh-read, body.has-cursor .xh-box { display: block; }
  body.has-cursor .field { cursor: none; }   /* CAD-style: crosshair and pick-box instead of the arrow on the mat */
  body.drawing .xh-box { display: none !important; }

  /* ---------- student sheet ---------- */
  .backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(20,30,18,.42); opacity: 0; pointer-events: none; transition: opacity .35s; }
  .sheet {
    position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(780px, 100%); color: var(--ink);
    background: var(--grain),
      linear-gradient(rgba(43,143,196,.10) 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(90deg, rgba(43,143,196,.10) 1px, transparent 1px) 0 0 / 24px 24px,
      var(--stock);
    box-shadow: -20px 0 50px rgba(15,25,15,.35);
    transform: translateX(104%); visibility: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s .5s;
    overflow-y: auto; overscroll-behavior: contain; padding: 32px 40px 44px;
  }
  body.sheet-open .backdrop { opacity: 1; pointer-events: auto; }
  body.sheet-open .sheet { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  body.sheet-open { overflow: hidden; }
  .sheet .eyebrow { color: var(--cyan); opacity: 1; }
  .sheet-top { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
  .ask { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--ink); color: var(--cream); text-decoration: none; border-radius: 3px; font: 600 14px/1 var(--sans); }
  .ask:hover { background: #000; }
  .close { background: none; border: 1.5px solid currentColor; padding: 8px 12px; cursor: pointer; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
  .sheet .close:hover { background: var(--ink); color: var(--stock); }
  .sheet .label-box { margin: 26px 0 22px; padding: 16px 18px 12px; }
  .sheet h2 { font: 600 clamp(28px, 4.2vw, 42px)/1.04 var(--sans); letter-spacing: -.03em; margin: 0; }
  .sheet .lede { font-size: 15.5px; line-height: 1.55; color: var(--ink); font-weight: 600; margin: 0 0 28px; max-width: 36em; }
  .process { border: 2px solid var(--cyan); background: rgba(255,255,255,.35); padding: 14px 16px 12px; margin: 0 0 22px; }
  .process .intro { font: 600 15.5px/1.4 var(--sans); color: #1f78ab; margin: 0 0 10px; }
  /* "How a session works": label above a dashed timeline of three steps; + reveals the detail */
  .how { appearance: none; background: none; border: 0; padding: 0; margin: 0 0 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
  .how i { font: 600 13px/1 var(--mono); font-style: normal; width: 18px; height: 18px; border: 1.5px solid currentColor; display: grid; place-items: center; transition: transform .2s; }
  .how[aria-expanded="true"] i { transform: rotate(45deg); }
  .how:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
  .steps li { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: 14px; }
  .steps li:not(:last-child)::before { content: ""; position: absolute; top: 13px; left: 30px; right: 4px; border-top: 1.5px dashed var(--blue-ink); opacity: .6; }
  .steps b { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--blue-ink); background: #f3efe4; display: grid; place-items: center; font: 500 10px/1 var(--mono); color: var(--blue-ink); }
  .steps strong { font: 600 15px/1.25 var(--sans); }
  .steps span { display: none; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
  .how[aria-expanded="true"] + .steps span { display: block; }
  @media (max-width: 860px) {
    .steps { grid-template-columns: 1fr; }
    .steps li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; padding: 0 0 14px; }
    .steps li:last-child { padding-bottom: 0; }
    .steps b { grid-row: span 2; }
    .steps strong { align-self: center; min-height: 26px; display: flex; align-items: center; }
    .steps span { grid-column: 2; font-size: 15px; }
    .steps li:not(:last-child)::before { top: 26px; bottom: 0; left: 13px; right: auto; border-top: 0; border-left: 1.5px dashed var(--blue-ink); }
  }
  .section-label { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
  .section-label a { text-decoration: none; color: var(--blue-ink); }
  .recs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 38px; }
  .rec { background: var(--grain), #f3efe4; border: 0; padding: 0; text-align: left; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,.15), 3px 8px 16px rgba(30,30,20,.14); transition: transform .25s, box-shadow .25s; color: var(--ink); }
  .rec:hover { transform: translateY(-3px); box-shadow: 0 1px 1px rgba(0,0,0,.15), 6px 16px 26px rgba(30,30,20,.2); }
  .rec.soon { cursor: default; }
  .rec.soon .play { opacity: .45; }
  .rec.soon:hover { transform: none; }
  .rec .thumb { aspect-ratio: 16/9; position: relative; background: var(--c); overflow: hidden; }
  .rec .thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(241,236,220,.16) 1px, transparent 1px) 0 0/16px 16px, linear-gradient(90deg, rgba(241,236,220,.16) 1px, transparent 1px) 0 0/16px 16px; }
  .rec .thumb::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(241,236,220,.6); border-radius: 6px; }
  .rec .thumb.has-poster { background-size: cover; background-position: center; }
  .rec .thumb.has-poster::before { background: linear-gradient(transparent 55%, rgba(20,30,20,.35)); }
  .player video { width: 100%; height: 100%; display: block; background: #000; }
  .rec .play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--chalk); display: grid; place-items: center; transition: transform .25s; z-index: 1; }
  .rec:hover .play { transform: scale(1.08); }
  .rec .play::after { content: ""; border-left: 12px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
  .rec .no { position: absolute; left: 16px; top: 15px; font: 500 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--chalk); z-index: 1; }
  .rec .body { padding: 12px 14px 14px; }
  .rec .t { font: 600 15.5px/1.25 var(--sans); }
  .rec .d { font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #75796f; margin-top: 7px; }
  .section-label .hint { color: #7a7e79; text-transform: none; letter-spacing: .04em; }

  /* sketchbooks */
  .books { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 26px; margin-bottom: 38px; }
  .book { outline-offset: 6px; }
  .book-stage { position: relative; aspect-ratio: 3 / 2.15; margin-left: 16px; perspective: 1800px; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; }
  .book-stage::before { /* the pages underneath / back cover */
    content: ""; position: absolute; inset: 4px -4px -5px 0; background: #e9e4d6; border-radius: 0 6px 6px 0;
    box-shadow: 0 1px 1px rgba(0,0,0,.18), 3px 8px 18px rgba(30,30,20,.22), inset -2px 0 0 #d9d3c3, inset -4px 0 0 #ebe6d9;
  }
  .page {
    position: absolute; inset: 0; margin: 0; border-radius: 0 6px 6px 0; overflow: hidden;
    transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transition: transform .75s cubic-bezier(.3,.7,.2,1), box-shadow .75s;
    background: var(--grain), #fbfaf6; box-shadow: inset 8px 0 12px -8px rgba(0,0,0,.28), 1px 2px 4px rgba(0,0,0,.12);
    display: flex; flex-direction: column;
  }
  .page.turned { transform: rotateY(-176deg); box-shadow: none; pointer-events: none; }
  .spiral {
    position: absolute; z-index: 999; left: -15px; top: 6px; bottom: 6px; width: 30px; pointer-events: none;
    background: radial-gradient(ellipse 13px 5px at 50% 50%, transparent 55%, #2b2d2c 60%, #8a8f94 75%, #2b2d2c 90%, transparent 95%) 0 0 / 30px 15px repeat-y;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,.35));
  }
  .cover { background: var(--grain), var(--cover); color: var(--chalk); padding: 20px 20px 16px 26px; justify-content: space-between; box-shadow: inset 8px 0 12px -8px rgba(0,0,0,.45), 1px 2px 4px rgba(0,0,0,.2); }
  .cover .label { background: #f3efe4; color: var(--ink); padding: 10px 12px 11px; max-width: 88%; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
  .cover .no { display: block; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6b6f68; margin-bottom: 6px; }
  .cover h4 { font: 600 19px/1.15 var(--sans); letter-spacing: -.01em; margin: 0 0 6px; }
  .cover .proj { display: block; font: 400 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
  .cover .q { font: italic 600 14.5px/1.35 var(--sans); margin: 8px 0 0; max-width: 92%; }
  .cover .flip-hint { align-self: flex-end; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
  .sheet-page img { flex: 1; min-height: 0; width: 100%; object-fit: contain; padding: 8px 8px 4px 16px; background: #fff; }
  .sheet-page figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px 9px 16px; border-top: 1px dashed #cfc9ba; }
  .sheet-page .crit { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .sheet-page .crit b { font: 400 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
  .sheet-page .crit strong { font: 600 14px/1.2 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sheet-page .zoom { border: 1px solid #cfc9ba; background: #fff; width: 30px; height: 26px; cursor: zoom-in; font-size: 14px; line-height: 1; color: var(--ink); position: relative; }
  .sheet-page .zoom::after { content: ""; position: absolute; inset: -9px -6px; }
  .end-page { justify-content: center; align-items: flex-start; padding: 22px 24px 22px 30px; gap: 8px; background: var(--grain), #fbfaf6 linear-gradient(rgba(43,143,196,.08) 1px, transparent 1px) 0 0 / 100% 22px; }
  .end-page .your { font: 600 30px/1 var(--sans); letter-spacing: -.02em; color: #1f78ab; margin: 0; }
  .end-page .sub { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
  .book-cta { border: 0; border-radius: 4px; background: #1f78ab; color: #fff; font: 600 15px/1 var(--sans); padding: 0 16px; height: 46px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
  .book-head { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px 16px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .book-head .who { color: var(--blue-ink); white-space: nowrap; }
  .book-head .lvl { color: var(--ink-2); }
  .book-quote { margin: -2px 0 12px 16px; font: italic 600 15px/1.35 var(--sans); color: var(--ink); }
  .book-nav { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 0 16px; }
  .book-nav button { width: 44px; height: 36px; border: 1.5px solid var(--ink); background: transparent; font: 500 20px/1 var(--sans); cursor: pointer; color: var(--ink); }
  .book-nav button:disabled { opacity: .25; cursor: default; }
  .book-nav .count { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--ink-2); }
  .player-frame.is-image { aspect-ratio: auto; background: #fff; }
  .player-frame.is-image img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
  /* Book / Join: same buttons as the landing page cards */
  .next { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 30px; }
  .next a {
    display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 12px 0 20px; border-radius: 4px;
    background: var(--btn); color: #fff; text-decoration: none; font: 600 16px/1 var(--sans); text-shadow: 0 1px 0 rgba(0,0,0,.18);
    box-shadow: 0 0 14px 1px var(--glow);   /* slight glow at rest, stronger on hover */
    transition: transform .15s, box-shadow .2s;
  }
  .next a:hover, .next a:focus-visible { transform: translateY(-2px); box-shadow: 0 0 30px 6px var(--glow); }
  .next a:active { transform: translateY(3px); box-shadow: none; }
  .next a svg { width: 32px; height: 32px; padding: 8px; border-radius: 3px; flex: none; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.08)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.15); transition: transform .25s; }
  .next a:hover svg { transform: translateX(4px); }

  .player { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(15,20,14,.86); padding: 20px; }
  .player.open { display: grid; }
  .player-inner { width: min(980px, 100%); }
  .player-frame { aspect-ratio: 16/9; background: #000; }
  .player iframe { width: 100%; height: 100%; border: 0; display: block; }
  .player-bar { display: flex; justify-content: space-between; align-items: center; color: var(--chalk); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }

  /* ---------- phone booking bars ---------- */
  .sheet-bar { display: none; }
  .sheet-bar a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border: 0; border-radius: 4px;
    font: 600 15px/1 var(--sans); color: #fff; text-decoration: none; cursor: pointer;
    box-shadow: none;
    transition: transform .12s, box-shadow .12s;
  }
  .sheet-bar a:active { transform: translateY(1px); filter: brightness(.95); }

  /* ---------- responsive ---------- */
  @media (max-width: 1380px) { .field { column-gap: 36px; } .compass { width: 232px; height: 64px; } }
  @media (max-width: 1260px) {
    .field { grid-template-columns: 1fr auto 1fr; grid-template-areas: ". cards ." ". tools ."; column-gap: 0; row-gap: 80px; }
    .side.left { grid-area: tools; justify-self: start; }
    .side.right { grid-area: tools; justify-self: end; }
    .side.right figure.k:not(:last-child) { align-self: flex-start; }   /* pens up, the knife lies below them */
    figure.knife-fig { align-self: flex-start; margin: 0 -320px 0 70px; }   /* overhangs to the right without widening the column */
    .side.left figure:last-child { align-self: flex-start; margin: 0 -320px 0 70px; }   /* compass sits under the knife */
  }
  @media (max-width: 860px) {
    .board { margin: 10px; border-radius: 14px; min-height: calc(100vh - 20px); }
    .edge-num { display: none; }
    header { padding: 14px 16px; }
    .title { font-size: 20px; }
    header { gap: 10px; }
    .head-right { gap: 5px; flex: none; }
    .socials { gap: 5px; }
    .socials a, .menu-btn { width: 31px; height: 31px; }
    .socials svg { width: 15px; height: 15px; }
    .field { padding: 42px 14px 54px; row-gap: 64px; }
    .field { grid-template-columns: 0 minmax(0, 420px) 0; justify-content: center; }
    .cards { flex-direction: column; gap: 40px; width: 100%; align-items: center; }
    .card { width: 100%; max-width: 420px; height: auto; }
    .card .fine { display: none; }
    .card h2 { font-size: 28px; }
    .card p { font-size: 16px; }
    .card ul { font-size: 15px; }
    .card.student li { margin-bottom: 8px; }
    .label-box .tag, .card.home .tag { font-size: 11px; }
    .card .cta { position: static; width: 100%; max-width: 300px; font-size: 16px; }
    .card.student { padding: 14px 14px 14px 38px; }
    .card.student .paper { padding: 14px; gap: 12px; }
    .card.student .cta { margin-top: 4px; }
    .label-box { margin: 0; padding: 8px 10px 6px; }
    /* equal heights are set in JS and snapped to the ruling; buttons sit at the bottom */
    .card.student .paper { justify-content: space-between; }   /* any height difference is shared out, not one big gap */
    .card.home .pad { display: flex; flex-direction: column; padding: 32px 20px var(--rule) 60px; }
    .card.home .pad > ul { margin-bottom: 24px; }
    .card.student .cta { margin-bottom: 14px; }
    .card.home .cta { margin-top: auto; }
    .sheet { padding: calc(20px + var(--safe-t)) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l)); }
    .board { margin: max(10px, var(--safe-t)) max(10px, var(--safe-r)) max(10px, var(--safe-b)) max(10px, var(--safe-l)); }
    .strip { font-size: 10px; letter-spacing: .04em; flex-wrap: nowrap; gap: 0; }   /* one line: name left, email + privacy right */
    .strip div { padding: 13px 12px; white-space: nowrap; }
    .close { min-height: 44px; }
    figure.k figcaption { display: none; }
    .sheet .lede { font-size: 16px; }
    .sheet .label-box { margin: 18px 0 14px; padding: 12px 14px 10px; }
    .sheet h2 { font-size: 26px; }
    .process .intro { font-size: 15px; }
    .section-label { font-size: 11px; }
    .rec .t { font-size: 17px; }
    .rec .d { font-size: 11px; }
    .recs, .next { grid-template-columns: 1fr; }
    .books { grid-template-columns: 1fr; gap: 34px; }
    .cover h4 { font-size: 21px; }
    .sheet-page .crit strong { font-size: 15px; }
    .cover .q { font-size: 15.5px; }
    .book-nav button { height: 44px; }
    .next { margin-bottom: 26px; }

    /* inside the student sheet: Book / Join always in reach */
    .sheet-bar {
      display: flex; gap: 10px; position: sticky; bottom: 0; margin: 0 -16px; padding: 12px 16px calc(14px + var(--safe-b));
      background: linear-gradient(rgba(214,210,197,0), var(--stock) 22%); transition: opacity .25s;
    }
    .sheet-bar.hide { opacity: 0; pointer-events: none; }
    .sheet-bar a { padding: 0 10px; text-align: center; font-size: 15px; line-height: 1.15; }
  }
  /* phones held sideways: the student panel's Book / Join buttons sit at the top, where they're in view */
  @media (max-width: 960px) and (orientation: landscape) and (max-height: 520px) {
    .sheet { padding-top: calc(78px + var(--safe-t)); }
    .sheet-bar {
      display: flex; gap: 10px; position: fixed; z-index: 45; top: 0; bottom: auto; left: auto; right: 0; width: min(780px, 100%); margin: 0;   /* lines up with the panel */
      padding: calc(10px + var(--safe-t)) calc(16px + var(--safe-r)) 14px calc(16px + var(--safe-l));
      background: linear-gradient(var(--stock) 78%, rgba(214,210,197,0)); visibility: hidden;
    }
    body.sheet-open .sheet-bar { visibility: visible; }
    .sheet-bar a { height: 48px; font-size: 15px; }
  }
  /* small phones: keep the title on two lines next to the six header squares */
  @media (max-width: 380px) {
    .strip { font-size: 9.5px; letter-spacing: .03em; }
    .strip div { padding: 13px 10px; }
    header { padding: 14px 12px; gap: 8px; }
    .title { font-size: 18px; }
    .head-right, .socials { gap: 4px; }
    .socials a, .menu-btn { width: 29px; height: 29px; }
    .socials svg { width: 14px; height: 14px; }
  }
  /* pick up the pencil / fineliner and sketch on the mat (draw.js) */
  .sketch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 25; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply; }   /* ink and highlighter sit on the paper, text shows through */
  .sketch.live { z-index: 25; }
  .sketch.pen { mix-blend-mode: normal; }   /* graphite stays grey instead of being multiplied into the green */
  body.drawing .sketch.live { pointer-events: auto; touch-action: none; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 23l1.3-5L18 4.3a2.2 2.2 0 0 1 3.1 0l.6.6a2.2 2.2 0 0 1 0 3.1L8 21.7z' fill='%23f3efe4' stroke='%231f2421' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M3 23l1.3-5 3.7 3.7z' fill='%231f2421'/%3E%3C/svg%3E") 3 23, crosshair; }
  body.drawing[data-tool="knife"] .sketch.live { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M2 26l2-6 5 5z' fill='%23dfe3e6' stroke='%231f2421' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M5 21l15-15a2.5 2.5 0 0 1 3.5 0l.5.5a2.5 2.5 0 0 1 0 3.5L9 25z' fill='%23cf7442' stroke='%231f2421' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='17' cy='12' r='2' fill='%231f2421'/%3E%3C/svg%3E") 2 26, crosshair; }
  body.drawing[data-tool="highlighter"] .sketch.live { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 23l1.3-5L18 4.3a2.2 2.2 0 0 1 3.1 0l.6.6a2.2 2.2 0 0 1 0 3.1L8 21.7z' fill='%23f1d460' stroke='%231f2421' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M3 23l1.3-5 3.7 3.7z' fill='%231f2421'/%3E%3C/svg%3E") 3 23, crosshair; }
  body.drawing .tool-fig { z-index: 26 !important; }   /* the tools stay clickable above the drawing */
  .cuts { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  body.drawing .xh, body.drawing .xh-read { display: none !important; }
  .obj[data-tool], .draggable .obj[data-tool] { cursor: pointer; }
  /* the calculator, pencil, highlighter and knife lift off the mat on hover, like the booking cards (not the compass or rule) */
  @media (hover: hover) {
    .obj.pop { transition: translate .35s cubic-bezier(.2,.8,.2,1), filter .35s, scale .2s; }
    .obj.pop:hover { translate: 0 -6px; filter: drop-shadow(2px 5px 3px rgba(18,32,16,.24)) drop-shadow(6px 18px 20px rgba(18,32,16,.28)); }
    .obj.pop.dragging { translate: none; }
  }
  .obj.lifted { opacity: .25; }
  .draw-bar { position: fixed; z-index: 60; top: calc(14px + var(--safe-t, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; background: var(--cream); color: var(--ink); box-shadow: var(--shadow-card); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .draw-bar[hidden] { display: none; }
  @media (min-width: 861px) { .draw-bar { top: auto; bottom: 64px; } }   /* desktop: clear of the menu */
  .draw-bar .db-tool { margin-right: 8px; white-space: nowrap; }
  .draw-bar button { appearance: none; border: 1.5px solid var(--ink); background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); padding: 0 12px; min-height: 36px; cursor: pointer; white-space: nowrap; }
  .draw-bar button[data-act="done"] { background: var(--ink); color: var(--cream); }
  @media (max-width: 500px) { .draw-bar { left: 10px; right: 10px; transform: none; justify-content: space-between; font-size: 10px; } .draw-bar .db-tool { white-space: normal; line-height: 1.3; } }
  /* ---------- large screens ---------- */
  @media (min-width: 1181px) {
    header { padding: clamp(18px, 1.3vw, 26px) clamp(30px, 2.2vw, 44px); }
    .title { font-size: clamp(24px, 2.25vw, 46px); }
    nav ul { gap: clamp(30px, 2vw, 44px); }
    nav a { font-size: clamp(10.5px, .74vw, 14.5px); }
    .socials { gap: clamp(8px, .55vw, 11px); }
    .socials a { width: clamp(34px, 2.3vw, 46px); height: clamp(34px, 2.3vw, 46px); }
    .socials svg { width: clamp(16px, 1.08vw, 21px); height: clamp(16px, 1.08vw, 21px); }
    .strip { font-size: clamp(10px, .66vw, 13px); }
  }
  @media (min-width: 1261px) {
    .field > .side, .field > .cards { zoom: var(--fz, 1); }   /* everything on the mat grows together to fill big screens */
    .field { column-gap: calc(56px * var(--fz, 1)); }
  }
  @media (min-width: 861px) {
    .sheet { width: 100%; padding: 32px max(40px, calc((100% - 1240px) / 2)) 56px; box-shadow: none; }   /* full screen, content centred */
    .books { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 861px) and (max-width: 1100px) { .books { grid-template-columns: repeat(2, 1fr); } }
  /* "Ask Dan" question form (mail.js) */
  .askdlg { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(15,22,14,.55); overflow-y: auto; }
  .askdlg[hidden], .askdlg [hidden] { display: none !important; }
  body.ask-open { overflow: hidden; }
  .ask-card { position: relative; width: min(520px, 100%); background: var(--grain), var(--stock); color: var(--ink); box-shadow: var(--shadow-lift); padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 12px; }
  .ask-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .ask-card h2 { font: 600 26px/1.1 var(--sans); letter-spacing: -.02em; color: #1f78ab; margin: 0; }
  .ask-x { width: 40px; height: 40px; border: 1.5px solid var(--ink); background: none; cursor: pointer; font-size: 15px; color: var(--ink); flex: none; }
  .ask-sub { margin: -4px 0 4px; font-size: 15px; font-weight: 600; }
  .ask-card label { display: flex; flex-direction: column; gap: 5px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
  .ask-card input:not([type=radio]):not([type=checkbox]), .ask-card select, .ask-card textarea { font: 500 16px/1.3 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid #cfc9ba; border-radius: 2px; padding: 10px 11px; min-height: 44px; width: 100%; }
  .ask-card textarea { resize: vertical; min-height: 104px; }
  .ask-card input:focus, .ask-card select:focus, .ask-card textarea:focus { outline: 2px solid #1f78ab; outline-offset: 0; border-color: #1f78ab; }
  .ask-hp { position: absolute; left: -9999px; }
  .ask-err { margin: 0; color: #a63a24; font-weight: 600; font-size: 14px; }
  .ask-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
  .ask-send { border: 0; border-radius: 4px; background: #1f78ab; color: #fff; font: 600 15px/1 var(--sans); padding: 0 22px; height: 48px; cursor: pointer; }
  .ask-send:disabled { opacity: .6; cursor: progress; }
  .ask-done { text-align: left; } .ask-done p { font-size: 16px; font-weight: 600; margin: 8px 0 16px; }
  @media (max-width: 500px) { .askdlg { place-items: end center; padding: 0; } .ask-card { padding: 20px 16px calc(18px + var(--safe-b, 0px)); max-height: 92svh; overflow-y: auto; } .ask-card h2 { font-size: 23px; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

  /* touch screens: hover effects would stick after a tap, so swap them for press feedback */
  @media (hover: none) {
    .card:hover, .card:focus-within { transform: none; box-shadow: var(--shadow-card); }
    .card:hover .tab, .card:focus-within .tab { top: -30px; height: 30px; }
    .card:hover .cta { transform: none; box-shadow: 0 0 14px 1px var(--glow); }
    .card:hover .cta svg { transform: none; }
    .card:active { transform: scale(.992); }
    .card:active .tab { top: -37px; height: 37px; }
    .rec:hover { transform: none; box-shadow: none; }
    .next a:hover { transform: none; box-shadow: 0 0 14px 1px var(--glow); }
  }

  /* ---------- migrated work pages ---------- */
  .work { flex: 1; padding: 40px 30px 60px; }
  .work-hero { max-width: 1120px; margin: 0 auto 30px; }
  .work-hero .tag { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
  .work-hero h1 { font: 600 clamp(34px, 5vw, 56px)/1 var(--sans); letter-spacing: -.03em; margin: 12px 0 10px; }
  .work-hero p { margin: 0; font-size: 17px; max-width: 40em; opacity: .92; }
  .grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; }
  .proj { border: 0; padding: 10px 10px 12px; text-align: left; cursor: zoom-in; color: var(--ink); background: var(--grain), #f3efe4; box-shadow: var(--shadow-card); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; display: flex; flex-direction: column; gap: 4px; }
  .proj img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #e9e4d6; margin-bottom: 8px; }
  .proj .pt { font: 600 17px/1.2 var(--sans); }
  .proj .pc { font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
  @media (hover: hover) { .proj:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); } }
  nav a[aria-current="page"] { border-color: var(--chalk); }
  .gal { position: fixed; inset: 0; z-index: 60; background: rgba(15,20,14,.92); display: flex; flex-direction: column; padding: max(14px, var(--safe-t)) 14px max(14px, var(--safe-b)); }
  .gal[hidden] { display: none; }
  body.gal-open { overflow: hidden; }
  .gal-bar { display: flex; gap: 16px; align-items: center; color: var(--chalk); font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
  .gal-bar #galTitle { flex: 1; }
  .gal .close { color: var(--chalk); min-height: 44px; }
  .gal-stage { flex: 1; min-height: 0; display: flex; align-items: center; gap: 10px; }
  .gal-stage img { flex: 1; min-width: 0; max-height: 100%; width: 100%; object-fit: contain; }
  .gal-prev, .gal-next { flex: none; width: 48px; height: 64px; border: 1.5px solid rgba(241,236,220,.7); background: transparent; color: var(--chalk); font: 400 30px/1 var(--sans); cursor: pointer; }
  .contact-card { max-width: 640px; margin: 0 auto; background: var(--grain), var(--legal); color: var(--ink); padding: 28px 28px 30px 64px; box-shadow: var(--shadow-card);
    background-image: var(--grain), linear-gradient(90deg, transparent 44px, rgba(205,80,65,.75) 44px 45px, transparent 45px 48px, rgba(205,80,65,.75) 48px 49px, transparent 49px), repeating-linear-gradient(transparent 0 35px, rgba(80,130,175,.34) 35px 36px); }
  .cc-row { display: flex; gap: 18px; align-items: baseline; padding: 6px 0 9px; font-size: 18px; }
  .cc-row b { width: 92px; flex: none; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9a5246; }
  .cc-row a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
  .cc-links { font-size: 16px; }
  .cc-book { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
  .cc-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 20px; border-radius: 4px; color: #fff; text-decoration: none; font: 600 15px/1 var(--sans); }
  .cc-btn.blue { background: #1f78ab; } .cc-btn.red { background: var(--red); }
  @media (max-width: 860px) {
    .work { padding: 28px 14px 40px; }
    .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .proj { padding: 7px 7px 9px; } .proj .pt { font-size: 15px; } .proj .pc { font-size: 10px; }
    .contact-card { padding: 22px 18px 24px 58px; }
    .cc-row { flex-direction: column; gap: 4px; font-size: 17px; } .cc-row b { width: auto; }
    .gal-prev, .gal-next { width: 40px; }
  }