/* ohtl.org styles, shared by every page. Page-specific rules are at the end, scoped by the class on <body>. */

/* Inter is hosted on the site (public/fonts, SIL Open Font License in OFL.txt): one variable font covers every weight. "Inter Fallback" is Arial resized to Inter's width and line metrics, so text does not rewrap or jump if it shows before Inter arrives. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-5.3.0-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-5.3.0-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter Fallback"; font-weight: 100 600; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 106.76%; ascent-override: 90.74%; descent-override: 22.59%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 700 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 106.76%; ascent-override: 90.74%; descent-override: 22.59%; line-gap-override: 0%; }
* { box-sizing: border-box; }
body { margin:0; background:#f4f4f2; color:#1b1b1b; font:16px/1.5 system-ui, sans-serif; }
/* Selected text: a muted version of the band yellow, so it still shows on yellow backgrounds */
::selection { background:#ffe680; color:#111; }

/* Base */
.spec { container-type: inline-size; font-family: Inter, "Inter Fallback", system-ui, sans-serif; --acc:#d7261e; --fg:#111; --mut:#555; --rule:#111; --bg:#fff; background:var(--bg); color:var(--fg); }
.spec .in { max-width: 56rem; margin: 0 auto; padding: 3.5rem 1.5rem; }
.spec h1 { margin:0; font-weight:800; letter-spacing:-.025em; line-height:1; font-size: clamp(2.2rem, 8cqi, 4.2rem); }
.spec .row { margin-top: 1.75rem; }
.spec .lbl { margin:0 0 .4rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.spec .c p { margin: 0 0 .75rem; }
.spec .tag { font-size:1.2rem; font-weight:500; line-height:1.35; max-width: 34rem; }
.spec ul, .spec ol.steps { list-style:none; margin:0; padding:0; counter-reset: n; }
.spec li { counter-increment: n; }
.spec li::before { content: counter(n, decimal-leading-zero); display:block; font-weight:800; color:var(--acc); }
.spec a { color: inherit; text-decoration-color: #999; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.spec .mut { color: var(--mut); }

/* Label rail */
.rail .row { display:grid; grid-template-columns: 1fr; gap:.25rem 2rem; border-top:1px solid var(--rule); padding-top:1rem; margin-top:1.25rem; }
@container (min-width: 640px) {
  .rail .row { grid-template-columns: 11rem 1fr; }
  .rail .lbl { padding-top:.2rem; }
}

/* Numbered 3-col list */
.cols ul, .cols ol.steps { display:grid; gap:1rem; grid-template-columns: 1fr; }
@container (min-width: 560px) { .cols ul, .cols ol.steps { grid-template-columns: repeat(3, 1fr); } }

/* Vertical wordmark, yellow */
.vF { --acc:#111; --bg:#fff; }
.vF .in { display:grid; grid-template-columns: 1fr; gap: 0 2.5rem; }
.vF .mark { display:none; }
.vF li::before { color:#111; background:#ffd400; display:inline-block; padding:0 .3rem; margin:0 .5rem 0 0; }
/* Numbered lists: number and bold heading on one line, other text on the next (STYLE.md, Formatting) */
.spec ul:not(.bul) > li > strong:first-child::after, .spec ol.steps > li > strong:first-child::after { content:""; display:block; height:.2rem; }
.vF .lbl { color:#111; }
@container (min-width: 640px) {
  .vF .in { grid-template-columns: 5.5rem 1fr; }
  .vF .mark { display:block; grid-row: 1 / span 20; background:#ffd400; position:relative; min-height: 100%; }
  .vF .mark span { position:absolute; left:50%; bottom:1rem; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font-weight:900; font-size:4.2rem; letter-spacing:-.03em; line-height:1; }
  .vF .in > :not(.mark) { grid-column: 2; }
  /* Site name: runs up the left edge of the yellow band, reading bottom to top like the wordmark */
  .vF .in { position:relative; }
  .vF .in > nav.menu { position:static; padding-left:0; }
  .vF .in > nav.menu::before { display:none; }
  .vF .in > nav.menu .site { position:absolute; top:3.5rem; right:calc(100% - 1.25rem); margin:0; padding:.35rem 0; line-height:1.2; white-space:nowrap; writing-mode:vertical-rl; transform:rotate(180deg); }
}

/* Initial sources: author and title columns, no numbering */
.cols ul.sources { display:block; }
.spec ul.sources li::before { content:none; }
.spec ul.sources li { margin: 0 0 .35rem; }
.spec ul.sources .by { display:block; color: var(--mut); }
@container (min-width: 560px) {
  .spec ul.sources li { display:grid; grid-template-columns: 12rem 1fr; gap: 0 1.5rem; }
  .spec ul.sources .by { color: inherit; }
}

/* Skip link: off screen until it has keyboard focus, then top left in the menu style */
.skip { position:absolute; left:-10000px; top:0; z-index:10; padding:.5rem .75rem; background:#ffd400; color:#111; font:700 .75rem/1.5 Inter, "Inter Fallback", system-ui, sans-serif; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; }
.skip:focus { left:0; }

/* Menu: left of the yellow band on wide screens, above the title otherwise */
.spec .menu { position:relative; display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:0 0 1.25rem -.35rem; padding-left:.75rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
/* Phones only: a short yellow bar (16px) in the left margin, with the site name and menu indented 12px from it, as a hint of the yellow band (hidden from 640px, where the band shows) */
.spec .menu::before { content:""; position:absolute; top:0; bottom:0; left:-.65rem; width:1rem; background:#ffd400; }
.spec .menu a { text-decoration:none; padding:.1rem .35rem; white-space:nowrap; }
.spec .menu a:hover { text-decoration:underline; }
.spec .menu a[aria-current="page"] { background:#ffd400; }
.spec .menu .site { margin-left:.35rem; padding:0 .35rem; border:1px solid #111; background:#fff; font-size:.88rem; line-height:1.5; align-self:center; white-space:normal; }
@container (min-width: 1200px) {
  .vF .in { position:relative; }
  .vF .in > nav.menu { position:absolute; top:3.5rem; right:calc(100% - .25rem); grid-column:auto; flex-direction:column; align-items:flex-end; margin:0; }
  .vF .in > nav.menu .site { position:static; margin:0 0 .2rem; padding:0 .35rem; writing-mode:horizontal-tb; transform:none; line-height:1.5; white-space:normal; text-align:right; }
}

/* Footer: contact email, and links to the terms of use, privacy notice and cookies pages, on every page */
.spec .foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem 2rem; margin-top:3rem; padding-top:1rem; border-top:1px solid var(--rule); }
.spec .foot .mail { margin:0; }
.spec .foot nav { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-left:-.35rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.spec .foot nav a { text-decoration:none; padding:.1rem .35rem; white-space:nowrap; }
.spec .foot nav a:hover { text-decoration:underline; }
.spec .foot nav a[aria-current="page"] { background:#ffd400; }

/* Home page (body.page-home) */
.page-home .cols ul.types { grid-template-columns: 1fr; gap:.6rem; margin:.25rem 0 1rem; }
@container (min-width: 560px) { .page-home .cols ul.coming { grid-template-columns: repeat(2, 1fr); } }

/* How it works page (body.page-how-it-works) */
.page-how-it-works .cols ol.steps { grid-template-columns: 1fr; gap:1.1rem; }
.page-how-it-works .rail .row.wide { grid-template-columns: 1fr; }
@container (min-width: 640px) { .page-how-it-works .rail .row.wide { grid-template-columns: 1fr; } }
.page-how-it-works .spec figure { margin: .25rem 0 0; }
.page-how-it-works .spec .row.wide, .page-how-it-works .spec .row.wide > figure { min-width:0; }
.page-how-it-works .spec .scroll { overflow-x:auto; -webkit-overflow-scrolling: touch; }
.page-how-it-works .spec .scroll:focus-visible { outline:3px solid #111; outline-offset:3px; }
.page-how-it-works .spec figure svg { display:block; width:100%; min-width: 700px; height:auto; color:#111; font-family: Inter, "Inter Fallback", system-ui, sans-serif; }
.page-how-it-works .spec figcaption { margin-top:.6rem; font-size:.875rem; color: var(--mut); max-width: 40rem; }

/* Sources page (body.page-sources) */
.page-sources .spec ul.sources li { margin-bottom:.75rem; }
/* The publisher box sits under the publisher name, so the first column must fit the longest box (about 225px) */
@container (min-width: 560px) { .page-sources .spec ul.sources li { grid-template-columns: 15rem 1fr; } }
/* From 640px the yellow band and label rail leave the publisher/title grid too narrow for the 15rem publisher column plus a readable title, so stack it as on phones */
@container (min-width: 640px) and (max-width: 839px) {
  .page-sources .spec ul.sources li { display:block; }
  .page-sources .spec ul.sources .by { color: var(--mut); }
}
.page-sources .spec .pill { display:table; margin:.2rem 0 0; padding:0 .35rem; border:1px solid #111; background:#fff; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.5; white-space:nowrap; }

/* Roadmap page (body.page-roadmap) */
.page-roadmap .cols ol.steps { grid-template-columns: 1fr; gap:1.4rem; }
.page-roadmap .spec ol.steps p { margin:0; }
.page-roadmap .spec ol.steps p + p { margin-top:.25rem; }
.page-roadmap .rail .row.wide { grid-template-columns: 1fr; }
@container (min-width: 640px) { .page-roadmap .rail .row.wide { grid-template-columns: 1fr; } }
.page-roadmap .spec .row.wide > * { min-width:0; }
.page-roadmap .spec ol.phases { list-style:none; margin:.25rem 0 0; padding:0; display:grid; grid-template-columns: 1fr; gap:.5rem; }
@container (min-width: 480px) { .page-roadmap .spec ol.phases { grid-template-columns: repeat(3, 1fr); } }
@container (min-width: 900px) { .page-roadmap .spec ol.phases { grid-template-columns: repeat(5, 1fr); } }
.page-roadmap .spec ol.phases li { display:flex; flex-direction:column; min-height:8.5rem; border:1px solid #111; padding:.6rem .65rem .55rem; font-size:1rem; font-weight:700; line-height:1.25; }
.page-roadmap .spec ol.phases li::before { content:none; }
.page-roadmap .spec ol.phases li.now { background:#ffd400; }
.page-roadmap .spec ol.phases .n { display:block; margin-bottom:.2rem; font-size:.8125rem; font-weight:800; }
.page-roadmap .spec ol.phases .ft { display:flex; justify-content:space-between; align-items:flex-end; gap:.5rem; margin-top:auto; padding-top:.6rem; }
.page-roadmap .spec ol.phases .st { font-size:.8125rem; font-weight:500; }
.page-roadmap .spec ol.phases svg { display:block; width:1.35rem; height:1.35rem; flex:none; color:#111; }
.page-roadmap .spec .note { margin:.6rem 0 0; font-size:.875rem; color: var(--mut); max-width: 40rem; }
.page-roadmap .spec .pill { display:inline-block; margin-left:.4rem; padding:0 .35rem; border:1px solid #111; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; vertical-align:.1em; }
.page-roadmap .spec .pill.now { background:#ffd400; }

/* FAQ page (body.page-faq) */
.page-faq .spec .qa h3 { margin:0 0 .25rem; font-size:1rem; font-weight:700; line-height:1.35; }
.page-faq .spec .qa + .qa { margin-top:1.25rem; }
.page-faq .spec .qa p { margin: 0 0 .5rem; }
.page-faq .cols ul.bul { display:block; list-style:disc; margin:0 0 .75rem; padding-left:1.25rem; }
.page-faq .spec ul.bul li::before { content:none; }
.page-faq .spec ul.bul li { margin:0 0 .3rem; }
.page-faq .spec .c { min-width:0; }

/* Work with OHTL page (body.page-work-with-ohtl) */
.page-work-with-ohtl .cols ul.steps { grid-template-columns: 1fr; gap:1.1rem; }
.page-work-with-ohtl .spec ul.sources li { margin-bottom:.6rem; }
.page-work-with-ohtl .spec ul.sources .by { font-weight:700; }

/* Governance page (body.page-governance) */
.page-governance .cols ul.steps { grid-template-columns: 1fr; gap:1.1rem; }
.page-governance .spec ul.sources li { margin-bottom:.6rem; }
/* The grid needs a content column of 342px (12rem, the gap and the longest word). From 640px the band and label rail leave it narrower (the page scrolled sideways up to 701px wide), so stack it as on phones up to 739px, which leaves a margin */
@container (min-width: 640px) and (max-width: 739px) {
  .page-governance .spec ul.sources li { display:block; }
  .page-governance .spec ul.sources .by { color: var(--mut); }
}
.page-governance .spec ul.sources .by { font-weight:700; }

/* About page (body.page-about) */
.page-about .cols ul.bul { display:block; list-style:disc; margin:0 0 .75rem; padding-left:1.25rem; }
.page-about .spec ul.bul li::before { content:none; }
.page-about .spec ul.bul li { margin:0 0 .5rem; }
.page-about .spec .c { min-width:0; }

/* Privacy notice page (body.page-privacy) */
.page-privacy .cols ul.bul { display:block; list-style:disc; margin:0 0 .75rem; padding-left:1.25rem; }
.page-privacy .spec ul.bul li::before { content:none; }
.page-privacy .spec ul.bul li { margin:0 0 .5rem; }
.page-privacy .spec .c { min-width:0; }

/* Cookies page (body.page-cookies) */
.page-cookies .spec .c { min-width:0; }

/* Terms of use page (body.page-terms) */
.page-terms .cols ul.bul { display:block; list-style:disc; margin:0 0 .75rem; padding-left:1.25rem; }
.page-terms .spec ul.bul li::before { content:none; }
.page-terms .spec ul.bul li { margin:0 0 .5rem; }
.page-terms .spec .c { min-width:0; }