/* ==========================================================================
   The pen, back in quietly (?pen=object, inspect or margin; nothing without it). It belongs with the chapter's opening
   line. A Recap After Use pen from the original vectors (816×83, the lid 288×99; the lid's right edge meets the barrel
   at x=258.8). Its parked, full version is in parked/; this is the calm one: no full-screen moment, one ink, a bar
   only while it's in your hand.
   ========================================================================== */

.pen-slot { display: none; }
html[data-pen] .pen-slot { display: block; }
html[data-pen] .pen-slot:not([style*="top"]) { position: relative; }
html[data-pen] .pen-slot { z-index: 2; }   /* the pen always above the ink you draw (the ink layer is z-index 1), never under it */

/* --- The pen on the page --------------------------------------------------------------------------------------- */
.pen { position: relative; width: var(--W); height: calc(var(--W) * 83 / 816); }
.pen-art { position: absolute; top: 0; will-change: translate, rotate; -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  transition: filter .35s var(--ease), transform .45s cubic-bezier(.34,1.5,.5,1); }
.pen-body { left: 0; width: 100%; transform-origin: .25% 48%; z-index: 2; }
.pen-lid { left: -3.1%; width: 35.26%; z-index: 3; }
.pen:not(.open) .pen-art { cursor: default; }
.pen.capped .pen-art { cursor: pointer; }   /* (closed again, a click takes the lid off) */
html[data-pen="inspect"] .pen:not(.open, .opening) .pen-art { cursor: pointer; }   /* capped: click to uncap */
.pen.open .pen-body { cursor: pointer; }
/* Hover, as on the old site: a small hint it can be picked up. The pen lifts a hair off the paper, its shadow softening
   out under it, the coloured tip going with it; the lid eases a few pixels towards you. Capped, it's one object, so the
   whole pen lifts together (pen, tip and lid all on the same property and curve, so they can't drift apart).
   The lifts are transforms, not margins: a margin settles in whole pixels, so the curve's little overshoot shook at the
   end. (transform, not translate: the script moves the parts with translate and rotate, and these add on top) */
