/* ============================================================================
   craft/p-book.css · Book the Audit, the page layer on the interior kit
   Loaded after craft/inner.css on book.html only. The kit does the look and
   the devices; this file does three things the kit has no opinion on:
     1. the route (the page's signature): the strip the pen draws, with the
        sample brief's cover standing on its line as node 02, and the phone
        rail beside the stacked items
     2. keeps the distance from the hero to the booking frame short (the
        route section runs a little tighter than a standard section)
     3. lays the booking section out so the frame keeps the width at which
        the Cadence embed shows its compact layout, with the heading and the
        Acro route beside it on wide screens
   The motion lives in the scripts: craft/p-book.js draws the strip and
   develops the cover, and the kit's wire device draws the phone rail.
   Every value is a kit or D token, or a size derived from the strip's
   1200 by 256 unit grid or from the embed.
   ========================================================================== */
/* the embed switches to its compact layout at about 637px of iframe width
   (measured against the live portal, 2026-09-29): 646px inside the kit's
   680px frame. Narrower, it stacks and posts 950 to 1000px of height. */
.book{--bk-frame:680px}

/* ---- 1. the route: what you get, three items and the wire ------------------ */
.book-route{padding-block:clamp(3.4rem,7vw,5.8rem);--bk-gap:.6rem}
.book-route .sec-head{max-width:20ch}
/* the value line inside item 02: ink on cream, one step heavier, as the kit
   sets bold inside prose on cream (General Sans ships one weight here) */
.book-route .step p b{color:var(--ink);font-weight:700;font-synthesis-weight:auto}

/* The strip: two drawings stacked on one grid (1200 by 256 units, drawn at
   the row's full width, so one unit is 1/1200 of the row at every width).
   The first sets the height; the second lies over it. The kit's .wire gives
   them their stroke colour (moss on cream, reference ticks in ash). */
.bk-strip{position:relative;margin-top:clamp(1.2rem,2.4vw,2rem)}
.bk-strip .wire{margin:0}
.bk-wire--b{position:absolute;left:0;top:0;width:100%;height:100%}
.book-route .bk-strip+.steps{margin-top:var(--bk-gap)}

/* The cover: the first page of the sample brief. On wide screens it stands on
   the strip's line as node 02, over item 02's text: its box is x 412 to 592
   and y 12 to 245 of the strip's units, and the four corners of the drawing
   close on it 7 units out. It is placed from item 02 (whose left edge is
   column 2's, which the strip puts at 412 units, within a unit at every
   width): 15% of the row wide (15cqw, the row being the query container),
   its top 244 units (20.3333cqw) above the strip's foot, which sits the gap
   and item 02's 1px top rule above item 02's padding box. */
.bk-cover{position:relative;aspect-ratio:816/1056;background:var(--ink)}
.bk-cover img{display:block;width:100%;height:100%;object-fit:cover}
.bk-cover__lbl{position:absolute;left:calc(100% + 1.4rem);top:0;white-space:nowrap;
  font-size:.6rem;letter-spacing:.2em;color:var(--ash-paper)}
@media(min-width:821px){
  .book-route .steps{container-type:inline-size}
  .bk-cover{position:absolute;z-index:1;left:0;width:15cqw;
    top:calc(-1px - var(--bk-gap) - 20.3333cqw)}
}

/* the other way to see it: the whole sample, as the Acro page links it. A
   44px target on a text link (the padding), ink with a moss rule on cream. */
.book-route .bk-under{margin-top:.2rem}
.bk-tlink{display:inline-block;padding-block:.85rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--moss-deep);text-decoration-thickness:1px;text-underline-offset:5px;
  transition:color .16s var(--e-io),text-decoration-color .16s var(--e-io)}
