/* ==========  LAYOUT REFINEMENTS  ==========
   Fine-tuning added over time on top of the sections before it: the homepage on phones and tablets, the
   right-hand column, Newsroom, long-text pages, header and panel sizes, Contact, the smooth page load.
   Kept in this order on purpose — later rules here override the earlier files. */

/* ---------- Homepage on phones and tablets: everything centred ---------- */
@media (max-width: 1020px) {
  body.home-page .home-copy { max-width: none; text-align: center; }
  body.home-page .home .sub { margin-left: auto; margin-right: auto; }
  body.home-page .ftr { height: auto; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 4px; padding-top: 10px; padding-bottom: 12px; text-align: center; }
  body.home-page .ftr-links { justify-content: center; }
  body.home-page .ftr-menu { right: 50%; transform: translateX(50%); }
}


/* Right-hand column on every page except the homepage (wide screens only):
   spotlight box, announcements and, on long pages, "On this page". */
.side { display: none; }
@media (min-width: 1021px) {
  .cols { display: grid; grid-template-columns: minmax(0, 720px) minmax(200px, 1fr); column-gap: 60px; align-items: start; }
  .cols-main { min-width: 0; }
  .side { display: flex; flex-direction: column; align-self: stretch; }
  .side-spot { position: relative; margin: 0; aspect-ratio: 1 / 1; border: 1px solid var(--rule); overflow: hidden; background: var(--panel); }
  .side-spot.is-art { display: flex; align-items: center; justify-content: center; }
  .side-spot.is-art svg, .spot-art svg { display: block; width: 86%; height: auto; overflow: visible; }
  .spot-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
  .spot-slide { position: absolute; inset: 0; }
  .spot-slide a { display: block; width: 100%; height: 100%; }
  .spot-slide img, .spot-slide video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .spot-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
  .spot-dots button { width: 8px; height: 8px; padding: 0; border: 1px solid rgba(255, 255, 255, .9); background: rgba(10, 35, 65, .35); cursor: pointer; }
  .spot-dots button[aria-current="true"] { background: var(--accent); }
  .side-posts { margin-top: 60px; }
  .side-mkt { margin-top: 24px; }
  .side-mkt-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; margin-bottom: 24px; padding: 0 16px; border: 1px solid var(--rule-strong); font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
  .side-mkt-go:hover { border-color: var(--accent); color: var(--accent); }
  .side-mkt ul { list-style: none; margin: 0; padding: 0; }
  .side-mkt li a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; line-height: 1.4; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .side-mkt li a:hover span { text-decoration: underline; }
  .side-mkt li b { flex: none; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--muted); }
  .side-mkt-none { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
  .side-posts ul { list-style: none; margin: 0; padding: 0; }
  .side-posts li a { display: block; padding: 8px 0; font-size: 14px; line-height: 1.4; color: var(--ink); text-decoration: none; }
  .side-posts li a:hover span { text-decoration: underline; }
  .side-posts time { display: block; margin-bottom: 2px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; color: var(--muted); }
  .side .side-h { margin: 0 0 16px; font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 16px; letter-spacing: .24em; color: var(--accent); }
  .side .side-empty { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
  .side-link { display: inline-block; margin-top: 12px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
  .side-link:hover { text-decoration: underline; }
  .side-toc { position: sticky; top: 30px; margin-top: 60px; }
  .side-toc ol { list-style: none; margin: 0; padding: 0; }
  .side-toc li a { display: flex; gap: 14px; padding: 7px 0; font-size: 14px; line-height: 1.4; color: var(--muted); text-decoration: none; }
  .side-toc li a .n { flex: none; width: 18px; font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 20px; color: var(--muted); }
  .side-toc li a:hover, .side-toc li a[aria-current="true"] { color: var(--ink); }
  .side-toc li a[aria-current="true"] .n { color: var(--accent); }
  .side-toc .side-link { margin-top: 20px; }
  .doc section { scroll-margin-top: 30px; }
}

/* Newsroom */
.news { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.news li a { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; padding: 28px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.news-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.news time { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.news b { font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }
.news-text span { font-size: 16px; line-height: 1.6; color: var(--muted); }
.news li a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.news img { flex: none; width: 180px; height: 120px; object-fit: cover; border: 1px solid var(--rule); }
.news-empty { margin: 40px 0 0; padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--muted); }
.news-empty a { color: var(--accent); }
.news-feed { margin: 32px 0 0; }
.news-title { font-size: 44px; line-height: 50px; }
.news-img { margin: 40px 0 0; border: 1px solid var(--rule); }
.news-img img { display: block; width: 100%; height: auto; }
.news-body { margin-top: 40px; }
.news-body p { margin: 0 0 18px; font-size: 17px; line-height: 1.75; color: var(--body); }
.news-body .dateline { font-weight: 600; color: var(--ink); }
.doc.news-item .news-about { margin-top: 60px; }
.news-about h2 { margin: 0 0 8px; font-weight: 500; font-size: 17px; }
.news-about p { margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.news-about a { color: var(--accent); }
@media (max-width: 1020px) {
  .news li a { flex-direction: column-reverse; gap: 16px; padding: 24px 0; }
  .news img { width: 100%; height: auto; aspect-ratio: 1200 / 630; }
  .news b { font-size: 19px; }
  .news-title { font-size: 32px; line-height: 38px; }
  .news-body p { font-size: 16px; }
}

/* Long-text pages (.doc) must not restyle the small label above the title or the lead line. */
.doc .eyebrow { margin: 0 0 20px; font-size: 12px; line-height: 16px; color: var(--accent); }
.doc .lead { margin: 20px 0 0; font-size: 17px; line-height: 27px; color: var(--muted); }
@media (max-width: 1020px) {
  .doc .eyebrow { font-size: 11px; }
  .doc .lead { margin-top: 16px; font-size: 15px; line-height: 24px; }
}

/* Less space between the menu and the page content (desktop): half a grid square at the top of the panel. */
@media (min-width: 1021px) {
  .panel { padding: 30px; }
  .mega { padding: 30px; }
  .cols { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 60px; }
}

@media (max-width: 1020px) {
  .doc.news-item .news-about { margin-top: 40px; }
}
/* Section gaps are set by the section itself, not by the last paragraph inside it. */
.doc section > :last-child, .about-cols > div > :last-child, .news-about > :last-child { margin-bottom: 0; }

/* No outline around the body panel: the page grid already draws its edges. Only the grid line under the panel's
   left edge (a grid line is drawn at the start of each square, so the panel covers it) is drawn again, in the grid's own colour. */
.panel { box-shadow: inset 1px 0 0 var(--grid-line); }
@media (min-width: 1021px) {
  /* Homepage (wide screens): the same width and top spacing as the body on every other page
     (no sheet behind it), with the three links above the footer. */
  .home { flex: 0 0 auto; align-items: flex-start; margin: 0 var(--fr, max(var(--gutter), calc((100% - var(--col)) / 2))) 0 var(--fl, max(var(--gutter), calc((100% - var(--col)) / 2))); padding: 30px 30px 24px; }   /* same 30px inset as the content of every other page */
  /* Shrinking to fit shorter screens (set by site.js): headline (--t) and drawing (--k). */
  .home h1 { font-size: calc(var(--hfs, clamp(48px, 4.45vw, 64px)) * var(--t, 1)); white-space: nowrap; }   /* --hfs: sized by site.js so the widest line ends with the search box */
  .home.no-sub .sub { display: none; }
  .home .home-find { margin-top: calc(36px * var(--t, 1)); }
  .home .eyebrow { margin-bottom: calc(20px * var(--t, 1)); }
  .home-art { width: calc(440px * var(--k, 1)); height: calc(475px * var(--k, 1)); }
  .home-art svg { width: calc(440px * var(--k, 1)); height: calc(475px * var(--k, 1)); }
  .home-art figcaption { top: calc(490px * var(--k, 1)); }
  .home-band { position: relative; z-index: 2; flex: none; box-sizing: border-box; height: 120px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0 calc(var(--fr, max(var(--gutter), calc((100% - var(--col)) / 2))) + 30px) 0 calc(var(--fl, max(var(--gutter), calc((100% - var(--col)) / 2))) + 30px); }   /* inside the body: the same 30px inset as the text, like every other page */
  .hb-cell { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; min-width: 0; padding: 16px 18px 10px; border: 1px solid var(--rule); background: var(--panel); color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
  .hb-cell::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
  .hb-cell:hover, .hb-cell:focus-within { border-color: var(--rule-strong); box-shadow: 0 10px 24px rgba(10, 35, 65, .08); transform: translateY(-2px); }   /* all four cards */
  .hb-cell:hover::before, .hb-cell:focus-within::before { transform: scaleX(1); }
  a.hb-cell:hover .hb-t { text-decoration: underline; text-underline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) { .hb-cell, .hb-cell::before { transition: none; } .hb-cell:hover, .hb-cell:focus-within { transform: none; } }
  .hb-h { font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 16px; letter-spacing: .24em; color: var(--accent); }
  .hb-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; line-height: 24px; font-weight: 500; color: var(--ink); }
  .hb-p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 21px; color: var(--muted); }
  .hb-links { display: flex; flex-wrap: wrap; gap: 0 10px; overflow: hidden; max-height: 44px; font-size: 13px; line-height: 20px; padding-bottom: 4px; }
  .hb-links a { white-space: nowrap; }
  .hb-links a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
  .hb-links a:hover { color: var(--accent); text-decoration-color: currentColor; }
}
@media (max-width: 1020px) { .home-band { display: none; } }
@media (min-width: 1021px) and (max-width: 1240px) { .hb-cell { padding: 12px 14px; } .hb-links { gap: 0 8px; font-size: 12.5px; } .hb-t { font-size: 15px; } }
/* Narrowest desktops: the small labels give way so the Solutions links can use two lines. */
@media (min-width: 1021px) and (max-width: 1160px) { .hb-h { display: none; } .hb-cell { justify-content: center; padding-top: 10px; } .hb-links { flex-wrap: wrap; gap: 2px 10px; } }
@media (max-width: 380px) { .home-find input { font-size: 14px; } }
/* Desktop homepage: the cards follow the headline closely; any spare height goes below them. */
@media (min-width: 1021px) {
  body.home-page .panel-gap { flex: 1 0 30px; }
  /* Homepage search: from the text's left edge to the middle of the body (the centre of the middle card). */
  .home-find { width: calc(var(--pw, 1080px) / 2 - 30px); max-width: none; }
  .home-copy { flex: none; width: calc(var(--pw, 1080px) / 2 - 30px); max-width: none; }
}
@media (max-width: 1020px) { body.home-page .panel-gap { display: none; } }

/* Phones and tablets: a soft line around the panel. Its edges sit on the same grid lines as the
   logo and the last menu button; the text sits 16px inside it. */
@media (max-width: 1020px) {
  .panel { padding-left: 16px; padding-right: 16px; }
}

/* Phones: keep "LEGAL / TERMS OF USE · PRIVACY POLICY" on one line. */
@media (max-width: 500px) {
  .legal-switch { gap: 10px; letter-spacing: .1em; }
}

/* The "Effective date" line keeps its own small label style inside long-text pages. */
.doc .doc-date { margin: 16px 0 0; font-size: 12px; line-height: 18px; letter-spacing: .08em; color: var(--muted); }
.doc .doc-intro { margin-top: 28px; }
@media (max-width: 1020px) { .doc .doc-intro { margin-top: 20px; } }

/* Phones: keep "SOLUTIONS / OUR BRANDS · OUR TECHNOLOGY" on one line too. */
@media (max-width: 500px) {
  .legal-switch.is-solutions { gap: 8px; letter-spacing: .06em; }
}
/* Smaller phones: a slightly smaller size so both lines still fit on one line. */
@media (max-width: 380px) {
  .legal-switch { font-size: 10px; }
}

/* Contact page: the form (Send is switched off for now), then the mailing address. */
.contact-form { margin-top: 40px; }
.contact-h { margin: 60px 0 0; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.contact-h + .contact-address { margin-top: 16px; }
@media (max-width: 1020px) { .contact-form { margin-top: 32px; } .contact-h { margin-top: 40px; } }

/* "In development" status with a green dot. */
.tile-cap b.is-dev { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.tile-cap b.is-dev .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
html[data-theme="dark"] .tile-cap b.is-dev .dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .16); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .tile-cap b.is-dev .dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .16); } }

/* Smooth page load: the page stays hidden for a moment while the layout script places
   everything on the grid, then fades in (instead of drawing twice and jumping). */
html { background-color: var(--bg); }
html.gt-wait:not(.gt-ready) body { opacity: 0; }
/* The shaded grid squares fade in gently. */

@keyframes px-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.gt-wait body { transition: none; }
  .pixels { animation: none; }
}

/* Header: exactly one grid square tall, with a smaller logo and buttons centred in that row;
   the body starts on the next grid line. (--hu is the page's full grid square, set by site.js.) */
/* Header row: 60px on every screen, so the 36px buttons have the same 12px above and below
   as between them, and the body starts 12px under the buttons. */
:root { --hdr-h: 60px; }
@media (max-width: 800px) { :root { --hdr-h: 60px; } }
@media (max-width: 500px) { :root { --hdr-h: 60px; } }
.logo { width: 24px; height: 24px; }
.nav a, .nav button { height: 36px; }
.btn-outline, .icon-btn { height: 36px; font-size: 14px; }
.icon-btn { width: 36px; }
.btn-outline { padding: 0 14px; }
.theme-menu { top: 44px; }
@media (max-width: 800px) {
  .panel { margin-top: 0; }
  .hdr-actions { gap: 12px; }
  .theme-menu { right: -48px; }
}

/* Body padding: the same on all four sides — phones 20px, tablets 24px, desktop 30px. */
@media (max-width: 1020px) { .panel { padding: 24px; } }
@media (max-width: 500px) { .panel { padding: 20px; } }

/* Phone and tablet menu: a box exactly as wide as the body, its top on the body's top line,
   with the same soft border and padding as the body. The page behind it is dimmed. */
:root { --pp: 30px; }
@media (max-width: 1020px) { :root { --pp: 24px; } }
@media (max-width: 500px) { :root { --pp: 20px; } }
.mmenu { left: var(--pl, 16px); right: auto; width: var(--pw, calc(100% - 32px)); bottom: auto; max-height: calc(100vh - var(--hdr-h) - 16px); max-height: calc(100dvh - var(--hdr-h) - 16px); padding: var(--pp) var(--pp) 0; border-top: 0; background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-line), 0 0 0 200vmax var(--scrim); }
.mm-list { padding: 0 0 8px; }
.mmenu .ftr-mini { flex: none; margin: 8px calc(-1 * var(--pp)) 0; padding: 16px var(--pp) var(--pp); background: transparent; background-image: none; border-top: 1px solid var(--panel-line); }

