/* Brand book layout. Shares tokens and components with site.css. */

.book-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding-top: clamp(32px, 5vw, 64px); }
.toc { position: sticky; top: 100px; align-self: start; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 7px 0; color: var(--ink-2); text-decoration: none; font-size: .92rem; transition: color .2s; }
.toc a:hover { color: var(--ink); }
@media (max-width: 899px) {
  .book-grid { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { display: flex; gap: 4px 18px; flex-wrap: wrap; }
}

.intro { padding-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--line); }
.intro h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.035em; }
.intro p { margin-top: 18px; color: var(--ink-2); font-size: 1.15rem; max-width: 46ch; }
.intro .btn { margin-top: 28px; }
.intro .btn:hover svg { transform: translateY(2px); }

.chapter { padding: clamp(56px, 8vw, 104px) 0 0; scroll-margin-top: 80px; }
.chapter h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.lead { margin-top: 16px; color: var(--ink-2); font-size: 1.08rem; max-width: 60ch; }
.note { margin-top: 20px; color: var(--ink-2); font-size: .92rem; max-width: 64ch; }
.note code, .chapter code { font: 500 .85em var(--mono); color: var(--ink); }
.sub { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin: 36px 0 14px; }

.on-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .on-dark { display: block; } :root:not([data-theme="light"]) .on-light { display: none; } }
:root[data-theme="dark"] .on-dark { display: block; }
:root[data-theme="dark"] .on-light { display: none; }

/* logo */
.logo-hero { margin: 32px 0 0; padding: clamp(48px, 9vw, 112px) clamp(24px, 6vw, 80px); background: var(--paper-2); border-radius: calc(var(--radius) + 10px); display: grid; place-items: center; }
.logo-hero img { width: min(100%, 520px); height: auto; }

