/* roadies.ai home page stylesheet, "Paper and ink" (operator ruling 2026-11-06, Gate 1 item 1). An Ink header, hero, finale and footer frame Bone, white and Sand reading surfaces, so the page looks like the deliverables it shows. Loaded by the home page only; interior pages keep site.css until the interior reskin. Zero JavaScript.
   Contrast pairs (locked matrix 2026-10-26): Bone on Ink 16.68, Sand on Ink 13.99, Ink on Bone 16.68, Tide on Bone 7.19, Graphite on Bone 6.59, Carbon on white 16.67, Ink on white 17.44, Tide on white 7.51, Ink on Sand 13.99, Tide on Sand 6.03, Graphite on Sand 5.53, Ink on Signal 7.24. Stone and Signal are never text on light. */
:root{--ink:#0F1A2C;--slate:#3C4A5E;--signal:#C8A24A;--tide:#1B5E5A;--bone:#FAFAF8;--sand:#E8E6E2;--stone:#B5B2AC;--graphite:#5C5A55;--carbon:#1F1E1B;--white:#FFFFFF;
--display:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--text:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--gutter:clamp(1rem,5vw,5rem);--mark:1.625rem}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font:400 1rem/1.6 var(--text);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:800}
a{color:inherit}
img{max-width:100%;height:auto}
[id]{scroll-margin-top:1.5rem}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.on-light :focus-visible,.page :focus-visible{outline-color:var(--ink)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:1rem;top:0;transform:translateY(-130%);background:var(--signal);color:var(--ink);font-weight:600;padding:.75rem 1rem;z-index:20;text-decoration:none}
.skip:focus{transform:none}
.wrap{max-width:80rem;margin-inline:auto;padding-inline:var(--gutter)}
.sq{display:inline-block;width:.5em;height:.5em;background:var(--signal);border-radius:1px;flex:none}

/* Lockup: the locked file, sized so the frame is one mark tall, its own clear space trimmed by margin */
.lockup{display:inline-flex;align-items:center;flex:none;color:var(--bone);text-decoration:none}
.lockup img{display:block;height:calc(var(--mark)*2);width:auto;max-width:none;margin:calc(var(--mark)*-.5) calc(var(--mark)*-.4714) calc(var(--mark)*-.5) calc(var(--mark)*-.5714)}
.lockup .logo-print{display:none}

/* Header: three destinations and the button, visible at every width */
.head{background:var(--ink);color:var(--bone)}
.head-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem 1rem;padding-block:.75rem}
.nav{grid-column:1/-1;grid-row:2;border-top:1px solid var(--slate)}
.nav ul{display:flex;flex-wrap:wrap;gap:0 1.25rem}
.nav a{display:block;padding-block:.6rem .5rem;font-weight:600;font-size:.9375rem;text-decoration:none;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--signal)}
@media (min-width:56rem){
  .head-row{grid-template-columns:auto minmax(0,1fr) auto;gap:2rem;padding-block:1.25rem}
  .nav{grid-column:auto;grid-row:auto;justify-self:end;border-top:0}
  .nav ul{gap:0 2rem}
}

/* Buttons: Signal fill, Ink text 7.24:1; a 2px Ink edge on light surfaces */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.85rem 1.5rem;background:var(--signal);color:var(--ink);border:2px solid var(--signal);border-radius:2px;font:800 1.0625rem/1.1 var(--display);text-decoration:none}
.btn:hover{background:var(--bone);border-color:var(--bone)}
.btn-sm{min-height:2.75rem;padding:.55rem 1rem;font-size:.9375rem}

