/* itsicherheit.li — "sunny friendly".
   Tokens, typography and components are taken verbatim from the binding
   reference design/mockup-homepage-v4.html; the sections below the marked
   divider cover the page types the homepage mockup did not show (post pages,
   archive, category listings, legal pages).
   Fonts are self-hosted — no Google Fonts CDN (privacy rule, design.md). */

@font-face {
  font-family: 'Nunito Sans';
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/nunito-sans-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/nunito-sans-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/caveat-600.woff2) format('woff2');
}

:root {
  /* Tells the browser both schemes exist, so scrollbars, form controls and the
     default focus ring follow the palette instead of staying light (bugs.md
     P2 #8). */
  color-scheme: light dark;
  --ground:#FFFCF5; --surface:#FFFFFF; --ink:#26313D; --muted:#5D6B7A;
  --accent:#2D64C8; --accent-ink:#24519F; --mark:#FFE175; --hand:#C2571B;
  --line:#EAE3D3; --shadow:0 3px 14px rgba(70,80,60,.09);
  /* Label colour for .btn.primary. Split out from the hardcoded #fff because
     white on the dark-mode --accent is 2.32:1 — see the dark block (bugs.md
     P1 #1). White on the light --accent is 5.57:1 and stays. */
  --btn-ink:#FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#171D24; --surface:#202834; --ink:#E9EEF4; --muted:#9AA8B6;
    --accent:#82ABF2; --accent-ink:#9FBEF5; --mark:#5C4D17; --hand:#E9A265;
    --line:#303A46; --shadow:0 3px 14px rgba(0,0,0,.35);
    /* 7.70:1 on --accent. The button keeps its light-blue fill — only the
       label flips, which is the idiomatic dark-mode treatment. */
    --btn-ink:#12181F;
  }
}
:root[data-theme="dark"] {
  --ground:#171D24; --surface:#202834; --ink:#E9EEF4; --muted:#9AA8B6;
  --accent:#82ABF2; --accent-ink:#9FBEF5; --mark:#5C4D17; --hand:#E9A265;
  --line:#303A46; --shadow:0 3px 14px rgba(0,0,0,.35);
  --btn-ink:#12181F;
}
:root[data-theme="light"] {
  --ground:#FFFCF5; --surface:#FFFFFF; --ink:#26313D; --muted:#5D6B7A;
  --accent:#2D64C8; --accent-ink:#24519F; --mark:#FFE175; --hand:#C2571B;
  --line:#EAE3D3; --shadow:0 3px 14px rgba(70,80,60,.09);
  --btn-ink:#FFFFFF;
}

* { box-sizing:border-box; }
/* Every image on the site is sized by CSS — a width plus an aspect-ratio, or a
   width alone. The templates *also* carry the real pixel width/height as
   attributes so the browser can reserve the right space before the file lands
   (bugs.md P2 #6). Those attributes are presentational hints, which means they
   supply a *definite* CSS height: with both dimensions definite the spec says
   aspect-ratio is ignored, so each image rendered at its full intrinsic height
   inside a CSS-narrowed width — the hero at 400x853, the polaroids at 1244px
   tall, the e-book cover at 170x1024. The mockup this stylesheet was taken from
   had no dimension attributes, so the bug only appeared once they were added.
   height:auto hands the height back to aspect-ratio (or to the intrinsic ratio
   where no aspect-ratio is set) without giving up the reserved space. */
img { height:auto; }
body { margin:0; background:var(--ground); color:var(--ink); font:400 17px/1.65 'Nunito Sans', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
.wrap { max-width:980px; margin:0 auto; padding:0 24px; }
a { color:var(--accent-ink); text-underline-offset:3px; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
h1,h2,h3 { font-weight:700; line-height:1.15; margin:0; text-wrap:balance; }
mark { background:linear-gradient(transparent 55%, var(--mark) 55%); color:inherit; padding:0 2px; }
.hand { font-family:'Caveat', cursive; color:var(--hand); font-size:24px; line-height:1.2; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--ink); padding:12px 18px; border-radius:0 0 12px 0; font-weight:700; z-index:10; }
.skip:focus { left:0; }

header.site { padding:26px 0; }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wordmark { font-weight:700; font-size:19px; color:var(--ink); text-decoration:none; }
.wordmark b { color:var(--accent); }
/* Unchanged from the mockup. bugs.md P1 #4 claimed this overflowed a 320px
   viewport; measured in Chrome it does not — the nav is 276px against a 320px
   layout and the header's own flex-wrap handles it. That finding was withdrawn.
   It does overflow below 300px; adding `flex-wrap:wrap` would fix that, but
   320px is the WCAG 1.4.10 threshold, so this stays as the reference has it. */
nav.main { display:flex; gap:24px; }
nav.main a { color:var(--ink); text-decoration:none; font-weight:700; font-size:15px; }
nav.main a:hover { color:var(--accent-ink); }
nav.main a[aria-current] { box-shadow:inset 0 -3px var(--mark); }

.hero { padding:52px 0 60px; }
.hero .wrap { display:grid; grid-template-columns:1.45fr 1fr; gap:52px; align-items:center; }
.hero h1 { font-size:clamp(38px, 5.8vw, 56px); }
.hero p.lede { font-size:19px; color:var(--muted); margin:22px 0 30px; max-width:33em; }
.cta-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-block; padding:13px 24px; border-radius:12px; text-decoration:none; font-weight:700; font-size:16px; box-shadow:var(--shadow); }
.btn.primary { background:var(--accent); color:var(--btn-ink); }
.btn.quiet { background:var(--surface); color:var(--accent-ink); border:1px solid var(--line); }
.btn:hover { transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform:none; } }
.hero-photo { position:relative; justify-self:center; }
.hero-photo img { width:min(400px, 82vw); aspect-ratio:4/3; object-fit:cover; border-radius:24px; box-shadow:var(--shadow); display:block; }
.hero-photo .note { position:absolute; top:13%; left:24%; transform:rotate(-4deg); color:#FFE9C4; text-shadow:0 1px 5px rgba(0,0,0,.6); font-size:26px; z-index:1; }
.card .note-hand { align-self:flex-end; transform:rotate(-3deg); margin-top:-6px; }
.video { position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; }
.video .play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:62px; height:62px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow); }
.video .play::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-40%,-50%); border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent var(--accent); }
.video:hover .play { background:var(--accent); }
/* Same white-on---accent problem as .btn.primary, on the hover state of the
   play glyph (2.32:1 in dark mode, and 3:1 is required for a non-text
   graphic). */