/* Solutions: the block-page line "SOLUTIONS / OUR BRANDS · OUR TECHNOLOGY / BRAND 01". */
.legal-switch a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.legal-switch .here { color: var(--muted); }
/* Solutions: quick links to every brand and technology in the right column (wide screens). */
@media (min-width: 1021px) {
  .side-sols { margin-top: 48px; border-bottom: 1px solid var(--rule); }
  .side-sol { border-top: 1px solid var(--rule); }
  .side-sol > summary.side-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 0; list-style: none; cursor: pointer; }
  .side-sol > summary::-webkit-details-marker { display: none; }
  .side-sol > summary .ct { display: flex; align-items: center; gap: 10px; letter-spacing: .08em; color: var(--muted); }
  .side-sol > summary .ct::after { content: "+"; width: 12px; text-align: center; font-size: 14px; color: var(--accent); }
  .side-sol[open] > summary .ct::after { content: "–"; }
  .side-sol > summary:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
  .side-sol .side-link { margin: 6px 0 16px; }
  .side-sol .side-link[aria-current="page"] { color: var(--ink); }
  .side-sol ul { list-style: none; margin: 0; padding: 0; }
  .side-sol li a, .side-sol li .row { display: flex; align-items: center; gap: 12px; padding: 6px 0; color: var(--ink); text-decoration: none; }
  .side-sol .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--rule); background-color: var(--tile); }
  .side-sol .ic svg { width: 18px; height: 18px; fill: var(--ghost); }
  .side-sol .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .side-sol .nm { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 18px; }
  .side-sol .mt { font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 14px; letter-spacing: .12em; color: var(--muted); }
  .side-sol .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
  .side-sol li a:hover .nm { text-decoration: underline; }
  .side-sol li a:hover .ic, .side-sol li a[aria-current="page"] .ic { border-color: var(--accent); }
  .side-sol li a[aria-current="page"] .ic svg { fill: var(--accent); }
  html[data-theme="dark"] .side-sol .dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .16); }
}
@media (min-width: 1021px) and (prefers-color-scheme: dark) { html[data-theme="auto"] .side-sol .dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .16); } }