/* Hero */
.hero{background:var(--ink);color:var(--bone);padding-block:clamp(2.5rem,1.5rem + 4vw,6rem) clamp(3.5rem,2rem + 5vw,7.5rem)}
.eyebrow{font:700 .75rem/1.35 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--sand);margin-bottom:1rem}
.d1{font-size:clamp(2.25rem,1rem + 5.4vw,5.75rem);line-height:1;letter-spacing:-.035em;max-width:17ch;text-wrap:balance;overflow-wrap:break-word}
.hero-foot{display:grid;gap:1.75rem;margin-top:clamp(1.5rem,3vw,3rem)}
.lede{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);line-height:1.5;max-width:46ch}
.slot{display:grid;gap:.85rem;justify-items:start;align-content:start}
.slot .btn{min-width:min(100%,15rem)}
.micro{font-size:.9375rem;color:var(--sand);max-width:44ch}
@media (min-width:64rem){.hero-foot{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4rem}}

/* Reading surfaces and the headline scale (Q-25): question, then punch line, then answer */
.band{padding-block:clamp(3.5rem,2rem + 5vw,7rem)}
.paper{background:var(--bone)}
.white{background:var(--white)}
.sandb{background:var(--sand)}
.rule{border-top:1px solid var(--stone)}
.qh{font:800 clamp(1.5rem,1rem + 1.6vw,2.5rem)/1.1 var(--display);letter-spacing:-.025em;text-wrap:balance;max-width:28ch;overflow-wrap:break-word}
.qh-xl{font:800 clamp(1.875rem,1.25rem + 3vw,4rem)/1.05 var(--display);letter-spacing:-.03em;text-wrap:balance;max-width:22ch;overflow-wrap:break-word}
.dl{margin-top:1rem;font:800 clamp(1.75rem,1rem + 3vw,3.5rem)/1.05 var(--display);letter-spacing:-.03em;max-width:22ch;text-wrap:balance;overflow-wrap:break-word}
.dl-big{font-size:clamp(2.5rem,1rem + 6vw,6rem);line-height:.98;letter-spacing:-.04em}
.answer{margin-top:1.5rem;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;max-width:56ch}
.answer+.answer{margin-top:1rem}
.also{margin-top:1rem;color:var(--graphite);max-width:56ch}
.closing-line{margin-top:1.75rem;font:700 clamp(1.25rem,1rem + .9vw,1.75rem)/1.3 var(--display);letter-spacing:-.015em;max-width:40ch;text-wrap:balance}
.textlink{display:inline-block;padding-block:.25rem;font-weight:600;font-size:1.0625rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
.textlink:hover{text-decoration-thickness:3px}
.on-light .textlink{color:var(--tide)}
.wrap>.textlink{margin-top:1.75rem}
.links{display:grid;justify-items:start;gap:.35rem;margin-top:1.5rem}
.on-light .btn{border-color:var(--ink)}
.on-light .btn:hover{background:var(--ink);color:var(--bone)}

/* Client quotes: shown together and still. Each shows a verbatim headline; "More" expands the rest with no script */
.quotes{display:grid;gap:2.5rem;margin-top:clamp(1.75rem,3vw,3rem)}
.q{border-top:2px solid var(--ink);padding-top:1.25rem;min-width:0}
.qx{font:800 clamp(1.25rem,1rem + 1vw,1.75rem)/1.2 var(--display);letter-spacing:-.015em;text-wrap:pretty}
.q-lead .qx{font-size:clamp(1.5rem,1rem + 2.2vw,2.75rem);line-height:1.12;letter-spacing:-.025em;color:var(--tide);max-width:30ch}
.qd{margin-top:.5rem}
.qd summary{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;cursor:pointer;list-style:none;color:var(--tide);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.qd summary::-webkit-details-marker{display:none}
.qd summary::after{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.qd[open] summary::after{transform:translateY(.1em) rotate(-135deg)}
.qd summary:hover{text-decoration-thickness:3px}
.qd .s-less,.qd[open] .s-more{display:none}
.qd[open] .s-less{display:inline}
.qd blockquote{padding-block:.25rem .5rem}
.qd blockquote p{font-size:1.0625rem;line-height:1.6;max-width:62ch}
.q-lead .qd blockquote p{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}
.q figcaption{display:flex;align-items:center;gap:.6rem;margin-top:.75rem;font-weight:600}
@media (min-width:64rem){.quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem}.q-lead{grid-column:1/-1}}
.aside{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--stone);color:var(--graphite);max-width:52ch}

/* People */
.cols{display:grid;gap:1.75rem;margin-top:1.5rem}
.cols .answer{margin-top:0}
.beat{background:var(--sand);padding:1.25rem 1.375rem;max-width:40rem}
.beat .k{font:700 .75rem/1.35 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--graphite);margin-bottom:.5rem}
@media (min-width:56rem){.cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4rem;align-items:start}}
.crew{display:grid;gap:2rem;margin-top:clamp(2rem,4vw,3rem)}
.crew li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem 1.25rem;align-items:start}
.crew .photo{display:block;width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1)}
.crew h3{font-size:clamp(1.25rem,1rem + .8vw,1.625rem);line-height:1.15;letter-spacing:-.015em}
.crew .role{font:700 .75rem/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem;color:var(--graphite)}
.crew .xp{margin-top:.5rem;max-width:52ch}
.crew .li-link{display:inline-block;margin-top:.5rem;padding-block:.25rem;font-weight:600;color:var(--tide);text-underline-offset:.3em}
@media (min-width:48rem){.crew{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}.crew li{grid-template-columns:9rem minmax(0,1fr)}}

