/* Joined by pages_more.py on every build from each object's object.css in _studio/objects, then placement.css. Edit those, not this. */
/* MESSAGE BOOK (20 Oct, photographic): the Contact page's object. Every selector starts .wywo ("while you were out").
   A photograph of the book with nothing printed on it; the form and the pen are an SVG laid over it in the photo's own pixels,
   so the two stay locked at every width. Fonts come from the site (fonts.css, home.css): Archivo for the printing, JamesHand for the pen.
   The vector drawing this replaced is object-vector.html and object-vector.css. */
.wywo{--wywo-pen:#1c1918;--wywo-carbon:#34438c;
  margin:0;width:100%;max-width:640px}
.wywo .wywo-ph{position:relative;aspect-ratio:2837/1515}
.wywo .wywo-img{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the print and the pen sit in the paper: multiplied, so the photo's light and the lip's shadow show through them */
.wywo .wywo-tl{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;mix-blend-mode:multiply}

/* The printed form and the hand are drawn once (#wywo-form, #wywo-hand) and placed with <use>, so their fonts, blue and
   pen widths are attributes in object.html: class rules do not reach inside <use>. What changes per sheet is set here,
   by colour, which the copies inherit: a black pen on the original, the pressed-through copy on the canary. */
.wywo .wywo-print{opacity:.92}
.wywo .wywo-print-c{opacity:.8}
.wywo .wywo-ink{color:var(--wywo-pen)}
.wywo .wywo-carbon{color:var(--wywo-carbon);opacity:.78}
.wywo .wywo-pen{fill:none;stroke:currentColor;stroke-width:.34px;stroke-linecap:round;stroke-linejoin:round}

/* the one motion: when the slip scrolls into view, the pen ticks PLEASE CALL. Without the script, or with reduced motion, it is ticked. */
.wywo .wywo-tick{stroke-dasharray:1;stroke-dashoffset:0}
.wywo.wywo-js:not(.wywo-in) .wywo-tick{stroke-dashoffset:1}
.wywo.wywo-js .wywo-tick{transition:stroke-dashoffset .45s cubic-bezier(.55,0,.35,1) .35s}
@media (prefers-reduced-motion:reduce){.wywo.wywo-js .wywo-tick{transition:none;stroke-dashoffset:0}}

/* The bench · rotary card file (20 Oct 2026, photographic). Every selector starts with .rdx.
   A photograph of the file on white with nothing printed on it; the guide letters are typed over it in an SVG in the photo's
   own pixels, so they stay locked to the tabs at every width. True pica (10 to the inch at the card's scale).
   Space Mono stands in for the typewriter; the path is root-relative so it works from any page.
   The vector drawing this replaced is object-vector.html and object-vector.css (built by make.py). */
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400-latin.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}

.rdx{margin:0;width:100%}
/* on the page's grid: as wide as the list beside it, three of the four content columns from 1100 px */
@media (min-width:1100px){.rdx{max-width:calc((100% - 3 * var(--g,24px)) / 4 * 3 + 2 * var(--g,24px))}}
.rdx-ph{position:relative;aspect-ratio:2020/1930}
.rdx-img{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the type sits in the card stock: multiplied, so the tab's own colour and grain show through it */
.rdx-tl{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;mix-blend-mode:multiply}
.rdx-ty{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-weight:400;font-size:44.1px;fill:#1c1918;opacity:.9;letter-spacing:0}

/* the caption: the site's system voice */
.rdx-cap{margin-top:12px;font-family:"Chivo Mono",ui-monospace,monospace;font-weight:400;font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:#7A7670}

/* phones: the photograph runs to the screen's edges (its white is the page's), so the file and its tabs read larger */
@media (max-width:719px){
  .rdx{max-width:none;width:auto;margin-inline:calc(-1 * var(--pad,20px))}
  .rdx-cap{padding-inline:var(--pad,20px)}
}

/* Where each object sits on its page (20 Oct 2026). The objects themselves are in _studio/objects/<name>/object.css. */

/* Bench: the card file between the heading and the list it illustrates */
.sh-b>.rdx{margin-top:calc(var(--in) / 2);margin-bottom:calc(var(--in) / 2)}
@media (min-width:1100px){.sh-b>.rdx{max-width:calc((100% - 3 * var(--g,24px)) / 4 * 2 + var(--g,24px))}}  /* an insert, two columns wide, not a plate */

/* Contact: the message book beside the offer on wide screens and under it on narrow ones, running off the hero's foot */
.ink-hero{padding-bottom:0;display:flex;flex-direction:column}.ink-hero>.g{flex:1 0 auto;grid-template-rows:1fr auto}.ink-hero .hero-t{align-self:center}
.ink-hero .wywo{grid-column:1/-1;align-self:end;margin-top:56px;max-width:600px}
@media (min-width:1280px){.ink-hero>.g{grid-template-rows:1fr}.ink-hero .hero-t{grid-column:1/4;grid-row:1;padding-bottom:56px}
  .ink-hero .wywo{grid-column:3/-1;grid-row:1;justify-self:end;width:min(100%,640px,100vw - 760px);max-width:none;margin-top:0}}
/* 21 Oct, the grid audit, round 2: the book takes whole columns, never a fixed width that ends between them.
   Under the offer: four columns on tablets, three on small laptops. Beside it (1280 up): columns 4 and 5, ending on the text edge. */
/* The photograph carries a black margin (invisible on the black hero): 5.9 % of its width left of the coil, 2.8 % right of the slip.
   It hangs into the gutters by exactly that, so the coil sits on the left line and the slip's edge on the right one. */
.ink-hero .wywo{width:auto;margin-left:-6.42%;margin-right:-3.08%}
@media (min-width:720px) and (max-width:1099px){.ink-hero .wywo{grid-column:1/5;max-width:none}}
@media (min-width:1100px) and (max-width:1279px){.ink-hero .wywo{grid-column:1/4;max-width:none}}
@media (min-width:1280px){.ink-hero .wywo{grid-column:4/-1;justify-self:stretch;width:auto}}