/* julekalender2026.no: paper, ink, one red pen. Gambetta (display + names) + Switzer (UI).
   From the approved mockup, docs/ux/mockups/landing/landing.css. Mobile first; desktop from 900px. */
@font-face { font-family:'Gambetta'; font-style:normal; font-weight:300 700; font-display:swap; src:url('./fonts/gambetta.woff2') format('woff2'); }
@font-face { font-family:'Gambetta'; font-style:italic; font-weight:300 700; font-display:swap; src:url('./fonts/gambetta-italic.woff2') format('woff2'); }
@font-face { font-family:'Switzer'; font-style:normal; font-weight:100 900; font-display:swap; src:url('./fonts/switzer.woff2') format('woff2'); }
@font-face { font-family:'Shadows Into Light Two'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/shadows-into-light-two.woff2') format('woff2'); }

:root{
  --paper: #F7F6F1;        /* neutral off-white; mean of the paper tile */
  --paper-shot: #FBFAF7;   /* packshot backdrop; white photos multiply onto it */
  --pencil-red: #9C4656;   /* coloured pencil for rings */
  --ink: #1C1915;
  --ink-sub: #58514A;
  --ink-muted: #6E665C;   /* 5.2:1 on paper, so small text passes WCAG AA */
  --pen: #A1271F;          /* red pen: notes. Never a fill. */
  --serif: "Gambetta", "Times New Roman", serif;
  --sans: "Switzer", "Helvetica Neue", sans-serif;
  --hand: "Shadows Into Light Two", cursive;
  --g: 20px;               /* page gutter */
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink); font-family:var(--sans); font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Real paper scan, 768px shown at 384px for 2x. A background tile, never a live filter (Safari scroll cost). */
  background:var(--paper) url("./assets/paper.jpg") 0 0 / 384px;
}

/* ── Annonse ───────────────────────────────────────────────────────────────── */
.annonse{ display:flex; justify-content:center; flex-wrap:wrap; gap:2px 8px; padding:14px var(--g) 0;
  font-size:12px; line-height:1.4; color:var(--ink-sub); text-align:center; }
.annonse a{ color:inherit; text-underline-offset:3px; }
.annonse b{ font-weight:600; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-sub); padding-top:1px; }