.variants { margin-top: 16px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.variant { margin: 0; border-radius: var(--radius); padding: 28px; min-height: 240px; display: grid; grid-template-rows: 1fr auto; gap: 20px; }
.variant img { align-self: center; justify-self: center; height: auto; }
.variant figcaption { font-weight: 600; font-size: .95rem; }
.variant figcaption span { display: block; font-weight: 400; font-size: .88rem; opacity: .75; margin-top: 2px; }
.v-paper { grid-column: span 4; background: #F5F6F1; color: #171A14; outline: 1px solid var(--line); outline-offset: -1px; }
.v-paper img { width: 96px; }
.v-ink { grid-column: span 8; background: #171A14; color: #EDF0E7; }
.v-ink img { width: min(100%, 300px); }
.v-line { grid-column: span 7; background: #FFFFFF; color: #171A14; outline: 1px solid var(--line); outline-offset: -1px; }
.v-line img { width: min(100%, 300px); }
.v-green { grid-column: span 5; background: #3D6B21; color: #F5F6F1; }
.v-green img { width: 96px; }
@media (max-width: 767px) {
  .variants { grid-template-columns: 1fr; }
  .variant { grid-column: auto; min-height: 200px; }
}

/* space and size */
.space-grid { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.space-demo { margin: 0; }
.clear { position: relative; padding: 72px; background: var(--paper-2); border-radius: var(--radius); display: grid; place-items: center; }
/* x = one hexagon radius = 17/52.26 of the mark width */
.clear img { width: 124px; height: auto; box-shadow: 0 0 0 40px color-mix(in srgb, var(--accent) 14%, transparent); outline: 1.5px dashed var(--accent); outline-offset: 40px; }
.space-demo figcaption { margin-top: 14px; color: var(--ink-2); font-size: .92rem; }
.sizes { display: grid; gap: 12px; }
.size-row { display: flex; align-items: end; gap: 28px; padding: 28px; background: var(--paper-2); border-radius: var(--radius); }
.size-row img { height: auto; }
.sizes p { color: var(--ink-2); font-size: .92rem; margin-bottom: 16px; }
.sizes strong { color: var(--ink); font-weight: 600; }
@media (max-width: 767px) { .space-grid { grid-template-columns: 1fr; } }

/* misuse */
.misuse { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.misuse figure { margin: 0; }
.m-stage { aspect-ratio: 1; background: var(--paper-2); border-radius: var(--radius); display: grid; place-items: center; position: relative; overflow: hidden; }
.m-stage img { width: 46%; height: auto; }
.m-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1.5px), #C0392B calc(50% - 1.5px), #C0392B calc(50% + 1.5px), transparent calc(50% + 1.5px)); opacity: .8; }
.misuse figcaption { margin-top: 10px; font-size: .92rem; color: var(--ink-2); }
@media (max-width: 767px) { .misuse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* colour */
.swatches-mark { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 12px; }
.swatch { all: unset; box-sizing: border-box; cursor: pointer; min-height: 168px; padding: 20px; border-radius: var(--radius); background: var(--c); color: var(--t); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; transition: transform .2s var(--ease); }
.swatch:hover { transform: translateY(-2px); }
.swatch:active { transform: scale(.98); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sw-name { font-weight: 600; }
.sw-hex { font: 500 .85rem var(--mono); }
@media (max-width: 640px) { .swatches-mark { grid-template-columns: 1fr; } .swatch { min-height: 96px; } }

.ui-colours { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ui-col { padding: 12px; border-radius: var(--radius); background: #F5F6F1; color: #171A14; outline: 1px solid var(--line); outline-offset: -1px; }
.ui-dark { background: #121510; color: #EDF0E7; outline-color: #2A2F26; }
.ui-mode { font-weight: 600; font-size: .9rem; padding: 6px 10px 10px; }
.row { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 10px; transition: background-color .2s; }
.row:hover { background: rgb(127 127 127 / .1); }
.row:focus-visible { outline: 2px solid #3D6B21; }
.ui-dark .row:focus-visible { outline-color: #B6E09A; }
.row i { width: 36px; height: 36px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(127 127 127 / .3); }
.row span { font-size: .95rem; }
.row small { font: 400 .78rem var(--mono); opacity: .7; margin-left: 6px; }
.row code { font: 500 .82rem var(--mono); opacity: .85; }
.copied { color: var(--accent); font-weight: 500; }
@media (max-width: 640px) { .ui-colours { grid-template-columns: 1fr; } }

/* type */
.type-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.specimen { padding: 28px; border-radius: var(--radius); background: var(--paper-2); }
.spec-big { font-size: clamp(5rem, 11vw, 8.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.spec-mono .spec-big { font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; }
.spec-name { margin-top: 18px; font-weight: 600; }
.spec-use { margin-top: 4px; color: var(--ink-2); font-size: .92rem; }
.scale { margin-top: 28px; display: grid; gap: 14px; }
.s1 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.s2 { font-size: 1.3rem; font-weight: 500; }
.s3 { color: var(--ink-2); max-width: 52ch; }
.s4 { font: 500 .85rem var(--mono); color: var(--ink-2); }
@media (max-width: 640px) { .type-grid { grid-template-columns: 1fr; } }

/* voice */
.voice { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.say { padding: 24px 28px; border-radius: var(--radius); background: var(--paper-2); display: grid; gap: 14px; align-content: start; }
.say p:not(.tag) { font-size: 1.05rem; }
.say-not { background: transparent; outline: 1px dashed var(--line); outline-offset: -1px; }
.say-not p:not(.tag) { color: var(--ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-2) 50%, transparent); }
.tag { font: 500 .8rem var(--mono); color: var(--accent); }
.say-not .tag { color: var(--ink-2); }
@media (max-width: 640px) { .voice { grid-template-columns: 1fr; } }

/* apps */
.apps-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.app-chip { display: inline-flex; align-items: center; gap: 16px; padding: 14px 24px 14px 14px; border-radius: 999px; background: var(--paper-2); text-decoration: none; transition: transform .2s var(--ease); }
.app-chip:hover { transform: translateY(-2px); }
.app-chip img { width: 56px; height: 56px; border-radius: 14px; }
.app-chip strong { display: block; font-weight: 600; }
.app-chip small { display: block; color: var(--ink-2); font-size: .85rem; }

/* youtube */
.yt { margin-top: 28px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.yt figure { margin: 0; }
.yt figcaption { margin-top: 12px; color: var(--ink-2); font-size: .92rem; }
.yt figcaption strong { color: var(--ink); font-weight: 600; }
.yt-links { display: flex; gap: 16px; margin-top: 6px; }
.yt-links a { color: var(--accent); font-weight: 500; text-underline-offset: 3px; }
.yt-banner { grid-column: 1 / -1; }
.yt-frame { position: relative; border-radius: var(--radius); overflow: hidden; }
.yt-frame img { width: 100%; height: auto; }
.yt-safe { position: absolute; left: 19.8%; top: 35.3%; width: 60.4%; height: 29.4%; outline: 2px dashed rgb(240 239 142 / .8); }
.yt-avatar { grid-column: span 7; }
.yt-avatar img { width: min(100%, 320px); height: auto; border-radius: 50%; }
.yt-watermark { grid-column: span 5; }
.wm-stage { width: min(100%, 320px); aspect-ratio: 16 / 9; border-radius: var(--radius); background: url("/assets/img/inktype-site-800.webp") center / cover; position: relative; }
.wm-stage img { position: absolute; right: 10px; bottom: 10px; width: 44px; height: auto; }
@media (max-width: 767px) { .yt-avatar, .yt-watermark { grid-column: 1 / -1; } }

/* downloads */
.dl-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.dl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.dl a { display: inline-block; padding: 8px 0; font: 500 .88rem var(--mono); color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 4px; }
.dl a:hover { text-decoration-color: var(--accent); }
@media (max-width: 640px) { .dl-groups, .dl { grid-template-columns: 1fr; } }