/* SpruceMySite Studio — studio.sprucemysite.com.au
   One stylesheet for every page in /studio. Plain CSS, no build step. */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/hanken-grotesk.woff2) format("woff2")}

:root{
  --plaster:#F1EDE6;
  --paper:#F8F6F1;
  --ink:#1B1916;
  --ink-2:#57514A;
  --ink-3:#6B645B;
  --line:rgba(27,25,22,.14);
  --night:#14130F;
  --night-ink:#ECE7DE;
  --night-2:#A39C91;
  --accent:#9C7A4E;

  --serif:"Instrument Serif", "Times New Roman", Georgia, serif;
  --sans:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter:clamp(16px, 4vw, 56px);
  --max:1320px;
  --ease:cubic-bezier(.2,.7,.1,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--plaster);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--plaster)}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--plaster);padding:10px 14px;z-index:20}
.skip:focus{left:8px}

/* ---------- type ---------- */
.label{font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:.98;margin:0;text-wrap:balance}
.display em,.serif-em{font-style:italic}
h2.display{font-size:clamp(42px, 6vw, 86px)}
.lede{font-size:clamp(18px, 1.6vw, 21px);line-height:1.55;color:var(--ink-2);max-width:34em}
.num{font:400 15px/1 var(--serif);font-style:italic;color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:17px 26px;border:1px solid var(--ink);background:var(--ink);color:var(--plaster);cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease)}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--plaster)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.link{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s}
.link:hover{border-color:currentColor}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:10;background:color-mix(in srgb, var(--plaster) 96%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-head.is-scrolled{border-color:var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.mark{text-decoration:none;display:flex;align-items:baseline;gap:.45em;white-space:nowrap}
.mark b{font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.mark i{font:italic 400 22px/1 var(--serif)}
.site-nav{display:flex;gap:clamp(16px,2.6vw,36px);align-items:center}
.site-nav a{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink-2)}
.site-nav a:hover{color:var(--ink)}
.site-nav .nav-cta{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px}
@media (max-width:720px){.site-nav a:not(.nav-cta){display:none}}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero h1{font-size:clamp(50px, 6.2vw, 98px);margin:0 0 28px}
.hero h1 em{display:inline-block}
.hero .lede{margin:0 0 36px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* the sample card */
.sample{margin:0;position:relative}
.sample-face{position:relative;aspect-ratio:4/5;overflow:hidden;background:#d8cfc2;box-shadow:0 1px 0 rgba(0,0,0,.04),0 30px 60px -30px rgba(27,25,22,.35)}
.sample-face .mat{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.sample-face .mat.is-on{opacity:1}
.sample-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 70%,rgba(0,0,0,.12) 100%)}
.sample-tag{position:absolute;left:16px;bottom:16px;right:16px;display:flex;justify-content:space-between;align-items:end;gap:12px;background:var(--paper);padding:14px 16px;z-index:2}
.sample-tag .code{font:600 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.sample-tag .name{font:italic 400 23px/1.1 var(--serif);margin-top:4px}
.sample-tag .for{white-space:pre-line;font:500 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:right}
.sample-note{margin:22px 0 0;min-height:5.2em;font:400 clamp(21px,1.9vw,26px)/1.3 var(--serif);transition:opacity .45s var(--ease)}
.sample-note.is-fading{opacity:0}

/* materials — all CSS, no photography */
.mat::before{content:"";position:absolute;inset:0;opacity:.32;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mat--travertine{background:
  radial-gradient(3px 2px at 22% 31%,rgba(120,92,60,.35),transparent),
  radial-gradient(4px 2px at 64% 58%,rgba(120,92,60,.3),transparent),
  radial-gradient(3px 2px at 41% 77%,rgba(120,92,60,.3),transparent),
  radial-gradient(2px 1px at 78% 22%,rgba(120,92,60,.35),transparent),
  linear-gradient(181deg,transparent 0 18%,rgba(150,118,80,.10) 18.5%,transparent 21%,transparent 44%,rgba(255,250,238,.28) 45%,transparent 47%,transparent 63%,rgba(150,118,80,.13) 64%,rgba(150,118,80,.04) 68%,transparent 70%,transparent 86%,rgba(150,118,80,.08) 88%,transparent 90%),
  radial-gradient(120% 70% at 30% 20%,#ECE2D1 0%,#DCCBB1 55%,#CDB899 100%)}
.mat--concrete{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 118px,rgba(40,40,38,.18) 118px 120px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 3px,rgba(0,0,0,.035) 3px 7px),
  radial-gradient(90% 90% at 70% 30%,#B9B6AF 0%,#9E9B94 60%,#8A8780 100%)}
.mat--timber{background:
  repeating-linear-gradient(92deg,rgba(90,55,25,.0) 0 9px,rgba(90,55,25,.16) 9px 10px,rgba(90,55,25,0) 10px 23px,rgba(255,230,190,.14) 23px 25px),
  repeating-linear-gradient(90deg,transparent 0 160px,rgba(60,35,15,.35) 160px 161px),
  linear-gradient(90deg,#C49A6C,#B98B5B 40%,#C9A274 70%,#B48555)}
.mat--porcelain{background:
  radial-gradient(60% 50% at 30% 25%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
  radial-gradient(80% 70% at 80% 90%,rgba(214,170,160,.45),rgba(214,170,160,0) 70%),
  linear-gradient(160deg,#F4E8E2,#E9D5CC)}
.mat--brass{background:
  linear-gradient(100deg,rgba(255,255,255,0) 0 30%,rgba(255,244,210,.55) 42%,rgba(255,255,255,0) 54%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.04) 1px 3px),
  linear-gradient(120deg,#8C6A2F,#C29A52 35%,#E2C27F 50%,#A9823F 70%,#7A5A25)}
.mat--walnut{background:
  repeating-radial-gradient(ellipse 140% 18% at 50% 120%,rgba(30,15,6,0) 0 14px,rgba(30,15,6,.28) 14px 16px,rgba(30,15,6,0) 16px 31px),
  linear-gradient(90deg,#4A2E1C,#5C3A24 45%,#4E301D 70%,#3E2616)}
.mat--wool{background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,rgba(0,0,0,0) 2px 4px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 2px,rgba(0,0,0,0) 2px 4px),
  radial-gradient(70% 60% at 35% 30%,#3A3836,#22211F 70%,#171615)}

/* the sector index */
.index{border-top:1px solid var(--line);margin-top:clamp(48px,6vw,80px)}
.index-head{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0}
.index-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line)}
.index-list li{border-right:1px solid var(--line)}
.index-list li:last-child{border-right:0}
.index-list button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;width:100%;height:100%;padding:18px 14px 22px;cursor:pointer;position:relative;transition:background .4s var(--ease)}
.index-list button::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.index-list button[aria-pressed="true"]::before{transform:scaleX(1)}
.index-list button[aria-pressed="true"]{background:var(--paper)}
.index-list button:hover{background:var(--paper)}
.index-list button:focus-visible{outline:1.5px solid var(--ink);outline-offset:-3px}
.index-list .who{font:400 clamp(20px,1.7vw,24px)/1.1 var(--serif)}
@media (max-width:1000px){
  .index-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .index-list li{border-bottom:1px solid var(--line)}
  .index-list li:nth-child(4n){border-right:0}
}
@media (max-width:560px){
  .index-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index-list li:nth-child(4n){border-right:1px solid var(--line)}
  .index-list li:nth-child(2n){border-right:0}
}

/* ---------- statement ---------- */
.statement{padding:clamp(72px,10vw,150px) 0;border-top:1px solid var(--line)}
.statement-grid{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.statement p.big{font:400 clamp(29px,3.7vw,52px)/1.18 var(--serif);letter-spacing:-.01em;margin:0}
.statement p.big .quiet{color:var(--ink-3)}
@media (max-width:800px){.statement-grid{grid-template-columns:1fr}}

/* ---------- specification (schedule of finishes) ---------- */
.spec{padding:clamp(72px,9vw,130px) 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:40px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.spec-head .lede{margin:0}
@media (max-width:800px){.spec-head{grid-template-columns:1fr;gap:20px}}
.schedule{width:100%;border-collapse:collapse}
.schedule th{font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 16px 14px 0;border-bottom:1px solid var(--ink)}
.schedule td{vertical-align:top;padding:24px 16px 24px 0;border-bottom:1px solid var(--line)}
.schedule .code{font:600 12px/1.6 var(--sans);letter-spacing:.14em;white-space:nowrap;width:7em}
.schedule .item{font:400 clamp(24px,2.3vw,31px)/1.1 var(--serif);width:24%}
.schedule .item em{display:block;font:500 11px/1.6 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.schedule .desc{color:var(--ink-2);padding-right:clamp(16px,12vw,220px)}
.schedule tr{transition:background .3s}
.schedule tbody tr:hover{background:var(--plaster)}
@media (max-width:760px){
  .schedule thead{display:none}
  .schedule,.schedule tbody,.schedule tr,.schedule td{display:block;width:auto}
  .schedule tr{padding:22px 0;border-bottom:1px solid var(--line)}
  .schedule td{border:0;padding:0}
  .schedule .item{margin:6px 0 10px;width:auto}
  .schedule .desc{padding-right:0}
}

/* ---------- concept studies (dark) ---------- */
.night{background:var(--night);color:var(--night-ink)}
.night .label{color:var(--night-2)}
.night .lede{color:var(--night-2)}
.night .btn{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.night .btn:hover{background:transparent;color:var(--night-ink)}
.studies{padding:clamp(80px,11vw,170px) 0}
.studies-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center}
.studies h2{margin:20px 0 28px}
.studies .lede{margin:0 0 36px}
@media (max-width:860px){.studies-grid{grid-template-columns:1fr}}
.envelope{position:relative;aspect-ratio:5/4;border:1px solid rgba(236,231,222,.18);display:grid;place-items:center;overflow:hidden}
.envelope::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .5px),rgba(236,231,222,.18) 50%,transparent calc(50% + .5px)),linear-gradient(to top left,transparent calc(50% - .5px),rgba(236,231,222,.18) 50%,transparent calc(50% + .5px));background-size:100% 62%;background-repeat:no-repeat}
.envelope .seal{position:relative;text-align:center;padding:28px 34px;background:var(--night);border:1px solid rgba(236,231,222,.3)}
.envelope .seal .display{font-size:clamp(26px,2.6vw,36px);font-style:italic}
.envelope .seal .label{display:block;margin-top:10px}

/* ---------- process ---------- */
.process{padding:clamp(72px,9vw,130px) 0}
.process-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.process-head .lede{margin:0;max-width:26em}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
.steps li{padding:22px 20px 0 0}
.steps .num{display:block;margin-bottom:28px;font-size:16px}
.steps h3{font:400 28px/1.1 var(--serif);margin:0 0 10px}
.steps p{margin:0;color:var(--ink-2);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:36px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- about ---------- */
.about{padding:clamp(72px,9vw,130px) 0;border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.portrait{margin:0}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.portrait figcaption{margin-top:12px}
.about h2{margin:16px 0 28px}
.about p{color:var(--ink-2);max-width:36em}
.facts{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.facts li{padding:18px 16px 0 0;display:flex;flex-direction:column;justify-content:flex-end}
.facts b{display:block;font:400 38px/1 var(--serif);margin-bottom:8px}
.facts span{font-size:14px;color:var(--ink-2)}
@media (max-width:800px){.about-grid{grid-template-columns:1fr}.portrait{max-width:360px}}
@media (max-width:480px){.facts{grid-template-columns:1fr 1fr}.facts li:last-child{grid-column:1/-1;padding-top:14px}}

/* ---------- enquire ---------- */
.enquire{padding:clamp(72px,9vw,130px) 0;background:var(--paper);border-top:1px solid var(--line)}
.enquire-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(40px,6vw,100px)}
.enquire h2{margin:16px 0 24px}
.direct{margin-top:36px;display:grid;gap:14px}
.direct a{font:400 25px/1.2 var(--serif);text-decoration:none}
.direct a:hover{font-style:italic}
@media (max-width:860px){.enquire-grid{grid-template-columns:1fr}}
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label,.field legend{font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{font:400 17px/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(27,25,22,.3);border-radius:0;padding:10px 0;width:100%;transition:border-color .3s}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:24px}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field .err{display:none;font-size:13px;color:#8E2A1B}
.field.has-error .err{display:block}
.field.has-error input{border-color:#8E2A1B}
fieldset.field{border:0;margin:0;padding:0}
.chips{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips label{font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);border:1px solid rgba(27,25,22,.25);padding:11px 15px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chips input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.chips input:checked+label{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips input:focus-visible+label{outline:1.5px solid var(--ink);outline-offset:3px}
.form-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.form-foot small{color:var(--ink-3);font-size:13px;max-width:30em}
.form-status{grid-column:1/-1;font-size:15px;color:#8E2A1B;margin:0}
.thanks{padding:40px 0}
.thanks .display{font-size:clamp(34px,4vw,52px)}
@media (max-width:560px){.form{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}

/* ---------- footer ---------- */
.site-foot{padding:44px 0 56px;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.site-foot nav{display:flex;gap:24px;flex-wrap:wrap}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--ink)}

/* ---------- reveal ---------- */
.js .rise{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rise.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .js .rise{opacity:1;transform:none}
}

/* =================================================================
   Private letter pages (/for/<client>/)
   ================================================================= */
.letter-head{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.letter-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:clamp(36px,5vw,64px)}
.letter-head h1{font-size:clamp(46px,6vw,94px);max-width:14em}
.letter-head .lede{margin:28px 0 0}
.prose{max-width:40em}
.prose p{margin:0 0 1.15em}
.prose p.sig{font:italic 400 32px/1 var(--serif);margin-top:1.4em}
.letter{padding:clamp(56px,7vw,100px) 0}
.letter-grid{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
@media (max-width:800px){.letter-grid{grid-template-columns:1fr}}
.reveal-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:clamp(28px,4vw,48px);background:var(--night);color:var(--night-ink);text-decoration:none;transition:transform .5s var(--ease)}
.reveal-card:hover{transform:translateY(-3px)}
.reveal-card .display{font-size:clamp(30px,3.6vw,52px)}
.reveal-card .label{color:var(--night-2);display:block;margin-bottom:14px}
.reveal-card .go{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(236,231,222,.4);padding:16px 20px;white-space:nowrap}
@media (max-width:640px){.reveal-card{grid-template-columns:1fr}}
.notes{list-style:none;margin:0;padding:0;counter-reset:n;border-top:1px solid var(--ink)}
.notes li{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:8px 20px;padding:26px 0;border-bottom:1px solid var(--line)}
.notes li::before{counter-increment:n;content:counter(n, lower-roman);font:italic 400 20px/1.3 var(--serif);color:var(--ink-3)}
.notes h3{font:400 clamp(25px,2.5vw,32px)/1.15 var(--serif);margin:0 0 8px}
.notes p{margin:0;color:var(--ink-2);max-width:42em}
.notes code{font:500 .86em/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--paper);padding:2px 6px;border:1px solid var(--line);word-break:break-word}
.notes .fix{display:block;margin-top:10px;font-size:15px;color:var(--ink)}
.notes .fix::before{content:"The fix: ";font-weight:600}
.callout{border-left:2px solid var(--ink);padding:4px 0 4px 22px;margin:28px 0 0;color:var(--ink-2);max-width:40em}