/* Brand guide page — sits on site.css */
.guide { padding-block: 24px 40px; }
.g-title { font-size: clamp(32px, 6vw, 52px); }
.guide .lede { margin-bottom: 36px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 20px; margin-bottom: 20px; }
@media (min-width: 720px) { .card { padding: 30px 32px; } }
.card .sec-h { margin-bottom: 16px; }
.big { font-size: 18px; line-height: 1.5; margin: 0 0 22px; color: var(--ink2); max-width: 34em; }
.big b { color: var(--ink); font-weight: 600; }
.note { color: var(--ink2); font-size: 14px; margin: 14px 0 0; max-width: 40em; }

.signs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.signs > div { border-top: 2px dashed var(--line); padding-top: 14px; }
.signs svg { width: 72px; height: 40px; margin-bottom: 10px; }
.signs b, .marks b { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.signs span, .marks span { color: var(--ink2); font-size: 13.5px; }

.plates { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .plates { grid-template-columns: 1fr 1fr; } }
.plate { margin: 0; border-radius: 12px; padding: 36px 24px 14px; display: flex; flex-direction: column; align-items: center; gap: 22px; border: 1px solid var(--line); }
.plate img { width: min(320px, 90%); height: auto; }
.plate.small img { width: 120px; }
.plate.mari img { width: 110px; border-radius: 24px; }
.plate.wide { padding: 40px 24px; }
.plate.wide img { width: min(460px, 92%); }
.plate.paper { background: var(--paper); }
.plate.ink { background: var(--ink); border-color: var(--ink); }
.plate.mari { background: var(--paper2); }
.plate figcaption { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); align-self: flex-start; }
.plate.ink figcaption { color: rgba(250,249,246,.6); }

.rules { list-style: none; margin: 18px 0 0; padding: 0; }
.rules li { padding: 9px 0 9px 26px; border-bottom: 1px dashed var(--line); color: var(--ink2); font-size: 14px; position: relative; }
.rules li:last-child { border-bottom: 0; }
.rules li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 12px; border-top: 2px dashed var(--mari); }
.rules li b { color: var(--ink); font-weight: 600; }
.rules.x li::before { content: '×'; border: 0; top: 7px; width: auto; font-weight: 600; color: var(--ink); }

.swatches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.sw { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.sw i { height: 72px; border-radius: 10px; background: var(--c); border: 1px solid var(--line); margin-bottom: 8px; }
.sw b { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; }
.sw code { font: 500 12.5px var(--mono); }
.sw span { color: var(--ink2); font-size: 12.5px; }
.ratio { display: flex; height: 14px; border-radius: 99px; overflow: hidden; margin-top: 20px; border: 1px solid var(--line); }

.specimen { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.aa { font-size: 96px; font-weight: 600; line-height: .9; }
.fam { font-size: 20px; font-weight: 600; letter-spacing: .04em; }
.specimen .note { margin-top: 6px; }
.ladder { margin-top: 22px; }
.ladder > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px dashed var(--line); }
.ladder small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.t1 { font-size: clamp(24px, 4.5vw, 34px); font-weight: 600; letter-spacing: .06em; line-height: 1.1; }
.t2 { font-size: 15px; font-weight: 600; letter-spacing: .1em; }
.t3 { font-size: 15px; }
.code { display: inline-block; font: 600 12px/1 var(--mono); letter-spacing: .08em; background: var(--ink); color: var(--paper); padding: 7px 9px 6px; border-radius: 5px; }

.marks { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.marks > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.marks .vis { height: 44px; display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-style: normal; }
.marks svg { width: 140px; height: 30px; }
.cb { width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 6px; display: inline-grid; place-items: center; }
.cb.on { background: var(--ink); }
.cb svg { width: 18px; height: 18px; margin: 0; fill: none; stroke: var(--mari); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mini-stub { display: inline-block; padding: 8px 22px; border: 1.5px solid var(--ink); border-radius: 8px; font-size: 11px; letter-spacing: .12em; color: var(--ink) !important; position: relative;
  -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000), radial-gradient(circle 6px at 100% 50%, transparent 98%, #000); -webkit-mask-composite: source-in; mask-composite: intersect; }

.dodont { display: grid; gap: 14px; }
@media (min-width: 720px) { .dodont { grid-template-columns: 1fr 1fr; } }
.dodont > div { border-radius: 12px; padding: 16px 18px; }
.dodont b { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.dodont p { margin: 8px 0 0; font-size: 14.5px; }
.do { background: var(--mari-soft); }
.dont { background: var(--paper2); }
.dont p { color: var(--ink2); text-decoration: line-through; text-decoration-color: var(--ink3); }

.files { display: flex; flex-wrap: wrap; gap: 8px; }