/* locationsorter.eu. Tokens are copied from the app's static/index.html, so
   the site and the app are the same paper, ink, slate and signal red. */

@font-face { font-family:"Sofia Sans Condensed"; font-style:normal; font-weight:400 800;
  font-display:swap; src:url(fonts/sofia-sans-condensed-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:"Sofia Sans Condensed"; font-style:normal; font-weight:400 800;
  font-display:swap; src:url(fonts/sofia-sans-condensed-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Sofia Sans Condensed"; font-style:normal; font-weight:400 800;
  font-display:swap; src:url(fonts/sofia-sans-condensed-greek.woff2) format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }

:root {
  --paper:#F2EEE6; --paper-2:#E8E2D6; --ink:#1D1C19; --ink-soft:#625D53;
  --slate:#3E5C6B; --slate-deep:#2C444F; --signal:#C8372B; --signal-text:#B8322A; --cta:#C8372B; --line:#DCD4C4;
  --raised:#1D1C19; --on-raised:#F2EEE6; --on-raised-soft:#A39E93;
  --card:#FBF9F5;
  --ring:rgba(62,92,107,.28);
  --lift:0 1px 2px rgba(60,48,24,.06), 0 1px 6px rgba(60,48,24,.05);
  --float:0 12px 32px -10px rgba(40,32,16,.32), 0 2px 8px rgba(40,32,16,.08);
  --ui:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Sofia Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --r-sm:6px; --r:9px; --r-lg:14px;
  --gutter:clamp(16px, 4vw, 40px);
  --measure:1180px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#131517; --paper-2:#202327; --ink:#E8EAEC; --ink-soft:#9AA0A6;
    --slate:#86A9BB; --slate-deep:#B0CBD8; --signal:#E2564A; --signal-text:#E2564A; --cta:#C8372B; --line:#2B2F34;
    --raised:#383D45; --on-raised:#F0F2F4; --on-raised-soft:#B4BAC1;
    --card:#1A1D20;
    --ring:rgba(134,169,187,.32);
    --lift:0 0 0 1px rgba(255,255,255,.02), 0 1px 3px rgba(0,0,0,.35);
    --float:0 16px 40px -12px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.4);
  }
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:16px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 var(--ui);
       overflow-wrap:break-word; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
a:focus-visible, summary:focus-visible { outline:2px solid var(--slate); outline-offset:2px; border-radius:4px; }
h1, h2, h3 { font-family:var(--display); letter-spacing:.005em; line-height:1.05; }

.skip { position:absolute; left:-999px; top:8px; background:var(--card); padding:8px 12px; border-radius:var(--r); z-index:10; }
.skip:focus { left:8px; }

/* ---------- the app bar ---------- */
.top { display:flex; align-items:center; gap:22px; padding:12px var(--gutter);
       border-bottom:1px solid var(--line); max-width:none; }
.wm { font:750 22px/1 var(--display); letter-spacing:.02em; text-transform:uppercase;
      white-space:nowrap; text-decoration:none; }
.wm i { font-style:normal; color:var(--signal); }
.tabs { display:flex; gap:18px; font-size:14px; color:var(--ink-soft); flex:1; }
.tabs a { text-decoration:none; padding:4px 0; white-space:nowrap; }
.tabs a:hover { color:var(--ink); }
.pill { border:1px solid var(--line); background:var(--card); border-radius:var(--r);
        padding:7px 12px; font-size:13.5px; box-shadow:var(--lift); text-decoration:none;
        white-space:nowrap; }
.pill:hover { border-color:var(--slate); }

/* ---------- the status line ---------- */
.status { display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px;
          padding:16px var(--gutter) 22px; margin-top:56px; border-top:1px solid var(--line);
          font:12px/1.5 var(--mono); color:var(--ink-soft); }
.status b { color:var(--ink); }
.status-links { display:flex; flex-wrap:wrap; gap:6px 16px; flex:1; justify-content:center; }
.status-links a { text-decoration:none; }
.status-links a:hover { color:var(--ink); text-decoration:underline; }

/* ---------- the Apply bar ---------- */
.apply { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
         width:calc(100% - 2 * var(--gutter)); max-width:calc(var(--measure) - 2 * var(--gutter));
         margin:48px auto 0; background:var(--raised); color:var(--on-raised); border-radius:12px;
         padding:12px 14px 12px 18px; font-size:14px; box-shadow:var(--float); }
.apply b { font-weight:700; }
.apply-terms { color:var(--on-raised-soft); flex:1; }
.btn-red { background:var(--cta); color:#fff; border-radius:var(--r); padding:10px 18px;
           font-weight:650; font-size:14.5px; text-decoration:none; white-space:nowrap; }
.btn-red:hover { filter:brightness(1.08); }

/* ---------- prose pages ---------- */
.page { padding:40px var(--gutter) 0; }
.prose { max-width:44rem; margin:0 auto; }
.prose h1 { font-size:clamp(38px, 6vw, 54px); font-weight:760; margin:0 0 18px; }
.prose h2 { font-size:28px; font-weight:720; margin:40px 0 10px; }
.prose h3 { font-size:21px; font-weight:700; margin:28px 0 8px; }
.prose p, .prose li { color:var(--ink); }
.prose a { color:var(--slate); text-underline-offset:2px; }
.prose code { font:0.9em var(--mono); background:var(--paper-2); padding:1px 5px; border-radius:4px; }
.prose hr { border:0; border-top:1px solid var(--line); margin:32px 0; }
.prose em:first-child { color:var(--ink-soft); }
.lead { font-size:18px; color:var(--ink-soft); }

.release { border-top:1px solid var(--line); padding:6px 0 10px; }
.release h2 { margin:20px 0 6px; }
details.release > summary { cursor:pointer; list-style:none; }
details.release > summary::-webkit-details-marker { display:none; }
details.release > summary h2 { display:inline; }
details.release > summary::after { content:"Show"; font:12px var(--mono); color:var(--ink-soft); margin-left:12px; }
details.release[open] > summary::after { content:"Hide"; }
details.release > summary { padding:18px 0 10px; }

/* ---------- empty state (404) ---------- */
.empty { text-align:center; padding-top:12vh; min-height:50vh; }
.empty-code { font:13px var(--mono); color:var(--signal-text); margin:0; letter-spacing:.2em; }
.empty h1 { font-size:clamp(40px, 7vw, 64px); font-weight:760; margin:10px 0 12px; }
.empty-links { display:flex; gap:10px; justify-content:center; margin-top:24px; }

/* ---------- guides index ---------- */
.guide-list { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px; }
.guide-list a { display:block; text-decoration:none; background:var(--card); border-radius:12px;
                box-shadow:var(--lift); border-left:5px solid var(--slate); padding:14px 18px; }
.guide-list a:hover { border-left-color:var(--signal); }
.guide-list h2 { font-size:24px; margin:0 0 4px; color:var(--ink); }
.guide-list p { margin:0; color:var(--ink-soft); }

/* ---------- home ---------- */
.wrap { max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.hero { display:grid; grid-template-columns:5fr 7fr; gap:40px; align-items:center;
        padding-top:56px; padding-bottom:40px; max-width:1320px; }
.hero h1 { font-size:clamp(44px, 5.4vw, 70px); font-weight:760; line-height:.98; margin:0; text-wrap:balance; }
.hero-lead { font-size:17.5px; line-height:1.55; color:var(--ink-soft); margin:20px 0 0; max-width:31em; }
.trust { display:flex; flex-wrap:wrap; gap:6px 16px; margin:20px 0 0; font:12.5px var(--mono); color:var(--ink-soft); }
.trust span::before { content:"· "; color:var(--signal); }
.hero-get { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin:28px 0 0; }
.btn-big { font-size:16px; padding:13px 22px; box-shadow:var(--float); }
.hero-price { font-size:13px; line-height:1.45; color:var(--ink-soft); }

.panel { margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--float);
         border:1px solid var(--line); background:var(--card); }
.panel figcaption { font:12px var(--mono); color:var(--ink-soft); padding:8px 12px; border-top:1px solid var(--line); }

.section-head { margin:56px 0 22px; max-width:42rem; }
.section-head h2, .report-head h2, .private h2 { font-size:clamp(32px, 4vw, 44px); font-weight:740; margin:0 0 8px; }
.section-head p, .report-head p { color:var(--ink-soft); margin:0; font-size:16.5px; }

/* the place strip, as in the Gallery */
.strip { background:var(--card); border-radius:12px; box-shadow:var(--lift); overflow:hidden;
         border-left:5px solid var(--c); margin-bottom:14px; }
@media (prefers-color-scheme: dark) { .strip { border-left-color:var(--c-dark); } }
.strip-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:14px 18px 10px; }
.strip-h .n { font:12px var(--mono); color:var(--ink-soft); }
.strip-h h3 { font-size:24px; font-weight:700; margin:0; }
.strip-h .meta { margin-left:auto; font-size:13px; color:var(--ink-soft); }
.strip-h .meta b { color:var(--ink); }
.strip-b { display:grid; grid-template-columns:1fr 1.7fr; gap:22px; padding:0 18px 18px; align-items:center; }
.strip-b p { margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-soft); }