.video:hover .play::after { border-left-color:var(--btn-ink); }
.video-embed iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:12px; display:block; }
.before { margin-top:36px; border-top:1px solid var(--line); padding-top:32px; }
.before p.big { font-size:20px; margin:0 0 26px; max-width:36em; }
.polaroids { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.polaroid { margin:0; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:10px 10px 6px; box-shadow:var(--shadow); }
.polaroid:nth-child(1) { transform:rotate(-2deg); }
.polaroid:nth-child(2) { transform:rotate(1.5deg); }
.polaroid:nth-child(3) { transform:rotate(-1deg); }
.polaroid img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px; display:block; }
.polaroid figcaption { text-align:center; padding:8px 4px 4px; }
@media (max-width: 780px) { .polaroids { grid-template-columns:1fr; } }

/* The homepage's hero->proud divider. Was an inline-styled empty <div>; the
   "as seen in" band (.seen) it once separated from the hero was dropped from
   the content, leaving .seen unused and the inline styling as the only
   inline-styled divider on the site (bugs.md run 7 P3 #3). Same rule, now a
   class, numbers unchanged. */
.rule { border-top:1px solid var(--line); padding-top:32px; margin-bottom:36px; }

section { padding:56px 0; }
section h2 { font-size:30px; margin-bottom:8px; }
.sub { color:var(--muted); margin:0 0 28px; max-width:44em; }

.cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.card .tag { font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
.card h3 { font-size:20px; }
.card p { margin:0; font-size:15.5px; color:var(--muted); }
.card a.more { font-weight:700; text-decoration:none; margin-top:auto; }
.card a.more:hover { text-decoration:underline; }
.card img.thumb { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; display:block; }

.list { border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:104px 1fr auto; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); align-items:baseline; }
.row:hover h3 { color:var(--accent-ink); }
.row time { font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
.row h3 { font-size:17.5px; font-weight:700; line-height:1.35; }
.badge { font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--mark); color:var(--ink); white-space:nowrap; }
.all-posts { display:inline-block; margin-top:18px; font-weight:700; }
/* Full listing pages (the archive index and the category pages): the list is
   both the page-head's content (34px below it, same value every page-head
   uses) and the last thing before the footer (60px more closes the shared
   76px footer gap — bugs.md run 7 P2 #2). Was two inline
   `style="margin-top:34px"` instances; the homepage's own 3-post teaser list
   keeps using bare .list. */
.list.listing { margin:34px 0 60px; }

.ebook { background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:38px; display:grid; grid-template-columns:170px 1fr; gap:40px; align-items:center; }
.ebook .coverwrap { position:relative; }
.ebook img.cover { width:170px; border-radius:8px; transform:rotate(-3deg); box-shadow:var(--shadow); display:block; }
.ebook .note { position:absolute; bottom:-26px; right:-14px; transform:rotate(-6deg); }
.ebook h2 { font-size:26px; }
.ebook p { color:var(--muted); margin:10px 0 20px; max-width:32em; }
/* Two of the three inline styles the site still carried, moved here so
   style-src in _headers can stay strict: a style="" attribute cannot be
   hashed, and allowing it would have meant unsafe-inline (PROJ-1 F3). Same
   numbers, now classes. .ebook-band overrides the shared 56px section padding
   because this band sits directly under a .page-head; .edition is the small
   print under the download button. */
.ebook-band { padding:34px 0 15px; }
.ebook p.edition { margin-top:18px; font-size:15px; }