/* The read: the sample on Bone paper over the Sand band */
.plate{margin-top:clamp(2rem,4vw,3rem);max-width:62rem}
.card-intro{font-weight:600;margin-bottom:1rem;max-width:60ch}
.plate figcaption{margin-top:.75rem;font-size:.875rem;color:var(--graphite)}
.page{position:relative;background:var(--bone);color:var(--ink);border:1px solid var(--stone)}
.doc-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:2.5rem;background:var(--ink);color:var(--bone);padding:.6rem clamp(.9rem,.6rem + 1.5vw,1.5rem)}
.doc-head .t{display:inline-flex;align-items:center;gap:.55rem;font:800 .75rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase}
.doc-head img{display:block;width:18px;height:18px;flex:none}
.doc-head .pg{font:600 .75rem/1 var(--text);letter-spacing:.06em;color:var(--sand)}
.stamp{position:absolute;top:3.5rem;right:clamp(.9rem,.6rem + 1.5vw,1.5rem);transform:rotate(-7deg);background:var(--bone);border:2px solid var(--tide);color:var(--tide);font:800 .75rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;padding:.35rem .5rem .35rem .7rem;border-radius:2px}
.doc-body{padding:clamp(1rem,.6rem + 2vw,2rem)}
.stitle{font:800 clamp(1.125rem,1rem + .6vw,1.5rem)/1.2 var(--display);padding-right:5.5rem}
.smeta{margin-top:.25rem;color:var(--graphite);font-size:.9375rem}
.mh{margin-top:1.25rem;font:800 1.0625rem/1.3 var(--display)}
.map-wrap{margin-top:1rem;overflow-x:auto}
.map{display:block;width:100%;min-width:34rem;max-width:50rem;height:auto}
.map text{font-family:var(--text);font-size:12px;font-weight:600;fill:var(--ink)}
.map .qn{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;fill:var(--slate)}
.map .tag{font-family:var(--display);font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.map .ax{font-size:11px;font-weight:600;fill:var(--slate)}
.map .axt{font-size:12px;font-weight:700}
.swipe{display:none;margin-top:.5rem;font-size:.875rem;color:var(--graphite)}
.map-legend{margin-top:1rem;font-size:.9375rem;max-width:72ch}
.key{margin-top:1.25rem;border-top:2px solid var(--ink)}
.key li{padding-block:.85rem;border-bottom:1px solid var(--sand);font-size:.9375rem;line-height:1.5;max-width:80ch}
.key b{font-family:var(--display);font-weight:800;font-size:1.0625rem}
@media (max-width:37rem){.swipe{display:block}}

/* Running order */
.running{margin-top:2rem;border-top:2px solid var(--ink)}
.running li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.35rem 1rem;padding-block:1.25rem;border-bottom:1px solid var(--ink)}
.running .n{grid-row:span 2;font:800 1.5rem/1.1 var(--display);color:var(--tide)}
.running h3{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .6em;font-size:clamp(1.25rem,1rem + 1vw,1.875rem);line-height:1.1;letter-spacing:-.02em}
.running h3 .sq{width:.36em;height:.36em}
.running .start{display:inline-block;padding:.3rem .45rem;border:1px solid var(--ink);border-radius:2px;font:700 .6875rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase}
.running p{max-width:58ch;color:var(--graphite)}

