/* PUDDY PRESENTS: ODYSSEUS, the product page (ARCHITECT, 2026-10-08; its title set as PUDDY PRESENTS over ODYSSEUS, 2026-11-09). THE TOOL STANDARD's style: pure black,
   pure white, every other tone white at an opacity, the frosted panels. The face is this site's own
   copy of PUDDY Odysseus Bold 1.000, declared under its own family name so the chrome's declaration
   of 'PUDDY Odysseus' (loaded from the studios host) never replaces it on this page. */

@font-face {
  font-family: 'PUDDY Odysseus Local';
  src: url('/fonts/PUDDYOdysseus-Bold.woff2') format('woff2'), url('/fonts/PUDDYOdysseus-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/fonts/SpaceMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/fonts/SpaceMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'PuddySymbols'; src: url('/fonts/NotoEgyptian-subset.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: optional; unicode-range: U+13080,U+1309D,U+1317F,U+131A3,U+131B3,U+131B8,U+131B9,U+131C5,U+131CB,U+131F3,U+131FA,U+131FC,U+13216,U+13250,U+13283,U+13296,U+132A2,U+132A4,U+132A8,U+132B5,U+132BD,U+132D4,U+132DD,U+132DE,U+132F9,U+132FF,U+13300,U+1336F,U+133C1,U+133CF,U+133F4; }

:root {
  --bg: #000;
  --fg: #fff;
  --dim: rgba(255, 255, 255, .55);
  --faint: rgba(255, 255, 255, .32);
  --line: rgba(255, 255, 255, .16);
  --panel: rgba(255, 255, 255, .03);
  --face: 'PUDDY Odysseus Local', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-tap-highlight-color: transparent; }
a { color: inherit; touch-action: manipulation; }
p { margin: 0 0 14px; }
code, .mono { font-family: var(--mono); }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 8px 12px; }

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* The masthead: pure black behind the crest. Its still starfield of nine one-pixel dots is struck
   (CWD, 2026-10-29: the dots read as dead pixels). */
