/* The guide is a reading surface; all colours and shared specimens use site tokens. */
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body.guide { margin:0; background:var(--color-paper); color:var(--color-ink); font:var(--type-body); }
a { text-decoration:none; }
button { font:inherit; cursor:pointer; }
img,video { display:block; max-width:100%; }
h1,h2,h3,p,figure,dl,dd { margin:0; }
code { font-family:var(--mono); font-weight:400; }
:focus-visible { outline:2px solid var(--color-focus); outline-offset:4px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:12px; left:12px; z-index:10; transform:translateY(-160%); padding:10px 16px; background:var(--color-ink); color:var(--color-paper); font:var(--type-action); }
.skip-link:focus { transform:none; }
.guide .journal-header { max-width:var(--site-width); }
.guide .journal-header a[aria-current=page] { color:var(--color-ink); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.guide .display-controls button { min-height:var(--hit-target); }
.guide-layout { display:grid; grid-template-columns:180px minmax(0,var(--measure)); gap:40px; max-width:var(--site-width); margin-inline:auto; }
.guide-page { min-width:0; }
.guide-eyebrow,.guide-section-number,.guide-specimen-label { font:var(--type-label); letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted); }
.guide-contents { padding-top:66px; }
.guide-contents-inner { position:sticky; top:32px; }
.guide-contents nav { margin-top:18px; }
.guide-contents nav a { display:grid; grid-template-columns:24px 1fr; align-items:center; gap:5px; min-height:var(--hit-target); font:12px/1.4 var(--body); color:var(--color-muted); }
.guide-contents nav a span { font-size:10px; color:var(--color-muted); }
.guide-contents nav a:hover,.guide-contents nav a[aria-current=location] { color:var(--color-link); }
.guide-contents nav a[aria-current=location] { text-decoration:underline; text-underline-offset:5px; }
.guide-back { display:flex; align-items:center; min-height:var(--hit-target); margin-top:28px; color:var(--color-link); font:11px/1.5 var(--body); }
.guide-intro { padding-top:54px; padding-bottom:34px; }
.guide-intro h1 { margin-top:19px; font:var(--type-display); letter-spacing:-.035em; text-wrap:balance; }
.guide-intro h1>span { color:var(--color-pop); }
.guide-deck { max-width:35ch; margin-top:18px; font:400 clamp(19px,2.2vw,23px)/1.5 var(--serif); color:var(--color-body); }
.guide-intro-foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; margin-top:30px; padding-top:14px; border-top:1px solid var(--color-rule); color:var(--color-muted); font:11px/1.5 var(--body); }
.guide-intro-foot strong { font-weight:500; color:var(--color-ink); }
.guide-mobile-contents { display:none; }
.guide-section { margin-top:22px; padding-top:25px; padding-bottom:24px; border-top:1px solid var(--color-rule); scroll-margin-top:22px; }
.guide-section-heading { display:flex; gap:16px; align-items:baseline; }
.guide-section-number { flex:none; }
.guide-section h2 { font:500 clamp(25px,3vw,31px)/1.3 var(--serif); letter-spacing:-.025em; text-wrap:balance; }
.guide-lead { max-width:62ch; margin-top:15px; color:var(--color-body); font:16px/1.65 var(--body); }
.guide-note { color:var(--color-muted); font:12px/1.6 var(--body); }
.guide-note:empty { display:none; }
.guide-section>.guide-note { margin-top:18px; max-width:68ch; }
.guide-colour-opening { display:flex; align-items:center; justify-content:space-between; margin-top:27px; padding:15px 28px 12px; background:var(--color-surface); border-radius:var(--radius-small); }
.guide-colour-opening>span { color:var(--color-ink); font:500 90px/1.15 var(--serif); letter-spacing:-.065em; }
.guide-colour-opening>div { display:flex; gap:8px; align-self:flex-end; padding-bottom:16px; }
.guide-colour-opening i { width:12px; height:32px; background:var(--color-pop); }
.guide-colour-opening i:nth-child(2) { height:24px; background:var(--color-ready-pop); }
.guide-colour-opening i:nth-child(3) { height:18px; background:var(--color-soon-pop); }
.guide-colour-opening i:nth-child(4) { height:12px; background:var(--color-danger-pop); }
.guide-neutral-swatches { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:var(--space-6); }
.guide-neutral-swatch { min-width:0; }
.guide-swatch-chip { height:54px; background:var(--swatch); border:1px solid var(--color-rule); border-radius:var(--radius-small); }
.guide-neutral-swatch h3 { margin-top:9px; font:500 13px/1.4 var(--body); }
.guide-swatch-value { display:block; margin-top:3px; color:var(--color-muted); font:10px/1.5 var(--body); }
.guide-accent-swatches { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; margin-top:28px; }
.guide-accent-swatch { padding-top:12px; border-top:3px solid var(--swatch); min-width:0; }
.guide-accent-swatch h3 { display:flex; align-items:center; gap:6px; font:500 13px/1.4 var(--body); }
.guide-accent-swatch p { margin-top:6px; color:var(--color-muted); font:12px/1.5 var(--body); }
.guide-colour-dot { display:inline-block; flex:none; width:6px; height:6px; border-radius:50%; background:var(--dot,var(--swatch)); }
.guide-disclosure { margin-top:20px; border-top:1px solid var(--color-rule); }
.guide-disclosure summary { display:list-item; min-height:var(--hit-target); padding:14px 0; font:500 13px/1.5 var(--body); cursor:pointer; color:var(--color-ink); }
.guide-disclosure summary>span { margin-left:8px; color:var(--color-muted); font:11px/1.5 var(--body); }
.guide-disclosure summary:hover { color:var(--color-link); }
.guide-disclosure>p { margin:0 0 14px; max-width:68ch; font:13px/1.6 var(--body); color:var(--color-muted); }
.guide-table { width:100%; border-collapse:collapse; font:12px/1.5 var(--body); text-align:left; }
.guide-table th { padding:10px 10px 10px 0; font:500 10px/1.5 var(--body); color:var(--color-muted); border-bottom:1px solid var(--color-rule); }
.guide-table td { padding:11px 10px 11px 0; border-bottom:1px solid var(--color-rule); vertical-align:middle; }
.guide-table th:last-child,.guide-table td:last-child { padding-right:0; }
.guide-table td:nth-child(2) { white-space:nowrap; font-family:var(--body); font-size:11px; }
.guide-contrast-sample { display:inline-block; padding:2px 7px; border:1px solid var(--color-rule); margin-right:8px; font:500 13px/1.2 var(--body); background:var(--pair-background); color:var(--pair-text); }
.guide-contrast-pass { color:var(--color-ready); font:11px/1.5 var(--body); }
.guide-contrast-fail { color:var(--color-danger); font:11px/1.5 var(--body); }
.guide-token-table code { display:block; overflow-wrap:anywhere; font-size:11px; color:var(--color-ink); }
.guide-token-table td>small { display:block; margin-top:3px; color:var(--color-muted); font:12px/1.5 var(--body); }
.guide-token-table td:nth-child(2) { vertical-align:top; padding-top:14px; }
.guide-token-value { display:flex; align-items:center; gap:7px; }
.guide-token-value>i { display:inline-block; width:12px; height:12px; background:var(--swatch); border:1px solid var(--color-rule); border-radius:2px; }
.guide-copy-token { min-width:var(--hit-target); min-height:var(--hit-target); padding:6px; border:1px solid var(--color-rule); border-radius:var(--radius-small); background:transparent; color:var(--color-link); font:11px/1.5 var(--body); }
.guide-copy-token:hover { background:var(--color-surface); border-color:var(--color-muted); }
.guide-type-list { margin-top:24px; }
.guide-type-row { display:grid; grid-template-columns:160px minmax(0,1fr); gap:25px; padding:22px 0; border-top:1px solid var(--color-rule); align-items:start; }
.guide-type-role { padding-top:3px; }
.guide-type-role h3 { font:500 13px/1.5 var(--body); }
.guide-type-role>p { margin-top:4px; color:var(--color-muted); font:11px/1.5 var(--body); }
.guide-type-role code { white-space:nowrap; font-size:10px; }
.guide-type-title { font:var(--type-display); letter-spacing:-.035em; }
.guide-type-project { font:var(--type-project); letter-spacing:-.035em; }
.guide-type-body { font:var(--type-body); color:var(--color-body); }
.guide-type-label { font:var(--type-label); color:var(--color-muted); }
.guide-type-nav { font:var(--type-navigation); letter-spacing:.045em; }
.guide-type-mast { font:850 16px/1 var(--display); font-stretch:125%; letter-spacing:.025em; text-transform:uppercase; padding-top:7px; }
.guide-type-meta { margin-top:10px; color:var(--color-muted); font:10px/1.5 var(--body); }
.guide-action-specimen { margin-top:24px; padding:20px 22px; background:var(--color-surface); border-radius:var(--radius-small); }
.guide-example-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px 24px; margin-top:16px; }
.guide-action-specimen>.guide-note { margin-top:13px; color:var(--color-body); }
.guide .card-launch { display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.guide .card-watch,.guide .card-gallery { display:inline-flex; align-items:center; background:transparent; border:0; cursor:pointer; min-height:var(--hit-target); }
.guide .card-watch:hover,.guide .card-gallery:hover { text-decoration:underline; text-underline-offset:5px; }
.guide-role-list { margin-top:22px; }
.guide-role-list>div { display:grid; grid-template-columns:145px minmax(0,1fr); gap:20px; padding:13px 0; border-bottom:1px solid var(--color-rule); font:13px/1.6 var(--body); }
.guide-role-list dt { font-weight:500; }
.guide-role-list dd { color:var(--color-body); }
.guide-role-list dd strong { color:var(--color-ink); font-weight:500; font-family:var(--body); font-size:12px; }
.guide-status-row { display:flex; align-items:center; flex-wrap:wrap; gap:18px 24px; margin-top:24px; }
.guide-status { display:inline-flex; gap:7px; align-items:center; font:11px/1.5 var(--body); white-space:nowrap; }
.guide-status::before { content:''; width:6px; height:6px; background:var(--status-pop); border-radius:50%; }
.guide-status-ready { --status-pop:var(--color-ready-pop); color:var(--color-ready); }
.guide-status-soon { --status-pop:var(--color-soon-pop); color:var(--color-soon); }
.guide-status-row>p { width:100%; color:var(--color-muted); font:12px/1.5 var(--body); }
.guide-specimen-heading { display:flex; justify-content:space-between; gap:15px; margin-top:28px; margin-bottom:20px; padding-top:14px; border-top:1px solid var(--color-rule); }
.guide-specimen-heading>span:last-child { color:var(--color-muted); font:10px/1.5 var(--body); }
.guide-media-example { min-width:0; scroll-margin-top:24px; }
.guide-media-stage { --media-ratio:1.5; }
.guide-media-stage>img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; }
.guide-media-stage [hidden] { display:none; }
.guide-media-controls { display:flex; align-items:center; gap:14px; border-top:1px solid var(--rule); color:var(--muted); font-size:11px; }
.guide-media-controls button { min-width:var(--hit-target); min-height:var(--hit-target); background:transparent; border:0; color:var(--color-muted); font:11px/1.5 var(--body); }
.guide-media-controls button[aria-pressed=true] { color:var(--color-ink); text-decoration:underline; text-underline-offset:5px; }
.guide-media-controls button:hover { color:var(--color-link); }
.guide-media-rules { margin-top:22px; }
.guide-small-heading { margin-bottom:20px; font:500 13px/1.5 var(--body); }
.guide-rhythm-grid { display:grid; grid-template-columns:1fr 1fr; gap:42px; margin-top:28px; }
.guide-spacing-row { display:grid; grid-template-columns:46px 100px 1fr; gap:10px; align-items:center; min-height:29px; color:var(--color-muted); font:10px/1.5 var(--body); }
.guide-spacing-row>span:first-child { color:var(--color-ink); }
.guide-spacing-bar { display:block; width:var(--step); height:6px; background:var(--color-ink); }
.guide-spacing-value { text-align:right; white-space:nowrap; }
.guide-rhythm-notes { display:flex; flex-direction:column; gap:24px; }
.guide-rhythm-notes h3 { margin-bottom:6px; font:500 13px/1.5 var(--body); }
.guide-rhythm-notes p { color:var(--color-body); font:13px/1.6 var(--body); }
.guide-rhythm-notes strong { color:var(--color-ink); font:12px/1.5 var(--body); }
.guide-shape-sample { padding:15px 17px; border:1px solid var(--color-rule); border-radius:var(--radius-small); }
.guide-touch-sample { display:flex; align-items:center; gap:15px; }
.guide-target-box { display:grid; place-items:center; width:var(--hit-target); height:var(--hit-target); flex:none; border:1px solid var(--color-rule); border-radius:var(--radius-small); color:var(--color-link); font:20px/1 var(--body); }
.guide-motion-specimen { margin-top:24px; border-top:1px solid var(--color-rule); }
.guide-motion-track { height:72px; position:relative; overflow:hidden; border-bottom:1px solid var(--color-rule); }
.guide-motion-track::after { content:''; position:absolute; top:35px; left:10px; right:10px; border-top:1px solid var(--color-rule); }
#motion-marker { position:absolute; z-index:1; top:27px; left:0; width:18px; height:18px; background:var(--color-pop); border-radius:50%; }
#motion-marker.is-moving { animation:guide-feedback var(--motion-normal) var(--ease) both; }
@keyframes guide-feedback { from { left:0; } to { left:calc(100% - 18px); } }
.guide-motion-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
.guide-quiet-control { display:inline-flex; align-items:center; gap:10px; min-height:var(--hit-target); padding:7px 0; color:var(--color-link); border:0; background:transparent; font:12px/1.5 var(--body); }
.guide-quiet-control:hover { text-decoration:underline; text-underline-offset:5px; }
#motion-status { color:var(--color-muted); font:10px/1.5 var(--body); }
.guide-footer { display:grid; grid-template-columns:1fr auto; gap:18px; border-top:1px solid var(--color-rule); margin-top:32px; padding-top:22px; padding-bottom:40px; }
.guide-footer>p { grid-column:1; color:var(--color-muted); font:10px/1.6 var(--body); }
.guide-footer>p>a { text-decoration:underline; text-underline-offset:3px; }
.guide-footer>a:last-child { grid-column:2; grid-row:1; color:var(--color-link); }
@media(max-width:1100px) {
  .guide-layout { max-width:940px; grid-template-columns:150px minmax(0,1fr); gap:28px; }
  .guide-accent-swatches { gap:13px; }
}
@media(max-width:900px) {
  .guide-layout { display:block; max-width:var(--measure); }
  .guide-contents { display:none; }
  .guide-intro { padding-top:35px; }
  .guide-mobile-contents { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 22px; margin-top:25px; }
  .guide-mobile-contents a { display:flex; align-items:center; gap:9px; min-height:var(--hit-target); border-bottom:1px solid var(--color-rule); color:var(--color-body); font:11px/1.4 var(--body); }
  .guide-mobile-contents a span { color:var(--color-muted); font-size:10px; }
  .guide-mobile-contents a:hover { color:var(--color-link); }
}
@media(max-width:620px) {
  .guide .journal-header { min-height:98px; }
  .guide-intro { padding-top:24px; padding-bottom:25px; }
  .guide-intro h1 { margin-top:15px; letter-spacing:-.03em; }
  .guide-deck { font-size:20px; margin-top:17px; }
  .guide-intro-foot { margin-top:25px; font-size:10px; }
  .guide-mobile-contents { gap:0 14px; }
  .guide-mobile-contents a { font-size:10px; gap:6px; }
  .guide-section { margin-top:12px; padding-top:22px; padding-bottom:24px; }
  .guide-section-heading { gap:12px; }
  .guide-section h2 { font-size:25px; }
  .guide-lead { font-size:15px; }
  .guide-colour-opening { margin-top:22px; padding:13px 20px 10px; }
  .guide-colour-opening>span { font-size:74px; }
  .guide-neutral-swatches { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 14px; }
  .guide-swatch-chip { height:42px; }
  .guide-accent-swatches { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .guide-accent-swatch:last-child { grid-column:1/-1; max-width:50%; }
  .guide-disclosure summary>span { display:block; margin:4px 0 0 17px; font-size:10px; }
  .guide-table { font-size:11px; }
  .guide-table td { padding-right:6px; }
  .guide-table td:nth-child(2) { font-size:10px; }
  .guide-contrast-sample { display:none; }
  .guide-token-table code { font-size:10px; }
  .guide-token-table td>small { font-size:11px; }
  .guide-token-value { gap:5px; }
  .guide-token-value>i { display:none; }
  .guide-copy-token { font-size:10px; }
  .guide-type-row { grid-template-columns:1fr; gap:13px; padding:21px 0; }
  .guide-type-role { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; align-items:baseline; }
  .guide-type-role>p { margin-top:0; }
  .guide-type-meta { margin-top:8px; }
  .guide-action-specimen { padding:18px; }
  .guide-example-actions { gap:7px 21px; }
  .guide-example-actions>.card-launch { flex-basis:100%; }
  .guide-role-list>div { grid-template-columns:1fr; gap:5px; padding-block:14px; }
  .guide-status-row { gap:15px 22px; }
  .guide-status-row>p { font-size:11px; }
  .guide-specimen-heading { flex-direction:column; gap:6px; margin-top:24px; }
  .guide-rhythm-grid { grid-template-columns:1fr; gap:30px; margin-top:24px; }
  .guide-spacing-row { grid-template-columns:46px 1fr 90px; }
  .guide-rhythm-notes { gap:21px; }
  .guide-touch-sample { align-items:flex-start; }
  .guide-motion-controls { align-items:flex-start; flex-direction:column; gap:0; }
  #motion-status { padding-bottom:7px; }
  .guide-footer { margin-top:20px; gap:18px 8px; }
  .guide-footer>p { grid-column:1/-1; font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  #motion-marker.is-moving { animation:none; left:calc(100% - 18px); }
}

.guide-type-nav { font:var(--type-navigation); }
.guide-type-mast { font:700 23px/1 var(--body); letter-spacing:-.055em; text-transform:none; }