/* Questions and answers, kept for AI search */
.qa{margin-top:clamp(1.5rem,3vw,2.5rem);border-top:2px solid var(--ink)}
.qa>div{display:grid;gap:.4rem 3rem;padding-block:1.25rem;border-bottom:1px solid var(--ink)}
.qa dt a{font:700 clamp(1.125rem,1rem + .6vw,1.5rem)/1.25 var(--display);letter-spacing:-.015em;text-decoration:none;text-wrap:balance}
.qa dt a:hover{color:var(--tide);text-decoration:underline;text-underline-offset:.2em}
.qa dd{max-width:60ch;color:var(--carbon)}
@media (min-width:56rem){.qa>div{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:baseline}}

/* Finale and footer: the Ink house returns */
.finale{background:var(--ink);color:var(--bone)}
.finale .slot{margin-top:2rem}
.site-foot{background:var(--ink);color:var(--bone);border-top:1px solid var(--slate);padding-block:clamp(3rem,6vw,5rem) 2rem}
.tagline{margin-top:1.5rem;font:800 clamp(1.5rem,1rem + 1.8vw,2.5rem)/1.05 var(--display);letter-spacing:-.03em}
.foot-cols{display:grid;gap:2rem;margin-top:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.foot-cols .label{font:700 .75rem/1.35 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-bottom:.5rem}
.foot-cols a{display:inline-block;padding-block:.35rem;font-size:.9375rem;text-decoration:none}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:.3em}
.credline{margin-top:2.5rem;font-size:.9375rem}
.credline a{text-underline-offset:.3em}
.base{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--slate);color:var(--sand);font-size:.875rem}

@media (forced-colors:active){
  .page,.photo,.q{border:1px solid CanvasText}
  .qd summary::after{border-color:CanvasText}
}

/* Print: white paper, Ink type, every quote printed in full */
@media print{
  @page{size:letter;margin:.6in}
  html,body{background:#FFFFFF}
  *{background:transparent!important;color:#0F1A2C!important;border-color:#0F1A2C!important;box-shadow:none!important}
  .skip,.nav,.btn-sm,.qd>summary,.swipe{display:none!important}
  .lockup .logo-screen{display:none!important}
  .lockup .logo-print{display:block!important}
  .band,.site-foot{padding-block:18pt}
  .hero{padding-block:0 18pt}
  .d1{font-size:30pt}.dl-big{font-size:30pt}.dl{font-size:20pt}.qh-xl{font-size:24pt}
  .q,.plate,.running li,.qa>div,.crew li{break-inside:avoid}
  .map-wrap{overflow:visible}
  .map{min-width:0}
  .stamp{display:none!important}
  .doc-head{border-bottom:1px solid #0F1A2C}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;font-weight:400;overflow-wrap:anywhere}
  .sq{background:#C8A24A!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* Kept in its own block: browsers that do not know ::details-content drop only this rule, and print the headlines alone */
@media print{.qd::details-content{content-visibility:visible;display:block;height:auto}}