/* ── Hero: the name is the headline; the year is circled in red pencil ────── */
.hero{ padding:44px var(--g) 8px; text-align:center; }
.hero h1{ font-family:var(--serif); font-weight:500; font-size:54px; line-height:.95; letter-spacing:-.025em; margin:0; }
.year{ position:relative; display:inline-block; font-style:italic; margin-top:6px; padding:0 4px; }
/* The one live pencil filter on the page; the many card lines are pre-rendered images. */
.year-ring{ position:absolute; left:-20px; top:-8px; width:calc(100% + 42px); height:calc(100% + 18px);
  color:var(--pencil-red); overflow:visible; pointer-events:none;
  filter:url(#crayon); mix-blend-mode:multiply; opacity:.9; }
/* Long accent words get a taller loop so the pen never cuts through letters or descenders. */
.year.long .year-ring{ left:-15%; top:-18px; width:130%; height:calc(100% + 36px); }
.lede{ font-size:14px; line-height:1.45; color:var(--ink-sub); margin:18px 0 0; }  /* the 404 sub-line */
.pen-note{ font-family:var(--hand); font-size:17px; line-height:1.2; color:var(--pen); margin:20px 0 0;
  transform:rotate(-1.5deg); min-height:1.2em; }

[hidden]{ display:none !important; }
.ic{ width:1em; height:1em; flex:0 0 auto; }

/* ── The row: shortcuts into the one filter (docs/ux/mockups/landing, Filter screens) ── */
.filters{ padding:32px 0 2px; }
.tabs{ display:flex; gap:22px; overflow-x:auto; padding:8px var(--g) 10px; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.extras{ display:contents; }
.tab{ position:relative; flex:0 0 auto; display:flex; align-items:center; gap:2px; background:none; border:0; padding:4px 0 9px;
  cursor:pointer; font:500 15px/1 var(--sans); color:var(--ink-muted); text-decoration:none; white-space:nowrap; }
.tab sup{ display:none; font-size:9.5px; margin-left:2px; font-weight:500; align-self:flex-start; }
.tab.on{ color:var(--ink); }
/* Invisible 44px touch areas; the row's padding keeps them (and the focus ring) inside its scroll box. */
.tab::before, .tab-filter::before, .reset::before, .empty button::before{ content:""; position:absolute; inset:-8px -6px; }
.reset, .empty button{ position:relative; }
.reset::before, .empty button::before{ inset:-15px -8px; }
.tab .pen-rule, .sortopt .pen-rule{ display:none; position:absolute; left:-3px; bottom:0; width:calc(100% + 6px); height:5px;
  color:var(--pencil-red); overflow:visible; filter:url(#crayon); opacity:.9; }
/* Red pencil = "this one is on", the same mark as the circled word in the headline. */
.tab.on .pen-rule{ display:block; }
.tab.chip{ gap:5px; color:var(--ink); }
.tab.chip .ic{ font-size:12px; }
.tab:focus-visible, .sort select:focus-visible, .more:focus-visible, .tab-filter:focus-visible{ outline:2px solid var(--pen); outline-offset:3px; }
.tab-filter{ position:relative; flex:0 0 auto; width:34px; height:30px; margin:-3px 0 0 -6px; /* touch area: ::before */ background:none; border:0; padding:0;
  font-size:19px; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.tab-filter sup, .more sup{ font:600 10px/1 var(--sans); color:var(--pen); margin-left:1px; align-self:flex-start; }
.tab-filter sup{ position:absolute; top:3px; right:0; }
.sortrow{ display:none; }

/* ── Search (docs/ux/mockups/search): no box, a pencil line under it; the red pencil while it has focus ── */
.search{ position:relative; display:flex; align-items:center; gap:10px; margin:0 var(--g) 14px; padding:10px 0 12px;
  background:url("./assets/rule-0.png") no-repeat 0 100% / 100% 6px; }
.search > .ic{ font-size:19px; color:var(--ink); }
/* 16px: iOS zooms into a smaller field */
.search input{ flex:1; min-width:0; appearance:none; -webkit-appearance:none; border:0; border-radius:0; background:none; padding:0; margin:0;
  font:400 16px/1.2 var(--sans); color:var(--ink); outline:0; caret-color:var(--pen); }
.search input::placeholder{ color:var(--ink-muted); opacity:1; }
.search input::-webkit-search-cancel-button{ display:none; }
.search-clear{ position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  margin:-4px -4px -4px 0; background:none; border:0; padding:0; color:var(--ink); font-size:13px; cursor:pointer; }
.search-clear::before{ content:""; position:absolute; inset:-10px; }
.search-clear:focus-visible{ outline:2px solid var(--pen); outline-offset:2px; }
.search .pen-rule{ display:none; position:absolute; left:-3px; bottom:0; width:calc(100% + 6px); height:5px;
  color:var(--pencil-red); overflow:visible; filter:url(#crayon); opacity:.9; }
.search:focus-within{ background-image:none; }
.search:focus-within .pen-rule{ display:block; }
/* while searching, every category shows its hits (on a phone too); one with none fades */
.has-q .tab sup{ display:inline; }
.has-q .tab.zero{ opacity:.42; }
.sort{ position:relative; display:flex; align-items:center; gap:5px; font:500 13px/1 var(--sans); color:var(--ink); }
.sort select{ field-sizing:content; appearance:none; -webkit-appearance:none; border:0; background:none; padding:15px 16px 15px 0; margin:-15px -16px -15px 0;
  font:inherit; color:inherit; cursor:pointer; }
.sort .ic{ font-size:12px; pointer-events:none; }
.more{ display:flex; align-items:center; gap:5px; margin:-15px 0 -15px auto; background:none; border:0; padding:15px 0; cursor:pointer;
  font:500 13px/1 var(--sans); color:var(--ink); }
.more .ic{ font-size:12px; }
.more .minus, .more[aria-expanded="true"] .plus{ display:none; }
.more[aria-expanded="true"] .minus{ display:inline-flex; }
.plus, .minus{ display:inline-flex; }

/* ── Filter og sortering: a sheet over the page on mobile, a panel under the row on desktop ── */
#filter{ border:0; padding:0; margin:0; max-width:none; max-height:none; color:var(--ink);
  background:var(--paper) url("./assets/paper.jpg") 0 0 / 384px; }
#filter::backdrop{ background:rgba(28,25,21,.38); }
.filter-open:has(#filter:modal){ overflow:hidden; }
#filter:modal{ position:fixed; inset:auto 0 0 0; width:100%; max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 -12px 32px rgba(28,25,21,.18); }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:22px var(--g) 6px; }
.sheet-head h2{ font:italic 500 26px/1.1 var(--serif); letter-spacing:-.01em; margin:0; outline:none; }
.sheet-close{ width:40px; height:40px; margin-right:-10px; background:none; border:0; font-size:21px; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.sheet-body{ overflow:auto; padding:0 var(--g); }
.fgroup{ border:0; margin:0; padding:20px 0 22px; min-width:0; }
.fgroup.ruled{ background:url("./assets/rule-2.png") no-repeat 0 0 / 100% 6px; }
/* A legend sits outside a fieldset's padding; floating it puts it back in the flow, spaced as in the mockup. */
.flabel{ float:left; width:100%; padding:0; margin:0 0 16px; font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.fgroup.ruled .flabel{ padding-top:20px; }
.flabel + *{ clear:both; }
.sorts{ display:flex; flex-wrap:wrap; gap:14px 22px; }
.sortopt{ position:relative; padding:4px 0 9px; cursor:pointer; font:500 15px/1 var(--sans); color:var(--ink-muted); }
.sortopt span{ position:relative; display:inline-block; padding-bottom:9px; margin-bottom:-9px; }
.sortopt input, .types input{ position:absolute; opacity:0; width:1px; height:1px; }
.sortopt input:checked + span{ color:var(--ink); }
.sortopt input:checked + span .pen-rule{ display:block; }
.sortopt input:focus-visible + span, .types input:focus-visible + .box{ outline:2px solid var(--pen); outline-offset:3px; }
.prices{ display:flex; justify-content:space-between; margin:0 0 14px; font:italic 500 22px/1 var(--serif); letter-spacing:-.01em; }
/* Two native range inputs over one pencil track; only their handles take touches. */
.range{ position:relative; height:28px; margin:0 0 4px; background:url("./assets/rule-0.png") no-repeat 0 50% / 100% 6px; }
.range .fill{ position:absolute; top:13px; height:2px; background:var(--ink); }
.range input{ position:absolute; inset:0; width:100%; height:28px; margin:0; background:none; pointer-events:none;
  appearance:none; -webkit-appearance:none; }
.range input::-webkit-slider-runnable-track{ background:none; }
.range input::-webkit-slider-thumb{ pointer-events:auto; -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--paper-shot); box-shadow:inset 0 0 0 1.4px var(--ink), 0 1px 3px rgba(28,25,21,.15); cursor:grab; }
.range input::-moz-range-thumb{ pointer-events:auto; width:22px; height:22px; border:0; border-radius:50%;
  background:var(--paper-shot); box-shadow:inset 0 0 0 1.4px var(--ink), 0 1px 3px rgba(28,25,21,.15); cursor:grab; }
.range input:focus{ outline:none; }
.range input:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--pen); outline-offset:2px; }
.types{ list-style:none; margin:0; padding:0; display:grid; gap:0 32px; }
.types label{ position:relative; display:flex; align-items:center; gap:12px; padding:9px 0; font-size:15px; cursor:pointer; }
.box{ flex:0 0 18px; width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1.3px var(--ink); color:var(--paper); font-size:12px; }
.box .ic{ visibility:hidden; }
.types input:checked + .box{ background:var(--ink); }
.types input:checked + .box .ic{ visibility:visible; }
.types .n{ margin-left:auto; font-size:12.5px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
/* A choice that would give no calendars right now: still tickable, but greyed so it reads as empty. */
.types label.none{ color:var(--ink-muted); }
.types label.none .box{ box-shadow:inset 0 0 0 1.3px var(--ink-muted); }
.factions{ display:flex; align-items:center; gap:20px; padding:14px var(--g) 24px; border-top:1px solid rgba(28,25,21,.12); }
.reset{ background:none; border:0; padding:0; cursor:pointer; font:500 14px/1 var(--sans); color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.apply{ flex:1; height:52px; border:0; cursor:pointer; background:var(--ink); color:var(--paper); font:500 15px/1 var(--sans); letter-spacing:.01em; }
.reset:focus-visible, .apply:focus-visible, .sheet-close:focus-visible{ outline:2px solid var(--pen); outline-offset:3px; }

/* ── Catalog: one calendar per row on mobile ───────────────────────────────── */
.catalog{ padding:6px 0 0; }
/* Pencil lines: pre-rendered PNGs of the mockup's #graphite strokes (site/assets/SOURCE.txt). */
.catalog > .rule{ height:6px; margin:0 var(--g); background:url("./assets/rule-0.png") no-repeat 0 0 / 100% 6px; }
.list{ margin:0; padding:0; list-style:none; }
.cell{ position:relative; background:url("./assets/rule-1.png") no-repeat var(--g) 100% / calc(100% - var(--g) * 2) 6px;
  /* Offscreen cards skip layout and paint, so ~900 of them scroll smoothly on a phone. */
  content-visibility:auto; contain-intrinsic-height:auto 680px; }
.cell:nth-child(3n+2){ background-image:url("./assets/rule-2.png"); }
.cell:nth-child(3n){ background-image:url("./assets/rule-0.png"); }
.item{ display:block; padding:24px var(--g) 30px; color:inherit; text-decoration:none; }
.item:focus-visible{ outline:2px solid var(--pen); outline-offset:-4px; }

.shot{ position:relative; aspect-ratio:1/1; max-height:70vh; overflow:hidden; background:var(--paper-shot); display:flex; align-items:center; justify-content:center; }
.shot img{ width:80%; height:80%; min-height:0; object-fit:contain; mix-blend-mode:multiply; }
.is-sold .shot img{ filter:grayscale(1); opacity:.45; }

/* The Verdi pen note, top-right on the photo (product-card.md §2). */
.note{ position:absolute; top:16px; right:14px; z-index:2; transform:rotate(-6deg); width:112px; height:68px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color:var(--pen);
  border-radius:50%; background:radial-gradient(closest-side, var(--paper-shot) 78%, transparent); }
.note small{ font:600 9.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; margin-bottom:3px; }
.note b{ font:italic 500 20px/1.05 var(--serif); letter-spacing:-.01em; white-space:nowrap; }
.note-ring{ position:absolute; inset:-4px -8px; width:calc(100% + 16px); height:calc(100% + 8px); color:var(--pencil-red); overflow:visible;
  filter:url(#crayon); mix-blend-mode:multiply; opacity:.9; }

.meta{ display:flex; flex-direction:column; padding-top:18px; }
.brand{ font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); min-height:11px; }
.title{ font:500 26px/1.12 var(--serif); letter-spacing:-.012em; margin:8px 0 0; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hl{ font-size:15px; line-height:1.45; color:var(--ink-sub); margin:10px 0 0; }
.buy{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-top:18px; }
.price{ font:500 22px/1 var(--sans); letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
.per{ font-size:12.5px; color:var(--ink-muted); margin-left:auto; }
.state{ font:500 17px/1 var(--sans); color:var(--ink-sub); }
.pre{ flex-basis:100%; font-size:12.5px; color:var(--ink-sub); }

.cta{ margin-top:16px; height:52px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ink); color:var(--paper); font:500 15px/1 var(--sans); letter-spacing:.01em; }
.cta svg{ width:15px; height:15px; }
.is-sold .cta{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.is-sold .title, .is-sold .brand{ color:var(--ink-sub); }

.show-more{ display:block; margin:18px auto 0; padding:12px 8px; background:none; border:0; cursor:pointer;
  font:italic 500 22px/1 var(--serif); color:var(--ink); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:6px; }
.empty{ padding:48px var(--g); text-align:center; font:italic 500 22px/1.3 var(--serif); color:var(--ink-sub); }
.empty button{ display:block; margin:14px auto 0; background:none; border:0; padding:0; cursor:pointer; font:500 14px/1 var(--sans); color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.hits{ margin:0; padding:16px var(--g) 2px; font:400 13px/1.3 var(--sans); color:var(--ink-sub); }
.hits b{ font-weight:600; color:var(--ink); }
.empty p{ margin:0; }
/* Gambetta italic draws « as a single ‹ between weights ~400 and ~590 (a bug in the variable font); 600 is whole */
.gq{ font-weight:600; }
#voksen{ display:block; width:fit-content; margin:14px auto 0; text-decoration:underline; text-decoration-thickness:1px; }
#widen, #voksen{ text-decoration-color:var(--pencil-red); }
#voksen + #unsearch{ margin-top:22px; color:var(--ink-sub); }
.show-more:focus-visible, .empty button:focus-visible, #voksen:focus-visible{ outline:2px solid var(--pen); outline-offset:4px; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.foot{ padding:56px 0 0; }
.rank{ padding:0 var(--g) 36px; }
.rank h2{ font:italic 500 26px/1.1 var(--serif); letter-spacing:-.01em; margin:0 0 10px; }
.rank p{ font-size:14px; line-height:1.55; color:var(--ink-sub); margin:0; max-width:56ch; }
/* the Ja/Nei question before any measuring: two equal buttons, so saying no is as easy as saying yes */
.consent{ position:fixed; z-index:6; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 18px; padding:14px var(--g) calc(14px + env(safe-area-inset-bottom));
  background:var(--paper) url("./assets/paper.jpg") 0 0 / 384px; border-top:1px solid rgba(28,25,21,.18); box-shadow:0 -6px 18px rgba(28,25,21,.08); }
.consent[hidden]{ display:none; }
.consent p{ margin:0; max-width:52ch; font-size:13.5px; line-height:1.45; color:var(--ink-sub); }
.consent a{ color:var(--ink); text-underline-offset:3px; }
.consent-choices{ display:flex; gap:10px; }
.consent-choices button{ min-width:88px; height:44px; padding:0 18px; border:1px solid var(--ink); background:none; color:var(--ink);
  font:500 15px/1 var(--sans); cursor:pointer; }
.consent a:focus-visible, .consent-choices button:focus-visible, .fine button:focus-visible{ outline:2px solid var(--pen); outline-offset:3px; }
.asking .float-filter{ display:none; }  /* the floating Filter button would sit on the question */
.fine button{ padding:0; border:0; background:none; font:inherit; color:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* /personvern/: running text in the footer's voice */
.legal{ max-width:62ch; margin:0 auto; padding:20px var(--g) 0; }
.legal h2{ font:italic 500 24px/1.15 var(--serif); letter-spacing:-.01em; margin:34px 0 8px; }
.legal p, .legal li{ font-size:15px; line-height:1.6; color:var(--ink-sub); }
.legal p{ margin:0 0 12px; }
.legal ul{ margin:0 0 12px; padding-left:20px; }
.legal a{ color:var(--ink); text-underline-offset:3px; }
.legal a:focus-visible{ outline:2px solid var(--pen); outline-offset:2px; }
.legal table{ width:100%; border-collapse:collapse; margin:4px 0 14px; font-size:14px; line-height:1.45; color:var(--ink-sub); }
.legal th{ font-weight:600; color:var(--ink); text-align:left; }
.legal th, .legal td{ padding:8px 10px 8px 0; border-bottom:1px solid rgba(28,25,21,.12); vertical-align:top; }
.foot .annonse{ border-top:1px solid rgba(28,25,21,.12); }
.fine{ font-size:12px; line-height:1.6; color:var(--ink-muted); text-align:center; padding:6px var(--g) 26px; margin:0; }
.empty a{ font:500 14px/1 var(--sans); color:var(--ink); text-underline-offset:5px; }
.fine a{ color:inherit; text-underline-offset:3px; }
.fine a:focus-visible{ outline:2px solid var(--pen); outline-offset:2px; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── Floating Filter: back to the filter after scrolling far (owner, 2026-11-01) ── */
.float-filter{ position:fixed; z-index:5; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); height:44px; padding:0 14px;
  display:flex; align-items:center; gap:8px; border:0; cursor:pointer; background:var(--ink); color:var(--paper);
  font:500 14px/1 var(--sans); box-shadow:0 0 0 1px var(--paper), 0 6px 18px rgba(28,25,21,.22); }
.float-filter .ic{ font-size:18px; }
.float-filter sup{ font:600 10px/1 var(--sans); color:var(--paper); align-self:flex-start; margin:10px 0 0 -4px; }
.float-filter:focus-visible{ outline:2px solid var(--pen); outline-offset:3px; }

@media (hover:hover){
  .item:hover .cta{ background:#000; }
  .is-sold:hover .cta{ background:var(--ink); color:var(--paper); }
  .item:hover .title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
}

/* ── Windows high contrast: box-shadow edges vanish, so draw real ones ── */
@media (forced-colors:active){
  .box, .apply, .is-sold .cta, .float-filter{ border:1px solid CanvasText; }
  .search{ border-bottom:1px solid CanvasText; }
  .types input:checked + .box{ background:Highlight; }
  .range input::-webkit-slider-thumb{ border:2px solid CanvasText; }
  .range input::-moz-range-thumb{ border:2px solid CanvasText; }
  .range .fill{ background:CanvasText; }
}

/* ── Phones: the first calendar's name, price and button on the first screen (owner, 2026-11-03) ── */
@media (max-width:599px){
  .hero{ padding:12px var(--g) 0; }
  .hero h1{ font-size:44px; }
  .year{ margin-top:2px; }
  .year.xlong{ font-size:36px; }
  .pen-note{ font-size:15px; margin-top:8px; }
  .filters{ padding:6px 0 0; }
  .search{ margin:0 var(--g) 6px; padding:4px 0 8px; }
  .cell{ contain-intrinsic-height:auto 600px; }
  .item{ padding:14px var(--g) 24px; }
  .shot{ aspect-ratio:auto; height:32vh; }  /* full width, shorter: ~1.5 cards per screen */
  .meta{ padding-top:12px; }
  .hl{ margin-top:6px; }
  .buy{ margin-top:12px; }
  .cta{ margin-top:12px; }
  /* one row: the question beside two equal buttons, about 64px instead of 160 */
  .consent{ flex-wrap:nowrap; gap:12px; padding:10px var(--g) calc(10px + env(safe-area-inset-bottom)); }
  .consent p{ flex:1; min-width:0; }
  .consent-choices button{ min-width:64px; height:40px; padding:0 14px; }
}

/* ── Tablets and small laptops: two columns ── */
@media (min-width:600px) and (max-width:899px){
  .year{ margin-left:24px; }
  .list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cell{ display:flex; flex-direction:column; contain-intrinsic-height:auto 640px; }
  .cell:nth-child(odd)::after{ content:""; position:absolute; top:0; bottom:6px; right:0; width:6px;
    background:url("./assets/rule-v.png") no-repeat center / 6px 100%; }
  .item{ flex:1; display:flex; flex-direction:column; }
  .meta{ flex:1; }
  .buy{ margin-top:auto; padding-top:18px; }
}

/* ── Desktop: same sheet, three columns ruled like a calendar page ─────────── */
@media (min-width:900px){
  :root{ --g:0px; }
  .wrap{ max-width:1160px; margin:0 auto; padding:0 40px; }
  body > .annonse{ padding:14px 40px 0; font-size:11.5px; }
  .hero{ padding:40px 0 4px; }
  .hero h1{ font-size:84px; }
  .year{ margin:0 0 0 30px; }
  .year-ring{ left:-26px; top:-14px; width:calc(100% + 64px); height:calc(100% + 28px); }
  .year.long .year-ring{ left:-14%; top:-24px; width:128%; height:calc(100% + 48px); }
  /* "med mat og drikke" won't fit beside "Julekalender": its own line, with room for the ring */
  .year.xlong{ display:block; width:fit-content; margin:30px auto 30px; }
  .pen-note{ font-size:21px; transform:rotate(-1deg); margin-top:18px; }
  /* Ten shortcuts fill the row, so sort and filter sit on their own line under it, right-aligned. */
  .filters{ display:flex; flex-wrap:wrap; align-items:flex-end; padding:30px 0 14px; }
  .tabs{ flex:1 1 100%; flex-wrap:wrap; overflow:visible; padding:8px 0 10px; margin:-8px 0 -10px; gap:6px 24px; }
  .tab sup{ display:inline; }
  .tab-filter{ display:none; }
  .sortrow{ display:flex; align-items:center; gap:16px; margin-left:auto; padding:16px 0 0; order:2; }
  /* the search sits left on the Sortér line with no line of its own: it stands on the list's line, and focus draws
     the red pencil onto that line, so there is one line, not two (owner, 2026-11-02) */
  .search{ order:1; flex:0 1 340px; margin:16px auto -12px 0; padding:6px 0 9px; background:none; }
  .search .pen-rule{ bottom:-9px; }
  .hits{ padding:18px 0 4px; font-size:14px; }
  /* The panel opens in the page under the row: price and recipient beside the types; sort stays in the row. */
  #filter[open]{ position:static; display:block; width:100%; background:none; }
  #filter .sheet-head, #filter .f-sort{ display:none; }
  .sheet-body{ overflow:visible; padding:0; }
  .f-cols{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:0 72px; }
  .f-cols .fgroup.ruled{ background:none; }
  .f-cols .fgroup.ruled .flabel{ padding-top:0; }
  .f-cols .types{ grid-template-columns:1fr 1fr; }
  .factions{ justify-content:flex-end; padding:14px 0 26px; }
  .apply{ flex:0 0 280px; }
  .catalog{ padding-top:0; }
  .rank{ text-align:center; }
  .rank p{ margin:0 auto; }
  .catalog > .rule{ background-image:url("./assets/rule-wide.png"); }
  .list{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .cell{ display:flex; flex-direction:column; contain-intrinsic-height:auto 620px; }
  .cell:not(:nth-child(3n))::after{ content:""; position:absolute; top:0; bottom:6px; right:0; width:6px;
    background:url("./assets/rule-v.png") no-repeat center / 6px 100%; }
  .item{ flex:1; display:flex; flex-direction:column; padding:24px 34px 32px; }
  .meta{ flex:1; }
  .buy{ margin-top:auto; padding-top:18px; }
  /* Landscape image box on desktop keeps the CTA above a laptop fold. */
  .shot{ aspect-ratio:4/3; }
  .title{ font-size:30px; }
}

/* ── Dark: night paper, cream ink, a softer red pen (owner, 2026-11-03). Last, so it overrides every width above.
   Photos keep a dimmed light tile, so their multiply blend still works. The page heads declare color-scheme
   "light dark", so Android browsers show this instead of darkening the page themselves. ── */
@media (prefers-color-scheme:dark){
  :root{
    --paper: #1D1A16;        /* warm charcoal, the ink's own hue */
    --paper-shot: #D6D1C5;   /* photo tile: light, dimmed so it doesn't glare */
    --pencil-red: #D07A8C;
    --ink: #EAE5DA;          /* 13.8:1 on paper */
    --ink-sub: #BDB5A8;      /* 8.5:1 */
    --ink-muted: #9A9286;    /* 5.6:1 */
    --pen: #F0806F;          /* 6.6:1 */
    --line: rgba(234,229,218,.14);
  }
  /* the same paper scan, its grain moved to the charcoal (assets/SOURCE.txt) */
  body, #filter, .consent{ background-image:url("./assets/paper-dark.jpg"); }
  /* the photo tile is a light island: its pen note keeps the light-page red and the multiply ring */
  .shot{ --pen:#A1271F; --pencil-red:#9C4656; }
  /* multiply would erase the headline ring on dark */
  .year-ring{ mix-blend-mode:normal; opacity:.95; }
  .search, .catalog > .rule, .cell:nth-child(3n), .range{ background-image:url("./assets/rule-0-dark.png"); }
  .cell{ background-image:url("./assets/rule-1-dark.png"); }
  .cell:nth-child(3n+2), .fgroup.ruled{ background-image:url("./assets/rule-2-dark.png"); }
  #filter::backdrop{ background:rgba(0,0,0,.6); }
  #filter:modal{ box-shadow:0 -1px 0 var(--line), 0 -12px 32px rgba(0,0,0,.5); }
  .factions, .foot .annonse{ border-top-color:var(--line); }
  .legal th, .legal td{ border-bottom-color:var(--line); }
  .consent{ border-top-color:var(--line); box-shadow:0 -6px 18px rgba(0,0,0,.35); }
  .float-filter{ box-shadow:0 0 0 1px var(--paper), 0 6px 18px rgba(0,0,0,.5); }
  @media (hover:hover){
    .item:hover .cta{ background:#fff; }
  }
  @media (min-width:600px) and (max-width:899px){
    .cell:nth-child(odd)::after{ background-image:url("./assets/rule-v-dark.png"); }
  }
  @media (min-width:900px){
    .search{ background-image:none; }  /* desktop search stands on the list's line */
    .catalog > .rule{ background-image:url("./assets/rule-wide-dark.png"); }
    .cell:not(:nth-child(3n))::after{ background-image:url("./assets/rule-v-dark.png"); }
    #filter[open]{ background:none; }
  }
}