/* Asterie brand kit. One stylesheet for the site (scrolling, responsive) and the PDF (html.paged: A4 landscape). */
@font-face { font-family: Px; src: url(fonts/PixelifySans-SemiBold.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: Pop; src: url(fonts/Poppins-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Pop; src: url(fonts/Poppins-Medium.ttf); font-weight: 500; font-display: swap; }
@font-face { font-family: Pop; src: url(fonts/Poppins-SemiBold.ttf); font-weight: 600; font-display: swap; }

:root {
  --night: #271826; --wall: #3A2338; --deep: #1C1019; --ink: #2E1C2A; --cocoa: #6B4436; --wood: #7A4F45;
  --paper: #FCEFD6; --parchment: #F7E2BC; --cream: #F3E4D4; --muted: #C7A89C; --amber: #F0B860; --star: #F7D27A;
  --outline: #4A2A1C; --tile: #4A2E3E; --pillow: #E8A6A8; --warn: #E2725B; --lilac: #B59AA6;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; font: 400 16px/1.55 Pop, system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
h2, h3, h4, .px, .num, .tag { font-family: Px, Pop, sans-serif; font-weight: 600; font-variant-ligatures: none; }
h2 { font-size: 40px; line-height: 1.1; margin: 0; }
h3 { font-size: 20px; margin: 22px 0 10px; }
h4 { font-size: 18px; margin: 0 0 4px; }
p { margin: 0 0 10px; }
code { font: 500 0.86em Pop, monospace; color: var(--cocoa); background: rgba(107, 68, 54, .09); padding: 0 4px; }
.night code { color: var(--star); background: rgba(247, 210, 122, .1); }
a { color: inherit; }
img.pixel, .pixel { image-rendering: pixelated; }

/* Pages */
.page { position: relative; overflow: hidden; padding: 64px max(24px, calc((100vw - 1120px) / 2)); }
.paper { background: var(--paper); color: var(--ink); }
.night { background: var(--night); color: var(--cream); }
.night h2, .night h3 { color: var(--cream); }
.sh { margin-bottom: 26px; max-width: 760px; }
.num { display: block; color: var(--amber); font-size: 18px; margin-bottom: 4px; }
.paper .num { color: #B5703A; }
.lede { font-size: 18px; color: var(--cocoa); margin: 12px 0 0; }
.night .lede { color: var(--muted); }
.note, .cap { font-size: 14px; color: var(--cocoa); margin-top: 12px; }
.night .note { color: var(--muted); }
.two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: start; }
.two.tight { gap: 32px; margin-top: 24px; }
.side { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }

/* The pixel card: stepped corners, 2 px outline, a hard drop. */
.pc { filter: drop-shadow(0 var(--drop) 0 rgba(28, 16, 25, .55)); }
.pc-o { padding: 2px; }
.pc-i { height: 100%; padding: 14px 16px; }
.st1 { clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px); }
.st2 { clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 4px 8px, 4px 4px, 8px 4px); }

/* Stars */
.sky { position: absolute; inset: 0; pointer-events: none; }
.sky .s { position: absolute; background: var(--star); box-shadow: 0 0 0 1px rgba(247, 210, 122, .18); animation: tw 3s steps(4) infinite; }
@keyframes tw { 0%, 70% { opacity: .9; } 85% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sky .s { animation: none; } }

/* Cover */
.cover-page { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; }
.cover { position: relative; text-align: center; max-width: 720px; margin: 0 auto; }
.wm-big { width: min(560px, 80vw); height: auto; }
.tag { color: var(--amber); font-size: 26px; margin: 18px 0 8px; letter-spacing: .02em; }
.sub { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto 32px; }
.cover-icon { width: 120px; height: 120px; border-radius: 27px; box-shadow: 0 0 0 2px var(--outline), 0 6px 0 var(--deep); }
.foot { position: relative; text-align: center; color: var(--muted); font-size: 13px; margin-top: 36px; }
.end .sub { margin-top: 24px; }

/* Brand */
.essence { font-family: Px; font-size: 32px; line-height: 1.2; color: var(--ink); margin: 0 0 18px; max-width: 640px; }
.body-l { font-size: 17px; max-width: 620px; }
.traits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.traits .pc-i b { display: block; font-family: Px; font-weight: 600; font-size: 20px; }
.traits .pc-i span { font-size: 14px; color: var(--cocoa); }
.toc { background: var(--night); color: var(--cream); padding: 24px 28px; clip-path: inherit; }
.toc h3 { color: var(--amber); margin-top: 0; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li a { display: flex; gap: 14px; padding: 7px 0; text-decoration: none; font-size: 17px; border-bottom: 1px solid rgba(199, 168, 156, .18); }
.toc li span { font-family: Px; color: var(--amber); width: 26px; }

/* Logo */
.logo-grid { display: grid; grid-template-columns: 1.6fr 1.6fr 1fr 1fr; gap: 14px; }
.logo-tile { position: relative; overflow: hidden; height: 190px; display: grid; place-items: center; }
.night-tile { background: var(--night); }
.paper-tile { background: var(--parchment); box-shadow: inset 0 0 0 2px rgba(74, 42, 28, .15); }
.logo-tile .wm { width: 78%; max-width: 372px; position: relative; }
.logo-tile .icon { width: 120px; height: 120px; border-radius: 27px; }
.dos { margin: 0; padding-left: 20px; }
.dos li { margin-bottom: 8px; }
.donts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dont { margin: 0; }
.dont-art { height: 96px; display: grid; place-items: center; background: var(--night); overflow: hidden; }
.dont figcaption { font-size: 13px; color: var(--warn); margin-top: 6px; font-weight: 500; }
.retyped { font: 600 28px Pop; color: var(--amber); }

/* Colour */
.sw-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 14px; }
.sw .chip { height: 86px; display: flex; align-items: flex-end; padding: 8px 10px; font-size: 12px; font-weight: 500; }
.sw b { display: block; margin-top: 8px; font-weight: 500; }
.sw > span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--cocoa); }
.bar { display: flex; height: 34px; margin-top: 6px; box-shadow: 0 0 0 2px var(--outline); }
.bar i { display: block; }
.tok-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 26px; }
.tok h3 { margin: 0 0 8px; font-size: 18px; }
.tok ul { list-style: none; padding: 0; margin: 0 0 18px; }
.tok li { display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(107, 68, 54, .14); }
.tok li i { width: 26px; height: 26px; grid-row: span 2; box-shadow: inset 0 0 0 1px rgba(46, 28, 42, .2); }
.tok li b { font-weight: 500; font-size: 14px; }
.tok li code { font-size: 12px; }
.tok li span { grid-column: 2 / 4; font-size: 11.5px; line-height: 1.35; color: var(--cocoa); }
.tok li span:empty { display: none; }

