/* ours.css — peterarnottgolf.com: the back cover of Ettle's yardage book, on an onyx screen, lit by one cyan light.
   The same base as ettle.golf (worlds/ours/ours.css, 20 Oct 2026): onyx and cyan are the screen; paper, ink and graphite are the book.
   A little colour in the drawings (Peter, 20 Oct 2026: "Drawings maybe need a little colour"): the greens and the water in tints of the
   one cyan, and one warm pencil, red, for the flag. The three hexes are the ETTLE BUILD seat's, read from its worktree the same
   afternoon so both sites print the same book. Nothing else on the paper is coloured. */
:root{
  --onyx:#050505; --cyan:#06b6d4; --paper:#e9dfc9; --page:#f2ead8; --ink:#17150f; --graphite:#4d4a43; --lead:#7d786c;
  /* the wash: cyan over the page at 14% (a green) and at 30% (water); flat hexes, what the SVG fills */
  --green-tint:#d1e3d8; --water-tint:#abdbd7;
  /* the red pencil: the flag, and what is riding on it. One hex, on the paper only, never on the onyx. */
  --red-pencil:#b23a22;
  --rule:rgba(23,21,15,.16); --dim:rgba(233,223,201,.72); --faint:rgba(233,223,201,.58);
  /* measured 20 Oct: paper at 50% on onyx is 4.26:1, under AA for the 11px kickers; 58% is 5.44:1. Control edges at 28% are 2.04:1; 42% is 3.28:1. */
  --edge:rgba(233,223,201,.42);
  --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Inter Tight',Inter,system-ui,sans-serif; --hand:'Annie Use Your Telescope',cursive;
  --gutter:clamp(16px,4vw,56px); --max:1200px;
}
*{box-sizing:border-box}
html{background:var(--onyx);scroll-behavior:smooth}
body{margin:0;font:400 16px/1.5 var(--sans);color:var(--paper);background:var(--onyx);-webkit-font-smoothing:antialiased;overflow-x:clip}
main,header{overflow-x:clip}
a{color:inherit}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.kicker{font:600 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
h1{font:500 clamp(46px,7.4vw,88px)/.98 var(--serif);letter-spacing:-.025em;margin:0 0 .3em;color:var(--paper)}
h2{font:500 clamp(31px,4.2vw,48px)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 .4em;color:var(--paper);max-width:18ch}
h3{font:600 20px/1.1 var(--sans);letter-spacing:-.01em;margin:0 0 .4em}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.45;max-width:44ch;color:var(--paper)}
.dim{color:var(--dim)}
.small{font-size:13.5px;line-height:1.5;color:var(--dim)}
.q{font:italic 400 clamp(22px,2.6vw,30px)/1.25 var(--serif);color:var(--paper);max-width:28ch;margin:0 0 .6em}
.by{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.hand{font-family:var(--hand);color:var(--graphite)}
/* the one ask */
.ask{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);letter-spacing:.01em;padding:15px 22px;border-radius:10px;background:var(--cyan);color:var(--onyx);text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.ask.sm{padding:0 16px;min-height:44px;font-size:14px}
.ghost{display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--sans);padding:14px 18px;border-radius:10px;border:1px solid var(--edge);color:var(--paper);background:transparent;text-decoration:none;cursor:pointer}
.asks{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0 10px}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px}
.brand{display:flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;color:var(--paper)}
.brand .mark{width:30px;height:30px;color:var(--cyan)}
.brand .word{font:500 26px/1 var(--serif);letter-spacing:-.02em;position:relative;top:-1px;white-space:nowrap}
.brand .desc{display:none;font:600 9.5px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--faint);margin-left:6px;position:relative;top:1px;white-space:nowrap}
.rooms{display:none;gap:22px}
.rooms a{color:var(--dim);text-decoration:none;font:500 14px/1.1 var(--sans)}
.rooms a:hover{color:var(--paper)}
.navr{display:flex;gap:10px;align-items:center}
.menu{display:inline-flex;align-items:center;min-height:44px;font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:0 14px;border-radius:10px;border:1px solid var(--edge);background:transparent;color:var(--paper);text-decoration:none;white-space:nowrap}
@media(min-width:1024px){.rooms{display:flex}.menu{display:none}.brand .desc{display:inline}}
@media(max-width:1023px){.desk{display:none !important}}
/* sections */
section{padding:clamp(48px,7vw,96px) 0}
.rule{border:0;border-top:1px solid rgba(233,223,201,.14);margin:0}
.two{display:grid;gap:30px}
@media(min-width:900px){.two{grid-template-columns:5fr 6fr;gap:56px;align-items:start}.two.rev>:first-child{order:2}}
/* the hero: the book under the one light */
.hero{position:relative;display:grid;gap:28px;padding-top:8px}
.hero::before{content:"";position:absolute;inset:-120px -30px -80px;background:radial-gradient(42% 50% at 68% 42%,rgba(6,182,212,.13),rgba(6,182,212,0) 70%);pointer-events:none}
.hero>*{position:relative}
@media(min-width:1024px){.hero{grid-template-columns:6fr 5fr;gap:44px;align-items:start;padding-top:20px}}
@media(max-width:1023px){.hero .asks{display:none}h1{font-size:clamp(40px,11vw,56px)}}
/* the book */
.book{position:relative}
.spread{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:1024px){.spread{grid-template-columns:1fr 26px 1fr;gap:0}}
.spine{display:none;background:repeating-linear-gradient(180deg,transparent 0 8px,rgba(233,223,201,.55) 8px 10px,transparent 10px 24px) 0 20px/100% 24px repeat-y}
@media(min-width:1024px){.spine{display:block}}
.pg{position:relative;background:var(--page);color:var(--ink);border-radius:4px;padding:18px 20px 16px;box-shadow:0 40px 70px rgba(0,0,0,.65),0 2px 0 rgba(255,255,255,.04) inset;min-height:200px}
.pg.bound-left{padding-left:34px}
.pg.bound-left::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:12px;background:radial-gradient(circle at 6px 6px,var(--ink) 2.6px,rgba(23,21,15,.18) 3.2px,transparent 3.8px) 0 0/12px 24px repeat-y}
.pg.bound-right{padding-right:34px}
.pg.bound-right::after{content:"";position:absolute;right:9px;top:14px;bottom:14px;width:12px;background:radial-gradient(circle at 6px 6px,var(--ink) 2.6px,rgba(23,21,15,.18) 3.2px,transparent 3.8px) 0 0/12px 24px repeat-y}
.pgh{display:grid;grid-template-columns:auto 1fr auto;gap:0 12px;align-items:end;border-bottom:1px solid var(--ink);padding-bottom:6px;margin-bottom:8px}
.pgh.nonum{grid-template-columns:1fr auto}
.pgh .hn{font:600 44px/.8 var(--sans);letter-spacing:-.04em}
.pgh .pgk{display:block;font:600 9px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-bottom:4px}
.pgh h3{font:600 20px/1 var(--sans);letter-spacing:-.01em;text-transform:uppercase;margin:0}
.pgh .pgn{font:600 9px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);align-self:start;white-space:nowrap}
.scene{position:relative}
.scene svg{width:100%;height:auto;display:block;user-select:none;-webkit-user-select:none}
.pgf{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:10px;font:600 8px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.pgf svg{width:100%;height:auto;display:block}
.pgf svg text{text-transform:none}
/* a card on paper (the record) */
.card{background:var(--page);color:var(--ink);border-radius:4px;padding:18px 20px 16px 34px;box-shadow:0 30px 60px rgba(0,0,0,.6);position:relative}
.card::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:12px;background:radial-gradient(circle at 6px 6px,var(--ink) 2.6px,rgba(23,21,15,.18) 3.2px,transparent 3.8px) 0 0/12px 24px repeat-y}
.golab{font:600 8.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
/* the band: one sentence on a darker strip */
.band{border-top:1px solid rgba(233,223,201,.14);border-bottom:1px solid rgba(233,223,201,.14);background:#0a0a0a}
/* the marker: you */
#marker{position:absolute;left:max(5px,calc((100vw - var(--max))/2 - 30px));top:0;width:22px;height:22px;color:var(--cyan);z-index:30;pointer-events:none;transition:top .25s ease}
#marker .mk{width:22px;height:22px;display:block;filter:drop-shadow(0 0 10px rgba(6,182,212,.55))}
#marker .you{position:absolute;left:-2px;top:26px;white-space:nowrap;font:400 14px/1 var(--hand);color:var(--cyan);opacity:.85;display:none}
@media(min-width:1400px){#marker .you{display:block}}
@media(max-width:1023px){#marker{left:0;width:16px;height:16px}#marker .mk{width:16px;height:16px}}
/* footer: the back of the back cover */
footer.site{background:#0a0a0a;border-top:1px solid rgba(233,223,201,.14);padding:44px 0 90px;margin-top:20px;color:var(--dim)}
footer.site .cols{display:grid;gap:26px;margin:26px 0}
@media(min-width:720px){footer.site .cols{grid-template-columns:1.3fr 1fr 1fr}}
footer.site h4{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px;color:var(--faint)}
footer.site ul{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.75}
footer.site a{text-decoration:none}
footer.site li a{display:inline-block;min-height:44px;line-height:44px}
footer.site .fine{font-size:12.5px;line-height:1.6;color:var(--faint);border-top:1px solid rgba(233,223,201,.14);padding-top:16px}
/* phone: the one ask stays on screen */
.askbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(5,5,5,0),rgba(5,5,5,.92) 40%);display:flex;justify-content:center;transition:transform .25s ease,opacity .25s ease}
.askbar .ask{width:100%;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.askbar.off{transform:translateY(110%);opacity:0;pointer-events:none}
@media(min-width:1024px){.askbar{display:none}footer.site{padding-bottom:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#marker{transition:none}.askbar{transition:none}}