/* Open in Europe — Handmade Europe. Every colour here was SAMPLED from our own puppet stills on 2026-09-20 (grounds from the whole frame, accents from the saturated pixels only), or from KGD's own painting, read locally. Nothing is invented and nothing is red: red means broken. Four editions live side by side. The site ships in `prosper`; one attribute on switches it. (none) as sampled — warm, quiet, blue-led bright the same hues pushed up in chroma and value prosper green leads, sunflower accents, blue demoted <- the default art violet and gold on near-white, from the painting */ :root{ --action:#2F6B4A; --paper:#F4EEE1; --plate:#FBF7EE; --ink:#16283C; --ink-soft:#5A6B72; --brand:#243C54; --tan:#B48454; --ochre:#E4B454; --olive:#3C5424; --line:#DED3BE; --chip:#EDE3CF; --on-brand:#FBF7EE; --measure:64ch; --air:clamp(38px,6vw,72px); /* between sections */ --air-s:clamp(20px,3vw,32px); /* inside a block */ --grain:url("/assets/img/paper-grain.png"); } :root[data-edition="bright"]{ /* KGD 2026-09-21: "its pale yellowish. i want it fresher or whitish … slight paper texture to some areas, like thicker writing paper". Near-white page; the grain sits only on panels (rail, cards, phone cards), never the whole page. */ --paper:#FDFDFB; --plate:#FFFFFF; --ink:#13253C; --ink-soft:#586B7C; --brand:#2563C9; --action:#3C7A4E; --tan:#C99A5B; --ochre:#EFB63F; --olive:#3E7A57; --line:#E6E4DE; --chip:#E4EDFA; --on-brand:#FFFFFF; } :root[data-edition="prosper"]{ --action:#2F5D4A; --paper:#FDF7EA; --plate:#FFFDF6; --ink:#1F2A26; --ink-soft:#636D66; --brand:#2F5D4A; /* deep teal-green: reads calm and dark, not leafy (KGD: "to green") */ --tan:#C08F4A; --ochre:#E9B33C; --olive:#4A7A3A; /* olive now does ONE job: a checked mark */ --line:#E7DDC6; --chip:#F6EBD4; --on-brand:#FFFDF6; } :root[data-edition="art"]{ --action:#5E7F3E; --paper:#FAF8F4; --plate:#FFFFFF; --ink:#241C3A; --ink-soft:#63607A; --brand:#6E4BA8; --tan:#C9A227; --ochre:#E6C65A; --olive:#3F7A2E; --line:#E6E1DA; --chip:#F0EAF8; --on-brand:#FFFFFF; } @media (prefers-color-scheme: dark){ :root:not([data-force-light]){ --action:#5FA97A; --paper:#131A16; --plate:#1B241E; --ink:#F0EADA; --ink-soft:#A6B2A4; --brand:#7DBE5F; --tan:#D9A97A; --ochre:#F2CE63; --olive:#9BC47E; --line:#2C382F; --chip:#25302A; --on-brand:#121A16; } } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} .wrap{max-width:1140px;margin:0 auto;padding-inline:clamp(20px,3vw,34px);} .reading{max-width:var(--measure);} /* ---------- chrome ---------- */ .topline{background:var(--ink);color:var(--paper);} .topline .wrap{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center; padding-block:9px;font-family:"IBM Plex Mono",monospace;font-size:13px;} .dot{width:8px;height:8px;border-radius:50%;background:var(--ochre);display:inline-block;} .mastrow{border-bottom:2px solid var(--ink);} .mastrow .wrap{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end; justify-content:space-between;padding-block:clamp(22px,3.4vw,40px) 0;} /* the lockup: our own mark, our own spacing, and an inked rule drawn by hand */ .mast{display:inline-flex;align-items:center;gap:clamp(10px,1.6vw,18px);text-decoration:none; color:var(--ink);line-height:.92;} .mast .mark{width:clamp(44px,6.6vw,66px);height:auto;flex:0 0 auto;color:var(--ink);} .mast .words{display:block;} .mast .line1{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800; font-size:clamp(30px,6.4vw,58px);letter-spacing:-.035em;} .mast .line1 .in{font-weight:500;letter-spacing:-.01em;opacity:.62;} .mast .rule{display:block;width:100%;height:7px;margin-top:2px;color:var(--ochre);} .mast:hover .line1{color:var(--brand);} /* the section links. KGD 2026-09-20: "hate the tags" — no boxes, no paper tabs. Plain words, generous spacing, and the page you are on carries one ink rule. */ nav.main{display:flex;flex-wrap:wrap;gap:4px 28px;font-size:17px;align-items:baseline;} nav.main a{color:var(--ink-soft);text-decoration:none;padding:4px 0 8px; border-bottom:3px solid transparent;} nav.main a:hover{color:var(--ink);border-bottom-color:var(--line);} nav.main a[aria-current]{color:var(--ink);font-weight:700;border-bottom-color:var(--ink);} /* ---------- the hero: the picture is the BACKDROP and the words sit on it ---------- KGD 2026-09-20: "i want image to be backdrop. not the long fade … overall faded slightly with the text over". So: one even wash over the whole picture instead of a gradient to paper, and a crisp rule at the bottom. The wash is deep enough that the H1 keeps its contrast. */ border-bottom:2px solid var(--ink);isolation:isolate;} @media (prefers-color-scheme: dark){ :root:not([data-force-light]) .hero::before{opacity:.88;} } /* ---------- blocks ---------- */ main{padding-block:var(--air) 10px;} margin:0 0 10px;letter-spacing:0;} .cols{display:grid;grid-template-columns:1.32fr .68fr;gap:var(--air);align-items:start;} caption{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:13.5px; color:var(--ink-soft);padding-bottom:12px;} font-weight:500;white-space:nowrap;letter-spacing:0;} .none{color:var(--ink-soft);font-style:normal;} .src{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft); display:inline-block;margin-top:3px;} .src a{color:var(--ink-soft);} .stamp{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px; color:var(--ink-soft);border:1px solid var(--line);border-radius:20px;padding:1px 8px;} .rail{background-color:var(--plate);background-image:var(--grain);background-size:240px 240px; border:1px solid var(--line);border-radius:6px;padding:22px 22px 24px; box-shadow:0 3px 0 var(--line), 0 10px 24px rgba(0,0,0,.06);} .rail h3{margin:0 0 4px;font-size:19px;} .pill{display:inline-block;background:var(--chip);color:var(--ink);border-radius:20px; font-family:"IBM Plex Mono",monospace;font-size:13px;padding:4px 12px;margin-bottom:12px; border:1px solid var(--line);} .steps{display:flex;gap:9px;margin:14px 0 6px;} .steps span{flex:1;height:5px;border-radius:3px;background:var(--line);} .steps span.on{background:var(--brand);} .btn{display:inline-block;position:relative;background-color:var(--action); background-image:var(--grain);background-size:240px 240px;background-blend-mode:multiply; color:var(--on-brand);border-radius:5px;padding:13px 22px;font-weight:600; text-decoration:none;font-size:17px;border:1px solid rgba(0,0,0,.28);cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.28), 0 6px 14px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.22); transition:transform .08s ease, box-shadow .08s ease;} .btn:hover{transform:translateY(-1px); box-shadow:0 4px 0 rgba(0,0,0,.28), 0 9px 18px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.22);} .btn:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.28), 0 3px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.18);} .btn.quiet{background-color:var(--plate);color:var(--ink);border-color:var(--line); box-shadow:0 3px 0 var(--line), 0 6px 14px rgba(0,0,0,.08);} .field{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;} .field input{flex:1;min-width:150px;border:1px solid var(--line);border-radius:4px; padding:11px 12px;font:inherit;font-size:16px;background:var(--paper);color:var(--ink);} .consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:15px;color:var(--ink-soft);} .consent input{margin-top:4px;} .tiny{font-size:13.5px;color:var(--ink-soft);} /* the invitation. Cut paper on paper: a layered edge and a thin accent rule, no colour field. (KGD 2026-09-20: "dont like yellow" — the ochre is now a 3px rule, not a fill.) */ background-image:var(--grain);background-size:240px 240px; border:1px solid var(--line);border-top:3px solid var(--ochre);border-radius:6px; box-shadow:0 3px 0 var(--line), 0 10px 26px rgba(0,0,0,.07);} padding:clamp(22px,3.6vw,34px);} font-weight:800;display:block;margin-bottom:4px;} box-shadow:0 3px 0 var(--line), 0 8px 20px rgba(0,0,0,.06);} ul.news{list-style:none;padding:0;margin:0 0 6px;} ul.news li{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline; padding:16px 0;border-bottom:1px solid var(--line);} ul.news .when{color:var(--ink-soft);font-size:14.5px;white-space:nowrap;} ul.news a{font-weight:600;text-decoration:none;font-size:18px;} ul.news a:hover{text-decoration:underline;} ul.news .src{grid-column:2;margin-top:2px;} figure{margin:0 0 20px;} figure img{border-radius:5px;border:1px solid var(--line);} figcaption{font-size:13.5px;color:var(--ink-soft);margin-top:7px;} .owner{border-left:5px solid var(--ochre);background-color:var(--plate); background-image:var(--grain);background-size:240px 240px;padding:20px 24px; border-radius:0 6px 6px 0;margin-block:var(--air-s);} .owner p:last-child{margin:0;} .owed{border:1px dashed var(--tan);border-radius:4px;padding:12px 15px;margin-block:20px; font-size:15.5px;color:var(--ink-soft);background:var(--plate);} footer{border-top:2px solid var(--ink);margin-top:var(--air);} footer .wrap{padding-block:26px 56px;font-size:15.5px;color:var(--ink-soft);} footer a{color:var(--ink-soft);} footer .links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px;} footer .imprint{font-size:14px;} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}} /* ============ THE PAGE SHAPE — one clean pass, 2026-09-21 (memory kgd-layout-rules) ============ Modelled on heatwaveready: centred H1 + lead under 48rem, the answer first, compact blocks, detail behind a tap. Public Sans for everything readable; Bricolage for display only. */ html,body{overflow-x:hidden;} body{font-size:17px;line-height:1.55;} .wrap{max-width:min(1080px,100%);box-sizing:border-box;margin-inline:auto;padding-inline:clamp(16px,3vw,32px);} h1{font-size:clamp(28px,4.4vw,44px);line-height:1.08;margin:.35em 0;text-align:center;} h2{font-size:clamp(22px,3vw,30px);margin:clamp(34px,5vw,56px) 0 8px;text-align:center;} h2::after{content:"";display:block;width:64px;height:3px;margin:10px auto 0;background:var(--ink);} h3{font-size:19px;margin:18px 0 6px;} p{margin:0 0 14px;} .lede{font-size:18px;color:var(--ink-soft);max-width:46rem;margin:0 auto;text-align:center;} .kicker{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-soft);text-align:center;margin:0 0 6px;} main h2 + p{max-width:46rem;margin-inline:auto;text-align:center;} .reading{max-width:46rem;margin-inline:auto;} img{max-width:100%;height:auto;} /* hero: the picture as backdrop under one paper wash, torn edge below */ .land{margin:0;background:var(--ink);} .land img{display:block;border:0;border-radius:0;width:100%;height:clamp(150px,26vw,320px);object-fit:cover;object-position:center 45%;} .land figcaption{font-size:12px;color:#fff;background:rgba(0,0,0,.45);text-align:right;padding:3px 14px;margin-top:-22px;position:relative;} @media (max-width:720px){.land img{height:150px;} .land figcaption{font-size:11px;}} .hero{background-size:cover;background-position:center 40%;position:relative;isolation:isolate;} .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);opacity:.86;} .hero .wrap{padding-block:clamp(30px,5vw,64px) clamp(30px,5vw,56px);} .hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(12px,2vw,22px);background:var(--paper); clip-path:polygon(0% 100%,0% 45%,3.1% 11%,7.3% 35%,10.2% 71%,13% 36%,15.4% 69%,19% 53%,21.1% 28%,24.5% 46%,28.4% 68%,30.9% 12%,35.4% 48%,37.6% 21%,40.5% 58%,45.2% 35%,46.8% 69%,49.6% 39%,52.4% 65%,56.8% 21%,60.4% 8%,64.3% 75%,67.7% 19%,71.6% 19%,76.2% 9%,79% 64%,83.5% 58%,88.4% 46%,92.7% 73%,97.1% 55%,100% 21%,100% 100%);} /* the table: the whole answer in one view */ .tablewrap{overflow-x:auto;margin-top:14px;} table{width:100%;border-collapse:collapse;font-size:16px;} th,td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle;} th{font-size:13.5px;font-weight:600;color:var(--ink-soft);} table.grid thead th{background:var(--ink);color:var(--paper);} table.grid thead th:first-child{border-radius:6px 0 0 0;} table.grid thead th:last-child{border-radius:0 6px 0 0;} table.grid td:first-child a{font-weight:700;text-decoration:none;color:var(--ink);} table.grid td.num{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;} table.grid caption{font-size:14px;color:var(--ink-soft);text-align:left;padding:0 0 6px;} .src{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px;} .src a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);} .none{color:var(--ink-soft);font-style:italic;font-weight:400;} .dim{color:var(--ink-soft);font-weight:400;font-size:14px;} tbody tr:hover{background:var(--plate);} table.cost details summary{cursor:pointer;color:var(--brand);font-weight:600;list-style:none;} table.cost details summary::before{content:"+ ";} table.cost details[open] summary::before{content:"− ";} table.cost ul.fees{list-style:none;margin:6px 0 0;padding:0;} table.cost ul.fees li{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:4px 0;border-top:1px solid var(--line);font-size:14.5px;} table.cost ul.fees li .src{grid-column:1 / -1;} /* country-page label/value tables */ main table:not(.grid) th{width:40%;font-size:15px;font-weight:500;white-space:normal;} main table:not(.grid) td{font-weight:600;} /* the directory: compact cards, equal height, flag rim */ .wait{margin-top:14px;} .wlist{list-style:none;margin:8px 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 12px;} .wlist li{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--ink-soft);padding:4px 0;border-bottom:1px solid var(--line);} .wflag{flex:0 0 22px;width:22px;height:15px;border-radius:2px;background:var(--f);box-shadow:0 0 0 1px rgba(0,0,0,.15);} @media (max-width:720px){.wlist{grid-template-columns:1fr 1fr;} .wlist li{font-size:15px;}} .email-form select{font:inherit;font-size:17px;padding:10px 12px;border:1px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);min-width:220px;} .dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin-top:14px;} .dcard{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:4px;min-height:120px;padding:14px 14px 14px 30px; background-color:var(--plate);background-size:cover;background-position:center;border:1px solid var(--line);border-radius:8px; color:var(--ink);text-decoration:none;overflow:hidden;box-shadow:0 2px 0 var(--line);} .dcard::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);opacity:.84;} .dcard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;background:var(--flag,var(--ink));box-shadow:inset -1px 0 0 rgba(0,0,0,.18);} .dcard:hover::before{opacity:.74;} .dname{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:21px;line-height:1.1;} .dform{font-size:14px;font-weight:600;} .dline{font-size:14.5px;color:var(--ink-soft);} /* two-column zone (table + EU Inc. rail) */ .cols{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(18px,3vw,36px);align-items:start;margin-top:14px;} /* how it works */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin-top:14px;} .card{background-color:var(--plate);border:1px solid var(--line);border-radius:8px;overflow:hidden;} .card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;} .card .body{padding:12px 14px 14px;} .card h3{margin:0 0 4px;font-size:17px;} .card p{margin:0;font-size:14.5px;color:var(--ink-soft);} .card .no{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft);} .tiny{font-size:13px;color:var(--ink-soft);} footer .wrap{text-align:center;} footer .links{justify-content:center;} /* phone: one card per country, two columns of label/value, nothing wider than the screen */ @media (max-width:720px){ .cols{grid-template-columns:1fr;} .tablewrap{overflow-x:visible;} table.grid caption,table.grid thead{display:none;} table.grid,table.grid tbody{display:block;} table.grid tr{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;padding:12px 14px;margin-bottom:10px; background:var(--plate);border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:8px;} table.grid td{display:block;border:0;padding:4px 0;font-size:15.5px;white-space:normal;} table.grid td:first-child{grid-column:1 / -1;font-size:20px;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:4px;} table.grid td[data-label]::before{content:attr(data-label);display:block;font-size:12px;color:var(--ink-soft);} table.grid td.num{font-size:17px;} table.cost td[data-label="Breakdown"]{grid-column:1 / -1;} main table:not(.grid) th,main table:not(.grid) td{display:block;width:100%;} main table:not(.grid) th{border-bottom:0;padding-bottom:0;} main table:not(.grid) td{padding-top:2px;} .hero .wrap{padding-block:28px 24px;} h1{font-size:27px;} .lede{font-size:16.5px;} .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;width:100%;} nav.main a{min-height:44px;display:inline-flex;align-items:center;} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}} /* thick writing-paper panels: grain + a faint deckle shadow, on panels only */ .rail,.card,.owner{background-image:var(--grain);background-size:240px 240px;background-blend-mode:multiply;} /* NEVER TILE A PICTURE (KGD 2026-09-22, the France card): the grain rule above once caught .dcard and shrank its scene to a 240 px repeat. A backdrop picture always covers, once. */ .dcard{background-size:cover!important;background-repeat:no-repeat;background-position:center 35%;} .rail,.card,.owner{box-shadow:0 1px 0 var(--line),0 6px 18px rgba(19,37,60,.06);} .hero::before{opacity:.9;} @media (max-width:720px){table.grid tr{background-image:var(--grain);background-size:240px 240px;background-blend-mode:multiply;}} /* KGD 09-21: "you have to scroll for ages … need easy overview ALWAYS" — the home page is ONE overview (opening + table + EU Inc.); everything else folds. Same on phone and desktop. */ details.fold{border-top:1px solid var(--line);margin-top:22px;padding-top:4px;} details.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0;} details.fold>summary::-webkit-details-marker{display:none;} details.fold>summary h2{margin:0;font-size:clamp(19px,2.6vw,24px);} details.fold>summary h2::after{display:none;} details.fold>summary::after{content:"+";font-size:24px;line-height:1;color:var(--brand);font-weight:700;} details.fold[open]>summary::after{content:"−";} details.fold.tiny>summary{justify-content:flex-start;padding:6px 0;color:var(--brand);font-weight:600;} details.fold.tiny>summary::after{font-size:18px;} details.fold>p,details.fold>.dir,details.fold>.cards,details.fold>.tablewrap,details.fold>ul{margin-top:8px;} /* the directory card: compact, same size everywhere, mono gone */ .dcard{min-height:0;padding:12px 12px 12px 28px;gap:3px;} .dname{font-size:19px;} .dform{font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:13.5px;} .dline{font-size:13.5px;line-height:1.4;} .dir{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px;} @media (max-width:720px){.dir{grid-template-columns:1fr 1fr;gap:8px;} .dcard{padding-left:24px;} .dcard::after{width:12px;} .dline{display:none;} h1{font-size:25px;} .hero .wrap{padding-block:22px 20px;}} /* KGD 09-22: "need more air under i think. its all to close to line" */ .mastrow .wrap{padding-block:18px 26px;align-items:center;} .mast .rule{margin-top:6px;} nav.main a{padding-bottom:6px;} @media (max-width:720px){.mastrow .wrap{padding-block:14px 20px;}} /* his screenshot 09-22: mark + words on the line, nav squeezed right → two rows, centred, air below */ .mastrow .wrap{flex-direction:column;align-items:center;gap:10px;padding-block:22px 22px;} .mast{margin:0 auto;} .mast .rule{margin-top:8px;} nav.main{justify-content:center;gap:4px 26px;} nav.main a{padding:4px 0 10px;} @media (max-width:720px){.mastrow .wrap{padding-block:16px 16px;gap:6px;} .mast .mark{width:40px;}} /* KGD 09-22 "update placement, the EU inc … out of line": the rail's top sits level with the table's head row; the caption is a kicker above both columns. */ .cols{align-items:start;margin-top:0;} .cols .tablewrap{margin-top:0;} .rail{margin-top:0;} body{font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;} /* news inside the EU Inc. box (KGD 09-22 "shouldent we have live feed … news") */ .rail .newshead{margin:14px 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);} .rail ul.news{margin:0 0 10px;padding:0;list-style:none;} .rail ul.news li{display:block;padding:6px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.4;} .rail ul.news .when{display:block;font-size:12px;color:var(--ink-soft);font-family:"Public Sans",system-ui,Arial,sans-serif;} .rail ul.news .src{font-size:12px;} .quietlink{display:inline-block;margin-left:10px;font-size:14px;color:var(--brand);} /* country pages 09-22: the country's own picture + flag colours carried through ("design follow through"); source chips one short line; every cell the same face and size ("inline, format text correctly … keep things correct with the others' lines") */ :root[style*="--tint"] main h2::after{background:var(--flag,var(--ink));width:84px;height:5px;} :root[style*="--tint"] .owner{border-left:6px solid var(--tint);} :root[style*="--tint"] .hero::before{opacity:.84;} main table:not(.grid) th,main table:not(.grid) td{font-family:"Public Sans",system-ui,Arial,sans-serif;font-size:16px;vertical-align:top;padding:11px 10px;} main table:not(.grid) th{width:36%;font-weight:500;color:var(--ink-soft);} main table:not(.grid) td{font-weight:600;} main table:not(.grid) td .src{display:block;font-family:"Public Sans",system-ui,Arial,sans-serif;font-size:12.5px;font-weight:400;margin-top:2px;} main table:not(.grid) td .none{font-weight:400;} main table:not(.grid) td .dim{font-weight:400;font-size:14px;} .dcard{background-position:center 35%;} /* the top strip is a slow ticker of data-built hooks (KGD 09-22) */ /* KGD 09-24: "user should be able to press scroll the newsfeed banner at top. same for pc" → a strip you scroll or drag yourself; the slow roll is a script (find.js) that stops the moment you touch it. */ .topline{font-size:15px;} .ticker{white-space:nowrap;padding:9px 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;} .ticker::-webkit-scrollbar{display:none;} .ticker.drag{cursor:grabbing;} .track{display:inline-block;} .track span{display:inline-block;padding:0 28px;} .track a{color:var(--paper);text-decoration:none;} .track a:hover{text-decoration:underline;} .track b{color:var(--ochre);font-weight:700;} @media (prefers-reduced-motion:reduce){.ticker{white-space:normal;}} /* THE LETTER (2026-09-22): the sign-up, compact, one row on desktop, stacked on phones */ .signup{max-width:46rem;margin:1.5rem auto;padding:1rem 1.25rem;border-top:3px solid var(--ink,#13253C);border-bottom:1px solid var(--ink,#13253C)} .signup h2,.signup .lede{text-align:center} .email-form .row{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap} .email-form .row label{flex:1 0 100%;font-weight:600} .email-form input[type=email]{flex:1 1 16rem;min-height:48px;font:inherit;font-size:1.05rem;padding:.5rem .75rem;border:1.5px solid var(--ink,#13253C);border-radius:6px;background:#fff} .email-form .btn{min-height:48px} .email-form .consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:.8rem;line-height:1.4} .email-form .consent input{width:24px;height:24px;margin-top:.15rem;flex:none} .email-form .hp{position:absolute;left:-9999px} @media (max-width:720px){.email-form .row{flex-direction:column;align-items:stretch}} /* ALIGNMENT (KGD's look 2026-09-22, Estonia page): the label/value tables sat at 40 % label width, so every value started mid-page while the headings above were centred. Now: one reading width, a narrow label column, label and value on the same baseline, same size. */ main .tablewrap:has(table:not(.grid)){max-width:46rem;margin-inline:auto;} main table:not(.grid) th{width:30%;font-size:16px;color:var(--ink);vertical-align:top;padding-top:12px;} main table:not(.grid) td{vertical-align:top;padding-top:12px;} main table:not(.grid) td .cite,main table:not(.grid) td small{display:block;margin-top:2px;} /* COUNTRY IDENTITY (KGD 2026-09-22: "flag colors on the page of the flag clicked … thin line"): on a country page the hero opens with a thin line in that country's flag, and the short rule under every H2 carries the same colours. Only where --flag is set; never on the home. */ :root[style*="--flag"] .hero{border-top:3px solid transparent;border-image:var(--flagline) 1;} /* KGD 09-25: thinner */ :root[style*="--flag"] main h2::after{background:var(--flagline);height:4px;width:72px;} /* WIDE SCREENS (KGD's look 2026-09-22, home on a wide monitor): the block reads narrow, the word mark sits half a logo to the right of the H1, the directory leaves two orphans. */ .mast{transform:translateX(calc(-.5 * (clamp(44px,6.6vw,66px) + clamp(10px,1.6vw,18px))));} @media (min-width:721px){.dir{grid-template-columns:repeat(3,1fr);}} /* INTRO STATS + PHONE OVERVIEW (KGD 2026-09-22): three numbers under the lede; on phones the table gives way to one row per country (flag rim · name · capital · notary), tap for more. */ .stats{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);margin:4px auto 10px;} .stats div{text-align:center;min-width:88px;} .stats b{display:block;font-size:clamp(24px,4vw,34px);font-weight:800;line-height:1;letter-spacing:-.02em;} .stats span{font-size:14px;color:var(--ink-soft);} .plist{display:none;} @media (max-width:720px){ .cols .tablewrap{display:none;} .cols .kicker{display:none;} main > .wrap > .kicker{display:none;} .plist{display:block;margin-top:6px;} .prow{position:relative;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--plate);overflow:hidden;} .prow::after{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--flag);} .prow summary{list-style:none;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;padding:12px 14px 12px 22px;min-height:48px;cursor:pointer;} .prow summary::-webkit-details-marker{display:none;} .pname{font-weight:700;font-size:19px;} .pcap{font-weight:800;font-size:19px;font-variant-numeric:tabular-nums;text-align:right;} .pnot{grid-column:1 / -1;font-size:15px;color:var(--ink-soft);} .pnot::before{content:"Notary: ";} .pmore{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;padding:4px 14px 14px 22px;border-top:1px solid var(--line);font-size:15px;} .pmore span{color:var(--ink-soft);} .pmore b{font-weight:600;} .pmore .btn{grid-column:1 / -1;justify-self:start;margin-top:6px;} } /* THE SOURCE CHIP (KGD 2026-09-22: "very hard to see this text"): the reading face, 14 px, full ink, a clear underline on the link. Small still, faint never. Everywhere it appears. */ .src,.rail ul.news .src,main table:not(.grid) td .src{font-family:"Public Sans",system-ui,Arial,sans-serif;font-size:14px;font-weight:500;color:var(--ink);letter-spacing:0;} .src a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;border-bottom:0;} /* THE LETTER, air (KGD 2026-09-22: "more space above the Your email and writing above") */ .signup .lede{margin-bottom:22px;} .email-form .row label{margin-bottom:6px;} .email-form .consent{margin-top:14px;} /* STATS IN THE HEADER (KGD 2026-09-22: "the other layout better … looks a bit weird"): the three numbers sit under the opening inside the hero; the mono kicker over the table is gone. */ .hero .stats{margin-top:18px;} .cols-kicker{display:none;} /* THE NEWSROOM (KGD 2026-09-22: "a parliament news room … tabs, new channels … all eu flags, just the colors in banner like our cards"). CSS tabs on radio inputs, no script. */ .band27{display:flex;gap:3px;height:22px;max-width:46rem;margin:0 auto 18px;} .band27 i{flex:1;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);} .tabs{max-width:46rem;margin:0 auto;} .tabs>input{position:absolute;opacity:0;pointer-events:none;} .tabs>label{display:inline-block;padding:10px 18px;min-height:44px;font-weight:700;font-size:17px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--plate);color:var(--ink-soft);cursor:pointer;margin-right:4px;} .tabs>input:checked+label{background:var(--ink);color:var(--paper);border-color:var(--ink);} .tabs>input:focus-visible+label{outline:3px solid var(--brand);outline-offset:2px;} .tabs .tab{display:none;border-top:3px solid var(--ink);padding-top:14px;} #tab-eu:checked~#eu,#tab-cc:checked~#countries,#tab-rec:checked~#record{display:block;} .tabs h2{text-align:left;} .tabs h2::after{margin-left:0;} .leadstory{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:10px;background:var(--plate);text-decoration:none;color:var(--ink);margin-bottom:22px;} .leadstory .kicker{display:block;margin-bottom:8px;} .leadstory .lhead{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(24px,3.4vw,34px);line-height:1.1;letter-spacing:-.02em;margin-bottom:10px;} .leadstory .ldek{display:block;font-size:18px;color:var(--ink-soft);margin-bottom:14px;} ul.desk{list-style:none;padding:0;margin:0;} ul.desk li{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline;} ul.desk time{font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums;} ul.desk li a{font-weight:700;font-size:18px;text-decoration:none;color:var(--ink);} ul.desk li span{grid-column:2;color:var(--ink-soft);} ul.desk.fees li .src{grid-column:2;} ol.record{list-style:none;padding:0;margin:0;border-left:3px solid var(--ink);} ol.record li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:8px 0 8px 16px;position:relative;} ol.record li::before{content:"";position:absolute;left:-8px;top:14px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);} ol.record time{font-variant-numeric:tabular-nums;color:var(--ink-soft);} .article .pill{display:inline-block;} .article h2{text-align:left;} .article h2::after{margin-left:0;} @media (max-width:720px){.tabs>label{padding:10px 12px;font-size:15px;} .leadstory{padding:16px;}} /* NEWSROOM v2 (KGD 2026-09-23: "exclusive but with some nostalgia, representing all EU countries, new business, life, growth"). A newspaper front: the 27-colour band, a dateline, the Today strip, a lead story on the growth scene, two columns on desktop, one on phones. Headlines in Fraunces, a classic newspaper serif, self-hosted; body stays Public Sans. */ .deskhead{max-width:52rem;margin:0 auto 18px;} .byline{text-align:left;font-size:16px;color:var(--ink-soft);margin:0 0 14px;} .byline a{color:inherit;text-decoration:underline;} .dateline{text-align:center;font-size:15px;color:var(--ink-soft);margin:0 0 12px;font-variant:small-caps;letter-spacing:.04em;} .today{display:grid;grid-template-columns:repeat(4,1fr);border-top:3px double var(--ink);border-bottom:3px double var(--ink);} .today div{padding:10px 12px;border-left:1px solid var(--line);text-align:center;} .today div:first-child{border-left:0;} .today span{display:block;font-size:13px;font-variant:small-caps;letter-spacing:.05em;color:var(--ink-soft);} .today b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:20px;line-height:1.2;margin:2px 0;} .today i{display:block;font-style:normal;font-size:14px;color:var(--ink-soft);} .tabs{max-width:52rem;} #tab-front:checked~#front,#tab-gd:checked~#guides{display:block;} .leadstory{position:relative;isolation:isolate;overflow:hidden;background-size:cover;background-repeat:no-repeat;background-position:center 40%;padding:28px 26px;} .leadstory::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--plate);opacity:.86;} .leadstory .lhead,.article-h1,.frontcols h2,.tabs h2{font-family:"Fraunces",Georgia,serif;} .leadstory .lhead{font-weight:800;font-size:clamp(28px,4vw,42px);letter-spacing:-.01em;} .frontcols{display:grid;grid-template-columns:1fr 1fr;gap:28px;} .frontcols h2{font-size:22px;margin-top:0;} ul.desk li a{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:19px;line-height:1.25;} ul.desk.fees li{position:relative;padding-left:18px;} ul.desk.fees li::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:8px;background:var(--flag);border-radius:2px;} @media (max-width:720px){ .today{grid-template-columns:1fr 1fr;} .today div:nth-child(3){border-left:0;} .today div:nth-child(n+3){border-top:1px solid var(--line);} .frontcols{grid-template-columns:1fr;} .tabs>label{padding:10px 10px;font-size:15px;margin-bottom:4px;} .leadstory{padding:20px 16px;} } ul.desk.mini li{padding:8px 0;} ul.desk.mini li a{font-size:16px;} ul.desk.mini li span{display:none;} /* OVERVIEW FIX (KGD's phone look 2026-09-23: "need to be inline … takes up too much space … the email area looks crazy big"). 1. Story lists: date on a small line above, headline under it, full width; the summary line is dropped from lists (it opens the article itself) — only the lead story keeps it. 2. Grids use minmax(0,1fr) so a long line can never push past the screen edge. 3. The email box: in the stacked phone row, flex-basis became HEIGHT (16rem tall). Fixed at 48 px. */ ul.desk li{display:block;padding:10px 0;} ul.desk li time{display:block;font-size:13px;margin-bottom:2px;} ul.desk:not(.fees) li > span{display:none;} ul.desk.fees li > span{display:block;} .frontcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .tabs,.tabs .tab,.frontcols > div{min-width:0;} .email-form input[type=email]{flex:1 1 14rem;height:48px;} @media (max-width:720px){ .frontcols{grid-template-columns:minmax(0,1fr);gap:8px;} .email-form input[type=email]{flex:0 0 auto;width:100%;height:48px;} .signup{padding:.75rem 0;margin:1rem auto;} .signup .lede{font-size:16px;margin-bottom:14px;} .email-form .consent{font-size:15px;} } /* THE BLUE PAPER BUTTON (KGD 2026-09-23: "the blue upgraded button with paper texture layers and overlay … the eu blue color with layers"). Two cut-paper sheets: the face in EU blue (#003399) with the paper grain and a light overlay, a lighter blue sheet slipped behind it, a hair off square. The face lifts on hover and presses onto the sheet on tap. Colour only: no emblem, no stars (LEGAL P1). White on #003399 = 12.6:1 contrast. Quiet buttons stay plain paper. */ :root{--eu-blue:#003399;--eu-blue-sheet:#6D8AD6;} .btn:not(.quiet){background:transparent;border:0;box-shadow:none;isolation:isolate;color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);transition:none;} .btn:not(.quiet)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:5px; background-color:var(--eu-blue); background-image:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 48%,rgba(0,0,0,.14)),var(--grain); background-size:auto,240px 240px;background-blend-mode:normal,multiply; box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.22); transition:transform .09s ease;} .btn:not(.quiet)::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:5px; background-color:var(--eu-blue-sheet);background-image:var(--grain);background-size:240px 240px; background-blend-mode:multiply;transform:translate(5px,5px) rotate(1.2deg); box-shadow:0 6px 14px rgba(0,0,0,.16),inset 0 0 0 1px rgba(0,0,0,.12);} .btn:not(.quiet):hover,.btn:not(.quiet):active{transform:none;box-shadow:none;} .btn:not(.quiet):hover::after{transform:translate(-1px,-2px);} .btn:not(.quiet):active::after{transform:translate(3px,3px);} .btn:focus-visible{outline:3px solid var(--ink);outline-offset:6px;} /* FACT ROWS (article token tables, 2026-09-23): one line per country on every screen */ .factcap{margin:18px 0 6px;font-size:14px;font-variant:small-caps;letter-spacing:.05em;color:var(--ink-soft);} .factlist{list-style:none;padding:0;margin:0 0 18px;border:1px solid var(--line);border-radius:8px;background:var(--plate);overflow:hidden;} .factlist li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:baseline;padding:10px 14px 10px 24px;border-top:1px solid var(--line);} .factlist li:first-child{border-top:0;} .factlist li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--flag);} .factlist .fn{font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;} .factlist .fv{font-weight:700;font-size:17px;text-align:right;} .factlist .fv .none{font-weight:500;} .factlist .src{grid-column:2;justify-self:end;text-align:right;margin:0;font-size:13px;} /* ARTICLE PAGES, one clean reading column (KGD 2026-09-23: "so untidy … clean it all up"). Everything inside an article reads left: headings, their rule, the paragraph under them. Only the page hero (H1 + dek) stays centred. Calm sizes, one rhythm. */ .article{max-width:40rem;margin:0 auto;} .article p,.article li{font-size:18px;line-height:1.6;text-align:left;} .article h2{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:23px;line-height:1.25;text-align:left;margin:30px 0 8px;} .article h2::after{width:44px;height:3px;margin:8px 0 0;} main .article h2 + p{text-align:left;max-width:none;margin-inline:0;} .article .pill{margin:0 0 6px;} .article .fig{font-weight:700;} .article .fig + .src{display:inline;margin-left:4px;font-size:13px;} .article .sources{margin-top:28px;} .article > p:last-child{margin-top:22px;} @media (max-width:720px){.article p,.article li{font-size:17px;} .article h2{font-size:21px;margin-top:24px;}} /* THE NEWSROOM FRONT PAGE (2026-09-23). Newsprint, rules, columns, a nameplate: the old press; clean sans body, generous air, no clutter: the modern paper. */ @media (min-width:721px){.mast{transform:translateX(calc(-.5 * (clamp(44px,6.6vw,66px) + clamp(10px,1.6vw,18px))));}} @media (max-width:720px){.mast{transform:none;}} .paper{background-color:#F6F1E6;background-image:var(--grain);background-size:240px 240px;background-blend-mode:multiply; border:1px solid rgba(22,40,60,.18);box-shadow:0 1px 0 rgba(0,0,0,.06),0 18px 40px -24px rgba(0,0,0,.28); padding:18px clamp(14px,3vw,34px) 26px;margin:6px auto 26px;} .paper .band27{max-width:none;height:10px;gap:2px;margin:0 0 14px;} .nameplate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) minmax(0,1fr);align-items:center;gap:14px; border-bottom:4px double var(--ink);padding-bottom:10px;} .nameplate h1{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:clamp(34px,6.2vw,72px);line-height:.95;letter-spacing:-.025em;margin:0;text-align:center;} .nameplate .np p{text-align:center;margin:6px 0 0;font-size:15px;font-variant:small-caps;letter-spacing:.08em;color:var(--ink-soft);} .ear{border:1px solid var(--ink);padding:8px 10px;text-align:center;background:rgba(255,255,255,.35);} .ear span{display:block;font-size:12px;font-variant:small-caps;letter-spacing:.06em;color:var(--ink-soft);} .ear b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:19px;line-height:1.15;margin:2px 0;} .ear i{display:block;font-style:normal;font-size:13px;color:var(--ink-soft);} .folio{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0;padding:6px 0;border-bottom:1px solid var(--ink); font-size:13px;font-variant:small-caps;letter-spacing:.06em;color:var(--ink-soft);} .sections{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 22px;padding:8px 0;border-bottom:1px solid rgba(22,40,60,.3);margin-bottom:18px;} .sections a{font-weight:600;font-size:16px;text-decoration:none;color:var(--ink);font-variant:small-caps;letter-spacing:.05em;} .sections a:hover{text-decoration:underline;} .front{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);} .lead{padding-right:24px;border-right:1px solid rgba(22,40,60,.3);} .brief{padding-left:22px;} .lead .kick{margin:0 0 6px;font-size:13px;font-variant:small-caps;letter-spacing:.06em;color:var(--ink-soft);} .lead .lh{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:clamp(28px,3.8vw,46px);line-height:1.05;letter-spacing:-.015em;text-align:left;margin:0 0 10px;} .lead .lh::after{display:none;} .lead .lh a{color:var(--ink);text-decoration:none;} .lead .lh a:hover{text-decoration:underline;text-decoration-thickness:2px;} .lead .ldek{font-size:19px;line-height:1.45;color:var(--ink-soft);margin:0 0 14px;text-align:left;} .lfig{margin:0 0 14px;} .lfig img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;border:1px solid rgba(22,40,60,.25);} .lbody{column-count:2;column-gap:26px;column-rule:1px solid rgba(22,40,60,.22);} .lbody p{font-size:16.5px;line-height:1.6;margin:0 0 10px;text-align:left;} .lbody > p:first-child::first-letter{float:left;font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:3.9em;line-height:.82;padding:6px 8px 0 0;color:var(--ink);} .lbody h2{font-family:"Fraunces",Georgia,serif;font-size:19px;text-align:left;margin:6px 0 6px;break-after:avoid;} .lbody h2::after{display:none;} main .lbody h2 + p{text-align:left;max-width:none;margin-inline:0;} .lead .more a{font-weight:700;color:var(--ink);} .lead .more a::after{content:" \2192";} .brief h3,.sectionsrow h3{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:21px;margin:0 0 6px;padding-bottom:6px;border-bottom:2px solid var(--ink);} .brief .pillline{margin:0 0 8px;} .sectionsrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;border-top:4px double var(--ink);padding-top:14px;} .sectionsrow section{padding:0 18px;} .sectionsrow section:first-child{padding-left:0;} .sectionsrow section:last-child{padding-right:0;} .sectionsrow section + section{border-left:1px solid rgba(22,40,60,.3);} .sectionsrow ul.desk li a{font-size:17px;} .sectionsrow ul.desk.fees li{padding:7px 0 7px 16px;} .sectionsrow ul.desk.fees li a{font-family:"Public Sans",system-ui,sans-serif;font-weight:700;font-size:16px;} .coupon{max-width:none;margin:0 auto 10px;} /* KGD 2026-09-30: the coupon spans the same width as the paper above it */ .coupon .signup{position:relative;max-width:none;border:2px dashed var(--ink);background:var(--plate);padding:16px 20px;margin-top:10px;} .coupon .signup::before{content:"\2702";position:absolute;top:-15px;left:18px;font-size:22px;line-height:1;background:var(--paper);padding:0 4px;color:var(--ink);} @media (max-width:900px){.lbody{column-count:1;}} @media (max-width:720px){ .nameplate{grid-template-columns:1fr 1fr;} .nameplate .np{grid-column:1 / -1;order:-1;} .front{grid-template-columns:minmax(0,1fr);} .lead{padding-right:0;border-right:0;} .brief{padding-left:0;margin-top:18px;} .sectionsrow{grid-template-columns:minmax(0,1fr);} .sectionsrow section{padding:0;} .sectionsrow section + section{border-left:0;border-top:1px solid rgba(22,40,60,.3);margin-top:12px;padding-top:12px;} .folio{justify-content:center;} .folio span:nth-child(2){display:none;} } /* newsroom touch-ups after the first screenshot (2026-09-23) */ main:has(.paper){padding-top:14px;} .brief ol.record li{display:block;padding:6px 0 8px 16px;} .brief ol.record time{display:block;font-size:13px;} @media (max-width:720px){.lbody h2,.lbody h2 ~ p{display:none;}} /* COUNTRY PAGES ON A PHONE (KGD 2026-09-23: "all that info per country in 1 mobile view … using a lot of online real estate … accurate and on top of our design and placement. ALWAYS"). Label/value tables no longer stack cell under cell: one row per fact, label left, the value and its source right. Headings, answers and gaps between sections tightened. */ @media (max-width:720px){ main table:not(.grid){display:table;width:100%;} main table:not(.grid) tbody{display:table-row-group;} main table:not(.grid) tr{display:table-row;} main table:not(.grid) th,main table:not(.grid) td{display:table-cell;width:auto;padding:8px 6px;vertical-align:top;} main table:not(.grid) th{width:42%;font-size:15px;font-weight:500;color:var(--ink-soft);padding-left:0;border-bottom:1px solid var(--line);} main table:not(.grid) td{font-size:16px;font-weight:700;padding-right:0;border-bottom:1px solid var(--line);} main table:not(.grid) td .src{font-size:12.5px;font-weight:500;margin-top:1px;} main h2{font-size:21px;margin:20px 0 6px;} main h2::after{margin-top:6px;width:48px;} main h2 + p{font-size:16px;margin-bottom:6px;} } /* TAP ROWS + AIR (2026-09-23, from the phone screenshot): a fold is one compact row, heading left, the + right; the white gap between the header and the first section is gone. */ details.fold > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;list-style:none;cursor:pointer;} details.fold > summary::-webkit-details-marker{display:none;} details.fold > summary h2{text-align:left;margin:0;font-size:19px;line-height:1.3;} details.fold > summary h2::after{display:none;} details.fold[open] > summary{border-bottom:1px solid var(--line);margin-bottom:8px;} details.fold.tiny > summary{padding:6px 0;} @media (max-width:720px){main{padding-top:12px;} main > .wrap > h2:first-child,main > .wrap > :first-child{margin-top:8px;}} /* INTERNAL FLOW + FLAG PRESENCE (KGD 2026-09-23: "internal link these … should all flow" · "the flag to have more prevalence") */ .brief ol.record li a{color:var(--ink);text-decoration:none;font-weight:600;} .brief ol.record li a:hover{text-decoration:underline;} .related-h{font-family:"Fraunces",Georgia,serif;font-size:20px;margin:26px 0 4px;padding-bottom:6px;border-bottom:2px solid var(--ink);text-align:left;} ul.desk.related{margin-bottom:18px;} .guides-line{font-size:15px;margin:10px 0 0;color:var(--ink-soft);text-align:left;} .guides-line a{font-weight:600;} /* the 27 member colours as real flag chips, 3:2, with a hairline and a shadow */ .paper .band27{display:grid;grid-template-columns:repeat(27,minmax(0,1fr));gap:5px;height:auto;margin:0 0 16px;} .paper .band27 i{aspect-ratio:3/2;border-radius:2px;box-shadow:0 0 0 1px rgba(22,40,60,.35),0 2px 3px rgba(0,0,0,.18);} @media (max-width:720px){.paper .band27{grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;}} /* country pages: a bolder flag line on top, a flag chip before the H1 kicker */ :root[style*="--flag"] .hero{border-top-width:12px;} :root[style*="--flag"] .hero .kicker::before{content:"";display:inline-block;width:30px;height:20px;margin-right:8px;vertical-align:-5px; border-radius:2px;background:var(--flag);box-shadow:0 0 0 1px rgba(22,40,60,.35);} /* THE FLAG RIBBON: one flowing line of 27 real flags, 3 px apart, riding a soft wave */ .paper .band27.ribbon{display:flex;gap:3px;align-items:center;height:auto;padding:8px 2px 12px;margin:0 0 10px;} .paper .band27.ribbon i{flex:1 1 0;min-width:0;aspect-ratio:3/2;border-radius:1.5px; transform:translateY(var(--y)) rotate(var(--r)); box-shadow:0 0 0 .5px rgba(22,40,60,.45),0 2px 3px rgba(0,0,0,.18);} @media (max-width:720px){.paper .band27.ribbon{flex-wrap:wrap;gap:4px 3px;} .paper .band27.ribbon i{flex:0 0 calc((100% - 13 * 3px) / 14);}} /* the country chip before the H1 kicker: the real flag */ :root[style*="--flagtrue"] .hero .kicker::before{background:var(--flagtrue);} /* HEADER AND LOGO LARGER (KGD 2026-09-23) */ .mast .mark{width:clamp(58px,8vw,88px);} .mast .line1{font-size:clamp(40px,7.6vw,70px);} nav.main a{font-size:18px;} @media (max-width:720px){.mast .mark{width:58px;} .mast .line1{font-size:40px;} nav.main{gap:4px 22px;} nav.main a{font-size:18px;}} @media (min-width:721px){.mast{transform:translateX(calc(-.5 * (clamp(58px,8vw,88px) + clamp(10px,1.6vw,18px))));}} /* THE HUB AND ARTICLES: source chips sit INSIDE the sentence, small, never on a line of their own (KGD 2026-09-23, the EU Inc. page on a phone: "it all over … inlinement?") */ .article p .src,.article li .src{display:inline;margin:0 0 0 5px;font-size:13px;font-weight:500;white-space:nowrap;} .article .factlist .src{display:block;white-space:normal;} .article ul,.article ol{padding-left:1.2em;text-align:left;} .article li{margin-bottom:8px;} /* COMPACT LISTS (KGD 2026-09-23: "more compact so the user has more overview"): a related list is one tight line per story, the date small in front; the hub's long lists fold behind a tap. */ ul.desk.related li{display:flex;gap:10px;align-items:baseline;padding:7px 0;} ul.desk.related li time{flex:0 0 auto;display:inline;font-size:12.5px;margin:0;white-space:nowrap;} ul.desk.related li a{font-size:16.5px;line-height:1.3;} .article details.fold{margin-top:14px;} .article details.fold > summary h2{font-family:"Fraunces",Georgia,serif;font-size:20px;} /* "Open in Europe" on ONE line at every phone width (KGD 2026-09-23: "logo inline … same line"): the word mark and the laurel scale with the screen instead of wrapping. */ .mast .line1{white-space:nowrap;} @media (max-width:720px){.mast{gap:10px;} .mast .mark{width:min(58px,14vw);} .mast .line1{font-size:min(40px,9.4vw);}} /* THE PROPOSAL LABEL, small and square (KGD 2026-09-23: "proposal way too big … more squared corners"); the reading face, never mono. Same label everywhere it appears. */ .pill{display:inline-block;font-family:"Public Sans",system-ui,sans-serif;font-size:12.5px;font-weight:600; letter-spacing:.05em;text-transform:uppercase;line-height:1.3;padding:3px 7px;border-radius:2px; border:1px solid rgba(0,51,153,.35);background:rgba(0,51,153,.07);color:#003399;} /* flags: square corners; on phones two tidy flat rows (the wave reads only on one long line) */ .paper .band27.ribbon i{border-radius:0;} @media (max-width:720px){ .paper .band27.ribbon{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px 3px;padding:4px 0 8px;} .paper .band27.ribbon i{transform:none;flex:none;width:auto;} .paper .band27.ribbon i:nth-child(15){grid-column-start:1;} } /* "READ NEXT" and every related list: flush left, the date on its own small line, the headline under it — the same shape as the newsroom lists (KGD 2026-09-23: "messy … inline much?") */ .article ul.desk,.article ul.factlist{padding-left:0;} ul.desk.related li{display:block;padding:9px 0;} ul.desk.related li time{display:block;font-size:12.5px;margin:0 0 2px;} ul.desk.related li a{font-size:17px;line-height:1.3;} /* THE SECTION BAR (KGD 2026-09-23: "the image as header backdrop, not taking the text's space … room for more menu links later"): the press scene covers the bar once, an ink wash over it, the links in cream small caps on ONE line; on a phone the line scrolls sideways, so new sections never wrap. */ .paper .sections{position:relative;isolation:isolate;display:block;padding:0;margin:0 0 18px;border:0; background-size:cover;background-repeat:no-repeat;background-position:center 58%;min-height:64px;} .paper .sections::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,rgba(16,30,48,.92),rgba(16,30,48,.70) 55%,rgba(16,30,48,.45));} .paper .sections .sx{display:flex;justify-content:center;align-items:center;gap:6px 28px;min-height:64px;padding:0 16px; overflow-x:auto;white-space:nowrap;scrollbar-width:none;} .paper .sections .sx::-webkit-scrollbar{display:none;} .paper .sections a{color:#F6F1E6;font-size:16px;font-weight:700;font-variant:small-caps;letter-spacing:.07em;flex:0 0 auto;padding:8px 0;} .paper .sections a:hover{text-decoration:underline;text-underline-offset:4px;} @media (max-width:720px){.paper .sections .sx{justify-content:flex-start;gap:22px;min-height:54px;} .paper .sections{min-height:54px;}} /* flags straight (KGD 2026-09-23: "i want flags straight") */ .paper .band27.ribbon i{transform:none;} /* the section bar in EU colours (KGD: "more EU style newspaper"): EU blue over the press scene, a thin gold rule under it, cream small caps; colour only, never the stars (LEGAL P1). A soft fade on a phone's right edge shows the line scrolls. */ .paper .sections::before{background:linear-gradient(90deg,rgba(0,51,153,.94),rgba(0,51,153,.82) 55%,rgba(0,51,153,.62));} .paper .sections{border-bottom:3px solid #FFCC00;} .paper .sections a{color:#FFFFFF;} .paper .sections a:hover{color:#FFCC00;text-decoration-color:#FFCC00;} @media (max-width:720px){.paper .sections .sx{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:40px;}} /* KGD 2026-09-24: "more new modern newspaper, some ink" · "i like this blue and layering" · "same size boxes" · "flags as circles". Cool newsprint under EU-blue ink; the ears equal; every small flag a circle. */ .paper{background-color:#EEF1F6;border-top:7px solid #003399;box-shadow:inset 0 7px 0 #F1BF00, inset 0 8px 0 rgba(0,0,0,.18);} .nameplate{align-items:stretch;} .nameplate h1{color:#0D1F3C;} .ear{display:flex;flex-direction:column;justify-content:center;height:100%;box-sizing:border-box;border:2px solid #003399; background:#fff;box-shadow:4px 4px 0 #C9D3E6;} .ear b{color:#0D1F3C;} .paper .band27.ribbon i{aspect-ratio:1/1;border-radius:50%;box-shadow:0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,.25);} @media (max-width:720px){.nameplate{grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;} .ear{min-height:118px;}} .wflag{width:18px;height:18px;flex-basis:18px;border-radius:50%;background-size:cover;} .paper .colrule, .paper hr{border-color:#003399;} .find{margin:0 0 12px;} .find label{display:block;font-weight:600;font-size:15px;margin-bottom:4px;} .find input{width:100%;box-sizing:border-box;font:inherit;font-size:17px;padding:10px 12px;border:1px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);} .qs details.q{border-bottom:1px solid var(--line);padding:6px 0;} .qs details.q summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;padding:6px 0;} .qs details.q summary::before{content:"+";display:inline-block;width:18px;color:#003399;font-weight:700;} .qs details.q[open] summary::before{content:"\2013";} .qs details.q p{margin:4px 0 8px 18px;font-size:17px;line-height:1.55;} /* KGD 09-24: newsroom country rows = whole row a link to the page, find box on top, folded list */ ul.desk.fees li .rowlink{display:grid;grid-template-columns:1fr;gap:2px;color:var(--ink);text-decoration:none;padding:6px 0;} ul.desk.fees li .rowlink b{font-weight:700;} ul.desk.fees li .rowlink span{color:var(--ink-soft);font-size:15px;} ul.desk.fees li:hover .rowlink b{text-decoration:underline;} #countries .find{margin:8px 0 6px;} #countries summary{cursor:pointer;list-style:none;} #countries summary h3{display:inline;} #countries ul.desk.fees li a.rowlink{display:block;padding:6px 0;} #countries ul.desk.fees li a.rowlink b,#countries ul.desk.fees li a.rowlink span{display:block;} /* KGD 09-25: the country's flag as a circle before its name in the home table */ .tflag{display:inline-block;width:18px;height:18px;border-radius:50%;background-size:cover;vertical-align:-3px;margin-right:8px;box-shadow:0 0 0 1px rgba(0,0,0,.18);} table.grid td a{white-space:nowrap;} /* KGD 09-25 ("not lining up"): one column for the whole country page, table and folds on the same left edge */ .cpage{max-width:46rem;margin-inline:auto;} .cpage .tablewrap{max-width:none;} .cpage details.fold summary h2{text-align:left;} /* KGD 09-25: newsroom bottom row — the country list scrolls in a box; real pictures fill the other columns */ .sectionsrow{align-items:start;} #countries .scrollbox{max-height:520px;overflow-y:auto;border:1px solid var(--line);border-radius:6px;padding:0 10px;background:rgba(255,255,255,.55);scrollbar-width:thin;} #countries .scrollbox ul.desk.fees{margin:0;} .pic{margin:14px 0 0;} .pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);border-radius:4px;} .pic figcaption{margin-top:6px;font-size:15px;line-height:1.4;} .pic figcaption a{font-weight:700;color:var(--ink);} .pic figcaption span{display:block;font-size:12px;color:var(--ink-soft);} @media (max-width:720px){#countries .scrollbox{max-height:380px;}} /* KGD 09-25: THE NOTICE BOARD under the lead story — classified boxes; house notices until a box is sold */ .notices{margin-top:18px;border-top:4px double var(--ink);padding-top:10px;} .notices h3{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:19px;margin:0 0 10px;letter-spacing:.02em;} .ngrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .notice{border:1px solid var(--ink);padding:10px 12px 12px;background:rgba(255,255,255,.55);box-shadow:3px 3px 0 #C9D3E6;display:flex;flex-direction:column;gap:6px;min-height:150px;} .notice .nhead{font-variant:small-caps;letter-spacing:.08em;font-size:13px;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:4px;} .notice p{margin:0;font-size:15.5px;line-height:1.45;flex:1;} .notice .ncta{font-weight:700;color:#003399;text-decoration:underline;font-size:15px;} .notice.paid{background:#FFF9E6;border-style:dashed;} .notice.pic-notice{padding:0;border:0;box-shadow:none;background:none;min-height:0;} .notice.pic-notice .pic{margin:0;} @media (max-width:720px){.ngrid{grid-template-columns:1fr;} .notice{min-height:0;}} /* the letter as a notice-board box (2026-09-30) */ .notice-signup{gap:8px;} .notice-signup p{flex:0 0 auto;} .nform{display:flex;flex-direction:column;gap:8px;margin-top:auto;} .nform .nrow{display:flex;gap:6px;} .nform input[type=email]{flex:1 1 8rem;min-width:0;min-height:44px;font:inherit;font-size:16px;padding:6px 10px;border:1.5px solid var(--ink,#13253C);border-radius:6px;background:#fff;} .nform .btn{min-height:44px;padding:6px 14px;white-space:nowrap;} .nform .nconsent{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;line-height:1.35;} .nform .nconsent input{width:22px;height:22px;margin-top:1px;flex:none;} .nform .tiny{font-size:13px;margin:0;} .nform .hp{position:absolute;left:-9999px;} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} @media (max-width:720px){.nform .nrow{flex-direction:column;}.nform input[type=email]{flex:0 0 auto;width:100%;}.nform .btn{width:100%;}}