@font-face {
  font-family: "Cardo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/cardo-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cardo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/cardo-400-greek.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: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

:root {
  --ground:#ffffff; --panel:#ffffff; --edge:#dfe3ea;
  --ink:#212529; --faint:#5b6472; --accent:#1b2a4a; --gold:#c5a059; --gold-text:#8a6d2f;
  --display:"Cardo", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--ground); color:var(--ink); line-height:1.65;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header { max-width: 1280px; margin: 0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 24px; border-bottom:1px solid var(--edge); }
header nav { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px 16px; margin-left:auto; }
.tab { white-space:nowrap; }
.tab { display:inline-grid; text-align:center; font-size:14px; font-weight:500; color:var(--ink); text-decoration:none;
  padding:4px 0; border-bottom:2px solid transparent; }
.tab > span { grid-area:1 / 1; }
.tab:hover, .tab[aria-current="page"] { border-bottom-color:var(--gold); }
.brand { display:flex; text-decoration:none; }
.brand img { height:48px; width:auto; }
html { scrollbar-gutter:stable; }
html[lang="el"] .brand img[data-lang="en"], html[lang="en"] .brand img[data-lang="el"] { display:none; }
.langs { display:inline-flex; padding:2px; border:1px solid var(--edge); border-radius:6px; background:var(--panel); }
.langs button { font:inherit; font-size:12px; width:32px; padding:2px 0; color:var(--faint); background:transparent;
  border:0; border-radius:4px; cursor:pointer; }
.langs button:hover { color:var(--ink); }
.langs button[aria-pressed="true"] { color:#fff; background:var(--accent); }
main { padding-top:24px; padding-bottom:48px; }
h1 { font-family:var(--display); font-weight:700; font-size:30px; color:var(--accent); margin:8px 0 4px; }
h2 { font-family:var(--display); font-weight:700; font-size:19px; color:var(--accent); margin:28px 0 8px; }
p, li { font-size:15px; }
ul { padding-left:20px; }
a { color:var(--accent); }
code { background:var(--panel); border:1px solid var(--edge); border-radius:4px; padding:1px 4px; font-size:13px; }
.updated { color:var(--faint); font-size:14px; margin:0 0 16px; }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; margin:8px 0; font-size:14px; }
th, td { border:1px solid var(--edge); padding:8px 10px; text-align:left; vertical-align:top; }
th { background:#f7f8fa; font-weight:600; }
footer { display:flex; flex-direction:column; align-items:center; gap:12px;
  border-top:1px solid var(--edge); padding:32px 24px; color:var(--faint); font-size:12px; line-height:1.5; }
footer .links { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 8px; }
footer .dot { opacity:.5; }
footer .copy { font-size:11px; }
footer a { color:var(--faint); text-decoration:none; }
footer a:hover { text-decoration:underline; }
footer a[data-page] { display:inline-grid; text-align:center; }
footer a[data-page] > span { grid-area:1 / 1; }
html[lang="el"] [data-en], html[lang="en"] [data-el] { visibility:hidden; }

@media (min-width: 640px) {
  main p, main li { text-align: justify; hyphens: auto; }
}
@media (max-width: 480px) {
  header { padding:12px 16px; }
  .brand img { height:36px; }
  header nav { gap:12px; }
  .tab { font-size:13px; }
}

/* The landing: one wide column, sections split across it; cards with a thin edge, or words and images alone. */
main.landing { max-width:1280px; padding:0 24px; }
.landing p, .landing li { text-align:left; hyphens:manual; }
.band { display:grid; gap:32px; padding:64px 0; border-top:1px solid var(--edge); }
.band:first-child { border-top:0; }
.band h2 { font-size:24px; margin:0 0 12px; }
.lead { color:var(--faint); max-width:640px; margin:0; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 16px; }
.hero .eyebrow { color:var(--gold-text); }
.rule { display:block; width:56px; height:2px; background:var(--gold); margin:24px 0; }
.button { display:inline-block; font-weight:600; font-size:15px; text-decoration:none; color:#fff; background:var(--accent);
  border-radius:8px; padding:12px 28px; }
.button:hover { background:#24365a; }
.button.login { display:inline-grid; text-align:center; font-size:14px; padding:7px 18px; }
.button.login > span { grid-area:1 / 1; }
.cta { margin:32px 0 0; }
.small { font-size:13px; color:var(--faint); margin:10px 0 0; }
.clip { width:100%; aspect-ratio:16 / 9; object-fit:cover; display:block; border:1px solid var(--edge); border-radius:12px; background:#f7f8fa; }

.hero { position:relative; overflow:hidden; padding:56px 0 64px; align-items:center; gap:40px; }
.hero-text { position:relative; z-index:1; max-width:640px; }
.hero h1 { font-size:38px; line-height:1.15; margin:0; }
/* A watermark that lives (site.js): nodes come, link and go; chains of them light gold, as a query walks the citations. */
body:has(> .graph) { position:relative; }
.graph { position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; opacity:.2; pointer-events:none; animation:drift 40s ease-in-out infinite alternate; }
.graph line { stroke:var(--edge); stroke-width:1.2; transition:stroke 1.2s, opacity 1.6s; }
.graph circle { fill:var(--accent); opacity:.24; transition:fill 1.2s, opacity 1.6s; }
.graph .far { opacity:.45; }
.graph line.lit, .graph line.born { stroke:var(--gold); }
.graph circle.lit { fill:var(--gold); opacity:.75; }
.graph .gone, .graph circle.gone { opacity:0; }
@keyframes drift { from { transform:translate(0, 0); } to { transform:translate(-18px, 8px); } }
@media (prefers-reduced-motion: reduce) {
  .graph { animation:none; }
}

.features { gap:16px; padding-left:max(0px, calc((100% - 960px) / 2)); padding-right:max(0px, calc((100% - 960px) / 2)); }
.strip { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.strip::-webkit-scrollbar { display:none; }
.strip figure { flex:0 0 100%; scroll-snap-align:start; margin:0; display:grid; gap:16px; }
.strip figure video { order:-1; }
.strip h2 { font-size:20px; margin:0 0 8px; }
.strip p { margin:0; color:var(--faint); max-width:640px; }
.dots { display:flex; justify-content:center; }
.dots .dot { box-sizing:content-box; width:28px; height:3px; padding:10px; border:0; background:var(--edge); background-clip:content-box; cursor:pointer; }
.dots .dot.on { background-color:var(--gold); }

.cards { display:grid; gap:16px; grid-template-columns:1fr; list-style:none; padding:0; margin:0; }
.cards li { border:1px solid var(--edge); border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(27,42,74,.06); padding:20px; font-size:15px; }
.cards li strong { display:block; color:var(--accent); font-weight:600; margin-bottom:4px; }
.cards li span { display:block; color:var(--faint); }
.why { position:relative; z-index:1; list-style:none; padding:0; margin:0; display:grid; gap:28px; }
.why li { font-size:16px; font-weight:600; color:var(--accent); }
.why li span { display:block; font-size:14px; font-weight:400; color:var(--faint); margin-top:2px; }
.small a.quiet { color:var(--accent); text-decoration:none; }
.small a.quiet:hover { text-decoration:underline; }
.why li::before { content:""; display:block; width:24px; height:2px; margin:0 0 10px; background:var(--gold); }
.cards.soon li, .cards.trust li { position:relative; }
.cards.soon li::before { content:""; position:absolute; top:-1px; left:20px; width:40px; height:2px; background:var(--gold); }
.cards.trust li::before { content:""; position:absolute; top:-1px; right:20px; width:40px; height:2px; background:var(--gold); }
.link { display:inline-block; margin-top:20px; font-size:14px; font-weight:500; }


.faq details { margin:0; border-bottom:1px solid var(--edge); padding:16px 0; }
.faq details:first-child { border-top:1px solid var(--edge); }
.faq summary { cursor:pointer; font-size:15px; font-weight:600; color:var(--accent); }
.faq summary::marker { color:var(--gold); }
.faq details p { margin:8px 0 0; color:var(--faint); max-width:720px; }

.closing { justify-items:center; text-align:center; padding:96px 0; }
.closing h2 { margin:0 0 24px; }

@media (min-width: 768px) {
  .cards { grid-template-columns:1fr 1fr; }
  .cards.soon { grid-template-columns:repeat(3, 1fr); }
  .hero { grid-template-columns:1fr 360px; }
  .split { grid-template-columns:360px 1fr; gap:56px; }
  .strip figure { grid-template-columns:300px 1fr; gap:8px 32px; align-items:center; }
  .strip figure video { order:0; grid-column:2; grid-row:1 / span 2; }
  .strip figure h2 { grid-column:1; grid-row:1; align-self:end; }
  .strip figure p { grid-column:1; grid-row:2; align-self:start; }
}
@media (max-width: 767px) {
  .graph { display:none; }
}
@media (max-width: 480px) {
  main.landing { padding:0 16px; }
  .hero h1 { font-size:30px; }
  .band { padding:48px 0; }
}

/* The blog: the articles' figures, drawn from a decision's own page, and the list of articles. */
.page-note, .anatomy, .roles, .steps { margin: 32px 0; }
figcaption { grid-column: 1 / -1; font-size: .85em; color: var(--faint); margin-top: 8px; }

.page-note { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; }
.page-note .page, .anatomy .part { font-family: Cardo, Georgia, serif; background: #fff; border: 1px solid #e6e3dc; padding: 24px 28px; line-height: 1.5; }
.page-note .page p { margin: 0 0 10px; }
.page-note .court, .anatomy .court { text-align: center; font-size: .85em; letter-spacing: .04em; }
.page-note .parties { text-align: center; margin: 18px 0; }
.page-note .date { text-align: right; font-size: .9em; }
.page-note .n { color: var(--gold); font: 600 .7em Inter, system-ui, sans-serif; margin-left: 4px; }
.page-note .notes { list-style: none; margin: 0; padding: 0; counter-reset: note; font-size: .92em; color: var(--faint); }
.page-note .notes li { position: relative; padding-left: 26px; margin: 0 0 14px; }
.page-note .notes li::before { content: counter(note); counter-increment: note; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #fff; font: 600 11px/18px Inter, system-ui, sans-serif; text-align: center; }

.anatomy { display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 24px; }
.anatomy .part { border-top: 0; padding: 14px 28px; }
.anatomy .part:first-child { border-top: 1px solid #e6e3dc; padding-top: 24px; }
.anatomy .part:nth-last-child(2) { padding-bottom: 24px; }
.anatomy .part p { margin: 0 0 6px; }
.anatomy .small { font-size: .85em; color: var(--faint); }
.anatomy .label { align-self: center; padding-left: 14px; border-left: 2px solid var(--gold); color: var(--accent); font-weight: 600; font-size: .92em; }
.anatomy .label span { display: block; font-weight: 400; color: var(--faint); font-size: .9em; }

.roles table { border-collapse: collapse; font-family: Cardo, Georgia, serif; font-size: 1.05em; }
.roles th, .roles td { padding: 10px 18px; text-align: left; border-bottom: 1px solid #e6e3dc; }
.roles thead th { font-family: Inter, system-ui, sans-serif; font-size: .8em; font-weight: 600; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }
.roles tbody th { font-weight: 400; color: var(--faint); }

.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.steps li { border-top: 2px solid var(--gold); padding-top: 12px; }
.steps .num { display: block; font: 700 1.6em Cardo, Georgia, serif; color: var(--gold); }
.steps strong { display: block; color: var(--accent); margin: 2px 0 6px; }
.steps p { margin: 0; font-size: .92em; color: var(--faint); }

@media (max-width: 640px) {
  .page-note, .anatomy { grid-template-columns: 1fr; }
  .anatomy .label { padding: 6px 0 14px; border-left: 0; border-top: 2px solid var(--gold); }
  .steps ol { grid-template-columns: 1fr 1fr; }
}
.posts { list-style:none; padding:0; margin:24px 0 0; }
.posts li { border-top:1px solid var(--edge); padding:20px 0; }
.posts a { font-family:var(--display); font-weight:700; font-size:20px; text-decoration:none; }
.posts p { margin:6px 0 4px; color:var(--ink); }
.posts span { font-size:13px; color:var(--faint); }

/* An article: the text at a reading width, its contents on the left from 1024px. */
main.post article { max-width:860px; }
main.post h1 { font-size:30px; line-height:1.2; }
main.post h2 { font-size:19px; }
main.post .lead { font-size:16px; color:var(--faint); }
main.post .lead, main.post figure p { text-align:left; hyphens:manual; }
nav.toc { display:none; }
nav.toc a { display:block; font-size:13px; line-height:1.4; color:var(--faint); text-decoration:none; padding:5px 0; }
nav.toc a:hover, nav.toc a.on { color:var(--accent); }
@media (min-width: 1024px) {
  main.post { max-width:1280px; padding:0 24px; display:grid; grid-template-columns:200px 1fr; gap:48px; }
  nav.toc { display:block; position:sticky; top:24px; align-self:start; padding-top:96px; }
}
@media print {
  header, footer, nav.toc, nav.more { display:none; }
  main.post { display:block; max-width:none; color:#000; }
  figure { break-inside:avoid; }
}

/* Real answers: the question, the answer with its citations, the decisions as the app's cards. */
.examples .tabs { display:flex; flex-wrap:wrap; gap:4px 24px; margin:0 0 20px; }
.examples .tabs button { font:inherit; font-size:14px; color:var(--faint); background:none; border:0; border-bottom:2px solid transparent; padding:4px 0; cursor:pointer; }
.examples .tabs button:hover { color:var(--ink); }
.examples .tabs button[aria-selected="true"] { color:var(--accent); font-weight:600; border-bottom-color:var(--gold); }
.example { display:grid; gap:24px; align-items:start; }
.example .question { justify-self:end; max-width:85%; margin:0 0 16px auto; background:#eef1f6; border-radius:12px; padding:10px 16px; }
.example .answer { margin:0 0 12px; line-height:1.7; }
.chip { display:inline-block; font-size:12px; font-weight:500; color:var(--accent); background:#f6eedf; border-radius:4px; padding:0 6px; margin:0 1px; }
.cards.decisions { grid-template-columns:1fr; gap:12px; }
.cards.decisions li { padding:16px; }
.cards.decisions .court { display:block; font-size:12px; color:var(--faint); margin-bottom:4px; }
.cards.decisions strong { display:block; font-family:var(--display); font-size:16px; line-height:1.35; color:var(--accent); }
.cards.decisions strong { filter:blur(4px); user-select:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cards.decisions .pills { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.cards.decisions .pills span { font-size:12px; color:var(--accent); background:#f6eedf; border-radius:999px; padding:2px 10px; }
.cards.decisions .meta { display:block; font-size:12px; color:var(--faint); margin-top:8px; }
@media (min-width: 1024px) {
  .example { grid-template-columns:1fr 380px; gap:40px; }
}
.example[hidden] { display:none; }
.cards.decisions .chip { display:inline-block; margin:0 6px 0 0; }