.frame { border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--paper-2); }
/* frames that are mostly empty room on the right: show their left half */
.frame.crop { aspect-ratio:16 / 9; }
.frame.crop img { width:200%; max-width:none; }

/* the scout report: thick rule, red numbers */
.report { margin-top:72px; }
.report-head { border-top:6px solid var(--ink); padding-top:14px; margin-bottom:26px; max-width:none; }
.report-kicker { font:12px var(--mono); text-transform:uppercase; letter-spacing:.14em; color:var(--signal-text) !important; margin:0 0 6px !important; }
.report-head p:last-child { max-width:42rem; }
.report-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.report-item { border-top:1px solid var(--line); padding-top:12px; display:flex; flex-direction:column; }
.report-n { font:700 30px var(--display); color:var(--signal); }
.report-item h3 { font-size:23px; font-weight:700; margin:2px 0 6px; }
.report-item p { color:var(--ink-soft); margin:0 0 14px; font-size:15px; flex:1; }

.private { margin-top:72px; }
.private { background:var(--paper-2); border-radius:var(--r-lg); padding:28px var(--gutter);
           max-width:calc(var(--measure) - 2 * var(--gutter)); }
.private p { margin:0; font-size:16.5px; }
.private a { color:var(--slate); }

.details dl { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin:40px 0 0; }
.details dt { font:12px var(--mono); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-soft); margin-bottom:4px; }
.details dd { margin:0; font-size:15px; }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .report-grid { grid-template-columns:1fr; }
  .details dl { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .top { flex-wrap:wrap; gap:10px 14px; padding-block:10px; }
  .wm { font-size:20px; flex:1; }
  .tabs { order:3; flex-basis:100%; overflow-x:auto; gap:16px; font-size:14px; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .pill { font-size:13px; padding:6px 10px; }
  .hero { grid-template-columns:1fr; padding-top:32px; gap:28px; }
  .strip-b { grid-template-columns:1fr; gap:14px; }
  .strip-h .meta { margin-left:0; flex-basis:100%; }
  .apply { padding:14px; }
  .apply .btn-red { flex-basis:100%; text-align:center; }
  .status { flex-direction:column; align-items:flex-start; }
  .status-links { justify-content:flex-start; }
  .status-path { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ---------- guides ---------- */
.byline { font:12.5px var(--mono); color:var(--ink-soft); margin:-6px 0 28px; }
.prose figure.panel { margin:26px 0; }
.prose ol li, .prose ul li { margin:6px 0; }
.more { margin-top:56px; }
.more h2 { font-size:26px; margin:0; }