/* Solutions switch with four pages: a little tighter on tablets and desktops so it fits on one line. */
@media (min-width: 501px) {
  .legal-switch.is-solutions { gap: 12px; letter-spacing: .14em; }
}

/* Project status dots: blue planned, orange in progress, yellow ring on hold, green completed, red cancelled. */
.sdot { --dc: #94a3b8; --dr: rgba(148, 163, 184, .18); flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 0 3px var(--dr); vertical-align: middle; }
.sdot.is-planned { --dc: #2563eb; --dr: rgba(37, 99, 235, .16); }
.sdot.is-progress { --dc: #ea580c; --dr: rgba(234, 88, 12, .16); }
.sdot.is-hold { --dc: #ca8a04; --dr: rgba(202, 138, 4, .18); background: transparent; box-shadow: inset 0 0 0 2px var(--dc), 0 0 0 3px var(--dr); }
.sdot.is-done { --dc: #16a34a; --dr: rgba(22, 163, 74, .16); }
.sdot.is-cancelled { --dc: #dc2626; --dr: rgba(220, 38, 38, .16); }
html[data-theme="dark"] .sdot.is-planned { --dc: #60a5fa; } html[data-theme="dark"] .sdot.is-progress { --dc: #fb923c; } html[data-theme="dark"] .sdot.is-hold { --dc: #facc15; } html[data-theme="dark"] .sdot.is-done { --dc: #4ade80; } html[data-theme="dark"] .sdot.is-cancelled { --dc: #f87171; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .sdot.is-planned { --dc: #60a5fa; } html[data-theme="auto"] .sdot.is-progress { --dc: #fb923c; } html[data-theme="auto"] .sdot.is-hold { --dc: #facc15; } html[data-theme="auto"] .sdot.is-done { --dc: #4ade80; } html[data-theme="auto"] .sdot.is-cancelled { --dc: #f87171; } }
.tile-cap .cap-row { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.tile-cap .cap-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-cap .cap-row .st { flex: none; letter-spacing: .04em; }
.facts dd .sdot { margin-right: 10px; }
/* Progress timeline on a project's page */
.tl-wrap { margin-top: 48px; }
.tl-wrap h2 { margin: 0 0 16px; font-weight: 500; font-size: 22px; }
.tl { position: relative; list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; display: flex; gap: 20px; padding: 0 0 24px; }
.tl li::before { content: ""; position: absolute; left: 3.5px; top: 14px; bottom: 0; width: 1px; background: var(--rule); }
.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::before { display: none; }
.tl li > .sdot { margin-top: 6px; }
.tl p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.tl .tl-meta { margin-bottom: 2px; font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
/* Status badge in the corner of each tile */
.tile-img { position: relative; }
.tile-st { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 7px; background: var(--panel); border: 1px solid var(--rule); font-family: "JetBrains Mono", monospace; font-size: 10px; line-height: 14px; letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.tile-st .sdot { width: 6px; height: 6px; box-shadow: none; }
.tile-st .sdot.is-hold { box-shadow: inset 0 0 0 1.5px var(--dc); }

/* Homepage on phones: no pull-down bounce or pull-to-refresh moving the locked page, and a fixed height
   (set by site.js) instead of one that changes as the browser's address bar slides in and out. */
html:has(body.is-locked), body.is-locked { overscroll-behavior: none; }
body.is-locked { height: var(--app-h, 100dvh); }
/* Homepage message board (Admin → Message board) */
.board { display: grid; gap: 10px; max-width: 480px; margin: 32px 0 0; }
.board[hidden], .board-item[hidden] { display: none; }
.board-item { --bt: var(--accent); position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px 12px 16px; background: var(--panel); border: 1px solid var(--bt); border-left-width: 3px; }
.board-item.is-good { --bt: #16a34a; } .board-item.is-warn { --bt: #ea580c; } .board-item.is-alert { --bt: #dc2626; }
.board-tag { grid-column: 1; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bt); }
.board-text { grid-column: 1; margin: 0; font-size: 15px; line-height: 1.45; color: var(--body); }
.board-text a { color: var(--ink); font-weight: 500; white-space: nowrap; }
.board-close { grid-column: 2; grid-row: 1 / 3; align-self: start; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.board-close:hover { color: var(--ink); }
@keyframes board-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .board-item { animation: none; } }
@media (max-width: 1020px) {
  body.home-page .board { margin-left: auto; margin-right: auto; text-align: left; }
  .board.is-wide { display: none; }
  /* Phones and tablets: one row, the same height as the search box; the whole notice opens its link. */
  .board.is-hero { max-width: 520px; margin-top: 10px; }
  .board.is-hero .board-item { height: 56px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 6px; padding: 0 6px 0 14px; }
  .board.is-hero .board-tag { display: none; }
  .board.is-hero .board-text { grid-row: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
  .board.is-hero .board-text a { font-size: 0; }   /* the "Read more" words are left out; the whole notice is the link */
  .board.is-hero .board-text a::after { content: ""; position: absolute; inset: 0; }
  .board.is-hero .board-close { grid-row: 1; position: relative; z-index: 1; align-self: center; width: 40px; height: 40px; }
}
/* Desktop homepage: the notices run the full width of the body, just above the three cards, on one line each. */
@media (min-width: 1021px) {
  .board.is-hero { display: none; }
  .board.is-wide { position: relative; z-index: 2; flex: none; max-width: none; margin: 30px calc(var(--fr, max(var(--gutter), calc((100% - var(--col)) / 2))) + 30px) 0 calc(var(--fl, max(var(--gutter), calc((100% - var(--col)) / 2))) + 30px); }   /* under the three boxes, the same gap as between them */
  .board.is-wide .board-item { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 18px; padding: 9px 12px 9px 20px; }
  .board.is-wide .board-tag, .board.is-wide .board-text, .board.is-wide .board-close { grid-row: 1; }
  .board.is-wide .board-text { grid-column: 2; }
  .board.is-wide .board-close { grid-column: 3; align-self: center; }
}
/* Network status page (/status/) */
.ns { --ns-ok: #16a34a; --ns-degraded: #ca8a04; --ns-partial: #ea580c; --ns-major: #dc2626; --ns-maintenance: #2563eb; --ns-none: var(--rule); }
.ns-banner { --c: var(--ns-ok); display: flex; align-items: center; gap: 16px; margin: 32px 0 28px; padding: 18px 20px; border: 1px solid var(--rule); border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 7%, var(--panel)); }
.ns-banner b { display: block; font-size: 19px; font-weight: 500; color: var(--ink); }
.ns-banner small { font-size: 13px; color: var(--muted); }
.ns-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent); animation: ns-pulse 2.4s ease-in-out infinite; }
@keyframes ns-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c) 6%, transparent); } }
.ns-banner.is-degraded, .ns-incident.is-degraded { --c: var(--ns-degraded); } .ns-banner.is-partial, .ns-incident.is-partial { --c: var(--ns-partial); }
.ns-banner.is-major, .ns-incident.is-major { --c: var(--ns-major); } .ns-banner.is-maintenance, .ns-incident.is-maint { --c: var(--ns-maintenance); }
.ns-incident { --c: var(--ns-degraded); margin: 0 0 20px; padding: 18px 20px; border: 1px solid var(--rule); border-top: 3px solid var(--c); }
.doc .ns-incident h2, .doc .ns-past h2 { display: block; margin: 0 0 6px; font-size: 18px; }
.ns-meta { margin: 0 0 10px !important; font-size: 13px !important; color: var(--muted) !important; }
.ns-updates { list-style: none; margin: 0; padding: 0; }
.ns-updates li { padding: 10px 0 10px 16px; border-left: 2px solid var(--rule); }
.ns-updates li p { margin: 0 0 2px !important; font-size: 15px !important; line-height: 1.5 !important; }
.ns-updates time { font-size: 12px; color: var(--muted); }
.ns-components { margin-top: 12px; border: 1px solid var(--rule); }
.ns-comp { padding: 18px 20px; border-bottom: 1px solid var(--rule); }
.ns-comp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ns-comp-h b { font-weight: 500; color: var(--ink); }
.ns-comp-h small { display: block; font-size: 13px; color: var(--muted); }
.ns-state { --c: var(--ns-ok); flex: none; font-size: 13px; font-weight: 500; color: var(--c); }
.ns-state.is-degraded { --c: var(--ns-degraded); } .ns-state.is-partial { --c: var(--ns-partial); } .ns-state.is-major { --c: var(--ns-major); } .ns-state.is-maintenance { --c: var(--ns-maintenance); }
.ns-bars { display: flex; gap: 2px; height: 30px; }
.ns-bars span { flex: 1; min-width: 2px; border-radius: 1px; background: var(--ns-ok); opacity: .9; }
.ns-bars span:hover { opacity: 1; transform: scaleY(1.08); }
.ns-bars .is-degraded, .ns-legend .is-degraded { background: var(--ns-degraded); } .ns-bars .is-partial, .ns-legend .is-partial { background: var(--ns-partial); }
.ns-bars .is-major, .ns-legend .is-major { background: var(--ns-major); } .ns-bars .is-maintenance, .ns-legend .is-maintenance { background: var(--ns-maintenance); }
.ns-bars .is-none { background: var(--ns-none); opacity: .6; }
.ns-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ns-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 !important; padding: 12px 20px; font-size: 12px !important; color: var(--muted) !important; }
.ns-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--ns-ok); margin-left: 6px; }
.ns-legend span:first-child { margin-left: 0; }
.ns-past { margin-top: 48px; }
.ns-old { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.doc .ns-old h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.ns-none { color: var(--muted) !important; }
.ns-foot { margin-top: 32px !important; font-size: 14px !important; color: var(--muted) !important; }
.ns-d60 { display: none; }
@media (max-width: 640px) { .ns-bars span:nth-child(-n+30) { display: none; } .ns-d90 { display: none; } .ns-d60 { display: inline; } }
@media (prefers-reduced-motion: reduce) { .ns-dot { animation: none; } }
/* Contact form (live) */
.verify-live { margin-top: 32px; }
.verify-live > p { margin: 0 0 8px; font-size: 13px; line-height: 20px; }
.contact-privacy { margin: 20px 0 0; font-size: 13px; color: var(--muted); }
.contact-privacy a { color: var(--accent); }
.contact-form .send { margin-top: 24px; }
.contact-sent { margin-top: 40px; }
.contact-sent .notice.is-ok { color: var(--ink); border-color: #16a34a; background: color-mix(in srgb, #16a34a 8%, var(--panel)); }
.contact-sent .notice.is-ok svg { color: #16a34a; }
/* Donation pages */
.don-form { margin-top: 32px; }
.don-legend { margin: 0 0 10px; padding: 0; font-size: 13px; line-height: 20px; }
.don-freq, .don-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; border: 0; }
.don-freq label, .don-amounts > label:not(.field) { position: relative; cursor: pointer; }
.don-freq input, .don-amounts > label:not(.field) input { position: absolute; opacity: 0; inset: 0; }
.don-freq span, .don-amounts > label:not(.field) span { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; height: 52px; padding: 0 18px; border: 1px solid var(--field); background: var(--field-bg); font-size: 18px; font-weight: 600; color: var(--ink); transition: border-color .15s ease, background .15s ease; }
.don-freq span { font-size: 15px; min-width: 130px; }
.don-freq input:checked + span, .don-amounts input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); box-shadow: inset 0 0 0 1px var(--accent); }
.don-freq input:focus-visible + span, .don-amounts input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.don-other-amt { flex-basis: 100%; max-width: 260px; }
.don-amounts:not(:has(input[value="other"]:checked)) .don-other-amt { display: none; }
.don-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; font-size: 15px; line-height: 22px; cursor: pointer; }
.don-check input { margin-top: 4px; accent-color: var(--accent); }
.don-form .form-grid { margin-bottom: 20px; }
.don-form .field small { color: var(--muted); }
.don-small { margin: 16px 0 0; font-size: 13px; line-height: 20px; color: var(--muted); }
.don-thanks { white-space: normal; }
/* Domains (public search) */
.dom-search { display: flex; gap: 12px; align-items: flex-end; margin: 28px 0 20px; }
.dom-search .field { flex: 1; margin: 0; }
.dom-results { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--rule); }
.dom-results li { display: grid; grid-template-columns: 1fr auto auto 170px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.dom-results li.is-first .dom-name { font-size: 20px; font-weight: 600; }
.dom-name { overflow-wrap: anywhere; font-weight: 500; }
.dom-st { font-size: 14px; color: var(--muted); }
.dom-results li.is-free .dom-st { color: var(--ok, #16a34a); }
.dom-price { font-weight: 600; white-space: nowrap; }
.dom-price small { font-weight: 400; color: var(--muted); }
.dom-act .btn-solid, .dom-act .btn-ghost { width: 100%; height: 44px; padding: 0 14px; }
.dom-h { margin: 40px 0 12px; }
.dom-prices { width: 100%; border-collapse: collapse; font-size: 15px; }
.dom-prices th, .dom-prices td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--rule); }
.dom-prices th { font-weight: 500; color: var(--muted); }
.dom-small { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--muted); }
@media (max-width: 640px) {
  .dom-search { flex-direction: column; align-items: stretch; }
  .dom-results li { grid-template-columns: 1fr auto; }
  .dom-results li > .dom-act { grid-column: 1 / -1; }
}


/* Phones and tablets held sideways: the homepage keeps the wide layout like the header and footer —
   headline, text and search on the left, the G drawing on the right — instead of the stacked phone column. */
@media (min-width: 640px) and (max-width: 1020px) and (orientation: landscape) {
  body.home-page .home { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding-top: 28px; padding-bottom: 28px; }
  body.home-page .home-copy { flex: 0 1 auto; width: calc(50% - 16px); min-width: 0; max-width: none; text-align: left; }
  body.home-page .home .eyebrow { margin-bottom: 14px; }
  body.home-page .home h1 { font-size: clamp(34px, 4.8vw, 48px); line-height: 1.02; letter-spacing: -.035em; }
  body.home-page .home .sub { max-width: 440px; margin: 18px 0 0; font-size: 16px; }
  body.home-page .home.no-sub .sub { display: block; }
  body.home-page .home-find { max-width: none; margin: 24px 0 0; }
  body.home-page .home-art { flex: none; align-self: center; margin-top: 0; transform: none; }
}