/* Type */
.type-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.spec { padding: 18px 22px; display: grid; grid-template-columns: auto 1fr; gap: 2px 22px; align-items: center; }
.spec .big { grid-row: span 2; font-size: 72px; line-height: 1; }
.spec b { font-weight: 500; font-size: 17px; }
.spec span:not(.big) { font-size: 14px; }
.night-spec { background: var(--night); color: var(--cream); }
.night-spec .big { color: var(--amber); }
.paper-spec { background: var(--parchment); }
.pp { font-family: Pop; }
.px { font-family: Px; }
table { border-collapse: collapse; width: 100%; }
.scale th { text-align: left; font: 500 12px Pop; color: var(--cocoa); text-transform: uppercase; letter-spacing: .06em; padding: 0 12px 6px 0; }
.scale td { padding: 6px 12px 6px 0; border-top: 1px solid rgba(107, 68, 54, .18); vertical-align: middle; line-height: 1.2; }
.scale td:first-child { width: 120px; }
.scale td:first-child span { display: block; font-size: 12px; color: var(--cocoa); }
.scale td.for { font-size: 13px; color: var(--cocoa); width: 190px; }

/* Lists of rules */
.rules { list-style: none; padding: 0; margin: 0; }
.rules li { padding: 9px 0 9px 22px; position: relative; border-bottom: 1px solid rgba(107, 68, 54, .15); }
.rules li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; background: var(--amber); }
.rules.light li { border-color: rgba(199, 168, 156, .18); }
.rules b { font-weight: 600; }

/* Phones */
.phones { display: flex; gap: 22px; align-items: flex-start; }
.phone { margin: 0; width: 258px; flex: none; }
.phone img { display: block; width: 100%; height: auto; border-radius: 30px; border: 5px solid var(--deep); box-shadow: 0 0 0 2px var(--outline), 0 5px 0 rgba(28, 16, 25, .45); background: var(--night); }
.phone figcaption { font-size: 13px; text-align: center; margin-top: 8px; color: var(--cocoa); }
.night .phone figcaption { color: var(--muted); }