.bk-tlink:hover{color:var(--moss-ink);text-decoration-color:var(--moss-ink)}
@media(prefers-reduced-motion:reduce){.bk-tlink{transition:none}}
/* the phone rail: below 820px the strip goes (the items stack) and the cover
   sits in item 02 under its text, so the pen writes the route down a rail
   beside the items instead, past the cover as it develops. Each
   item carries a node (a circle and a tick into the item's top rule) and a
   run to the next node; the last carries the node, a tail and the arrow.
   The runs stretch with their item (preserveAspectRatio none on a 24 unit
   wide box drawn 24px wide, so the vertical stroke keeps its weight); the
   nodes never stretch. Each svg is its own wire, drawn as it clears the
   bottom of the viewport (data-to="0": over a quarter of the section's
   travel from there). */
.book-rail{display:none}
@media(max-width:820px){
  .bk-strip{display:none}
  .book-route .bk-strip+.steps{margin-top:1.8rem}
  .bk-cover{width:min(58%,15rem);margin-top:1.5rem}
  .bk-cover__lbl{display:none}
  .book-route .steps{padding-left:2.25rem;row-gap:2.2rem}
  .book-route .book-rail{display:block;position:absolute;left:-30px;width:24px;margin:0;overflow:visible}
  .book-route .book-rail--node,.book-route .book-rail--end{top:-12px;height:auto}
  .book-route .book-rail--node{aspect-ratio:1}
  .book-route .book-rail--end{aspect-ratio:24/72}
  /* from under this node to just above the next: the item's padding box plus
     the row gap, less the two node radii (with stroke) */
  .book-route .book-rail--run{top:8px;height:calc(100% + 2.2rem - 15px)}
}

/* ---- 2. the booking section ------------------------------------------------ */
/* Where a jump to #booking lands: the kit lands a section flush under the
   bar (main>section[id]). The top padding stays short, so on a 1440 by 900
   screen the frame (674px with its padding) lands whole, about 85px clear of
   the bottom. */
.book{padding-block:clamp(3.2rem,5.5vw,5rem) clamp(4rem,8vw,6.5rem)}
/* Wide but short screens (1366 by 768, 1280 by 720): the jump scrolls past
   the section's top padding too, so the frame and the heading beside it land
   18px under the bar and the frame ends 14px clear of the bottom at 768.
   Lands at: bar + 16px + margin, and the frame sits one padding lower, so
   margin = 18px - 16px - the padding. */
@media(min-width:1180px) and (max-height:860px){
  #booking{scroll-margin-top:calc(2px - clamp(3.2rem,5.5vw,5rem))}
}
.book .book-widget{margin:2.2rem 0 0;max-width:var(--bk-frame)}
.book .book-note{max-width:var(--bk-frame)}
.book .alt-band{margin-top:2.4rem}
@media(min-width:1180px){
  /* heading and the other route in on the left, the Acro band directly
     under the lede; the frame on the right, the note in its own row under
     it. DOM order stays block 3 then block 4. */
  .book__grid{display:grid;grid-template-columns:minmax(0,1fr) var(--bk-frame);
    grid-template-areas:"head frame" "alt frame" ". note";grid-template-rows:auto 1fr auto;
    column-gap:clamp(2.4rem,4vw,4rem)}
  .book__head{grid-area:head}
  .book .book-widget{grid-area:frame;margin:0;width:100%}
  .book .book-note{grid-area:note}
  .book .alt-band{grid-area:alt;align-self:start;margin-top:2.4rem}
  .book__head .sec-head{font-size:clamp(2.2rem,3.4vw,3.3rem);margin-bottom:1.2rem}
}

/* ---- the questions: a still kanji on cream ---------------------------------- */
.book-faq{overflow:hidden}
.book-faq .wrap{position:relative;z-index:2}
.book-faq .kanji{font-size:min(34vw,420px);right:-3vw;bottom:-8%}

/* ---- 3. the close: the kit's (the decision line, the roster line, the
   close's lines lifted over the turning mark, the nav at tablet widths) ---- */

@media(max-width:640px){
  .book .alt-band{padding:1.3rem}
  .book-faq .kanji{font-size:64vw;right:-28%;bottom:-3%}
}