/* Trans-Carpathian Pathways — tcp.ubec.network, v0.3
 * SPDX-License-Identifier: AGPL-3.0-or-later
 *
 * The palette and type of the project's PDFs (build/build_pdf.py):
 * Lora for titles, Inter for text, night blue, terracotta, ochre rules,
 * the two greens and the creams of the Plai emblem. Every font is served
 * from this site (fonts/, SIL OFL 1.1). No JavaScript, no other server.
 *
 * Changelog:
 *   v0.3 — 2026-10-09 — the name set inside the picture's frame.
 *   v0.2 — 2026-10-09 — the picture in place of the drawn ridges.
 *   v0.1 — 2026-10-09 — initial: the landing page.
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap;
             src: url("fonts/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
             src: url("fonts/Lora-Variable.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap;
             src: url("fonts/Lora-Italic-Variable.woff2") format("woff2"); }

:root {
  --night: #161a33;
  --terra: #9a362b;
  --terra-deep: #a2352a;
  --ochre: #c98a2e;
  --green: #2a3f2a;
  --green-2: #3f5e39;
  --cream: #e8dcb8;
  --cream-2: #f1e6c6;
  --paper: #fbf8f0;
  --ink: #1d2027;
  --quiet: #5d5a52;
  --line: #e3ddd0;
  --measure: 40rem;
}

* { box-sizing: border-box; }

html { background: var(--paper); color: var(--ink);
       font: 400 1.0625rem/1.65 "Inter", system-ui, sans-serif;
       -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }

a { color: var(--terra); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--night); }
a:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 2; background: var(--paper); padding: .4rem .7rem; }

/* ---- the head: the name inside Michel's picture, on its own night sky ---- */

.head { background: var(--night); color: var(--cream-2); position: relative; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
       max-width: 72rem; margin: 0 auto; padding: 1.1rem 1rem 0; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--cream);
         text-decoration: none; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.brand:hover { color: #fff; }
.brand img { width: 2.6rem; height: 2.6rem; display: block; }
.switch { color: var(--cream); font-size: .9rem; font-weight: 600; text-decoration: none;
          border: 1px solid rgba(232, 220, 184, .45); border-radius: 999px; padding: .3rem .9rem; }
.switch:hover { color: var(--night); background: var(--cream); }

/* The picture is 1600 x 900 inside its own ochre frame. The name sits in
   its sky: left of the moon (from 68% of the width) and above the ridge
   (from about 44% of the height on the left). Sizes are in container
   units (cqw, a hundredth of the picture's width), so the name keeps its
   place in the picture at every width. */
.art { position: relative; container-type: inline-size; max-width: 72rem;
       margin: 1.4rem auto 0; padding: 0; }
.art img { display: block; width: 100%; height: auto; }
.hero { position: absolute; left: 5.2%; top: 7%; width: 60%; margin: 0;
        text-shadow: 0 1px 3px rgba(10, 12, 28, .55); }
.hero h1 { font-family: "Lora", Georgia, serif; font-weight: 600; color: #fff; margin: 0;
           font-size: 4.4cqw; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.hero .other { font-family: "Lora", Georgia, serif; font-style: italic; color: var(--ochre);
               font-size: max(.78rem, 2.1cqw); line-height: 1.3; margin: .5cqw 0 0; }
.hero .tagline { font-family: "Lora", Georgia, serif; font-style: italic; color: var(--cream);
                 font-size: max(.78rem, 2.1cqw); line-height: 1.3; margin: 1.6cqw 0 0; }

/* A narrow picture has room in its sky for the name alone, on two lines;
   the other language's name and the tagline follow below the picture. */
@container (max-width: 40rem) {
  .hero { position: static; width: auto; padding: .9rem 1rem 1.4rem; text-shadow: none; }
  .hero h1 { position: absolute; left: 5.2%; top: 7%; width: 60%; white-space: normal;
             font-size: 6.2cqw; text-shadow: 0 1px 3px rgba(10, 12, 28, .55); }
  .hero .other { margin: 0; font-size: 1.05rem; }
  .hero .tagline { margin: .35rem 0 0; font-size: 1.1rem; }
}

/* ---- the body ---- */

main { max-width: var(--measure); margin: 0 auto; padding: .5rem 1rem 3rem; }

.block { margin: 2.6rem 0 0; }
h2 { font-family: "Lora", Georgia, serif; font-weight: 600; color: var(--night);
     font-size: 1.65rem; line-height: 1.2; margin: 0 0 .9rem; }
h2::before { content: ""; display: block; width: 2.6rem; height: 2px; background: var(--ochre);
             margin-bottom: .85rem; }
p { margin: 0 0 1rem; }
strong { font-weight: 600; color: var(--night); }

#vision p:first-of-type { font-family: "Lora", Georgia, serif; font-size: 1.28rem; line-height: 1.5;
                          color: var(--night); }

.test { margin: 2.8rem 0 0; padding: 1.3rem 0 1.3rem 1.4rem; border-left: 3px solid var(--terra-deep); }
.test p { font-family: "Lora", Georgia, serif; font-style: italic; font-size: 1.25rem; line-height: 1.5;
          color: var(--quiet); margin: 0; }
.test strong { display: block; margin-top: .5rem; font-style: normal; font-weight: 600; color: var(--terra); }

#stage { background: var(--cream-2); border-top: 2px solid var(--ochre);
         padding: 1.4rem 1.4rem .5rem; border-radius: 0 0 6px 6px; }
#stage h2::before { display: none; }
#stage h2 { font-size: 1.3rem; }

.links { margin: 2.8rem 0 0; }
.links ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.links li { border-bottom: 1px solid var(--line); padding: 1rem 0 1rem 3.4rem; position: relative;
            color: var(--quiet); font-size: .95rem; line-height: 1.5; }
.links li::before { content: "→"; position: absolute; left: .6rem; top: .95rem; color: var(--ochre);
                    font-weight: 600; font-size: 1.15rem; }
.links li.has-mark::before { content: none; }
.links li .mark { position: absolute; left: 0; top: .85rem; width: 2.4rem; height: 2.4rem; }
.links a { display: block; font-weight: 600; color: var(--night); text-decoration: none;
           font-size: 1.05rem; margin-bottom: .15rem; }
.links a:hover { color: var(--terra); text-decoration: underline; }

/* ---- the foot ---- */

footer { border-top: 1px solid var(--line); background: var(--paper); }
.foot { max-width: var(--measure); margin: 0 auto; padding: 1.6rem 1rem 2.4rem;
        font-size: .82rem; line-height: 1.55; color: var(--quiet); }
.foot p { margin: 0 0 .4rem; }
.foot .who { color: var(--ink); font-weight: 600; }

@media (min-width: 52rem) {
  html { font-size: 1.0625rem; }
  .bar { padding-left: 2rem; padding-right: 2rem; }
}

@media print {
  .switch, .skip { display: none; }
}