/* Components */
.comp-page { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start; }
.comps { display: grid; gap: 12px; }
.comp code { color: #9A5A22; background: none; padding: 0; font-weight: 600; font-size: 15px; }
.comp .states { font-size: 13px; color: var(--cocoa); margin: 2px 0 2px; }
.comp .use { font-size: 14px; margin: 0; }
.comp { padding-bottom: 10px; border-bottom: 1px solid rgba(107, 68, 54, .15); }

/* Illustration */
.zoom { margin: 22px 0 0; }
.zoom img { display: block; width: 100%; max-width: 420px; height: auto; box-shadow: 0 0 0 2px var(--outline); }
.zoom figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.trio { display: flex; gap: 26px; justify-content: space-between; }
.trio .phone { width: 232px; }
.ill2 { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: start; }
.zooms { display: grid; gap: 4px; }
.zooms .zoom { margin-top: 0; }

/* Motion */
.steps { width: 100%; max-width: 520px; height: auto; margin: 4px 0 14px; }
.mt th { text-align: left; vertical-align: top; color: var(--amber); font: 600 16px Px; padding: 9px 16px 9px 0; width: 120px; }
.mt td { padding: 9px 0; font-size: 14.5px; border-top: 1px solid rgba(199, 168, 156, .18); }
.mt tr:first-child td { border-top: 0; }

/* Copy */
.two.copy { grid-template-columns: 300px 1fr; gap: 36px; }
.pairs th { text-align: left; font: 500 12px Pop; color: var(--cocoa); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 6px; }
.pairs td { padding: 8px 10px 8px 0; border-top: 1px solid rgba(107, 68, 54, .16); vertical-align: top; font-size: 14px; line-height: 1.4; }
.pairs .b { color: #8E3D31; text-decoration: line-through; text-decoration-color: rgba(142, 61, 49, .45); width: 30%; }
.pairs .a { font-weight: 500; width: 27%; }
.pairs .arrow { color: #B5703A; font-family: Px; }
.pairs .why { color: var(--cocoa); font-size: 13px; }

/* Layout */
.lay { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: start; }
.lay .diagram { max-width: 560px; }
.diagram svg { width: 100%; height: auto; box-shadow: 0 0 0 2px var(--outline); }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.specs p { font-size: 13.5px; margin: 0; }
.lay .phones { gap: 14px; }
.lay .phone { width: 196px; }

/* Phones and small screens */
@media (max-width: 900px) {
  .two, .two.copy, .side, .comp-page, .lay, .type-top, .ill2 { grid-template-columns: 1fr; }
  .sw-grid { grid-template-columns: repeat(3, 1fr); }
  .tok-grid { grid-template-columns: 1fr 1fr; }
  .logo-grid { grid-template-columns: 1fr 1fr; }
  .donts { grid-template-columns: 1fr 1fr; }
  .phones, .trio { flex-wrap: wrap; justify-content: center; }
  .phone, .trio .phone, .lay .phone { width: min(258px, 44vw); }
}
@media (max-width: 560px) {
  .tok-grid { grid-template-columns: 1fr; }
  body { font-size: 15px; }
  .page { padding: 44px 16px; }
  h2 { font-size: 32px; }
  .essence { font-size: 26px; }
  .traits, .sw-grid { grid-template-columns: 1fr 1fr; }
  .logo-grid { grid-template-columns: 1fr; }
  .logo-tile { height: 150px; }
  .phone, .trio .phone, .lay .phone { width: 100%; max-width: 300px; }
  .specs { grid-template-columns: 1fr; }
  .scale td.for { display: none; }
  .scale td.pp { display: none; }
  .scale th:nth-child(3), .scale th:nth-child(4) { display: none; }
  .pairs thead { display: none; }
  .pairs tr { display: grid; grid-template-columns: 1fr; padding: 8px 0; border-top: 1px solid rgba(107, 68, 54, .16); }
  .pairs td { border: 0; padding: 2px 0; width: auto !important; }
  .pairs .arrow { display: none; }
  .spec .big { font-size: 54px; }
}

/* PDF: each section is one A4 landscape page (1123 × 794 CSS px). */
@page { size: 297mm 210mm; margin: 0; }
html.paged { background: var(--night); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
html.paged body { width: 1123px; }
html.paged .page { width: 1123px; height: 794px; padding: 46px 56px; break-after: page; page-break-after: always; }
html.paged .cover-page { min-height: 0; }
html.paged .sky .s { animation: none; }
html.paged h2 { font-size: 36px; }
html.paged .sh { margin-bottom: 20px; }
html.paged .lede { font-size: 16px; }
html.paged .phone { width: 250px; }
html.paged .comp-page .phone { width: 248px; }
html.paged .trio .phone { width: 222px; }
html.paged .lay .phone { width: 206px; }
html.paged .specs .pc-i { padding: 10px 14px; }
html.paged .side .phones .phone { width: 250px; }
html.paged .comp .states { font-size: 12px; }
html.paged .comp .use { font-size: 13px; }
html.paged .comps { gap: 9px; }
html.paged .comp { padding-bottom: 7px; }
html.paged .zoom img { max-height: 190px; width: auto; }
html.paged .zooms .zoom img { max-height: 172px; }
html.paged .trio .phone { width: 200px; }
html.paged .trio { justify-content: flex-start; gap: 18px; }
html.paged .tok li { padding: 3px 0; }
html.paged .tok li span { font-size: 10.5px; }
html.paged .tok ul { margin-bottom: 12px; }