.pen > .nib-ink { transition: transform .45s cubic-bezier(.34,1.5,.5,1); }
.pen-lid:not(.grabbing) { transition: filter .35s var(--ease), transform .45s cubic-bezier(.34,1.5,.5,1); }
.pen-lid.grabbing { cursor: grabbing !important; filter: drop-shadow(0 10px 12px rgba(40,35,30,.2)); }
@media (hover: hover) {
  html:not(.pen-held, .tune-on) .pen.open .pen-body:hover { filter: drop-shadow(0 5px 6px rgba(40,35,30,.16)); transform: translateY(-2px); }
  html:not(.pen-held, .tune-on) .pen.open .pen-body:hover + .nib-ink { transform: translateY(-2px); }
  /* Capped, the pen and its lid are one thing: the same lift-and-shadow as each part has open, round the whole outline.
     It lifts by moving, not by its margin: a margin settles in whole pixels, so its little overshoot shook at the end */
  .pen:is(.capped, :not(.open, .opening)) { transition: translate .45s cubic-bezier(.34,1.5,.5,1), filter .35s var(--ease); }
  html:not(.pen-held, .tune-on) .pen:is(.capped, :not(.open, .opening)):hover { translate: 0 -2px; filter: drop-shadow(0 5px 6px rgba(40,35,30,.16)); }
  html[data-pen="inspect"]:not(.tune-on) .pen:not(.open, .opening):hover .pen-art { transform: translateY(-2px); }
  html[data-pen="inspect"]:not(.tune-on) .pen:not(.open, .opening):hover .pen-body { filter: drop-shadow(0 5px 6px rgba(40,35,30,.16)); }
}
/* The hint above the nib once it's open: a small line with the key */
.pen-tip { position: absolute; z-index: 3; font: 500 12px/1 var(--sans); color: var(--ink-soft); pointer-events: none; white-space: nowrap;
  opacity: 0; translate: 0 6px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.pen-tip.on { opacity: 1; translate: 0 0; }
.pen-tip kbd { margin-left: 5px; display: inline-grid; place-items: center; box-sizing: border-box; width: 19px; height: 19px; font: 500 10px/1 var(--sans); color: var(--ink-soft); border-radius: 4px; border: 1px solid var(--rule); border-bottom-width: 2px; vertical-align: middle; }
@media (hover: none) and (pointer: coarse) { .pen-tip kbd { display: none; } }

/* --- The mark it draws by the heading: in the ink, with a felt-tip edge ------------------------------------------ */
.pen-mark { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.pen-mark path { opacity: 0; }   /* (hidden until it's drawn: an undrawn round-capped line still shows its cap as a dot) */
.pen-mark path.drawing { opacity: 1; }

/* --- Where it lies, per route ---------------------------------------------------------------------------------- */
/* object: under the heading, a little in from the column's edge so the lid has room to come off into it */
html[data-pen="object"] .pen-slot { position: relative; margin: clamp(22px, 3vh, 34px) 0 clamp(30px, 4vh, 48px); }
html[data-pen="object"] .pen { --W: min(540px, 42vw); margin-left: calc(var(--W) * .34); }
/* inspect: beside the paragraph after the heading, in the column's right half (the paragraphs stop at 31em), capped until you click it */
html[data-pen] .chapter { position: relative; }   /* (the mark is laid over the chapter) */
html[data-pen="inspect"] .pen-slot { position: absolute; right: 0; top: 0; }
html[data-pen="inspect"] .pen { --W: min(360px, 26vw); }
/* margin: a small pen in the column's right margin, level with the heading */
html[data-pen="margin"] .pen-slot { position: absolute; right: 0; top: 0; }
html[data-pen="margin"] .pen { --W: min(280px, 21vw); }
@media (max-width: 860px) {
  html[data-pen="inspect"] .pen-slot, html[data-pen="margin"] .pen-slot { position: relative; margin: clamp(22px, 3vh, 34px) 0 clamp(30px, 4vh, 48px); }
  html[data-pen="inspect"] .pen { --W: min(420px, 66vw); margin-left: calc(var(--W) * .34); }
  html[data-pen="margin"] .pen { --W: min(280px, 48vw); margin-left: calc(var(--W) * .34); }
}
@media (max-width: 560px) { html[data-pen="object"] .pen { --W: 66vw; } }   /* (a touch bigger on a phone) */
/* A phone: the lid sits a hair further on, over the little step where it meets the barrel; at this size the step read
   as a gap, as if the lid weren't fully on */
@media (max-width: 560px) { .pen-lid { left: -2.1%; } }

/* --- In your hand: the pen is the cursor, the ink goes on a page-wide layer, a small bar at the bottom ------------ */
.pen-held, .pen-held * { cursor: none !important; user-select: none; -webkit-user-select: none; }
.pen-held .pen-bar, .pen-held .pen-bar * { cursor: pointer !important; }
.pen-held.pen-drawing { touch-action: none; }
@media (pointer: coarse) { .pen-held, .pen-held body { touch-action: none; } }
.pen-cursor { position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; opacity: 0; will-change: translate, rotate; transition: scale .18s var(--ease); }
.pen-held .pen-cursor { opacity: 1; filter: drop-shadow(8px 6px 7px rgba(40,35,30,.2)); transition: scale .18s var(--ease), filter .3s var(--ease); }
.pen-held.pen-drawing .pen-cursor { filter: drop-shadow(3px 2px 2.5px rgba(40,35,30,.27)); transition: scale .22s var(--ease), filter .18s var(--ease); }
.pen-cursor img { width: 100%; display: block; }
.pen-cursor.returning { opacity: 1; animation: pen-land .45s var(--ease) forwards; }
@keyframes pen-land { from { filter: drop-shadow(8px 6px 7px rgba(40,35,30,.2)); } to { filter: drop-shadow(0 0 0 rgba(40,35,30,0)); } }
.pen-held.over-bar .pen-cursor { opacity: 0; }
.ink-layer { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ink-layer path { filter: drop-shadow(0 0 .8px rgba(255,255,255,.95)) drop-shadow(0 0 2.5px rgba(255,255,255,.55)); }
/* The bar: the Inspect switch's family (the same paper pill, hairline and soft shadow, in the page's own type rather
   than the switch's mono); it slides up from the bottom while the pen is held, and goes with it */
.pen-dock { position: fixed; left: 50%; bottom: calc(clamp(16px, 2.6vw, 36px) + env(safe-area-inset-bottom));   /* (as far up as the Inspect switch sits) */ z-index: 98; display: flex; align-items: center; max-width: calc(100% - 32px);
  translate: -50% calc(100% + 60px); transition: translate .6s cubic-bezier(.32,.72,0,1); pointer-events: none; }
.pen-held .pen-dock { translate: -50% 0; }
.pen-dock > * { pointer-events: auto; }
.pen-bar { box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-width: 0; height: 37px; padding: 0 4px 0 16px;   /* (the switch's height) */ border-radius: 999px; color: var(--ink); font: 500 13px/1 var(--sans);
  background: #fcfbf9; border: 1px solid var(--rule); box-shadow: 0 10px 28px -14px rgba(20,20,18,.4); }
.pen-bar b { font-weight: 600; white-space: nowrap; }
.pen-bar .pb-hint { color: var(--ink-soft); white-space: nowrap; }
/* Its buttons as the Inspector's plain ones: a soft grey that darkens a step under the pointer, and again pressed */
.pen-bar button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; height: 27px; cursor: pointer; font: 500 12px/1 var(--sans); white-space: nowrap; padding: 0 12px; border-radius: 999px; background: rgba(22,21,20,.06); color: var(--ink); transition: background-color .2s var(--ease); }
@media (hover: hover) { .pen-bar button:hover { background: rgba(22,21,20,.11); } }
.pen-bar button:active { background: rgba(22,21,20,.16); }
.pen-bar button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.pen-bar .key-hint { color: var(--ink-faint); white-space: pre; }   /* (pre: a flex button would drop the space before the dot) */
@media (max-width: 700px) { .pen-bar .pb-hint { display: none; } .pen-dock { bottom: calc(16px + env(safe-area-inset-bottom)); } }
@media (hover: none) and (pointer: coarse) { .pen-bar .key-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .pen-mark path { stroke-dashoffset: 0; opacity: 1; } .pen-dock { transition: none; } }

/* --- The nib's colour (the very end of the nib, in the current ink) and the ink flower in the bar ---------------- */
:root { --nib: var(--ink); }
.pen > .nib-ink { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; transform-origin: .25% 48%; transform-box: border-box; will-change: translate, rotate; }   /* (border-box: Safari otherwise turns an svg about its viewBox, and the tip drifts off the pen as it tilts) */
.pen-cursor .nib-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:is(.pen-cursor, .pen) .nib-ink path { fill: var(--nib); stroke: var(--nib); stroke-width: 2.6; transition: fill .25s, stroke .25s; }
:is(.pen-cursor, .pen) .nib-ink .nib-join { stroke: #0b0b0b; stroke-width: 1.6; }
.pen-dock { gap: 10px; }
.pen-held .pen-inks, .pen-held .pen-inks * { cursor: none !important; }
.pen.open .pen-lid { cursor: pointer; }   /* click the lid to put it back on */
@media (hover: hover) { html:not(.pen-held, .tune-on) .pen.open .pen-lid:not(.grabbing):hover { transform: translate(-4px, -1px); filter: drop-shadow(0 5px 6px rgba(40,35,30,.16)); } }
.pen.open .pen-lid { cursor: grab; touch-action: none; }
/* The inks: a small flower of six petals with the current colour at its heart; hover and they spring out into a row (springs in home.js) */
.pen-inks { position: relative; flex: none; width: 30px; height: 30px; opacity: 0; transition: opacity .3s var(--ease) .1s; }
.pen-held .pen-inks { opacity: 1; }
/* A steady hit area: closed, the petals don't take the pointer (they lean towards the pen), this circle does */
.pen-inks::before { content: ""; position: absolute; left: -6px; top: -6px; width: 42px; height: 42px; border-radius: 21px; }
/* Open, the hover area runs on past the last colour, so drifting a little right doesn't fold it away */
.pen-inks.open::before { width: calc(100% + 52px); }
.pen-inks:not(.open) .ink-dot { pointer-events: none; }
.ink-dot { all: unset; box-sizing: border-box; position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; cursor: none !important; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(22,21,20,.14), 0 2px 6px -2px rgba(22,21,20,.35); will-change: transform; }
.ink-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink);   /* close to its own dot, clear of the next */ opacity: 0; scale: .8; transition: opacity .2s, scale .3s var(--ease); }
.pen-inks.open .ink-dot.on::after { opacity: 1; scale: 1; }
/* The centre of the closed flower: a thin paper ring sets it apart from the petals */
.ink-dot.core { box-shadow: 0 0 0 4px var(--paper), 0 2px 6px -2px rgba(22,21,20,.35); }

/* The page never widens while the pen's in hand, and the Inspect switch steps aside while you're holding it */
html.pen-held, html.pen-held body { overflow-x: clip; }
/* (the switch's arrival run backwards: it sinks and fades as the bar comes up, and rises back in as the pen goes down) */
.switch { transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), opacity .6s var(--ease) .1s, translate .8s cubic-bezier(.2,.7,.1,1) .1s; }
html.pen-held .switch { opacity: 0; translate: 0 14px; pointer-events: none; transition: border-color .25s, background-color .25s, color .25s, opacity .3s var(--ease), translate .45s var(--ease); }
/* The object pen sits a little further below the heading, so its "pick me up" line keeps clear of the ring round "yours." */
html[data-pen="object"] .pen-slot { margin-top: 50px; }   /* (a phone: clear of the ring round "yours.", now the hint sits under the pen rather than above it) */
@media (min-width: 701px) { html[data-pen="object"] .pen-slot { margin-top: clamp(56px, 4.4vw, 70px); } }   /* (desktop: the lockup a touch closer to the heading) */

/* The two lines under the pen sit a little further from it */
html[data-pen="object"] .pen-slot { margin-bottom: calc(clamp(30px, 4vh, 48px) + 22px); }   /* (margins collapse, so the space goes on the pen's side) */

/* The case study's pen (pen.js, LOOSE): not on the page, just under the bottom of the screen, where it comes up from */
html[data-pen] .pen-slot.pen-loose { position: fixed; left: 50%; top: calc(100% + 60px); translate: -50% 0; margin: 0; visibility: hidden; pointer-events: none; }