.masthead {
  padding: 48px 0 32px;
  background-color: #000;
}
.crest { text-align: center; }
.crest h1 {
  margin: 0;
  font-family: var(--face);
  font-weight: 700;
  font-size: clamp(30px, 9vw, 88px);
  line-height: 1.1;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.crest h1 a { text-decoration: none; }
/* The house mark over the core title, as SQUISHY's page sets it (CWD, 2026-11-09: the core title is ODYSSEUS). */
.crest h1 .brand-top { display: block; font-size: clamp(14px, 3.6vw, 30px); letter-spacing: .3em; text-indent: .3em; line-height: 1; margin: 0 0 10px; }
.crest h1 .title { display: block; }
/* The TM mark after PUDDY where it stands as the brand (CWD, 2026-11-09), as the studios header sets it. */
sup.tm { position: relative; top: -.8em; margin-left: .05em; font-size: .5em; letter-spacing: normal; vertical-align: baseline; }
.figures { display: block; width: min(300px, 80%); height: auto; margin: 24px auto; }
.figures rect, .figures circle, .figures polygon { fill: none; stroke: #fff; stroke-width: 2; }
.figures rect { stroke-opacity: .8; }
.figures circle { stroke-opacity: .6; }
.figures polygon { stroke-opacity: .4; }
.figures text { fill: #fff; font-family: var(--face); font-weight: 700; font-size: 72px; text-anchor: middle; }
.subtitle {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(11px, 2.8vw, 14px);
  line-height: 1.8;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
}
.subtitle span { display: block; }
.tool-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 24px 0 16px; }
.tool-nav a { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.tool-nav a:hover, .tool-nav a:focus-visible { color: var(--fg); outline: none; }
.tag { margin: 6px 0; text-align: center; font-size: 14px; color: var(--dim); }
.tag b { color: var(--fg); }

main section { padding: 40px 0; border-top: 1px solid var(--line); }
main h2 {
  margin: 0 0 20px;
  font-family: var(--face);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.2;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.meta { font-size: 14px; color: var(--dim); }
.size { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; color: var(--dim); }
.hash code { font-size: 11px; color: var(--faint); overflow-wrap: anywhere; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  padding: 12px 22px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn:hover, .btn:focus-visible { background: #fff; color: #000; outline: none; }
.btn-primary { margin: 4px 0 14px; }
.btn-off, .btn-off:hover { border-color: var(--faint); color: var(--faint); background: transparent; cursor: default; }
.links { display: flex; flex-wrap: wrap; gap: 10px; }

.files { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.files li { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.files a { font-family: var(--mono); font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.files .fmt { font-size: 14px; color: var(--dim); }
.files code { font-size: 11px; color: var(--faint); overflow-wrap: anywhere; }

/* The install steps fill every row: one column on a phone, two from 566px, and from 840px the three
   systems across with The web's box the whole row beneath them, wide enough for its code. */
.install { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 14px 0; }
@media (min-width: 566px) { .install { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 840px) {
  .install { grid-template-columns: repeat(3, 1fr); }
  .install > div:last-child { grid-column: 1 / -1; }
}
.install > div { min-width: 0; padding: 16px; border: 1px solid var(--line); background: var(--panel); }
.install h3 { margin: 0 0 8px; font-family: var(--face); font-weight: 700; font-size: 16px; letter-spacing: .15em; text-transform: uppercase; }
.install p { margin: 6px 0; font-size: 14px; color: var(--dim); }
pre { margin: 8px 0; padding: 12px; overflow-x: auto; border: 1px solid var(--line); background: var(--panel); font-size: 12px; line-height: 1.5; }

.label { display: block; margin: 14px 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.tester { margin-top: 32px; }
.tester input[type="text"] { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: #fff; font-family: var(--sans); font-size: 16px; }
.tester input[type="text"]:focus { outline: 2px solid #fff; outline-offset: 0; }
.tester input[type="range"] { width: 100%; accent-color: #fff; touch-action: manipulation; }
.sample { margin: 20px 0 0; font-family: var(--face); font-weight: 700; font-size: 64px; line-height: 1.15; overflow-wrap: anywhere; }

.spec { margin: 0 0 14px; font-family: var(--face); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.s1 { font-size: clamp(32px, 10vw, 96px); }
.s2 { font-size: clamp(26px, 7vw, 64px); }
.s3 { font-size: clamp(16px, 4vw, 32px); letter-spacing: .15em; }
.s4 { font-size: clamp(18px, 4vw, 28px); }
.s5 { font-size: clamp(18px, 4vw, 28px); }

.glyphs {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.glyphs li { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 4px 8px; background: #000; }
.glyphs .g { font-family: var(--face); font-weight: 700; font-size: 36px; line-height: 1.2; }
.glyphs .cp { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--faint); }

.figures-letters { width: min(300px, 90%); }
.caption { text-align: center; }
.licence { font-family: var(--mono); font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }

/* The static footer, for a reader or a crawler without JavaScript; the chrome's footer replaces it. */
#foot { padding: 24px 16px; border-top: 1px solid var(--line); text-align: center; }
#foot p { margin: 0; font-size: 10px; letter-spacing: .1em; color: rgba(255, 255, 255, .3); }
body:has(.pt-sfoot) #foot { display: none; }

/* The chrome's wordmark, set in this page's own copy of the face. */
body .pt-nav .pt-nav-brand span { font-family: var(--face); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
.crest .links { justify-content: center; margin-top: 24px; }

/* Caput Mortuum, the sign U+1F74E set in the font: at the crest over the subtitle, and at the specimen's head (CWD, 2026-10-09). */
.caput { font-family: var(--face); font-weight: 700; font-size: clamp(88px, 16vw, 150px); line-height: 1; margin: 12px 0 4px; text-align: center; }
.spec.s0 { font-size: clamp(120px, 24vw, 220px); line-height: 1; }
.tag-licence { max-width: 44rem; margin-left: auto; margin-right: auto; }

/* The hieroglyph scramble (2026-11-03): once odysseus.js runs, each Caput Mortuum is a button; pressing it
   scrambles the text set in the face beside it. The real text stays in place, transparent, so nothing
   moves and a reader hears it; each line is drawn over it and clipped at the column, as the home page clips. */
.caput.is-trigger { width: fit-content; margin-left: auto; margin-right: auto; }
.spec.s0.is-trigger { width: fit-content; }
.is-trigger { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: opacity .2s; }
.is-trigger:hover { opacity: .8; }
.is-trigger:active { opacity: .6; }
.is-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.scr-line { position: absolute; display: block; margin: 0; padding: 0; overflow: hidden; white-space: pre; text-align: left; pointer-events: none; user-select: none; -webkit-user-select: none; }
@supports (overflow: clip) { .scr-line { overflow-x: clip; overflow-y: visible; } }