.cta-band { text-align:center; padding:64px 0 76px; }
.cta-band h2 { font-size:32px; margin-bottom:10px; }
.cta-band p { color:var(--muted); margin:0 0 26px; }

footer.site { border-top:1px solid var(--line); padding:30px 0 46px; font-size:14px; color:var(--muted); }
footer.site .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer.site a { color:var(--muted); }

@media (max-width: 780px) {
  .hero .wrap, .cards, .ebook { grid-template-columns:1fr; }
  .row { grid-template-columns:1fr; gap:6px; }
  .badge { justify-self:start; }
  .hero-photo { order:-1; }
  /* The mockup moved this note to top:-30px here, which took the cream
     #FFE9C4 text off the photo and onto the page background — 1.16:1 in light
     mode, i.e. invisible — and left left:24% in place so the box stretched
     between both edges (bugs.md P1 #2 and #3). It stays on the photo instead,
     where the cream-plus-shadow treatment is legible and matches desktop. */
}

/* ---------------------------------------------------------------------------
   Beyond the homepage mockup: post pages, listings, legal pages.
   Same tokens, same rhythm — nothing new is introduced.
   ------------------------------------------------------------------------ */

.page-head { padding:44px 0 8px; }
/* When .page-head is the only thing on the page (404), it's also the last
   thing before the footer — give it the shared 76px footer gap (bugs.md run 7
   P2 #2). Higher specificity than .page-head alone, so source order doesn't
   matter. */
.page-head.only { padding-bottom:76px; }
/* The third ex-inline style (PROJ-1 F3): the 404 page's button row. .cta-row
   appears in exactly two places — the hero, where the .hero rhythm already
   spaces it, and here. */
.page-head .cta-row { margin-top:26px; }
.page-head h1 { font-size:clamp(30px, 4.4vw, 42px); }
.page-head .meta { color:var(--muted); font-size:15px; margin:14px 0 0; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.page-head .meta time { font-variant-numeric:tabular-nums; }
.page-head .lede { color:var(--muted); font-size:19px; margin:16px 0 0; max-width:40em; }

/* The archive notice: how a 2017-2021 post is marked as a snapshot of its
   time (design.md section 6). Yellow --mark keeps it in the family. */
.archive-note { display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--mark); border-radius:12px; padding:16px 20px; margin:28px 0 0; box-shadow:var(--shadow); font-size:15px; color:var(--muted); }
.archive-note strong { color:var(--ink); }
.archive-note p { margin:0; }

.prose { max-width:41em; padding:34px 0 8px; }
.prose > *:first-child { margin-top:0; }
.prose p { margin:0 0 1.3em; }
.prose h2 { font-size:26px; margin:2em 0 .6em; }
.prose h3 { font-size:21px; margin:1.9em 0 .55em; }
.prose h4, .prose h5, .prose h6 { font-size:18px; font-weight:700; margin:1.8em 0 .5em; line-height:1.35; }
.prose h4 strong, .prose h5 strong, .prose h6 strong { font-weight:700; }
.prose img { max-width:100%; height:auto; border-radius:12px; display:block; margin:1.6em 0 .6em; box-shadow:var(--shadow); }
.prose figure { margin:1.6em 0; }
.prose em { color:var(--muted); }
.prose img + em { display:block; font-size:14px; color:var(--muted); font-style:normal; margin-bottom:1.6em; }
.prose blockquote { margin:1.6em 0; padding:4px 0 4px 22px; border-left:4px solid var(--mark); color:var(--ink); font-size:19px; }
.prose blockquote p:last-child { margin-bottom:0; }
.prose ul, .prose ol { margin:0 0 1.3em; padding-left:1.4em; }
.prose li { margin:.4em 0; }
.prose hr { border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.prose code { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.92em; }
.prose table { width:100%; border-collapse:collapse; margin:1.6em 0; font-size:15.5px; display:block; overflow-x:auto; }
.prose th, .prose td { border:1px solid var(--line); padding:10px 12px; text-align:left; }
.prose iframe { max-width:100%; }

.post-foot { border-top:1px solid var(--line); margin-top:40px; padding:26px 0 76px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-weight:700; }

.pill-row { display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 0; }
.pill { display:inline-block; padding:7px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:700; font-size:14.5px; }
.pill[aria-current] { background:var(--mark); border-color:transparent; }
.pill:hover { color:var(--accent-ink); }

/* Top matches every other page-head's content gap (34px — bugs.md run 7 P3
   #4, legal pages were the one at 30px); bottom closes the shared 76px footer
   gap (P2 #2). */
.legal { max-width:41em; padding:34px 0 61px; }
.legal h2 { font-size:23px; margin:2em 0 .5em; }
.legal p, .legal li { color:var(--ink); }
.legal address { font-style:normal; margin:0 0 1.3em; }
.legal .updated { color:var(--muted); font-size:15px; }

.notice { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 22px; box-shadow:var(--shadow); color:var(--muted); font-size:15px; margin:0 0 1.6em; }
.notice strong { color:var(--ink); }