/*
 * famtec.ch - stylesheet for the content pages
 * (Impressum, Datenschutzerklaerung, Datenquellen and the placeholders).
 *
 * Taken verbatim from the drafts in draft/. Only three things were removed:
 *
 *   - the two :root colour blocks, because the colours come from
 *     configs/palette.yaml and are inlined into the document head per request
 *   - the .todo callout, which was an editorial aid in the drafts
 *   - a dark mode rule that repeated the link colour unchanged
 *
 * Layout variables that are not colours stay here.
 */

:root{
  --wrap-max:1440px;
  --prose-max:760px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}

@media (prefers-reduced-motion: no-preference){
  .reveal{ animation:fadeUp .5s ease both; }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Header */
header.hero{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:56px 40px 28px;
  text-align:center;
}
.eyebrow{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--clay);
  font-weight:600;
  margin-bottom:10px;
}
h1{
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  font-size:clamp(30px,3.4vw,44px);
  margin:0 0 12px;
  letter-spacing:-.01em;
  text-shadow:var(--text-lift);
}
.subtitle{
  color:var(--ink-soft);
  font-size:16px;
  max-width:560px;
  margin:0 auto;
}

/* Content card */
.wrap{
  max-width:var(--prose-max);
  margin:0 auto;
  padding:0 24px 40px;
}
.card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:12px;
  padding:32px 32px 28px;
  box-shadow:var(--shadow-rest);
  animation-delay:.05s;
}
@media (max-width:560px){
  header.hero{ padding:40px 20px 22px; }
  .card{ padding:24px 20px 20px; }
}

.card h2{
  font-family:Georgia,serif;
  font-size:19px;
  margin:32px 0 10px;
  padding-top:20px;
  border-top:1px solid var(--line);
  text-shadow:var(--text-lift);
}
.card h2:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.card h3{
  font-family:Georgia,serif;
  font-size:15px;
  margin:20px 0 6px;
}
.card p{ margin:0 0 12px; }
.card ul{ margin:0 0 12px; padding-left:20px; }
.card li{ margin-bottom:5px; }
.card a{ color:var(--pine); }

/* Definition list for key/value blocks */
.kv{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:6px 16px;
  margin:0 0 14px;
  font-size:14.5px;
}
.kv dt{ color:var(--ink-soft); }
.kv dd{ margin:0; }
@media (max-width:560px){
  .kv{ grid-template-columns:1fr; gap:2px; }
  .kv dd{ margin-bottom:8px; }
}

/* Tables */
table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 14px;
  font-size:13.5px;
}
th,td{
  text-align:left;
  padding:9px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
th{
  color:var(--ink-soft);
  font-weight:600;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
tbody tr:last-child td{ border-bottom:0; }


/* Small print */
.note{
  color:var(--ink-soft);
  font-size:13px;
  margin:0 0 12px;
}

/* Footer */
footer{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:0 40px 40px;
  color:var(--ink-soft);
  font-size:12px;
  text-align:center;
}
footer nav{ margin-bottom:8px; }
footer a{
  color:var(--ink-soft);
  margin:0 8px;
}
footer a[aria-current="page"]{
  color:var(--ink);
  font-weight:600;
}

/* Theme switch. The drafts have none, so it is styled to match their footer. */
.theme-switch{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  font-size:12px;
  color:var(--ink-soft);
}
.theme-switch button{
  border:1px solid var(--line);
  background:var(--paper-raised);
  color:var(--ink-soft);
  border-radius:999px;
  padding:3px 10px;
  font:inherit;
  cursor:pointer;
}
.theme-switch button[aria-pressed="true"]{
  color:var(--ink);
  border-color:var(--ink-soft);
}

/* ---------------------------------------------------------------------------
 * The way one level up, and the eyebrow as the way home
 *
 * The arrow sits level with the title, at the left edge of a column as wide as
 * running text. It belongs to the page, not to the corner of the window.
 *
 * The narrow column and not the wide one, in both sheets, because the wide one
 * only fits the start page - and that page shows no arrow, having nothing
 * above it. On a chooser page the tiles sit centred, so an arrow at the outer
 * edge would hang alone in 400 pixels of nothing.
 *
 * It is centred on the title rather than offset by a measured number of
 * pixels, so it keeps its place when the heading grows with the viewport.
 * ------------------------------------------------------------------------ */
.hero-line{
  position:relative;
  max-width:var(--prose-max);
  margin:0 auto;
}
.uplink{
  position:absolute;
  /* Level with the left border of a text card, which sits 24px inside its own
     container. */
  left:24px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper-raised);
  color:var(--ink-soft);
  box-shadow:var(--shadow-rest);
  transition:transform .15s ease, color .15s ease, border-color .15s ease;
}
.uplink svg{ width:18px; height:18px; }
.uplink:hover, .uplink:focus-visible{
  color:var(--ink);
  border-color:var(--ink-soft);
  transform:translateY(-50%) translateX(-3px);
  outline:none;
}
/* Narrow screens have no room beside the heading, so the arrow steps above it
   instead of overlapping the text. */
@media (max-width:700px){
  .uplink{
    position:static;
    transform:none;
    margin-bottom:10px;
  }
  .uplink:hover, .uplink:focus-visible{ transform:translateX(-3px); }
  .hero-line{ display:flex; flex-direction:column; align-items:center; }
}
/* The eyebrow leads home. It keeps its own colour and weight, so nothing about
   the header changes visually until somebody points at it. */
.eyebrow a{
  color:inherit;
  text-decoration:none;
}
.eyebrow a:hover, .eyebrow a:focus-visible{
  text-decoration:underline;
  text-underline-offset:3px;
  outline:none;
}