/* ORAIT site styles. Every value comes from tokens.json (brand edition 1). */
/* Self hosted brand fonts (SIL Open Font License, see /assets/fonts/LICENSE-*.txt). Greek, Latin and Latin extended only. */
@font-face { font-family: 'ORAIT Display'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/sofia-sans-extra-condensed-greek-800-normal.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'ORAIT Display'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/sofia-sans-extra-condensed-latin-ext-800-normal.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: 'ORAIT Display'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/sofia-sans-extra-condensed-latin-800-normal.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: 'ORAIT Display'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/sofia-sans-extra-condensed-greek-900-normal.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'ORAIT Display'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/sofia-sans-extra-condensed-latin-ext-900-normal.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: 'ORAIT Display'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/sofia-sans-extra-condensed-latin-900-normal.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: 'ORAIT Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/commissioner-greek-400-normal.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'ORAIT Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/commissioner-latin-ext-400-normal.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: 'ORAIT Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/commissioner-latin-400-normal.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: 'ORAIT Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/commissioner-greek-500-normal.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'ORAIT Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/commissioner-latin-ext-500-normal.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: 'ORAIT Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/commissioner-latin-500-normal.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: 'ORAIT Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/commissioner-greek-700-normal.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'ORAIT Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/commissioner-latin-ext-700-normal.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: 'ORAIT Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/commissioner-latin-700-normal.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; }

:root {
  --paper: #f7f7f9; --paper-raised: #ffffff; --ink: #0e0e14; --ink-soft: #3a3a46;
  --grey-mid: #5a5a68; --hairline: #e3e3ea;
  --blue: #1f3dff; --on-blue: #ffffff; --blue-text: #1228b8;
  --orange: #ff5a36; --on-orange: #0e0e14; --orange-text: #b9300f;
  --seaglass: #8fe3c8; --on-seaglass: #0e0e14; --seaglass-text: #187a5b;
  --focus: #1f3dff;
  --display: "ORAIT Display", "Sofia Sans Extra Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --text: "ORAIT Text", "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --tap: 120ms; --reveal: 320ms;
  --ease-land: cubic-bezier(.2,.9,.2,1); --ease-wipe: cubic-bezier(.65,0,.35,1);
  --gutter: 48px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0e14; --paper-raised: #17171e; --ink: #f7f7f9; --ink-soft: #c9c9d6;
    --grey-mid: #a3a3b3; --hairline: #2a2a34; --blue-text: #8ea0ff; --orange-text: #ff8d73;
    --seaglass-text: #8fe3c8; --focus: #8ea0ff;
  }
}
:root[data-theme="dark"] {
  --paper: #0e0e14; --paper-raised: #17171e; --ink: #f7f7f9; --ink-soft: #c9c9d6;
  --grey-mid: #a3a3b3; --hairline: #2a2a34; --blue-text: #8ea0ff; --orange-text: #ff8d73;
  --seaglass-text: #8fe3c8; --focus: #8ea0ff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--text); }
img { max-width: 100%; display: block; }
a { color: var(--blue-text); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--paper-raised); color: var(--ink); padding: 10px 14px; border-radius: 10px; z-index: 10; }
.skip:focus { left: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* layout */
.wrap { max-width: 1376px; margin: 0 auto; padding: 0 var(--gutter); }
.reading { max-width: 680px; }
.stack { display: flex; flex-direction: column; gap: 64px; }
.stack-s { display: flex; flex-direction: column; gap: 24px; }
.stack-xs { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.between { justify-content: space-between; }
main { padding: 48px 0 96px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.split > .main-col { flex: 999 1 620px; min-width: 0; }
.split > .side-col { flex: 1 1 280px; min-width: 0; }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* type */
.d-xl, .d-l, .h-l, .h-m, .h-s { font-family: var(--display); color: inherit; }
.d-xl { font-weight: 900; font-size: 120px; line-height: 0.82; letter-spacing: -0.02em; }
.d-l { font-weight: 900; font-size: 72px; line-height: 0.86; letter-spacing: -0.02em; }
.h-l { font-weight: 800; font-size: 44px; line-height: 0.95; letter-spacing: -0.01em; }
.h-m { font-weight: 800; font-size: 32px; line-height: 0.98; letter-spacing: -0.01em; }
.h-s { font-weight: 800; font-size: 24px; line-height: 1.05; }
.standfirst { font-weight: 500; font-size: 20px; line-height: 1.4; color: var(--ink-soft); }
.body-s { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.title { font-weight: 700; font-size: 18px; line-height: 1.3; }
.caption { font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--grey-mid); }
.label { font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.12em; }
.dot { font-weight: inherit; color: var(--blue); }
.dot.orange { color: var(--orange); }
.dot.sea { color: var(--seaglass-text); }
.prose { display: flex; flex-direction: column; gap: 24px; }
.prose p { font-size: 17px; line-height: 1.55; }
.prose h2 { font: 800 32px/0.98 var(--display); letter-spacing: -0.01em; margin-top: 16px; }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--grey-mid); }
.soft { color: var(--ink-soft); }
.placeholder { color: var(--grey-mid); }

/* sample banner */
.sample { background: var(--paper-raised); border-bottom: 1px solid var(--hairline); }
.sample p { padding: 8px 0; font: 500 13px/1.4 var(--text); color: var(--grey-mid); }

/* header: blue band, four words, never sticky */

/* the BETA pill: label style, white hairline on the blue band, links to contact */
.beta { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.7); border-radius: 4px;
  color: #fff; text-decoration: none; font: 700 11px/1 var(--text); letter-spacing: 0.12em; white-space: nowrap; transition: background var(--tap); }
.beta span { font-weight: 500; letter-spacing: 0; font-size: 13px; }
.beta:hover { background: rgba(255,255,255,.14); }
.beta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
main.flush { padding-top: 0; }
@media (max-width: 760px) { .beta span { display: none; } .beta { height: 24px; padding: 0 7px; } }

/* footer */
.foot { background: #0e0e14; color: #f7f7f9; margin-top: 0; }
.foot a { color: #f7f7f9; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot a:focus-visible, .foot button:focus-visible, .foot input:focus-visible { outline-color: #8ea0ff; }
.foot .top { display: flex; flex-wrap: wrap; gap: 48px; padding: 64px 0 48px; }
.foot .brand { flex: 1 1 380px; max-width: 520px; display: flex; flex-direction: column; gap: 16px; }
.foot .brand img { height: 96px; width: auto; margin: -24px 0 -12px -30px; }
.foot .cols { flex: 3 1 720px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }
.foot .cols h2 { font: 700 11px/1 var(--text); letter-spacing: 0.12em; color: #a3a3b3; margin-bottom: 14px; }
.foot .cols ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.foot .cols a { display: inline-block; padding: 6px 0; font-size: 15px; }
.foot .bottom { border-top: 1px solid #2a2a34; padding: 20px 0 32px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.foot .muted { color: #a3a3b3; }
.foot .narrative { font-size: 15px; line-height: 1.6; color: inherit; }
.foot .nl { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.foot .nl input { flex: 1 1 200px; background: #17171e; color: #f7f7f9; border-color: #a3a3b3; }
/* Footer variants. The footer never goes to ink: it closes the page in blue or on paper. */
.foot.blue { background: var(--blue); color: var(--on-blue); }
.foot.blue a { color: var(--on-blue); }
.foot.blue .muted, .foot.blue .cols h2 { color: #dfe4ff; }
.foot.blue .bottom { border-top-color: rgba(255,255,255,.35); }
.foot.blue a:focus-visible, .foot.blue button:focus-visible, .foot.blue input:focus-visible { outline-color: #ffffff; }
.foot.blue .nl input { background: #ffffff; color: #0e0e14; border-color: #ffffff; }
.foot.blue .nl input::placeholder { color: #5a5a68; }
.foot.blue .btn.primary { background: #0e0e14; color: #f7f7f9; }
.foot.blue .btn.light { background: #ffffff; color: #1228b8; }
.foot.paper { background: var(--paper); color: var(--ink); border-top: 1px solid var(--hairline); }
.foot.paper a { color: var(--ink); }
.foot.paper .muted, .foot.paper .cols h2 { color: var(--grey-mid); }
.foot.paper .bottom { border-top-color: var(--hairline); }
.foot.paper a:focus-visible, .foot.paper button:focus-visible, .foot.paper input:focus-visible { outline-color: var(--focus); }
.foot.paper .nl input { background: var(--paper-raised); color: var(--ink); border-color: var(--grey-mid); }
.foot.paper .btn.light { background: var(--ink); color: var(--paper); }


/* tags */
.tag { display: inline-block; align-self: flex-start; border-radius: 4px; padding: 6px 9px; font: 700 11px/1 var(--text); letter-spacing: 0.12em; text-decoration: none; }
.tag.orange { background: var(--orange); color: var(--on-orange); }
.tag.blue { background: var(--blue); color: var(--on-blue); }
.tag.sea { background: var(--seaglass); color: var(--on-seaglass); }
.tag.ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline); padding: 5px 8px; }
a.tag.ghost:hover { border-color: var(--grey-mid); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 10px; border: 0; font: 700 16px/1 var(--text); text-decoration: none; cursor: pointer; transition: transform var(--tap); white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.secondary { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--hairline); }
.btn.campaign { background: var(--seaglass); color: var(--on-seaglass); }
.btn.ink { background: #0e0e14; color: #f7f7f9; }
.btn.light { background: #f7f7f9; color: #0e0e14; }
.btn.wide { width: 100%; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.link { font-weight: 700; color: var(--blue-text); text-decoration: underline; text-underline-offset: 3px; }

/* the ρ frame */
.rho { position: relative; clip-path: url(#rho); aspect-ratio: 338 / 688; overflow: hidden; flex: none; }
.rho .photo { position: absolute; inset: 0; height: 73.98%; background: linear-gradient(180deg, #6f6f7c 0 62%, #4b4b57 62%); }
.rho .photo.full { height: 100%; }
.rho .band { position: absolute; left: 0; right: 0; top: 73.98%; bottom: 0; background: var(--blue); }
.rho .band.orange { background: var(--orange); }
.rho .band.sea { background: var(--seaglass); }
.f-xs { width: 40px; } .f-s { width: 80px; } .f-m { width: 160px; } .f-l { width: 280px; } .f-xl { width: 480px; } .f-xxl { width: 720px; }
.js .rho.wipe .band { transform: scaleY(0); transform-origin: bottom; }
.js .rho.wipe .photo { clip-path: inset(100% 0 0 0); }
.js .rho.wipe.in .band { transform: scaleY(1); transition: transform 160ms var(--ease-wipe); }
.js .rho.wipe.in .photo { clip-path: inset(0 0 0 0); transition: clip-path 160ms var(--ease-wipe) 160ms; }

/* story card */
.card { position: relative; background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: transform var(--tap); }
.card:active { transform: translateY(1px); }
.card .rho { width: 62%; max-width: 200px; }
.card h3 a, .card h2 a, .item h3 a, .lead h1 a, .lead h2 a { color: inherit; text-decoration: none; }
.card h3 a::after, .item h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover h3 a, .card:hover h2 a, .item:hover h3 a, .lead a:hover { color: var(--blue-text); }
.card .tag, .item .tag { position: relative; z-index: 1; }

/* list item: small frame left */
.item { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--hairline); }
.item .rho { width: 56px; }
.item .meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* lead */
.lead { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 48px; align-items: center; }
.lead .txt { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }

/* campaign block */
.camp { background: var(--seaglass); color: var(--on-seaglass); border-radius: 16px; padding: 48px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.camp .k { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.camp .k img { height: 18px; width: auto; }
.camp h2 { margin-bottom: 16px; }
.camp h2 .dot { color: var(--blue); }
.camp .standfirst { color: var(--on-seaglass); max-width: 540px; }
.camp .cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.camp .note { font: 500 13px/1.4 var(--text); color: #1d4a3b; }
.camp a:not(.btn) { color: #0e0e14; }

/* section break */
.brk { position: relative; height: 220px; overflow: hidden; display: flex; align-items: center; padding: 0 48px; border-radius: 0; }
.brk .rho { position: absolute; width: 720px; right: 40px; top: -900px; }
.brk .rho .fill { position: absolute; inset: 0; background: #0e0e14; opacity: 0.12; }
.brk h2 { position: relative; }
.brk.orange { background: var(--orange); color: var(--on-orange); }
.brk.blue { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--hairline); }
.brk.paper { background: var(--paper-raised); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

/* pull quote and statement */
.pq { padding-left: 20px; border-left: 4px solid var(--blue); display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.pq.orange { border-left-color: var(--orange); }
.pq.sea { border-left-color: var(--seaglass); }
.pq p { font: 800 32px/1.02 var(--display); letter-spacing: -0.01em; }
.pq cite { font: 500 13px/1.4 var(--text); font-style: normal; color: var(--grey-mid); }

/* video card */
.vcard { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; padding: 16px; background: #6f6f7c; color: #fff; text-decoration: none; transition: transform var(--tap); }
.vcard:active { transform: translateY(1px); }
.vcard > .rho { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; }
.vcard > .rho .photo { background: #5a5a68; }
.vcard > *:not(.rho) { position: relative; z-index: 1; }
.vcard .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vcard .top img { height: 14px; width: auto; }
.vcard h3 { font: 800 32px/0.98 var(--display); letter-spacing: -0.01em; color: #fff; margin-bottom: 26%; overflow-wrap: break-word; }
.vcard .dur { position: absolute; right: 12px; bottom: 12px; font: 700 12px/1 var(--text); background: rgba(14,14,20,.6); padding: 5px 7px; border-radius: 4px; }
.vcard.end { background: #0e0e14; align-items: center; justify-content: center; }
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 20px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.scroller > * { scroll-snap-align: start; }

/* panels, forms */
.panel { background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 16px; padding: 32px; }
.panel.sea { background: var(--seaglass); color: var(--on-seaglass); border: 0; }
.panel.blue { background: #0e0e14; color: #f7f7f9; border: 0; }
.panel.blue .tag.blue { background: var(--blue); }
.panel.blue a:not(.btn) { color: #fff; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .lab { font: 700 15px/1.3 var(--text); }
.field .hint { font: 500 13px/1.4 var(--text); color: var(--grey-mid); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; height: 48px; border: 1px solid var(--grey-mid); border-radius: 10px; padding: 0 14px; font: 400 17px/1.4 var(--text); background: var(--paper-raised); color: var(--ink);
}
textarea { height: auto; padding: 12px 14px; resize: vertical; }
input[type="file"] { font: 400 15px var(--text); padding: 8px 0; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); flex: none; }
.form { display: flex; flex-direction: column; gap: 20px; }
.form .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.inline-form .field { flex: 1 1 260px; }
.inline-form .btn { height: 48px; }

/* chips, filters */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--paper-raised); color: var(--ink); font: 700 15px/1 var(--text); text-decoration: none; cursor: pointer; }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* section heading row */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--hairline); padding-bottom: 12px; }
.sec-head a { font-weight: 700; }

/* page head */
.phead { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; border-bottom: 1px solid var(--hairline); }
.phead .standfirst { max-width: 760px; }

/* steps */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; counter-reset: s; }
.steps li { counter-increment: s; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.steps li::before { content: counter(s); font: 900 56px/0.86 var(--display); color: var(--ink); }
.steps.sea li::before { color: var(--seaglass-text); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font: 700 11px/1 var(--text); letter-spacing: 0.12em; color: var(--grey-mid); padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 10px; background: var(--paper-raised); }
dl.facts > div { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
dl.facts dt { flex: 0 0 260px; font-weight: 700; font-size: 15px; }
dl.facts dd { flex: 1 1 260px; font-size: 15px; color: var(--ink-soft); }

/* details */
details.faq { border-top: 1px solid var(--hairline); }
details.faq:last-child { border-bottom: 1px solid var(--hairline); }
details.faq summary { cursor: pointer; padding: 16px 0; font: 700 18px/1.3 var(--text); list-style-position: outside; }
details.faq > div, details.faq > p { padding: 0 0 18px; color: var(--ink-soft); }

/* audio player */
.player { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.play { width: 56px; height: 56px; border-radius: 999px; border: 0; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.play svg { width: 20px; height: 20px; fill: #fff; }
.ghost-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--paper-raised); color: var(--ink); font: 700 13px var(--text); cursor: pointer; flex: none; }
.track { flex: none; width: 100%; height: 6px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.track span { display: block; height: 100%; width: 18%; background: var(--ink); }

/* avatars */
.av { border-radius: 999px; background: linear-gradient(180deg, #6f6f7c 0 62%, #4b4b57 62%); flex: none; }

/* switches */
.switch { width: 56px; height: 32px; border-radius: 999px; border: 1px solid var(--grey-mid); background: var(--paper-raised); position: relative; cursor: pointer; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: var(--grey-mid); transition: transform var(--tap) var(--ease-land); }
.switch[aria-checked="true"] { background: var(--ink); border-color: var(--ink); }
.switch[aria-checked="true"]::after { transform: translateX(24px); background: #fff; }

/* quiz */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.opt { min-height: 64px; padding: 14px 18px; text-align: left; border-radius: 10px; border: 1px solid var(--grey-mid); background: var(--paper-raised); color: var(--ink); font: 700 17px/1.3 var(--text); cursor: pointer; }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bar { height: 10px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--ink); }
[hidden] { display: none !important; }

/* vertical feed */
.feed { background: #0e0e14; color: #f7f7f9; min-height: 100vh; }
.feed a { color: #f7f7f9; }
.feed .bar-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; }
.feed .bar-top img { height: 56px; width: auto; }
.feed .stage { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; align-items: center; padding: 8px 0 48px; }
.feed .clip { width: 460px; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; position: relative; background: #6f6f7c; }
.feed .clip > .rho { position: absolute; left: 0; top: 0; width: 100%; }
.feed .clip .over { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.feed .clip .sub { align-self: flex-start; background: rgba(14,14,20,.6); color: #fff; font: 700 17px/1.3 var(--text); padding: 6px 10px; border-radius: 4px; margin-bottom: 120px; }
.feed .rail { display: flex; flex-direction: column; gap: 14px; }
.feed .rail button, .feed .rail a { width: 52px; height: 52px; border-radius: 999px; border: 1px solid #2a2a34; background: #17171e; color: #f7f7f9; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.feed .rail svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.feed .info { flex: 1 1 260px; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }

/* misc */
.notice { border-left: 4px solid var(--ink); padding: 4px 0 4px 16px; }
.badge-num { font: 900 120px/0.82 var(--display); letter-spacing: -0.02em; }
.logo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.logo-strip div { height: 72px; border-radius: 10px; border: 1px dashed var(--grey-mid); display: flex; align-items: center; justify-content: center; font: 500 13px var(--text); color: var(--grey-mid); }

/* phones */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  main { padding: 32px 0 64px; }
  .stack { gap: 48px; }
  .d-xl { font-size: 72px; }
  .d-l { font-size: 48px; }
  .h-l { font-size: 36px; }
  .card { padding: 16px; }
  .lead { grid-template-columns: 1fr; gap: 24px; }
  .lead .f-l { width: 160px; }
  .camp { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; }
  .brk { padding: 0 16px; height: 160px; }
  .brk .rho { right: -200px; }
  .panel { padding: 24px; }
  .foot .brand img { height: 80px; }
  .feed .clip { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .rho.wipe .band { transform: none; }
  .js .rho.wipe .photo { clip-path: none; }
}
.wrap.brk-gap { margin-top: 64px; }
.player > .track { flex: 1 1 240px; width: auto; }
@media (max-width: 760px) {
  .card .rho { width: 42%; max-width: 150px; }
  .lead .rho { width: 140px; }
}

/* The beta gate: the public front of orait.gr until launch. Blue plus white, with ink for the one action. */
.gate { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); }
.gate a { color: var(--ink); }
.gate-top { padding: 28px 0; }
.gate-logo { height: 72px; width: auto; }
.gate .beta { color: var(--ink); border-color: var(--ink); font: 700 12px/1 var(--text); letter-spacing: 0.12em; }
.gate-main { flex: 1; display: flex; align-items: center; padding: 48px 0; }
.gate-copy { max-width: 860px; }
.gate .standfirst { color: var(--ink-soft); max-width: 640px; }
.gate .body-s { color: var(--grey-mid); max-width: 640px; }
.gate .caption { color: var(--grey-mid); }
.gate-key { margin-top: 24px; }
.gate-key summary { cursor: pointer; font: 500 15px/1.4 var(--text); text-decoration: underline; text-underline-offset: 4px; width: max-content; padding: 8px 0; }
.gate-key summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gate-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; max-width: 460px; }
.gate-form input { flex: 1 1 220px; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--grey-mid); background: var(--paper-raised); color: var(--ink); font: 400 17px var(--text); }
.gate-form input:focus-visible, .gate-form button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gate-err { margin-top: 10px; font: 500 15px/1.4 var(--text); }
.gate-foot { padding: 24px 0 32px; }
@media (max-width: 640px) { .gate-logo { height: 56px; } }
.gate > .wrap, .gate-main > .wrap { width: 100%; }

.gate > .wrap, .gate-main > .wrap { width: 100%; }


/* The sting (06-motion.md), played as ορράιτ. turning into oráit. and back.
   The script runs it: the Greek sting (accent lands at 300ms, the full stop at 600ms), then English, Greek, English,
   ending on the page's language. Each change: letters slide (320ms, ease-wipe), ρρ and τ squash, at the deepest point
   every letter takes its other form, they recover, and the dot of the i lands (or lifts on the way back).
   Without script or with reduced motion the logo stands still. Nothing fades. */
.sting2 { position: relative; display: block; height: 118px; aspect-ratio: 2479 / 1079; }
.sting2 svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.sting2 .lg-ink { fill: var(--ink); }
.sting2 .lg-blue { fill: var(--blue); }
.sting2 .lt, .sting-acc, .sting-dot, .sting-tit { transform-box: fill-box; }
.sting2 .sq { transform-origin: 50% 0%; transition: transform 60ms var(--ease-land); }
.sting-acc, .sting-dot, .sting-tit { transform-origin: 50% 100%; }
.sting2 .mv { transition: transform 320ms var(--ease-wipe); }
.sting2 .sting-tit { transform: translateY(-1100px); transition: transform 220ms var(--ease-wipe); }
.sting2 .se { visibility: hidden; }
.sting2.is-en .sg { visibility: hidden; }
.sting2.is-en .se { visibility: visible; }
.sting2.at-en .mv { transform: translateX(var(--dx)); }
.sting2.tit-on .sting-tit { transform: none; }
.sting2.squash .sq { transform: scale(1.08, 0.62); }
.sting2.hush .mv, .sting2.hush .sq, .sting2.hush .sting-tit { transition: none; }
.sting2.pre .sting-acc, .sting2.pre .sting-dot { transform: translateY(-1100px); }
.sting2.intro .sting-acc { animation: sting-acc 300ms var(--ease-land) both; }
.sting2.intro .sting-dot { animation: sting-dot 680ms var(--ease-land) both; }
.sting2.tit-land .sting-tit { animation: sting-dot 340ms var(--ease-land) both; }
@keyframes sting-acc { from { transform: translateY(-1100px); } to { transform: translateY(0); } }
@keyframes sting-dot {
  0%, 44% { transform: translateY(-1100px); }
  88% { transform: translateY(0) scale(1, 1); }
  94% { transform: translateY(0) scale(1.12, 0.82); }
  100% { transform: translateY(0) scale(1, 1); }
}
.foot .brand .sting2 { margin: -8px 0 -18px -9px; align-self: flex-start; width: auto; }
.gate .sting2 { height: 88px; margin: -6px 0 -14px -7px; }
@media (max-width: 640px) { .foot .brand .sting2 { height: 98px; margin: -7px 0 -15px -7px; } .gate .sting2 { height: 70px; margin: -5px 0 -11px -5px; } }



/* The header (05-layout): no band. The page is paper from the top; the logo sits top left, loud, set as 120px type
   on desktop and 72px on phones (the logo box is 1079 units tall, so 0.12 and 0.072 of it), with one word at the right. */
.mast { background: var(--paper); color: var(--ink); }
.mast-row { display: flex; justify-content: space-between; align-items: flex-end; padding: 36px 0 20px; }
.mast .logo { display: block; margin-left: -10px; }
.mast .logo:focus-visible { outline-offset: 4px; }
.mast .sting2 { height: 129px; }
.ola { font: 900 48px/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; padding: 4px 0; margin-bottom: 30px; }
.ola:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.mast-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.mast-tags .tag { text-decoration: none; }
.mast-tags .tag[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ink); }
.sample { display: block; }
.sample .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sample .beta { color: var(--ink); border-color: var(--ink); flex: none; }
.sample .beta:hover { background: var(--hairline); }
.sample .beta:focus-visible { outline-color: var(--focus); }

/* The menu: a full screen paper panel. It wipes open from the top and shut the same way. */
.menu { position: fixed; inset: 0; z-index: 50; background: var(--paper); color: var(--ink); overflow-y: auto; display: none; }
.menu:target, .menu.open { display: block; }
.js .menu.open { animation: menu-in 320ms var(--ease-wipe) both; }
.js .menu.closing { display: block; animation: menu-out 320ms var(--ease-wipe) both; }
@keyframes menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes menu-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
.menu-in { padding-top: 36px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 40px; }
.menu-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.menu-top .ola { margin-bottom: 6px; }
.menu-words { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.menu-words a { font: 900 72px/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.menu-words a:hover { color: var(--blue-text); }
.menu-actions { gap: 12px; }
.menu-narr { max-width: 640px; color: var(--ink-soft); }
.btn.campaign { background: var(--seaglass); color: var(--on-seaglass); }
body.menu-lock { overflow: hidden; }

/* The ρ corners (04, PictureCorners): top corners R, bottom right 0.645 R by 0.93 R, bottom left square.
   corners-hero 1280x720 R320 and corners-half 616x720 R320 on desktop. R scales with the picture below full size,
   so the corners keep the letter's proportion. On phones the full letter leads instead. */
.rho-corners { position: relative; overflow: hidden; width: 100%;
  border-radius: var(--r) var(--r) 0 0; border-bottom-right-radius: calc(var(--r) * 0.645) calc(var(--r) * 0.93); }
.rho-corners .photo { position: absolute; inset: 0; background: linear-gradient(180deg, #6f6f7c 0 58%, #4b4b57 58%); }
.rho-corners.hero { aspect-ratio: 16 / 9; max-width: 1280px; --r: min(320px, calc((100vw - 96px) * 0.25)); }
.rho-corners.half { aspect-ratio: 616 / 720; max-width: 616px; --r: min(320px, calc((100vw - 96px) * 0.25)); }
.rho-corners.quarter { aspect-ratio: 300 / 400; max-width: 300px; --r: 150px; }
.hero { display: flex; flex-direction: column; gap: 28px; }
.hero-pic { display: block; }
.hero-pic > .rho { display: none; }
.hero .txt { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.hero .txt a { color: inherit; text-decoration: none; }
.hero .txt a:hover { color: var(--blue-text); }
.bigpic > .rho { display: none; }

/* A row of four or five stories with the full letter at frame-s. Not in the brand book: added at Kyriakos's request. */
.row5 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.r5 { display: flex; gap: 16px; align-items: flex-start; color: inherit; text-decoration: none; }
.r5 .rho { width: 80px; }
.r5 .h-s { font-size: 24px; line-height: 1.05; }
.r5:hover .h-s { color: var(--blue-text); }
.r5:active { transform: translateY(1px); }

@media (max-width: 640px) {
  .mast-row { padding: 20px 0 12px; }
  .mast .logo { margin-left: -6px; }
  .mast .sting2 { height: 78px; }
  .ola { font-size: 32px; margin-bottom: 18px; }
  .mast-tags { padding-bottom: 20px; gap: 6px; }
  .menu-words a { font-size: 48px; }
  .hero-pic > .rho-corners { display: none; }
  .hero-pic > .rho { display: block; width: 160px; }
  .bigpic > .rho-corners { display: none; }
  .bigpic > .rho { display: block; }
  .row5 { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .js .menu.open, .js .menu.closing { animation: none; } }

/* The Just Gold network band (as on justgold.gr). Logos in greyscale so the ORAIT palette holds. */
.net { display: flex; flex-wrap: wrap; gap: 32px 64px; padding: 32px 0; border-top: 1px solid var(--hairline); }
.net h2 { font: 700 11px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 16px; }
.net ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; }
.net a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.net-logo { display: flex; align-items: flex-end; height: 60px; }
.net-logo img { width: auto; max-width: 180px; filter: grayscale(1); opacity: .85; }
.net a:hover .net-logo img { opacity: 1; }
.net-line { font-size: 13px; color: var(--grey-mid); }
.net a:hover .net-line { color: var(--ink); text-decoration: underline; }
.foot .bottom p { margin: 0; }
.foot .bottom a[href^="mailto"] { text-decoration: underline; text-underline-offset: 3px; }
.menu-social { gap: 20px; }
.menu-social a { color: var(--ink); font-weight: 500; }
.gate-social { gap: 16px; }
.gate-social a { color: var(--grey-mid); }

/* Legal pages */
.legal p, .legal li { font-size: 17px; line-height: 1.6; }
.legal .legal-sec { padding-top: 8px; scroll-margin-top: 24px; }
.legal .legal-sec > p + p { margin-top: 10px; }
.legal ul.prose { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--blue-text); }
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 10px; background: var(--paper-raised); }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.table-wrap th { font: 700 11px/1.2 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-mid); }
.table-wrap tr:last-child td { border-bottom: 0; }
.legal code { font-size: 14px; background: var(--hairline); padding: 1px 6px; border-radius: 4px; }
/* The AI label (AI Act, article 50(4)): above the headline, in ink, never hidden. */
.ai-label { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--text); letter-spacing: 0.06em; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 4px; padding: 6px 10px; text-decoration: none; width: max-content; }
.ai-label::before { content: "ΤΝ"; background: var(--ink); color: var(--paper); border-radius: 2px; padding: 2px 4px; font-size: 10px; letter-spacing: 0.08em; }
.ai-label:hover { background: var(--hairline); }

/* Just Gold logos, built as on justgold.gr: the wordmark crop and the square mark. Shown in their own colours, as the publisher. */
.lg { --h: 44px; display: block; position: relative; overflow: hidden; height: var(--h); width: calc(var(--h) * 2208 / 978); }
.lg img { position: absolute; max-width: none; height: calc(var(--h) * 3500 / 978); width: auto; left: calc(var(--h) * -648 / 978); top: calc(var(--h) * -1261 / 978); filter: none !important; opacity: 1 !important; }
.lg-mark { position: absolute; top: 0; overflow: visible; }
.lg-mark .lg-p { fill: none; stroke: #070707; stroke-width: 18; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; }
.lg-gr .lg-fill { fill: #2189ff; }
.lg-au .lg-fill { fill: #fff700; }
:root[data-theme="dark"] .lg img, .lg-dark img { filter: invert(1) !important; }

/* Social links: the network's mark and its name */
.social { display: inline-flex; align-items: center; gap: 8px; }
.si { width: 18px; height: 18px; fill: currentColor; flex: none; }
.foot .bottom .social span:not(.vh) { font-size: 15px; }
.btn.social .si, .tag.social .si { width: 14px; height: 14px; }

/* Network band, aligned: every logo sits centred in the same box, every domain on the same line. */
.net { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.net-grp { min-width: 0; max-width: 100%; }
.net ul { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.net li { width: 160px; }
.net a { gap: 12px; }
.net-logo { height: 64px; width: 160px; align-items: center; justify-content: flex-start; }
.net-logo img { max-width: 150px; max-height: 64px; }
.net .lg { --h: 40px; }
@media (max-width: 640px) {
  .net li { width: calc(50% - 12px); }
  .net-logo { width: auto; }
}
.net-logo .lg img { max-width: none; max-height: none; }
.net-logo > img { object-fit: contain; object-position: left center; }

/* Shop: Fourthwall products. The lockup sits on a plain panel, never cut by the ρ frame (it is the logo, not a picture). */
.shop-card .shop-lockup { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--paper); border-radius: 6px; padding: 12%; }
.shop-card .shop-lockup img { width: 100%; height: auto; }
.shop-card[hidden] { display: none; }

/* Language switch, top right beside the menu word. Plain text link, one tap to the same page in the other edition. */
.mast-end { display: flex; align-items: flex-end; gap: 24px; }
.lang-sw { font: 700 14px/1 var(--text); letter-spacing: 0.08em; color: var(--ink); text-decoration: none; border: 1.5px solid var(--ink); border-radius: 4px; padding: 7px 9px; margin-bottom: 38px; }
.lang-sw:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 720px) { .mast-end { gap: 14px; } .lang-sw { margin-bottom: 22px; padding: 6px 8px; font-size: 13px; } }
.foot .beta-note { max-width: 980px; margin-top: 16px; }

/* Ροή: typographic cards only (decision 13). Each item ends with its sources line (decision 17). */
.roi-item { border-top: 1px solid var(--hairline); padding: 28px 0 8px; }
.roi-item .prose p { margin: 0 0 10px; }
.sources-line { font-size: 15px; color: var(--ink); }
.roi-report button { background: none; border: 0; padding: 0; font: 500 14px/1.4 var(--text); color: var(--ink); text-decoration: underline; cursor: pointer; }

/* Accessibility settings: a text button beside the language switch opens a paper panel under the header row.
   Choices live on <html> as data-text, data-motion and data-space. No new colours: ink, paper and hairline only. */
.a11y-btn { font: 700 14px/1 var(--text); color: var(--ink); background: none; border: 1.5px solid var(--ink); border-radius: 4px; padding: 6px 9px; margin-bottom: 38px; cursor: pointer; }
.a11y-btn:hover, .a11y-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.a11y { display: flex; flex-wrap: wrap; gap: 24px 40px; padding: 20px 0 24px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: 16px; }
.a11y[hidden] { display: none; }
.a11y-grp { display: flex; flex-direction: column; gap: 10px; }
.a11y-grp .row { gap: 8px; }
.a11y-opt { font: 500 15px/1 var(--text); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 4px; padding: 10px 12px; cursor: pointer; }
.a11y-opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 700; }
.a11y-foot { flex-basis: 100%; gap: 16px; }
.a11y-foot .caption { flex: 1 1 200px; }
@media (max-width: 720px) { .a11y-btn { margin-bottom: 22px; padding: 6px 8px; font-size: 13px; } .a11y { gap: 20px; } }

/* Text size: two steps up from the named styles, reading text only; display type is already large. */
html[data-text="1"] body { font-size: 19px; }
html[data-text="1"] .prose p, html[data-text="1"] .prose li { font-size: 20px; }
html[data-text="1"] .standfirst { font-size: 23px; }
html[data-text="1"] .body-s, html[data-text="1"] .check, html[data-text="1"] .foot .cols a, html[data-text="1"] .foot .narrative,
html[data-text="1"] .tbl, html[data-text="1"] dl.facts dt, html[data-text="1"] dl.facts dd { font-size: 17px; }
html[data-text="1"] .title { font-size: 20px; }
html[data-text="1"] .caption { font-size: 15px; }
html[data-text="1"] .label { font-size: 13px; }
html[data-text="2"] body { font-size: 21px; }
html[data-text="2"] .prose p, html[data-text="2"] .prose li { font-size: 23px; }
html[data-text="2"] .standfirst { font-size: 26px; }
html[data-text="2"] .body-s, html[data-text="2"] .check, html[data-text="2"] .foot .cols a, html[data-text="2"] .foot .narrative,
html[data-text="2"] .tbl, html[data-text="2"] dl.facts dt, html[data-text="2"] dl.facts dd { font-size: 19px; }
html[data-text="2"] .title { font-size: 22px; }
html[data-text="2"] .caption { font-size: 17px; }
html[data-text="2"] .label { font-size: 14px; }

/* Spacing: WCAG 1.4.12 text spacing values. */
html[data-space="1"] body :is(p, li, dd, dt, .caption, .body-s, .standfirst, .title, td, label) { line-height: 1.8 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
html[data-space="1"] .prose p, html[data-space="1"] .prose li { margin-bottom: 2em; }

/* Motion off: the same as the device setting. */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { transition: none !important; animation: none !important; }
html[data-motion="off"] .js .rho.wipe .band { transform: none; }
html[data-motion="off"] .js .rho.wipe .photo { clip-path: none; }