:root{ /* ---- Typography ------------------------------------------------------- ONE family for everything. That was a speed decision as much as a visual one: a single variable font means one file, one connection, no second face blocking first paint. SELF-HOSTED, and on this site that is still a legal question rather than a preference. The guide publishes in ten languages, German among them, and a German reader loading the face from fonts.googleapis.com would send their IP address to Google before any consent could be collected - the setup the Landgericht Muenchen penalised in 2022. Serve it from our own origin. There is no Google connection anywhere in the pages. Two subsets, 30 KB total, one variable file each covering 400..700. The browser downloads latin-ext only if a glyph needs it; English prose never does, and Icelandic place names (Reykjavik, Hallgrimskirkja, Thingvellir) are written with their real letters in the latin-ext range, so the second file does get pulled on most pages of this site. Figtree is OFL licensed; assets/fonts/OFL.txt ships beside it as the licence requires. */ --size-body: 19px; --leading-body: 1.62; --measure: 680px; /* max line length for running prose */ --space-para: 1.10em; --weight-body: 400; --size-h1: 43px; --weight-head: 700; --tracking-head: -0.025em; --leading-head: 1.15; /* Heading scale. NOTE: h2 is set explicitly rather than derived from h1. Deriving it on the reference site produced a 21.5px h2, only 16 % above body text, which is too weak a step for articles that run to 2,500 words. These values keep a readable ladder under the h1 whatever the h1 ends up being. */ --size-h2: 29px; --size-h3: 23px; --size-lede: 21.5px; /* the standfirst under h1 */ --size-small: 16.5px; /* captions, meta, footnotes */ --size-micro: 13.5px; /* eyebrows, labels, table headers */ /* Mobile step-down. English headlines are shorter than the German ones these numbers were first cut for, but "When the northern lights are actually visible from Reykjavik" still needs the h1 to come down at 390px. */ --size-h1-sm: 32px; --size-h2-sm: 24px; --size-body-sm: 18px; /* ---- Colour ----------------------------------------------------------- Light only, by owner decision: light hero, light body, light everywhere. The palette is "Roof red", read off the owner's own hero photograph on 2026-09-07: the bay and the mountain give the blue, the roofs of the old town give the red, and the neutrals are cooled towards the blue so they read as chosen rather than defaulted. Every ratio below is measured against --paper, not estimated. */ /* page ground - a cool near-white, the winter light in the hero photograph */ /* alternating section bands */ /* cards lift off the cool ground */ /* body text - the harbour navy. 15.15:1 */ /* secondary text, captions. 5.86:1 */ /* meta, small labels. 5.27:1 - it carries words at 11-14px, so it holds 4.5:1 on paper, sunk and white alike. home.css repeats the value and loads later. */ /* card borders */ /* internal dividers, table rows */ /* links, eyebrows. The bay blue, dark enough to read as text. 5.34:1 */ /* the same colour as a triplet, for the rgba() stops of the subheading device. Keep in step with --accent. */ /* link hover. 8.57:1 */ /* the secondary accent. Non-commercial notes and informational callouts only. 5.45:1 */ /* ---- Call to action --------------------------------------------------- BINDING RULE, owner instruction: the CTA must always hold strong contrast against everything around it. Reserved for commercial calls to action and never reused for links, headings, borders, icons or decoration. THE LABEL IS WHITE HERE, and that is measured, not assumed. This palette inverts the reference site's rule, which had a navy label on a bright amber: #FFFFFF on #C2301A = 5.63:1 AA correct #12222C on #C2301A = 2.89:1 FAIL unreadable A dark label on this red is the single easiest way to break the button. The hover state is darker still (#A62817), so white only gets safer: 7.15:1. The hierarchy works because the two colours are far apart in hue and close in weight: links are blue and never red, the button is red and never blue, and nothing else on a page is allowed to be either. */ /* the red roofs of the old town. 5.24:1 on paper */ /* white label. Never the ink navy - see above. */ /* ---- Evidence ----------------------------------------------------------- The badge on an offer ("Most booked", "Top rated") and the star beside a rating. They are not decoration and not a third accent: they say the catalogue has counted something. Amber because that is what a rating is everywhere, held to a tint pale enough that the roof red stays the only saturated thing on a card. #8A4B00 on #FBEBD2 = 5.80:1 The star is a glyph next to a number set in ink, so it carries no meaning on its own and 3.82:1 against white is a decorative contrast, not a text one. */ /* ---- Shape and depth -------------------------------------------------- Rounded blocks and cards, per reference 1. Shadows stay very light: the separation comes from the border and the ground, not from drop shadow. */ /* ---- Charts ---------------------------------------------------------- The pair is checked against the page ground: warm and cool are far enough apart to survive protanopia, both carry chroma above the paper, and both clear 3:1 against it. --chart-mute is the fill of the bars that are NOT highlighted: it has to lift off the track, or a row of five bars reads as four empty gutters and one full one. That was the mistake it fixes. */ /* ---- Spacing scale ---------------------------------------------------- 4px base. Use these, never arbitrary values, or the alignment the owner liked in reference 1 quietly decays. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; /* ---- Marks ------------------------------------------------------------ The section mark (owner's pick, 2026-09-13, lab option L, lab/h2_lab.py): a pale highlighter band behind the words of every article h2, and on desktop three pen sparks at the first letter - the hand-lettering of a travel journal, in the site's own blue. article.css draws them. They replace the church spire and cross of 2026-09-07. Colours are baked into the SVG: a mask cannot carry the band's faint felt-tip streaks. */ --gutter: 40px; /* horizontal page padding, desktop */ --gutter-sm: 20px; /* horizontal page padding, mobile */ --width-wide: 1180px; /* full-width sections, card grids */ } @media (max-width: 700px){:root{ --size-h1: var(--size-h1-sm); --size-h2: var(--size-h2-sm); --size-body: var(--size-body-sm); --gutter: var(--gutter-sm); } }@media (prefers-reduced-motion: reduce){*,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }svg{width:1em;height:1em;flex:none} img{max-width:100%} [id]{scroll-margin-top:88px} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth} }.cta svg,.cta2 svg{width:1.05em;height:1.05em} :root{ --size-body:18.5px; --leading-body:1.65; --measure:720px; /* --ink-faint carries real words at 11-14px: "from", review counts, table headers, the ISK conversions, "accessed" dates, the footer's copyright and partner line. #8A8F98 measured 2.93:1 on --paper-sunk and 3.15:1 on --paper - below the 4.5:1 small text needs. #656A73 is the same cool grey, darker: 4.91:1 on --paper-sunk, 5.27:1 on --paper, 5.62:1 on white, 4.53:1 on the finder's #E9EBE5 chip. Still a step below --ink-soft (5.42:1 on sunk), so the hierarchy holds. (2026-09-13) */ /* The accent is this site's bay blue, from tools/design-tokens.css. This :root block came over from the reference build and its #B25309 loaded after the token file, so it won site-wide: every link, eyebrow and finder button rendered in the other site's brown. Keep these two in step with design-tokens.css. */ --gutter:40px; --toc-w:236px; --toc-gap:48px; --container:calc(var(--measure) + var(--toc-gap) + var(--toc-w)); } *{box-sizing:border-box} html{overscroll-behavior-x:none;overflow-x:clip} body{overscroll-behavior-x:none;overflow-x:clip; margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body); font-size:var(--size-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased} .site-header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent; transition:background .18s,border-color .18s} .site-header.solid{background:var(--paper);border-bottom-color:var(--rule)} .site-header:not(.solid) .brand b,.site-header:not(.solid) .hnav span{color:var(--on-photo); text-shadow:var(--on-photo-shadow)} .site-header:not(.solid) .brand svg path{fill:var(--on-photo);stroke:var(--on-photo)} .site-header:not(.solid) .pill{color:var(--on-photo);border-color:var(--on-photo-line); background:var(--on-photo-glass);backdrop-filter:blur(4px)} .bar{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter); height:66px;display:flex;align-items:center;gap:10px;flex-wrap:nowrap} .burger{display:none;margin-left:auto;flex-direction:column;gap:4px;padding:9px 10px; border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--card);cursor:pointer} .burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px} .site-header:not(.solid) .burger{background:var(--on-photo-glass-strong);border-color:var(--on-photo-line); backdrop-filter:blur(4px)} .site-header:not(.solid) .burger span{background:var(--on-photo)} .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:none} .brand{padding-block:9px;margin-block:-9px} .burger{position:relative} .burger::after{content:"";position:absolute;inset:-5px -3px} .brand svg{width:26px;height:26px;flex:none} .brand b{font-size:16px;letter-spacing:-.022em;white-space:nowrap} .hnav{margin-left:auto;display:flex;gap:1px;font-size:13.5px;color:var(--ink-soft); flex:none} .hnav span{padding:8px 10px;border-radius:var(--radius-label);white-space:nowrap} .hutil{display:flex;gap:6px;flex:none;margin-left:10px} .pill{border:1px solid var(--rule);border-radius:var(--radius-pill);padding:5px 8px;font-size:12px; color:var(--ink-soft);white-space:nowrap} @media(max-width:1150px){.hnav,.hutil{display:none} .burger{display:flex} }.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end; margin-top:-66px;padding-top:calc(66px + 28px);isolation:isolate;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:-2} #sand{position:absolute;inset:0;z-index:-1;pointer-events:none} .hero-bg img{width:100%;height:100%;object-fit:cover;display:block} .hero-bg::after{content:"";position:absolute;inset:0; background:var(--hero-scrim)} .hero-in{position:relative;z-index:1;width:100%; max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto; padding:0 var(--gutter) 78px;color:var(--on-photo)} @media (min-width:1100px) and (min-height:760px){.hero-in{padding-bottom:clamp(140px, 24vh, 320px)} }.hero-t{max-width:60ch} .hero-in .eyebrow{display:inline-block;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--hero-eyebrow);font-weight:700;margin:0 0 18px; border:1px solid var(--hero-eyebrow-line);border-radius:var(--radius-pill);padding:6px 14px; backdrop-filter:blur(3px)} .hero h1{font-size:clamp(40px,6.2vw,76px);font-weight:700;letter-spacing:-.035em;line-height:1.02; margin:0 0 20px;text-wrap:balance;color:var(--on-photo); text-shadow:var(--hero-h1-shadow)} .hero .lede{font-size:clamp(17px,1.55vw,22px);line-height:1.5;color:var(--hero-lede);margin:0 0 30px; max-width:52ch;text-shadow:var(--hero-lede-shadow)} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .cta{display:inline-flex;align-items:center;justify-content:center;background:var(--cta); color:var(--cta-ink);border:0;border-radius:var(--radius-cta);padding:17px 30px;font:inherit;font-size:17.5px; font-weight:700;text-decoration:none;white-space:nowrap;transition:background .12s,transform .12s; box-shadow:var(--shadow-cta)} .cta:hover{background:var(--cta-hover);transform:translateY(-1px)} .cta2{display:inline-flex;align-items:center;justify-content:center;background:var(--cta2-bg); color:var(--cta2-ink);border:1.5px solid var(--cta2-line);border-radius:var(--radius-cta);padding:16px 28px; font:inherit;font-size:17.5px;font-weight:700;text-decoration:none;white-space:nowrap; backdrop-filter:blur(6px)} .cta2:hover{background:var(--cta2-bg-hover);border-color:var(--cta2-ink)} .hero-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:14.5px;font-weight:600; color:var(--hero-meta-ink);text-shadow:var(--hero-meta-shadow);margin:26px 0 0} .hero-meta i{font-style:normal;color:var(--hero-meta-sep)} .byline.hero-meta{color:var(--hero-byline-ink);border-bottom:0;padding-bottom:0;margin:24px 0 0; font-size:14.5px;text-shadow:var(--hero-byline-shadow)} .byline.hero-meta svg{opacity:.9} .byline.hero-meta i{color:var(--hero-byline-sep)} .byline.hero-meta .src2{color:var(--hero-byline-sources)} .glance{background:var(--ink);color:var(--on-ink)} .glance-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:34px var(--gutter); display:grid;grid-template-columns:repeat(4,1fr)} .glance-in>div{padding-inline:26px;border-left:1px solid var(--glance-rule); position:relative;overflow:hidden} .glance-in>div:first-child{padding-inline-start:0;border-left:0} .glance .gl-ic{position:absolute;right:14px;top:-6px;color:var(--glance-icon);pointer-events:none} .glance-in>div:last-child .gl-ic{right:0} .glance .gl-ic svg{width:74px;height:74px} .glance b{display:block;position:relative;font-size:32px;font-weight:700;letter-spacing:-.028em; font-variant-numeric:tabular-nums;line-height:1.02;color:var(--on-ink)} .glance span{display:block;position:relative;font-size:14px;color:var(--glance-label); margin-top:7px;line-height:1.4} .secs{padding:56px 0 20px} .secs-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)} .secs-head{grid-column:1/-1;margin-bottom:6px} .secs h2{font-size:30px;letter-spacing:-.025em;margin:0 0 8px;font-weight:700} .secs-head p{font-size:17px;color:var(--ink-soft);margin:0;max-width:62ch} .secs-in{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .sec{display:grid;grid-template-columns:150px 1fr;gap:0;background:var(--card); border:1px solid var(--rule);border-radius:var(--radius-card);overflow:hidden; text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s} .sec:hover{border-color:var(--ink-faint);box-shadow:var(--shadow-sec-hover);transform:translateY(-2px)} .sec-img img{width:100%;height:100%;object-fit:cover;display:block} .sec.noimg{grid-template-columns:1fr} .sec-b{padding:16px 18px} .sec-h{display:flex;align-items:baseline;gap:9px;margin-bottom:6px} .sec-h h3{font-size:19px;margin:0;letter-spacing:-.018em} .cnt{font-size:11.5px;color:var(--ink-faint);background:var(--paper-sunk);border-radius:var(--radius-pill);padding:2px 8px} .sec-b p{font-size:15.5px;color:var(--ink-soft);margin:0 0 10px;line-height:1.45} .sec-b ul{list-style:none;margin:0 0 11px;padding:0;display:flex;flex-wrap:wrap;gap:5px} .sec-b li{font-size:13px;color:var(--ink-soft);background:var(--paper-sunk); border:1px solid var(--rule);border-radius:var(--radius-sec-item);padding:2px 8px} .more{font-size:14.5px;font-weight:700;color:var(--accent)} .partner{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-faint)} .hsearch{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0; box-sizing:border-box;text-decoration:none;position:relative} .hsearch svg{width:15px;height:15px} .hsearch::after{content:"";position:absolute;inset:-6px -3px} .hsearch:hover{border-color:var(--accent);color:var(--accent)} .hsearch:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .article{padding:56px 0 20px;border-top:1px solid var(--rule)} .art-in{max-width:calc(var(--measure) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)} .byline{display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;font-size:15.5px; color:var(--ink-faint);padding-top:22px;border-top:1px solid var(--rule);margin:34px 0 0} .byline svg{width:14px;height:14px;flex:none;opacity:.85;margin-right:-4px} .byline i{font-style:normal;color:var(--rule)} .byline .src2{color:var(--teal);font-weight:700;display:inline-flex;align-items:center;gap:6px} .art-in p{margin:0 0 1.1em;font-size:var(--size-body);line-height:var(--leading-body)} .art-in a:not(.cta):not(.cta2){color:var(--accent);text-decoration:underline;text-underline-offset:2.5px} .ph{color:var(--ink-faint);border-bottom:1px dotted var(--ink-faint);cursor:help} .blk{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card); padding:22px 24px;margin:1.7em 0} .blk>h3{font-size:var(--size-h3);font-weight:700;letter-spacing:-.015em;margin:0 0 4px;line-height:1.25} .blk .intro{font-size:16px;color:var(--ink-soft);margin:0 0 16px} .blk .foot{font-size:14.5px;color:var(--ink-soft);margin:16px 0 0;padding-top:13px; border-top:1px solid var(--rule-soft);line-height:1.5} .facts{margin:0;display:grid} .frow{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px solid var(--rule-soft)} .frow:first-child{padding-top:0} .frow:last-child{border-bottom:0} .frow dt{color:var(--ink-soft);font-size:16.5px;max-width:46%} .frow dd{margin:0;text-align:right;font-weight:700;font-size:16.5px} .aag{background:var(--paper-sunk);border:0;border-left:3px solid var(--teal);border-radius:0 var(--radius-card) var(--radius-card) 0} .tw{overflow-x:auto;margin:0 -24px;padding:0 24px} table{width:100%;border-collapse:collapse;font-size:16px;min-width:560px} th{text-align:left;font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:700; color:var(--ink-faint);padding:0 14px 9px 0;border-bottom:1px solid var(--rule)} td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-soft);vertical-align:top} td:first-child{color:var(--ink);font-weight:700} tr:last-child td{border-bottom:0} .stack{display:none} .srow{padding:14px 0;border-bottom:1px solid var(--rule-soft)} .srow:last-child{border-bottom:0} .srow b{display:block;font-size:16.5px;margin-bottom:7px} .srow dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:15px} .srow dt{color:var(--ink-faint);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding-top:3px} .srow dd{margin:0;color:var(--ink-soft);line-height:1.45} .myth{display:grid;margin:0;padding:0} .myth>li{list-style:none;padding:16px 0;border-bottom:1px solid var(--rule-soft); display:grid;grid-template-columns:auto 1fr;gap:14px} .myth>li:first-child{padding-top:0} .myth>li:last-child{border-bottom:0;padding-bottom:0} .vd{display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:var(--radius-pill); padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; white-space:nowrap;align-self:start;width:108px} .vd svg{width:14px;height:14px} .vd.stimmt{background:var(--teal-bg);color:var(--teal)} .vd.teilweise{background:transparent;color:var(--ink-soft);border:1.5px solid var(--rule)} .vd.falsch{background:var(--ink);color:var(--on-ink)} .myth .claim{font-weight:700;margin:0 0 5px!important;line-height:1.4} .myth .exp{margin:0!important;color:var(--ink-soft);font-size:16.5px;line-height:1.5} /* image: redesigned by the owner */ /* image: the figure, the photograph and its caption, credit and product label. Moved from the frozen Reykjavik stylesheets (article.css and site.py EXTRA_CSS at tag reykjavik-frozen-2026-09-14) by tools/cssowners.py; comments as they were. Colours, shadows and corner radii read theme tokens (tokens.reference.css holds Reykjavik's). */ /* ==== from article.css ==== */ /* Figures break out of the prose measure to the same width as the comparison block, so photographs, pairs and galleries all line up on one edge instead of each finding their own. Same mechanism: `.art-in` is page-centred, so 50% of it is the page centre, and a -50% translate re-centres the wider element without 100vw and the scrollbar overflow that comes with it. Captions stay at the measure - they are prose and a 1180px line is unreadable. */ .fig{margin:1.9em 0} @media(min-width:1280px){ .fig{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)} .fig figcaption,.fig .galtitle{max-width:var(--measure);margin-left:auto;margin-right:auto} } .fig img{width:100%;height:auto;display:block;border-radius:var(--radius-card)} /* A photograph that sells (render.py _fig_link): the whole picture is the link, and a label on it carries the product, the price, the rating and the call to action. The article's link rule weighs (0,3,1), hence `.art-in .fig.figlink a`. No transition: the hover answers at once. */ .fig.figlink a{display:block;position:relative;border-radius:var(--radius-card);overflow:hidden} .art-in .fig.figlink a:not(.cta){color:var(--on-photo);text-decoration:none;border-bottom:0} .fig.figlink a:hover img,.fig.figlink a:focus-visible img{filter:brightness(1.05)} .fig.figlink a:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .fig .fig-cta{position:absolute;left:18px;bottom:18px;display:grid;gap:4px;max-width:min(440px,70%); padding:13px 16px 14px;border-radius:var(--radius-card);background:var(--photo-label-bg);color:var(--on-photo); box-shadow:var(--photo-label-shadow)} .fig .fig-n{font-size:18px;font-weight:750;line-height:1.2} .fig .fig-m{font-size:14px;line-height:1.35;color:var(--photo-label-meta)} .fig .fig-m b{color:var(--on-photo)} .fig .fig-m i{font-style:normal;color:var(--star-fill)} .fig .fig-go{justify-self:start;margin-top:6px;padding:8px 14px;border-radius:var(--radius-photo-button); background:var(--cta);color:var(--cta-ink);font-size:15px;font-weight:700} .fig.figlink a:hover .fig-go{background:var(--cta-hover)} /* Below 900px the label would run into the caption in the lower right, so the caption goes; the label is what earns the space. */ @media (max-width:900px){.fig.figlink .pcap{display:none} } @media (max-width:640px){ .fig .fig-cta{left:10px;right:10px;bottom:10px;max-width:none;padding:10px 12px 11px} .fig .fig-n{font-size:16px} } .fig figcaption{font-size:16px;color:var(--ink-soft);margin-top:10px;line-height:1.5} /* Caption as a panel on the picture, bottom right. `.fig > .pic` is a direct child only on a single-image block: an image-pair nests its pictures in `.pair` and a gallery in `.gal > div`, and both of those caption each tile separately. So this selector reaches the 254 single images and nothing else, without needing a new class in the markup. The panel carries its own contrast rather than trusting the photograph underneath. A caption over the King's Chamber and one over a noon sky cannot both rely on a text shadow, and these captions carry real information - "Woran man die amtliche Seite erkennt: ..." is the point of its picture, not a label for it. Backdrop blur is an enhancement; the 74% ground alone already clears contrast on any image. The credit moves to the left on these figures, because it used to sit exactly where the panel now is. */ .fig{position:relative} .fig > .pic + figcaption{ position:absolute;right:14px;bottom:14px;left:auto;margin:0; max-width:min(46ch,calc(100% - 28px)); padding:11px 14px;border-radius:var(--radius-caption); background:var(--caption-panel-bg); -webkit-backdrop-filter:blur(7px) saturate(1.15); backdrop-filter:blur(7px) saturate(1.15); color:var(--caption-panel-ink);font-size:14.5px;line-height:1.45;text-wrap:pretty; box-shadow:var(--caption-panel-shadow)} .fig > .pic .credit{left:10px;right:auto} /* ==== from site.py EXTRA_CSS ==== */ .pic{position:relative} .pic img{display:block;width:100%;height:auto;border-radius:var(--radius-photo)} /* The caption, set into the lower right of the plate. Restraint is the whole effect: small, letter-spaced, near-white, and carried on a gradient that only darkens the corner it sits in rather than a box drawn around the words. A panel would look like a UI label; this looks like a caption a picture editor set. */ .pic{isolation:isolate} .pic .pcap{position:absolute;right:0;bottom:0;left:0;pointer-events:none; display:flex;justify-content:flex-end; padding:46px 13px 12px;border-radius:0 0 var(--radius-photo) var(--radius-photo); background:var(--caption-scrim); color:var(--caption-ink);font-size:16px;font-weight:400;letter-spacing:.045em; line-height:1.35;text-align:right;text-shadow:var(--caption-shadow)} .pic .credit{position:absolute;right:8px;bottom:8px;background:var(--credit-bg); color:var(--on-photo);font-size:11.5px;padding:3px 7px;border-radius:var(--radius-credit);backdrop-filter:blur(3px)} /* When both are present the credit sits above the caption rather than on top of it. */ .pic .pcap:not(:empty) ~ .credit{bottom:34px} /* `.art-in a:not(.cta):not(.cta2)` (0,3,1) painted the credit link bay blue on the dark plate - 1.1:1 on the weather page. Needs the article class to win. */ .pic .credit a,.art-in .pic .credit a{color:var(--on-photo);text-decoration:none} .ph-img{aspect-ratio:3/2;background:var(--paper-sunk);border-radius:var(--radius-photo)} .ph-img.mini{aspect-ratio:1} @media (max-width:900px){ .fig img{aspect-ratio:4/5;object-fit:cover} .fig > .pic + figcaption{ position:static;max-width:none;margin-top:10px;padding:0;border-radius:0; background:none;-webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:none;color:var(--ink-soft);font-size:16px;line-height:1.5} .fig > .pic .credit{right:8px;left:auto} } .stand{margin:2.4em 0 0;padding:16px 20px;background:var(--paper-sunk);border:1px solid var(--rule); border-radius:var(--radius-card);display:flex;gap:13px;align-items:flex-start} .stand svg{width:19px;height:19px;flex:none;color:var(--teal);margin-top:2px} .stand div{font-size:16px;line-height:1.5;color:var(--ink-soft)} .stand b{color:var(--ink);display:block;margin-bottom:2px} /* offer-card: redesigned by the owner */ /* offer-card: one product with its photo slider, rating, benefits, price and button. Moved from the frozen Reykjavik stylesheets (tools/article.css and site.py EXTRA_CSS at tag reykjavik-frozen-2026-09-14) by tools/cssowners.py; comments are the originals. Parameterised: colours, shadows and corner radii read theme tokens (contract.yaml `tokens`; Reykjavik's values in tokens.reference.css and library/theme/reference.css). Mobile rules are written `body[data-w=mobile] X`, as the source was; the bundler lifts them into @media (max-width:900px). Depends on shared primitives this file does not define: .partner, .cta, .price, .price b, .price.sm (article.css, home.css), and the .mc carousel component (tour-gallery, carousel.css). */ /* ==== from article.css ==== */ .offer{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card); padding:18px;margin:1.9em 0;display:grid;grid-template-columns:140px 1fr;gap:20px} .offer.noimg{grid-template-columns:1fr} /* Shape only, through the component's own variable. This used to restate width, height, object-fit and aspect-ratio, which merely duplicated carousel.css, and a border-radius that carousel.css does NOT override - so every slide was rounded inside an already-rounded frame. */ .offer .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .offer h3{font-size:19.5px;margin:6px 0 0;letter-spacing:-.018em;line-height:1.3} .rate{display:inline-flex;align-items:center;gap:6px;font-size:15px;white-space:nowrap} .rate b{color:var(--rate-score);font-weight:700} /* the score is text: 4.9:1 on sunk (#B4740A was 3.48:1) */ /* was `.rate s` - the strikethrough element, chosen by accident and then hidden with text-decoration:none. `i` carries no such meaning and needs no undoing. */ .rate i{color:var(--ink-faint);font-style:normal;font-size:14px} .bene{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:8px} .bene li{display:flex;gap:9px;font-size:16px;line-height:1.45;color:var(--ink-soft)} .bene svg{width:16px;height:16px;flex:none;color:var(--teal);margin-top:3px} /* `1fr auto` gave the button its max-content width, and `.cta` is white-space:nowrap, so a long German label - 201 of the 311 on this site run past 34 characters - took the whole row and squeezed the price hint into one word per line. `fit-content(58%)` caps the button's share so it wraps to two lines instead of starving the text beside it, and the label is allowed to wrap at all. */ .buy{display:grid;grid-template-columns:minmax(0,1fr) fit-content(58%);align-items:center; gap:16px;margin-top:16px;padding-top:15px;border-top:1px solid var(--rule-soft)} .buy .cta{white-space:normal;text-align:center;line-height:1.25} /* A commercial card is one target. The button stays the visible affordance, but the whole card carries the click: the CTA is stretched over the card by a pseudo-element rather than by wrapping the card in an anchor, which would nest the rating's tooltip and any prose link inside a link. Everything that must stay separately clickable is lifted above it. */ .offer{position:relative} .offer .cta::after{ content:"";position:absolute;inset:0;z-index:1} .offer:hover{border-color:var(--accent)} .offer{transition:border-color .12s ease,box-shadow .12s ease} .offer:hover{box-shadow:var(--shadow-hover)} /* The button must NOT be positioned. `inset:0` on its own ::after resolves against the nearest positioned ancestor, so `position:relative` here made the overlay the size of the button - 162x41 on #b15 - and the card was never clickable outside it. The anchor stays clickable without lifting: the overlay is its own pseudo-element, and it is transparent, so nothing needs to paint above it. */ .offer .cta{z-index:2} .offer{cursor:pointer} .offer a{cursor:pointer} /* The carousel's arrows and dots keep their own clicks. The track does not need lifting: a drag is suppressed in script, and the picture itself stays part of the card so clicking it opens the offer. */ .offer .mc-arrow,.offer .mc-dots{z-index:3} /* --- Directory item pages: the offer block in the compact card's language --------- #b15 on the homepage is the shape the owner wants, at the larger scale a page whose whole job is one product deserves: the sunk paper ground, a square thumbnail with the rating stacked beneath it, eyebrow-title-bullets in the middle, and price, amber button and feature line on the right. The markup nests everything but the thumbnail in one wrapper, so `display:contents` promotes those children to grid items and the card becomes three columns like .compact. */ .offer{background:var(--paper-sunk); grid-template-columns:150px minmax(0,1fr) minmax(152px,204px); /* Explicit rows, or `grid-row:1/-1` below resolves against an empty explicit grid and spans one row: the thumbnail took the whole first row and the button sat level with the eyebrow instead of centred against the card. */ grid-template-rows:auto auto; gap:18px 22px;padding:20px;align-items:center;border-radius:var(--radius-offer)} .offer > div:not(.othumb){display:contents} /* render.py moves .rate inside .othumb so the media column is one stack like .cmedia. Two grid items in different parents cannot do this: the row holding the image would set its height from the image and leave the title floating a hundred pixels above the bullets. Spanning both text rows keeps the stack centred against them. */ .offer .othumb{grid-column:1;grid-row:1/-1;align-self:center; display:flex;flex-direction:column;align-items:center;gap:9px} .offer .othumb .mc{--ar:1/1;width:150px} .offer .othumb .mc,.offer .othumb>img{border-radius:var(--radius-offer-thumb)} .offer .othumb>img{width:150px;height:150px;object-fit:cover;display:block} /* 150px cannot hold "(3,733 reviews)" on one line, and .rate is nowrap by default. */ .offer .othumb .rate{max-width:150px;flex-wrap:wrap;justify-content:center; white-space:normal;text-align:center;gap:5px;font-size:14px;line-height:1.3} .offer .othumb .rate i{font-size:13px} /* Hotels: the score sits under the button instead of under the photo. */ .offer .buy .rate{justify-content:center;flex-wrap:wrap;white-space:normal; text-align:center;gap:5px;font-size:14px;line-height:1.3} .offer .buy .rate i{font-size:13px} /* A bounded buy column, not fit-content: the CTA is nowrap, so fit-content let it claim 501 of the 720px and collapsed the title column to zero. The base .buy is a footer strip under a full-width card - here it is a side column, so its top rule, top margin and two-column grid all have to go. */ .offer .top{grid-column:2;align-self:end;display:block} .offer .bene{grid-column:2;align-self:start;margin:0} .offer .buy{grid-column:3;grid-row:1/-1;display:flex;flex-direction:column; align-items:stretch;justify-content:center;gap:11px;text-align:center; margin:0;padding:0;border-top:0} /* The label wraps (owner, 2026-09-15, decision 1a: fix the overflow). `nowrap` here let the 31-44 character labels of the editorial cards run out of the 152-180px column and off the card. The column is 24px wider than the reference's 180px so a short label ("Check availability", "Ver disponibilidade") still sits on one line. */ .offer .buy .cta{white-space:normal;text-wrap:balance;overflow-wrap:break-word;line-height:1.25; height:auto;text-align:center;justify-content:center;padding-inline:12px} .offer .buy .price{text-align:center} /* Larger than the 82px compact card: h3 not h4, and a price that carries the page. */ .offer h3{font-size:21px;line-height:1.25;letter-spacing:-.018em;margin:0} .offer .bene{font-size:15px} .offer .bene li{font-size:15px} .offer .price b{font-size:24px} /* No thumbnail: the same card minus its first column. */ .offer.noimg{grid-template-columns:minmax(0,1fr) minmax(152px,204px)} .offer.noimg .top,.offer.noimg .bene{grid-column:1} .offer.noimg .buy{grid-column:2} @media(max-width:760px){ /* minmax(0,1fr), not 1fr: a grid item defaults to min-width:auto, so the carousel image's intrinsic width pushed the column to 473px inside a 390px screen. */ .offer,.offer.noimg{grid-template-columns:minmax(0,1fr);grid-template-rows:none; gap:14px;padding:16px} .offer .othumb,.offer .top,.offer .bene,.offer .buy{grid-column:1;grid-row:auto;min-width:0} /* One column wide: the thumbnail goes back to a 16/9 banner and the rating sits under its left edge rather than centred in a column that no longer exists. */ .offer .othumb{align-items:stretch;gap:8px} .offer .othumb .mc{width:auto;--ar:16/9} .offer .othumb>img{width:100%;height:auto;aspect-ratio:16/9} .offer .othumb .rate{max-width:none;justify-content:flex-start;text-align:left} .offer .buy{align-items:stretch} .offer h3{font-size:19px} } /* ==== from site.py EXTRA_CSS ==== */ /* carousel.css owns the component. Only the things that are actually different about a tour thumbnail belong here - a square crop and a tighter radius. The track, the dots and the arrows were duplicated here once, and the copy set `left:0;right:0` on the dots while leaving carousel.css's `transform:translateX(-50%)` in force, which shoved them off to the left. */ .othumb .mc{border-radius:var(--radius-othumb);--ar:1} /* A card that names its own picture puts a bare here, with no carousel around it. The old `.othumb img` rule was removed when the carousel took over sizing, so that image had nothing constraining it and rendered at its natural width, bursting the 140px column. Direct child only, so it cannot reach the carousel slides, which carousel.css already sizes. */ .othumb>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover; border-radius:var(--radius-othumb)} @media (max-width:900px){ .offer{grid-template-columns:1fr;padding:14px} .othumb .mc{--ar:16/9} .othumb>img{aspect-ratio:16/9} .offer h3{font-size:18px} .bene li{font-size:15.5px} .buy{grid-template-columns:1fr;align-items:stretch;gap:12px} .buy .cta{width:100%;justify-content:center;white-space:normal;text-align:center; padding-inline:16px} } .price{white-space:nowrap} .price b{white-space:nowrap;display:block} .price.sm{font-size:15px;white-space:normal} .price.sm .ab{font-size:.78em;color:var(--ink-faint);font-weight:400} .price.sm b{display:inline;color:var(--accent);font-size:1.16em;font-weight:800; letter-spacing:-.01em;font-variant-numeric:tabular-nums} .cta.sm{padding:11px 18px;font-size:15.5px;border-radius:var(--radius-cta-sm);box-shadow:none;white-space:nowrap} .compact{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-card); padding:14px;margin:1.8em 0;display:grid; grid-template-columns:82px minmax(0,1fr) fit-content(46%);gap:16px;align-items:center} .compact img{width:82px;height:82px;object-fit:cover;border-radius:var(--radius-thumb);display:block} .compact > .cmedia,.compact > .side{display:flex;flex-direction:column;align-items:center;gap:8px} .compact > .side{justify-content:center} .compact .cfeat{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.25;color:var(--ink-soft);white-space:nowrap} .compact .cfeat svg{width:14px;height:14px;flex:none} .compact .cfeat.ok svg{color:var(--ok)} .compact .cfeat.am svg{color:var(--star-fill)} .compact .cfeat.nu svg{color:var(--accent)} .compact.noimg{grid-template-columns:minmax(0,1fr) fit-content(46%)} .compact h4{font-size:17px;margin:4px 0 3px;letter-spacing:-.015em;line-height:1.3} .compact .cproof{display:block;font-size:13.5px;line-height:1.35;color:var(--ink-soft); margin:0 0 4px;font-variant-numeric:tabular-nums} .compact .cproof b{color:var(--ink);font-weight:700} .compact .cproof i{font-style:normal;color:var(--star-fill)} .compact p{font-size:15.5px!important;color:var(--ink-soft);margin:0!important;line-height:1.45} .compact .side{display:flex;align-items:center;gap:13px;min-width:0} .compact .side .cta{white-space:normal;text-align:center;line-height:1.25} .compact > .cmedia{align-items:flex-start} .compact .crate{font-size:13px} /* offer-comparison: redesigned by the owner */ /* offer-comparison: two to four products side by side, each with photo, badge, duration, inclusions, who it suits, price and button. Moved from the frozen Reykjavik stylesheet (tools/article.css at tag reykjavik-frozen-2026-09-14) by tools/cssowners.py; comments are the originals. Parameterised: colours, shadows and corner radii read theme tokens (contract.yaml `tokens`). One change of spelling, not of value: `var(--cta-hover,#B25309)` lost its fallback, which never applied because the token is always defined. Mobile rules are written `body[data-w=mobile] X`, as the source was; the bundler lifts them into @media (max-width:900px). Depends on shared primitives this file does not define: .cta, .cta.sm, .price, .price.sm (article.css, home.css). viator-transfers prints the same .cmp/.opt markup and depends on these rules. */ /* ==== from article.css ==== */ .cmp{margin:1.9em 0} .cmp>p{font-size:16.5px;color:var(--ink-soft)} /* The comparison block breaks out of the prose measure. 13 of the 18 of these carry three options and the grid was hard-coded to two columns, so they rendered 2 + 1 with an orphan on its own row - the worst possible shape for the block whose whole job is putting choices side by side. 660px of measure cannot hold three cards, so the block leaves the measure instead. `.art-in` is centred on the page, so 50% of it IS the page centre: margin-left:50% with a -50% translate re-centres the wider block without needing 100vw, which would have added a scrollbar's width of horizontal overflow on any platform that still draws a classic one. The intro paragraph keeps the measure - it is prose. */ .cmp .grid{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:760px){ /* two options fit inside the measure; three do not */ .cmp .grid:not(:has(>:nth-child(3))){grid-template-columns:1fr 1fr} } @media(min-width:1280px){ .cmp{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)} .cmp>p{max-width:var(--measure);margin-inline:auto} .cmp .grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} } .opt{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card); overflow:hidden;display:flex;flex-direction:column} .opt.best{border-color:var(--cta);box-shadow:var(--shadow-opt-best)} .optwrap{position:relative} /* no photograph: the same box, a quiet brand wash, so a row of cards keeps its shape */ .optwrap.nophoto{aspect-ratio:3/2;background: radial-gradient(120% 100% at 18% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--card)), var(--card)); border-bottom:1px solid var(--rule)} .opt img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block} /* The recommended option keeps the solid amber badge. The others get a quiet dark one: still a distinct claim, but it does not compete with the pick. */ .badge{display:inline-flex;align-items:center;gap:5px} .badge svg{width:13px;height:13px;flex:none} .badge.alt{background:var(--badge-alt-bg);color:var(--badge-alt-ink);backdrop-filter:blur(4px)} /* The flame keeps its own colour on the amber badge, where currentColor would make it disappear into the background. */ .badge:not(.alt) svg{color:var(--badge-flame)} /* Owner review 5 (2026-09-15): the pick's crown takes the badge text colour. */ .badge svg.crown{color:currentColor} .badge{position:absolute;top:10px;left:10px;background:var(--cta);color:var(--cta-ink);font-size:11px; font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-pill)} /* Same badge on a card with no image to sit on: it flows instead of floating. */ .optbadge{padding:15px 17px 0} .optbadge .badge{position:static;display:inline-block} .opt .in{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1} .opt h4{font-size:17.5px;margin:0 0 10px;letter-spacing:-.015em;line-height:1.3} .opt dl{margin:0 0 14px;display:grid;gap:7px;font-size:15px} .opt dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:700} .opt dd{margin:0;color:var(--ink-soft);line-height:1.42} /* Grid, not wrapping flex. `justify-content:space-between` with flex-wrap:wrap put the button on its own line the moment the price hint got long - "deutlich darüber, dafür ohne zweiten Anfahrtstag" wrapped and the CTA dropped below it, left-aligned, while the shorter cards beside it kept theirs on the right. Two columns: the hint takes what is left and wraps inside its own cell, the button is always the right column. */ .opt .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-soft); display:grid;grid-template-columns:minmax(0,1fr) fit-content(56%); align-items:center;gap:12px} /* ---- offer-comparison: facets to scan, not a paragraph to read ---- */ .opt .ometa,.opt .ofit{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px!important; font-size:15px;line-height:1.4;color:var(--ink-soft)} .opt .ometa svg,.opt .ofit svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ink-faint)} .opt .ometa{font-weight:700;color:var(--ink)} /* No margin-top:auto here - `.opt .foot` already claims the free space to stay pinned at the card's bottom, and two auto margins split it between them. */ .opt .ofit{padding-top:2px} .facets{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px} .facets li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.38} .facets svg{width:15px;height:15px;flex:none;margin-top:3px} /* Three states, three weights: what you get reads strongest, what costs extra sits between, what you do not get recedes without being hidden. */ .f-included{color:var(--ink)} .f-included svg{color:var(--teal)} .f-add_on{color:var(--ink-soft)} .f-add_on svg{color:var(--cta-hover)} .f-excluded{color:var(--ink-faint)} .f-excluded svg{color:var(--rule)} /* A named property's own amenities: each line has its own icon, so the eye can tell a pool from a rooftop restaurant without reading. */ .f-feature{color:var(--ink)} .f-feature svg{color:var(--teal)} .oinc{font-size:15px;line-height:1.45;color:var(--ink-soft);margin:0 0 14px!important} /* A commercial card is one target. The button stays the visible affordance, but the whole card carries the click: the CTA is stretched over the card by a pseudo-element rather than by wrapping the card in an anchor, which would nest the rating's tooltip and any prose link inside a link. Everything that must stay separately clickable is lifted above it. */ .opt{position:relative} .opt .cta::after{ content:"";position:absolute;inset:0;z-index:1} .opt:hover{border-color:var(--accent)} .opt{transition:border-color .12s ease,box-shadow .12s ease} .opt:hover{box-shadow:var(--shadow-opt-hover)} .opt.gold:hover{border-color:var(--opt-gold-border)} /* The button must NOT be positioned. `inset:0` on its own ::after resolves against the nearest positioned ancestor, so `position:relative` here made the overlay the size of the button - 162x41 on #b15 - and the card was never clickable outside it. The anchor stays clickable without lifting: the overlay is its own pseudo-element, and it is transparent, so nothing needs to paint above it. */ .opt .cta{z-index:2} .opt{cursor:pointer} .opt a{cursor:pointer} /* The carousel's arrows and dots keep their own clicks. The track does not need lifting: a drag is suppressed in script, and the picture itself stays part of the card so clicking it opens the offer. */ .opt .mc-arrow,.opt .mc-dots{z-index:3} @media (max-width:900px){ .cmp .grid{grid-template-columns:1fr} .opt .foot .cta{white-space:nowrap} } .faq{margin:2.6em 0 0} .faq h2{font-size:var(--size-h2);letter-spacing:-.022em;margin:0 0 14px} .faq details{border-top:1px solid var(--rule)} .faq details:last-of-type{border-bottom:1px solid var(--rule)} .faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px; padding:15px 2px;cursor:pointer;font-weight:700;font-size:17px;line-height:1.4; list-style:none;color:var(--ink)} .faq summary::marker{display:none;content:""} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--accent)} .faq summary span{flex:1} .faq .chev{width:19px;height:19px;flex:none;margin-top:3px;color:var(--ink-faint); transition:transform .18s ease} .faq details[open] .chev{transform:rotate(180deg)} .faq .a{margin:0 0 17px;padding-right:36px;font-size:16.5px;line-height:1.6; color:var(--ink-soft)} .chk{list-style:none;margin:0;padding:0;display:grid;gap:9px} .chk li{display:flex;gap:10px;font-size:16.5px;line-height:1.5;color:var(--ink-soft)} .chk svg{width:16px;height:16px;flex:none;color:var(--teal);margin-top:4px} .take{margin:15px 0 0!important;font-size:15.5px;line-height:1.5;color:var(--ink)} .art-in h2.ah{ font-size:var(--size-h2);font-weight:var(--weight-head);letter-spacing:-.022em; line-height:1.22;color:var(--ink);margin:2.15em 0 .5em;padding:0;border:0; background:none;text-wrap:balance;position:relative} .art-in h2.ah > span{background:var(--mark-band) 0 96%/100% .66em no-repeat; -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .14em;margin:0 -.14em; transition:background-size .9s cubic-bezier(.3,.7,.2,1)} .art-in h2.ah::before{ content:"";position:absolute;left:-1.02em;top:-.62em;width:1.15em;height:1.15em; background:var(--mark-sparks) center/contain no-repeat;transform-origin:100% 100%; transition:transform .45s cubic-bezier(.3,1.6,.5,1) .5s,opacity .2s .5s} .art-in h2.ah.ah-wait > span{background-size:0% .66em} .art-in h2.ah.ah-wait::before{transform:scale(.3);opacity:0;transition:none} .art-in h2.ah:first-child{margin-top:1.1em} @media (max-width:640px){.art-in h2.ah::before,.art-in h2.ah.ah-wait::before{content:none;display:none} } /* tour-list: redesigned by the owner */ /* tour-list. Moved from the frozen Reykjavik build, tools/article.css at tag reykjavik-frozen-2026-09-14 ("Tourverzeichnis": the .trl card list and the .tlist frame). Comments as they were. Every colour and radius is a token (contract.yaml `tokens`): the row's 14px corner is the site-wide --radius-card, the photo's 10px corner is this block's own --radius-trl-pic (tokens.reference.css). Mobile rules are written `body[data-w=mobile] X`, as the source was; the bundler lifts them into @media (max-width:900px) (site.py desktop_and_mobile(), L2544). tour-related prints the same list and depends on these rules. The box is the shared .blk frame (article.css L18-24), and the price and button are the shared .price.sm and .cta.sm primitives; none of those are defined here. */ /* ------------------------------------------------------------------ Tourverzeichnis Zwei Bloecke: `tour-list` (Angebote einer Kategorie oder eines Ortes) und `place-facts` (die belegten Kennzahlen eines Ortes). Die Faktentabelle borgt sich .tw/.stack/.srow von `table` und braucht deshalb nur zwei eigene Regeln; die Tourliste ist eine Zeile statt einer Karte, weil vierzig Angebote nebeneinander nicht vergleichbar sind und untereinander schon. */ .trl{list-style:none;margin:0;padding:0;display:grid;gap:var(--tl-row-gap,12px)} .trl-i{display:grid;grid-template-columns:var(--tl-thumb,152px) 1fr auto;gap:16px;align-items:start; background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-card);padding:12px} .trl-pic{display:block;border-radius:var(--radius-trl-pic);overflow:hidden;line-height:0} .trl-pic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block} .trl-b{min-width:0} .trl-b h4{font-size:17px;margin:0 0 6px;letter-spacing:-.015em;line-height:1.32} /* Der Kartentitel ist ein Link und darf trotzdem nicht wie einer aussehen: acht unterstrichene Zeilen in Rost wuerden die Liste in ein Linkverzeichnis verwandeln und mit dem Knopf um dieselbe Aufmerksamkeit streiten. Die Ausnahmen im Selektor spiegeln die Artikelregel, weil sie sonst spezifischer bleibt als diese hier. */ .art-in .trl-b h4 a:not(.cta):not(.cta2){color:var(--ink);text-decoration:none} .art-in .trl-b h4 a:not(.cta):not(.cta2):hover{text-decoration:underline; text-underline-offset:2.5px;text-decoration-color:var(--rule)} .trl-m{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 6px;font-size:14.5px; color:var(--ink-faint)} .trl-m span+span::before{content:"·";margin-right:14px;color:var(--rule)} .trl-r{margin:0 0 9px;display:flex;align-items:baseline;gap:7px;font-size:15px} /* Die Note traegt einen Stern als Zeichen, nicht als Bild: eine Reihe von fuenf Sternen behauptet eine Genauigkeit, die eine Kommazahl schon hat. */ .trl-r b{color:var(--ink);font-weight:800} .trl-r b::before{content:"\2605";color:var(--cta);margin-right:5px;font-weight:400} .trl-r em{font-style:normal;color:var(--ink-faint);font-size:14px} /* Unter der Qualitaetsschwelle des Projekts: nicht versteckt, aber auch nicht hervorgehoben. Die Zahl steht da, damit der Leser sie einordnen kann. */ .trl-r.thin b,.trl-r.thin em{color:var(--ink-faint);font-weight:600} .trl-r.thin b::before{color:var(--rule)} .trl-f{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px; font-size:14px;color:var(--ink-soft)} .trl-f li{display:flex;align-items:center;gap:5px} .trl-f svg{width:13px;height:13px;flex:none;color:var(--teal)} .trl-p{display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding-left:4px} .trl-p .price.sm{text-align:right} .tlist .foot{line-height:1.5} /* ------------------------------------------------------------------ filters and "show more" Owner, review 2026-09-15: the first five rows, a full-width button for five more, and three filters before the first row - price, rating, reviews - open on a desktop, folded on a phone. The filter rows borrow the tour finder's look (library/blocks/tour-finder: .ffilters, .fgrid, .rlab, .pills, .pill, .fsel), restated here for this list so neither block's rules depend on the other. The sizes a lab tunes are custom properties with the chosen defaults (contract.yaml `lab`, `local_tokens`). */ .tlist .trl-i[hidden]{display:none} .tlist .tl-filters{margin:0 0 var(--tl-filter-gap,14px)} .tlist .tl-filters>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:default; margin:0 0 10px;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--ink)} .tlist .tl-filters>summary::-webkit-details-marker{display:none} .tlist .tl-filters>summary .ffic{width:18px;height:18px;flex:none;color:var(--accent)} .tlist .tl-filters>summary .chev{display:none} .tlist .tl-fgrid{display:grid;grid-template-columns:auto 1fr;gap:var(--tl-filter-rowgap,14px) 18px;align-items:center; padding:var(--tl-filter-pad,14px) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .tlist .rlab{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)} .tlist .pills{display:flex;flex-wrap:wrap;gap:8px} .tlist .pill{font:inherit;font-size:15px;font-weight:600;cursor:pointer;border:1px solid var(--rule); background:var(--card);color:var(--ink);border-radius:var(--radius-pill);padding:7px 14px; display:inline-flex;align-items:center;gap:5px;transition:background .13s,border-color .13s,color .13s} .tlist .pill b{font-weight:inherit} .tlist .pill:hover{border-color:var(--finder-pill-hover)} .tlist .pill[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--finder-on-accent)} .tlist .pill:focus-visible,.tlist .tl-more:focus-visible,.tlist .tl-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .tlist .fsel{display:none} .tlist .tl-more{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--tl-more-h,48px); margin:var(--tl-row-gap,12px) 0 0;border:1px solid var(--rule);background:var(--paper-sunk);color:var(--ink); font:inherit;font-size:15.5px;font-weight:700;border-radius:var(--tl-more-radius,var(--radius-control));cursor:pointer} .tlist .tl-more:hover{border-color:var(--accent);color:var(--accent-ink)} .tlist .tl-more[hidden],.tlist .tl-empty[hidden]{display:none} .tlist .tl-empty{margin:12px 0 0;padding:14px 16px;background:var(--paper-sunk);border-radius:var(--radius-card); color:var(--ink-soft)} .tlist .tl-reset{font:inherit;font-weight:700;color:var(--accent);background:none;border:0;padding:6px 4px;cursor:pointer} @media(max-width:760px){ .tlist .tl-filters>summary{cursor:pointer;margin:0;padding:12px 0;border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);text-transform:none;letter-spacing:0;font-size:15px} .tlist .tl-filters>summary .chev{display:block;width:17px;height:17px;margin-left:auto;transition:transform .16s ease} .tlist .tl-filters[open]>summary .chev{transform:rotate(180deg)} .tlist .tl-fgrid{grid-template-columns:1fr;gap:10px;border-top:0} .tlist .rlab,.tlist .pills{display:none} .tlist .fsel{display:grid;gap:5px;position:relative} .tlist .fsel::after{content:"";position:absolute;right:16px;bottom:20px;width:8px;height:8px; border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);transform:rotate(45deg);pointer-events:none} .tlist .fsel>span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)} .tlist .fsel select{-webkit-appearance:none;appearance:none;width:100%;font:inherit;font-size:16px; color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-finder-button); padding:12px 40px 12px 13px} } @media (max-width:900px){ .trl-i{grid-template-columns:1fr;gap:11px;padding:11px} .trl-pic img{aspect-ratio:16/9} .trl-p{flex-direction:row;align-items:center; justify-content:space-between;padding:0;width:100%} } .pfn{display:block;font-size:14px;color:var(--ink-faint);line-height:1.45;margin-top:3px} .pf .pfq{font-size:14.5px;white-space:normal} .pf td:first-child{white-space:normal} /* place-stops: redesigned by the owner */ /* place-stops. Moved from the frozen Reykjavik build, tools/article.css at tag reykjavik-frozen-2026-09-14 ("Der Reiseverlauf als Leiste": .stpl, .stp and its parts). Comments as they were. Every colour and radius is a token (contract.yaml `tokens`): the dot's ring and fill and the linked stop name's underline were rgb()/rgba() of --accent-rgb and are this block's own --stops-dot and --stops-link-line now, still derived from the theme's --accent-rgb; the figure chip's 8px corner is --radius-stops-chip (tokens.reference.css). The 2px line cap and the round dot are geometry. Mobile rules are written `body[data-w=mobile] X`, as the source was; the bundler lifts them into @media (max-width:900px) (site.py desktop_and_mobile(), L2544). The box is the shared .blk frame; it is not defined here. */ /* Der Reiseverlauf als Leiste. Die Linie liegt hinter den Punkten und endet am letzten Punkt, nicht am Rand des Kastens: sonst zeigt der Tag ins Nichts weiter. Start und Rueckkehr sind gefuellte Punkte, die Halte dazwischen offene - die Unterscheidung traegt Bedeutung und ist nicht nur Zierde. */ .stpl{list-style:none;margin:0;padding:0;position:relative} .stpl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px; background:var(--rule);border-radius:2px} .stp{position:relative;padding:0 0 22px 34px} .stp:last-child{padding-bottom:0} .stp::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px; border-radius:50%;background:var(--paper);border:2.5px solid var(--stops-dot); box-sizing:border-box} .stp.end::before{background:var(--stops-dot)} .stp-b h4{font-size:18px;margin:0 0 3px;letter-spacing:-.012em;line-height:1.25} .art-in .stp-b h4 a{color:var(--ink);text-decoration:none; border-bottom:1px solid var(--stops-link-line)} .art-in .stp-b h4 a:hover{border-bottom-color:var(--stops-dot)} .stp-x{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.5} .stp-f{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .stp-f li{background:var(--paper-sunk);border-radius:var(--radius-stops-chip);padding:6px 11px;font-size:13.5px; color:var(--ink-soft);line-height:1.35;display:flex;align-items:baseline;gap:7px; flex-wrap:wrap;max-width:100%} /* The label wraps (owner, 2026-09-15, decision 1a: fix the overflow). With `nowrap` a label over about 26 characters ran past the chip on a 360px phone - the longest 91px. */ .stp-f b{color:var(--ink-faint);font-weight:700;font-size:11px;letter-spacing:.05em; text-transform:uppercase;white-space:normal;overflow-wrap:anywhere;min-width:0} .stp-v{color:var(--ink);font-weight:600} .stp-q{font-size:11.5px;color:var(--ink-faint);flex-basis:100%} .art-in .stp-q a{color:var(--ink-faint);text-decoration:none;border-bottom:1px dotted var(--rule)} @media (max-width:900px){ .stp{padding-left:28px} .stp-f li{width:100%} } .tgal{margin:1.9em 0} .mc-wide{--ar:16/10;border-radius:var(--radius-card);overflow:hidden; border:1px solid var(--rule)} .gcap{font-size:15px;color:var(--ink-faint);margin:9px 0 0;line-height:1.45} /* data-chart: redesigned by the owner */ /* data-chart. Moved from the frozen Reykjavik build, tools/article.css at tag reykjavik-frozen-2026-09-14 (L721-745 and the phone rules L799-806). Comments as they were (German, as they were). Every colour and corner is a token (contract.yaml `tokens`); the bars' 7px rounding is this block's --radius-chart-bar. The table under a chart is the table block's (.tw, table/th/td), the box the shared .blk frame, and `.take` the shared closing line (css_depends). Mobile rules keep the reference form body[data-w=mobile]. */ /* Balken. Eine Reihe, ein Farbton; der hervorgehobene Eintrag ist das Subjekt der Seite und nicht der groesste Wert - die Farbe folgt der Identitaet, nicht dem Rang. */ .chart .cbars{display:grid;gap:9px;margin:4px 0 2px} .cb{display:grid;grid-template-columns:minmax(120px,34%) 1fr auto;gap:12px;align-items:center; font-size:14.5px} .cbl{color:var(--ink-soft);line-height:1.35} .cbt{height:14px;background:var(--chart-track);border-radius:var(--radius-chart-bar);overflow:hidden} .cbf{display:block;height:100%;background:var(--chart-mute);border-radius:var(--radius-chart-bar)} .cb.on .cbf{background:var(--chart-warm)} .cb.on .cbl,.cb.on .cbv{color:var(--ink);font-weight:700} .cbv{font-variant-numeric:tabular-nums;color:var(--ink-soft);white-space:nowrap;min-width:62px; text-align:right} /* Linien. Zwei Reihen ueber zwoelf Monate, eine Achse, Punkte nur an den Extremwerten. */ .clegend{display:flex;flex-wrap:wrap;gap:16px;margin:2px 0 10px;font-size:14px; color:var(--ink-soft)} .clg{display:inline-flex;align-items:center;gap:7px} .clg i{width:14px;height:3px;border-radius:2px;display:inline-block} .cline{display:block;width:100%;height:auto} .cax{font-size:11.5px;fill:var(--ink-faint)} .cpt{font-size:12px;fill:var(--ink);font-weight:700} .cdata{margin-top:14px;border-top:1px solid var(--rule-soft);padding-top:11px} .cdata summary{font-size:14px;color:var(--ink-faint);cursor:pointer} .cdata[open] summary{margin-bottom:11px} .chart .take{font-size:16px;color:var(--ink-soft);margin:14px 0 0;line-height:1.5} @media (max-width:900px){ .cdata .tw{display:block;margin:0;padding:0} .cdata table{min-width:480px} .cb{grid-template-columns:1fr auto;grid-template-areas:"l v" "t t";gap:5px 10px} .cbl{grid-area:l} .cbv{grid-area:v} .cbt{grid-area:t} } /* tour-compare: redesigned by the owner */ /* tour-compare, redesigned by the owner (review 2026-09-15, three screenshots). Replaces the reference's .cmpt table rules as a group (tools/divergence.py). Every colour, font and corner is a theme token; the block's own sizes are the --cmpt-* variables below, tuned in the lab (python3.12 gallery/lab.py tour-compare). */ .cmpt{--cmpt-radius:var(--radius-card);--cmpt-gap:10px;--cmpt-photo-h:330px;--cmpt-lead-w:170px; --cmpt-badge-fs:12px;--cmpt-btn-h:52px; margin:34px 0;color:var(--ink)} .cmpt .cmpt-t{font-family:var(--font-head);font-size:28px;line-height:1.2;margin:0 0 16px;color:var(--ink)} .cmpt .cmpt-intro{margin:-6px 0 16px;color:var(--ink-soft)} .cmpt .cmpt-box{background:var(--card);border:1px solid var(--rule-soft);border-radius:var(--cmpt-radius); box-shadow:var(--shadow-card);padding:6px 6px 14px} /* the grid: a lead column and one column per product; rows take part in it */ .cmpt .cmpt-g{display:grid;grid-template-columns:var(--cmpt-lead-w) repeat(var(--n), minmax(0, 1fr)); column-gap:var(--cmpt-gap)} .cmpt .cmpt-r{display:contents} .cmpt:not(.open) .cmpt-x{display:none} /* owner, 2026-09-15 (preview): smaller words, with the arrow right under them */ .cmpt .cmpt-lead{position:relative;display:flex;flex-direction:column;justify-content:flex-end; padding:14px 12px 18px 12px;border-right:1px solid var(--rule-soft)} .cmpt .cmpt-pick{font-family:var(--font-head);font-size:16px;line-height:1.25;font-weight:700; color:var(--accent-ink);margin:0 0 6px} .cmpt .cmpt-line{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0} .cmpt .cmpt-arrow{position:static;align-self:flex-end;margin:4px -8px 0 0;width:84px;height:46px;color:var(--accent-ink)} /* links: .cmpt.cmpt outranks the article link rule (.art-in a:not(.cta):not(.cta2), 0-3-1) */ .cmpt.cmpt .cmpt-card > a[href]{position:relative;display:block;height:var(--cmpt-photo-h);border-radius:var(--cmpt-radius); overflow:hidden;background:var(--paper-sunk);color:var(--cmpt-on-photo);text-decoration:none} .cmpt .cmpt-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cmpt.cmpt .cmpt-card > a[href]::after{content:"";position:absolute;inset:0;background:var(--cmpt-scrim)} .cmpt.cmpt .cmpt-card > a[href]:hover img{transform:scale(1.03)} .cmpt .cmpt-card img{transition:transform .4s ease} .cmpt .cmpt-badge{position:absolute;z-index:2;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px; padding:6px 11px;border-radius:var(--radius-pill);font-size:var(--cmpt-badge-fs);font-weight:600;line-height:1; background:var(--cmpt-badge-bg);color:var(--cmpt-badge-ink)} .cmpt .cmpt-badge svg{width:15px;height:15px;flex:none} .cmpt .cmpt-badge.b-best{background:var(--cmpt-best-bg);color:var(--cmpt-best-ink);text-transform:uppercase; letter-spacing:.06em;font-weight:700} .cmpt .cmpt-badge.b-selling-fast svg{color:var(--cta)} .cmpt .cmpt-badge.b-well-liked svg,.cmpt .cmpt-badge.b-good-deal svg{color:var(--accent)} .cmpt .cmpt-cap{position:absolute;z-index:2;left:16px;right:14px;bottom:16px;display:flex;flex-direction:column;gap:6px} .cmpt .cmpt-name{font-size:17px;line-height:1.25;font-weight:600;text-shadow:var(--cmpt-photo-shadow)} .cmpt .cmpt-rate{display:flex;align-items:center;gap:8px;font-size:14px} .cmpt .cmpt-rate b{font-weight:600} .cmpt .cmpt-n{font-size:13.5px;font-weight:600;opacity:.95} .cmpt .cmpt-st{position:relative;display:inline-block;line-height:0} .cmpt .cmpt-st span{display:block;line-height:0} .cmpt .cmpt-st svg{display:block;width:84px;height:17px;max-width:none} .cmpt .cmpt-st-f{width:0} .cmpt .cmpt-st-e svg{fill:var(--cmpt-star-empty)} .cmpt .cmpt-st-f{position:absolute;top:0;left:0;overflow:hidden} .cmpt .cmpt-st-f svg{fill:var(--star)} /* the side-by-side rows */ .cmpt .cmpt-l,.cmpt .cmpt-x .cmpt-c{padding:14px 12px;border-top:1px solid var(--rule-soft);font-size:15px;line-height:1.5} .cmpt .cmpt-l{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-faint); border-right:1px solid var(--rule-soft)} .cmpt .cmpt-x .cmpt-c{color:var(--ink)} .cmpt .cmpt-x .cmpt-c.is-pick{background:var(--cmpt-pick-bg)} .cmpt .cmpt-none{color:var(--ink-faint)} .cmpt .cmpt-pros,.cmpt .cmpt-cons{list-style:none;margin:0;padding:0} .cmpt .cmpt-pros li,.cmpt .cmpt-cons li{position:relative;padding-left:20px;margin:0 0 6px} .cmpt .cmpt-pros li::before,.cmpt .cmpt-cons li::before{position:absolute;left:2px;top:0;font-weight:700} .cmpt .cmpt-pros li::before{content:"+";color:var(--cmpt-pro-mark)} .cmpt .cmpt-cons li::before{content:"–";color:var(--ink-faint)} /* buttons */ .cmpt .cmpt-btns .cmpt-c,.cmpt .cmpt-btns .cmpt-l{padding:14px 6px 4px;border-top:1px solid var(--rule-soft)} .cmpt .cmpt-btns .cmpt-l{border-top-color:var(--rule-soft)} .cmpt.cmpt a.cmpt-go[href],.cmpt.cmpt a.cmpt-see[href]{display:flex;align-items:center;justify-content:center;min-height:var(--cmpt-btn-h); padding:8px 14px;border-radius:var(--radius-control);font-size:16px;font-weight:600;text-align:center; text-decoration:none;line-height:1.2} .cmpt.cmpt a.cmpt-go[href]{background:var(--cta);color:var(--cta-ink);box-shadow:var(--cmpt-go-shadow)} .cmpt.cmpt a.cmpt-go[href]:hover{background:var(--cta-hover)} .cmpt.cmpt a.cmpt-see[href]{background:var(--cmpt-see-bg);color:var(--accent-ink)} .cmpt.cmpt a.cmpt-see[href]:hover{background:var(--cmpt-see-bg-hover)} /* the toggle */ .cmpt .cmpt-tog{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 24px); margin:14px 12px 0;min-height:64px;border:0;border-radius:var(--radius-control);background:var(--cmpt-tog-bg); color:var(--ink);font:inherit;font-size:17px;font-weight:500;cursor:pointer} .cmpt .cmpt-tog:hover{background:var(--cmpt-tog-bg-hover)} .cmpt .cmpt-tog svg{width:20px;height:20px;color:var(--accent-ink);transition:transform .2s ease} .cmpt.open .cmpt-tog svg{transform:rotate(180deg)} /* which one to book */ .cmpt .cmpt-book{margin-top:24px;background:var(--card);border:1px solid var(--rule-soft); border-radius:var(--cmpt-radius);box-shadow:var(--shadow-card);padding:26px 28px} .cmpt .cmpt-bk-h{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:16px;font-weight:700;color:var(--ink)} .cmpt .cmpt-bk-h svg{width:26px;height:26px;color:var(--accent-ink)} .cmpt .cmpt-bk-b{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px} .cmpt .cmpt-bk-lead{margin:0;font-size:19px;line-height:1.55;font-weight:600;color:var(--ink);hyphens:auto} .cmpt .cmpt-bk-more{margin:0;font-size:16px;line-height:1.75;color:var(--ink-soft)} .cmpt .cmpt-bk-more:empty{display:none} .cmpt .cmpt-foot{margin:14px 0 0;font-size:13.5px;color:var(--ink-faint)} /* the phone table, hidden on desktop */ .cmpt .cmpt-phone{display:none} .cmpt .cmpt-m{width:100%;min-width:0;table-layout:fixed;border-collapse:separate;border-spacing:0;background:var(--card); border:1px solid var(--rule);border-radius:var(--cmpt-radius);overflow:hidden;font-size:15px} .cmpt .cmpt-m thead th,.cmpt .cmpt-m thead td{padding:12px 8px;border-bottom:1px solid var(--rule-soft); font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);text-align:center} .cmpt .cmpt-m tbody th,.cmpt .cmpt-m tbody td{padding:14px 8px;border-bottom:1px solid var(--rule-soft); vertical-align:middle;text-align:center;color:var(--ink);font-weight:400;font-size:15px;text-transform:none; letter-spacing:0} .cmpt .cmpt-m thead td{width:38%} .cmpt .cmpt-m tbody th{overflow-wrap:anywhere;hyphens:auto} .cmpt .cmpt-m tbody tr:last-child th,.cmpt .cmpt-m tbody tr:last-child td{border-bottom:0} .cmpt .cmpt-m tbody th{text-align:left;font-weight:600;line-height:1.35;padding-left:14px} .cmpt.cmpt .cmpt-m tbody th a[href]{color:inherit;text-decoration:none} .cmpt .cmpt-m tr.is-pick th,.cmpt .cmpt-m tr.is-pick td{background:var(--cmpt-pick-bg)} .cmpt .cmpt-mb{display:flex;align-items:center;gap:5px;margin-bottom:3px;font-size:12px;letter-spacing:.07em; text-transform:uppercase;font-weight:600;color:var(--accent-ink)} .cmpt .cmpt-mb svg{display:none} .cmpt .cmpt-ms{display:block;white-space:nowrap} .cmpt .cmpt-ms::first-letter{color:var(--star)} .cmpt .cmpt-mn{display:block;font-size:13.5px;color:var(--ink-soft)} .cmpt .cmpt-mg svg{display:block;width:20px;height:20px;margin:0 auto 2px;color:var(--ink-soft)} .cmpt.cmpt a.cmpt-mgo[href]{margin-top:16px;width:100%;box-sizing:border-box;font-size:18px} @media (max-width:900px){ .cmpt .cmpt-t{font-size:23px} .cmpt .cmpt-box{display:none} .cmpt .cmpt-phone{display:block} .cmpt .cmpt-book{padding:20px} .cmpt .cmpt-bk-b{grid-template-columns:1fr} .cmpt .cmpt-bk-lead{font-size:17px} } @media (max-width:400px){ .cmpt .cmpt-m thead th,.cmpt .cmpt-m thead td{padding:10px 3px;font-size:10.5px;letter-spacing:.04em} .cmpt .cmpt-m tbody th,.cmpt .cmpt-m tbody td{padding:12px 4px;font-size:14px} .cmpt .cmpt-m tbody th{padding-left:10px} .cmpt .cmpt-mn{font-size:12.5px} } /* four photo columns do not fit the 660px text column: from 1100px the block breaks out of it, centred, as the reference table did (K0209) */ @media (min-width:1100px){ .cmpt{width:min(1180px, calc(100vw - 48px));max-width:none;margin-left:50%;transform:translateX(-50%)} } @media (max-width:900px){ } .sheet .dscsv{font-size:15px;color:var(--ink-soft);margin:0 0 14px} .dsx summary{font-size:16.5px;font-weight:700;cursor:pointer;padding:12px 15px; background:var(--paper-sunk);border-radius:var(--radius-sheet-toggle);color:var(--ink)} .dsx[open] summary{margin-bottom:14px} .ds{font-size:14.5px} .ds td{padding:9px 14px 9px 0;vertical-align:top} .ds td:first-child{font-weight:400;color:var(--ink-soft);width:34%} .ds td:nth-child(2){color:var(--ink);font-weight:700} .dsq{color:var(--ink-faint);font-size:13.5px} .art-in .dsq a{color:var(--ink-faint);text-decoration:none;border-bottom:1px dotted var(--rule)} tr.dsg th{background:var(--paper-sunk);color:var(--ink);font-size:12.5px;letter-spacing:.08em; text-transform:uppercase;padding:10px 14px;border-radius:var(--radius-sheet-group);position:relative} tr.dsg th i{font-style:normal;color:var(--ink-faint);font-weight:400;margin-left:8px} .rlist{list-style:none;margin:0;padding:0;display:grid;gap:11px;counter-reset:r} .rlist li{display:grid;grid-template-columns:26px 1fr;gap:11px;font-size:15px; color:var(--ink-soft);line-height:1.5} .rn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px; border-radius:50%;background:var(--paper-sunk);color:var(--ink-faint);font-size:12.5px; font-weight:700;margin-top:2px} .rdate{color:var(--ink-faint);white-space:nowrap} .rwhat{display:block;color:var(--ink-faint);font-size:14px;margin-top:2px} .hero h1.long{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.028em;line-height:1.08} body[data-kind=directory] .hero-t{max-width:52ch} .art-in b.cur{font-weight:560;font-variant-numeric:tabular-nums;white-space:nowrap} .art-in .cur-src{color:var(--ink-faint);font-size:.92em;white-space:nowrap} .art-in .finder a:not(.cta):not(.cta2){color:inherit;text-decoration:none;border-bottom:0} .finder{margin:2.4em 0} .finder .fin{--fpaper:var(--paper);background:var(--paper-sunk);border:1px solid var(--rule); border-radius:var(--radius-finder);padding:26px 24px 24px} .finder .eyebrow{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700; color:var(--accent);margin:0 0 8px} .finder .fh.fh-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .finder .fh{font-size:29px;font-weight:800;letter-spacing:-.025em;line-height:1.13;margin:0 0 7px; text-wrap:balance} .finder .flead{margin:0 0 20px;color:var(--ink-soft);font-size:16.5px;max-width:64ch} .finder .fgrid{display:grid;grid-template-columns:auto 1fr;gap:22px 18px;align-items:start; padding:19px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .finder .rlab{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.07em; text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin:6px 0 0} .finder .rlab svg{width:16px;height:16px;flex:none} .finder .pills{display:flex;flex-wrap:wrap;gap:8px} .finder .pill{font:inherit;font-size:15px;font-weight:600;cursor:pointer; border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:var(--radius-pill); padding:7px 14px;display:inline-flex;align-items:center;gap:7px;text-decoration:none; transition:background .13s,border-color .13s,color .13s} .finder .pill .pi{width:17px;height:17px;flex:none;opacity:.7} .finder .pill[aria-pressed=true] .pi{opacity:1} .finder .pill em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-faint); font-weight:500;font-size:13.5px} .finder .pill:hover:not([disabled]):not([aria-disabled=true]){border-color:var(--finder-pill-hover)} .finder .pill[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--finder-on-accent)} .art-in .finder .pills a.pill[aria-pressed=true]{color:var(--finder-on-accent)} .finder .pill[aria-pressed=true] em{color:var(--finder-on-accent-soft)} .finder .pill[disabled],.finder .pill[aria-disabled=true]{opacity:.3;cursor:not-allowed} .finder .tally{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:16px 0 14px} .finder .tally b{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1; font-variant-numeric:tabular-nums} .finder .tally span{color:var(--ink-soft);font-size:15px} .finder .reset{margin-left:auto;font-size:14px;color:var(--accent);background:none;border:0; font-family:inherit;font-weight:600;cursor:pointer;padding:12px 6px;margin:-12px -6px -12px auto} .finder .rail{position:relative;margin:0 -24px;padding:0 24px} .finder .fcards{display:grid;grid-auto-flow:column;grid-auto-columns:258px;gap:13px; overflow-x:auto;overflow-y:hidden;padding-bottom:12px;scroll-snap-type:x mandatory; scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} .finder .fcards::-webkit-scrollbar{height:0} .finder .fcards.sr-drag{scroll-snap-type:none} .finder .fcards.sr-grab{cursor:grabbing} .finder .fcards.sr-grab .fcard{pointer-events:none} @media (hover:none) and (pointer:coarse){.finder .rail:not(.grid) .fcard{scroll-snap-stop:always} }.finder .fcard{position:relative;display:block;text-decoration:none;color:var(--finder-card-ink);overflow:hidden; border-radius:var(--radius-finder-card);aspect-ratio:4/3;background:var(--finder-card-bg);scroll-snap-align:start; user-select:none;-webkit-user-drag:none} .finder .fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1);-webkit-user-drag:none;pointer-events:none} .finder .fcard:hover img{transform:scale(1.06)} .finder .fcard .shade{position:absolute;inset:0;background:var(--finder-card-shade)} .finder .fcard.nophoto{background: radial-gradient(120% 100% at 18% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--finder-card-bg)), var(--finder-card-bg))} .finder .fcard .fb{position:absolute;left:0;right:0;bottom:0;padding:13px 14px} .art-in .finder .fcard :is(h3,h4){margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.28; color:var(--finder-card-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .finder .fcard .fm{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--finder-card-meta); font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0;overflow:hidden} .finder .fcard .fm .thin{min-width:0;overflow:hidden;text-overflow:ellipsis} .finder .fcard .pr{flex:none} .finder .fcard .st{flex:none} .finder .fcard .sp{flex:1} .finder .fcard .dot{opacity:.45} .finder .fcard .st{color:var(--finder-card-star);font-weight:700} .finder .fcard .pr{font-weight:800;color:var(--finder-card-ink)} .finder .fcard .thin{color:var(--finder-card-thin);font-weight:500} .finder .fcard .flag{position:absolute;top:9px;left:9px;background:var(--finder-flag-bg); color:var(--finder-flag-ink);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; padding:4px 9px;border-radius:var(--radius-pill)} .finder .fnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px; height:40px;border-radius:var(--radius-pill);border:1px solid var(--rule);background:var(--finder-nav-bg); color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0; box-shadow:var(--finder-nav-shadow);transition:transform .12s} .finder .fnav:hover{transform:translateY(-50%) scale(1.07)} .finder .fnav svg{width:19px;height:19px} .finder .fnav[hidden]{display:none} .finder .fnav.prev{left:2px} .finder .fnav.next{right:2px} @media (hover:none){.finder .fnav{display:none} }.finder .rail:not(.grid){container-type:inline-size; --c-gap:24px;--c-visible:3.5;--c-radius:var(--radius-finder-rail);--c-bleed:25px} @media(max-width:1024px){.finder .rail:not(.grid){--c-visible:2.4} }@media(max-width:760px){.finder .rail:not(.grid){--c-visible:1.6;--c-gap:14px;--c-radius:var(--radius-finder-rail-sm);--c-bleed:17px} }@media(max-width:520px){.finder .rail:not(.grid){--c-visible:1.15;--c-gap:12px} }.finder .rail:not(.grid) .fcards{gap:var(--c-gap);padding:4px 0 14px; grid-auto-columns:min(30rem,calc((100cqw + 2 * var(--c-bleed) - (var(--c-visible) - 1) * var(--c-gap)) / var(--c-visible)))} .finder .rail:not(.grid) .fcard{aspect-ratio:.747/1;border-radius:var(--c-radius); display:flex;flex-direction:column;justify-content:flex-end; box-shadow:var(--finder-rail-shadow); transition:transform .28s cubic-bezier(.32,.72,0,1),box-shadow .28s cubic-bezier(.32,.72,0,1)} .finder .rail:not(.grid) .fcard:hover{transform:translateY(-3px); box-shadow:var(--finder-rail-shadow-hover)} .finder .rail:not(.grid) .fcard:hover img{transform:none} .finder .rail:not(.grid) .fcard .shade{display:none} .finder .rail:not(.grid) .fcard .fb{position:relative;z-index:1;padding:2.6rem 1.15rem 1.1rem; background:var(--finder-rail-scrim)} .art-in .finder .rail:not(.grid) .fcard :is(h3,h4){font-size:1.3rem;font-weight:700;line-height:1.15; letter-spacing:-.018em;text-wrap:balance;margin:2px 0 0;-webkit-line-clamp:3} .finder .rail:not(.grid) .fcard .fm{font-size:.9375rem;margin-top:8px;color:var(--finder-rail-meta)} .finder .rail:not(.grid) .fcard .thin{color:var(--finder-rail-thin)} .finder .rail:not(.grid) .fcard .flag{top:14px;left:14px;font-size:11.5px;padding:5px 11px} @media(max-width:520px){.finder .rail:not(.grid) .fcard .fm{flex-wrap:wrap;row-gap:4px;align-content:flex-start} .finder .rail:not(.grid) .fcard .fm .sp{display:none} .finder .rail:not(.grid) .fcard .fm .pr{flex-basis:100%} .art-in .finder .rail:not(.grid) .fcard :is(h3,h4){font-size:1.12rem} .finder .rail:not(.grid) .fcard .fb{padding:2.1rem .95rem .9rem} }.art-in .finder a.fgo:not(.cta){display:inline-flex;align-items:center;gap:9px;margin-top:16px; background:var(--accent);color:var(--finder-on-accent);text-decoration:none;font-weight:700;font-size:16px; padding:12px 21px;border-radius:var(--radius-finder-button);transition:background .14s} .art-in .finder a.fgo:not(.cta):hover{background:var(--accent-ink);color:var(--finder-on-accent)} .finder .fgo svg{width:19px;height:19px} .finder .fsub{margin:30px 0 12px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase; font-weight:700;color:var(--ink-soft);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .finder .fsub i{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none; color:var(--ink-faint);font-size:14px} .finder .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px} .finder .tile{position:relative;display:block;text-decoration:none;color:var(--finder-card-ink);overflow:hidden; border-radius:var(--radius-finder-tile);aspect-ratio:5/4;background:var(--finder-card-bg)} .finder .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)} .finder .tile:hover img{transform:scale(1.06)} .finder .tile .shade{position:absolute;inset:0;background:var(--finder-tile-shade)} .finder .tile .ti{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:var(--radius-finder-tile-icon); background:var(--finder-tile-icon-bg);display:grid;place-items:center} .finder .tile .ti svg{width:17px;height:17px} .finder .tile .tb{position:absolute;left:0;right:0;bottom:0;padding:11px 12px} .art-in .finder .tile :is(h3,h4){margin:0 0 3px;font-size:15px;font-weight:700;line-height:1.2;color:var(--finder-card-ink)} .finder .tile .m{font-size:12.5px;color:var(--finder-tile-meta);font-variant-numeric:tabular-nums} .finder .tile .m b{color:var(--finder-card-ink);font-weight:700} .finder .frest{margin:24px 0 0;padding-top:17px;border-top:1px solid var(--rule)} .finder .frest>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none; font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700; color:var(--ink-faint);padding:12px 0;margin:-10px 0} .finder .frest>summary::-webkit-details-marker{display:none} .finder .frest>summary:hover{color:var(--accent)} .finder .frest>summary svg{width:15px;height:15px;flex:none;transition:transform .16s ease} .finder .frest[open]>summary svg{transform:rotate(45deg)} .finder .fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:22px 30px;margin-top:18px} .finder .fcol :is(h3,h4,h5){margin:0 0 9px;font-size:13px;font-weight:700;color:var(--ink); letter-spacing:-.005em} .finder .fcol :is(h3,h4,h5){display:flex;align-items:center;gap:7px} .finder .fcol :is(h3,h4,h5) svg{width:15px;height:15px;flex:none;color:var(--accent)} .finder .fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:5px} .finder .fcol li{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:1.4} .finder .fcol li em{font-style:normal;color:var(--ink-faint);font-size:12.5px; margin-left:auto;flex:none} .art-in .finder .frest a:not(.cta){color:var(--ink-soft);text-decoration:none;border-bottom:0} .art-in .finder .frest a:not(.cta):hover{color:var(--accent)} .finder .fempty{padding:18px;border:1px dashed var(--rule);border-radius:var(--radius-finder-empty); color:var(--ink-soft);font-size:15.5px} @media(max-width:760px){.finder .fgrid{grid-template-columns:1fr} .finder .rlab{margin:2px 0 0} .finder .fh{font-size:24px} .finder .fin{padding:20px 16px 18px;border-radius:var(--radius-finder-sm)} .finder .rail{margin:0 -16px;padding:0 16px} .finder .tiles{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))} }@media(min-width:1280px){.art-in .htools{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)} .finder{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)} }.art-in .finder .tile :is(h3,h4){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;text-wrap:balance} .finder .tile .m{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .finder .tile .tb{padding-right:12px} @media(max-width:760px){.finder .tile{aspect-ratio:4/3} .art-in .finder .tile :is(h3,h4){font-size:14px;line-height:1.22} .finder .tile .m{font-size:11px;letter-spacing:-.01em} .finder .tile .m{font-size:10.5px} .finder .tile .tb{padding:9px 10px} .finder .tile .ti{width:26px;height:26px;border-radius:var(--radius-finder-tile-icon-sm);top:8px;left:8px} .finder .tile .ti svg{width:15px;height:15px} }.finder .fr-t{display:none} @media(max-width:760px){.finder .fsub{margin:22px 0 0;align-items:center;justify-content:space-between; flex-wrap:nowrap;gap:10px} .finder .fsub .fs-txt{min-width:0;display:block} .finder .fsub i{display:block;margin-top:3px} .finder .fin[data-collapsed] .fr-fold{display:none} .finder .fin:not([data-unfolded]) .tiles img{display:none} .finder .fr-fold{margin-top:12px} .finder .fr-t{display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;flex:none;border-radius:var(--radius-pill);border:1px solid var(--rule); background:var(--card);color:var(--ink);cursor:pointer;padding:0; transition:transform .18s ease,background .14s} .finder .fr-t svg{width:16px;height:16px} .finder .fr-t{position:relative} .finder .fr-t::after{content:"";position:absolute;inset:-7px} } /* map-leaflet: redesigned by the owner */ /* map-leaflet: the figure, its map stage, pins, popups, controls and the list of places. Moved from the frozen Reykjavik stylesheets (map.css and article.css at tag reykjavik-frozen-2026-09-14) by tools/cssowners.py; comments as they were. Colours, shadows and corner radii read theme tokens (tokens.reference.css holds Reykjavik's). The basemap itself (water, land, roads, labels) is drawn by behaviour.js from its own palette (SITE-CONFIG maps.flavor for another site). The four `font` shorthands of the reference are written as their longhands, so the family reads the theme token. */ /* ==== from article.css ==== */ /* map-leaflet: the legend is server-rendered and stands alone; the map fills in when the self-hosted Leaflet arrives. */ .maplf-map{height:420px;border-radius:var(--radius-card);background:var(--paper-sunk);border:1px solid var(--rule)} .maplf-map:empty::before{content:attr(data-fallback);display:block;padding:16px;color:var(--ink-faint);font-size:14px} .maplf-legend{margin:12px 0 0;padding-left:1.4em;font-size:15px;color:var(--ink-soft)} .maplf-legend li{margin:4px 0} .maplf-legend b{color:var(--ink)} .leaflet-container{font:inherit} .leaflet-popup-content{font-size:14px;line-height:1.45} /* ==== from map.css ==== *//* ---- maps (render_kit.py map_leaflet, tools/map.js) ------------------------------------- One stylesheet for the map block; nothing about .rmap lives anywhere else. The figure breaks out to the wide column like .fig. The list below the map is the whole content without scripts; with scripts it is the legend and its numbers find the pin. Link resets are written at (0,4,1) or more: the article rule .art-in a:not(.cta):not(.cta2) weighs (0,3,1) and would underline the zoom buttons and the attribution. */ .rmap{margin:2em 0;--rm-sight:var(--map-sight);--rm-museum:var(--map-museum);--rm-pool:var(--accent); --rm-transport:var(--ink);--rm-area:var(--teal);--rm-nature:var(--map-nature);--rm-town:var(--map-town); --rm-origin:var(--ink);--rm-hotel:var(--map-hotel)} @media(min-width:1280px){ .rmap{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)} } .rmap-cap{max-width:var(--measure);margin:0 auto 14px} .art-in .rmap .rmap-title{font-size:var(--size-h3);line-height:1.25;margin:0 0 6px;letter-spacing:var(--tracking-head)} .art-in .rmap .rmap-intro{margin:0;color:var(--ink-soft);font-size:var(--size-small);line-height:1.5} .art-in .rmap .rmap-foot{max-width:var(--measure);margin:12px auto 0;color:var(--ink-soft);font-size:var(--size-small);line-height:1.5} /* the stage exists only when scripts run: no empty grey box without them */ .rmap-stage{display:none;position:relative;height:440px;border-radius:var(--radius-card);overflow:hidden; border:1px solid var(--rule);background:var(--map-water)} .rmap-js .rmap-stage{display:block} .rmap-route .rmap-stage{height:500px} .rmap-city .rmap-stage{height:620px} .rmap-fail .rmap-stage{display:none} .rmap-canvas{position:absolute;inset:0} /* the site sizes every bare svg to 1em; Leaflet's vector layer sizes its own */ .rmap .leaflet-pane svg{width:auto;height:auto} .rmap .rmap-all svg{width:18px;height:18px} .rmap .leaflet-container{font-family:var(--font-body);font-size:14px;background:var(--map-water);outline-offset:-3px} .rmap .leaflet-container:focus-visible{outline:3px solid var(--accent)} .rmap-hint{position:absolute;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center; padding:24px;background:var(--map-hint-bg);color:var(--map-hint-ink);font-size:18px;font-weight:600;text-align:center; pointer-events:none} .rmap-hint[hidden]{display:none} /* pins: a numbered disc in the colour of its kind */ .rmap .rmap-pin{background:none;border:0} .rmap-pin span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%; background:var(--rm-sight);color:var(--map-pin-ink);font-style:normal;font-weight:700;font-size:13px;line-height:1;font-family:var(--font-body);border:2px solid var(--map-pin-ring); box-shadow:var(--map-pin-shadow);box-sizing:border-box} .rmap-pin:focus-visible{outline:none} .rmap-pin:focus-visible span{outline:3px solid var(--ink);outline-offset:2px} .rmap [data-k=museum]{--k:var(--rm-museum)} .rmap [data-k=sight]{--k:var(--rm-sight)} .rmap [data-k=pool]{--k:var(--rm-pool)} .rmap [data-k=transport]{--k:var(--rm-transport)} .rmap [data-k=area]{--k:var(--rm-area)} .rmap [data-k=nature]{--k:var(--rm-nature)} .rmap [data-k=town]{--k:var(--rm-town)} .rmap [data-k=origin]{--k:var(--rm-origin)} .rmap-pin span[data-k]{background:var(--k)} .rmap-pin span[data-k=area]{background:var(--map-pin-ring);color:var(--rm-area);border-color:var(--rm-area)} .rmap-pin span[data-k=origin]{border-radius:var(--radius-map-origin)} /* popups */ .rmap .leaflet-popup-content-wrapper{border-radius:var(--radius-map-popup);box-shadow:var(--map-popup-shadow)} .rmap .leaflet-popup-content{margin:12px 14px;font-size:15px;line-height:1.45;color:var(--ink)} .rmap-pop .rmap-name{display:block;font-size:16px;margin-bottom:2px} .rmap-pop .rmap-note{display:block;color:var(--ink-soft)} .rmap-pop .rmap-geo{display:block;margin-top:6px;font-size:13px;color:var(--ink-faint)} /* controls */ .art-in .rmap.rmap-js .leaflet-control a,.art-in .rmap.rmap-js .leaflet-control-attribution a{border-bottom:0;text-decoration:none} .art-in .rmap.rmap-js .leaflet-bar a{color:var(--ink);background:var(--map-control-bg);font-style:normal;font-weight:600;font-size:20px;line-height:30px;font-family:var(--font-body);width:34px;height:34px;line-height:32px} .art-in .rmap.rmap-js .leaflet-bar a:hover{background:var(--paper-sunk)} .art-in .rmap.rmap-js .leaflet-control-attribution{font-size:11px;background:var(--map-attribution-bg);color:var(--ink-soft)} .art-in .rmap.rmap-js .leaflet-control-attribution a{color:var(--ink-soft)} .art-in .rmap.rmap-js .leaflet-popup-close-button{color:var(--ink-soft);text-decoration:none;border-bottom:0;width:30px;height:30px;font-style:normal;font-weight:400;font-size:22px;line-height:30px;font-family:var(--font-body)} .rmap .leaflet-bar{border:1px solid var(--rule);box-shadow:var(--map-control-shadow)} .rmap-all{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:var(--map-control-bg); color:var(--ink);cursor:pointer;border-radius:var(--radius-map-control)} .rmap-all:hover{background:var(--paper-sunk)} .rmap-all:focus-visible,.rmap-hotels input:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .rmap-hotels{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--map-control-bg);border-radius:var(--radius-map-control); font-size:13.5px;color:var(--ink);cursor:pointer;margin-bottom:6px!important} .rmap-hotels i{width:10px;height:10px;border-radius:50%;background:var(--rm-hotel);border:1.5px solid var(--map-pin-ring); box-shadow:0 0 0 1px var(--rm-hotel)} /* the list: the whole content without scripts, the legend with them */ .rmap-legend{margin:16px auto 0} .rmap-legend ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px 22px} .rmap-grp{margin:0 0 18px} .art-in .rmap .rmap-grp h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--size-micro); text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)} .rmap-grp h4 i{width:12px;height:12px;border-radius:50%;background:var(--k)} .rmap-grp[data-k=area] h4 i{background:var(--map-pin-ring);border:2px solid var(--rm-area)} .rmap-i{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:15.5px;line-height:1.42} .rmap-legend .rmap-n{flex:0 0 26px;display:flex;align-items:center;justify-content:center;width:26px;height:26px; border-radius:50%;background:var(--k,var(--rm-sight));color:var(--map-pin-ink);font-style:normal;font-weight:700;font-size:12.5px;line-height:1;font-family:var(--font-body); border:0;padding:0;margin-top:1px} .rmap-legend .rmap-i[data-k=area] .rmap-n{background:var(--map-pin-ring);color:var(--rm-area);box-shadow:inset 0 0 0 2px var(--rm-area)} .rmap-legend button.rmap-n{cursor:pointer} .rmap-legend button.rmap-n:hover{box-shadow:0 0 0 3px var(--map-focus-halo)} .rmap-legend .rmap-i[data-k=area] button.rmap-n:hover{box-shadow:inset 0 0 0 2px var(--rm-area),0 0 0 3px var(--map-focus-halo)} .rmap-legend button.rmap-n:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .rmap-b{min-width:0} .rmap-name{color:var(--ink)} .rmap-note{color:var(--ink-soft)} .rmap-geo{display:block;font-size:13px;color:var(--ink-faint);margin-top:2px} .art-in .rmap .rmap-geo a.rmap-g{color:var(--ink-faint);text-decoration:underline;text-decoration-thickness:1px;border-bottom:0} .art-in .rmap .rmap-geo a.rmap-g:hover{color:var(--accent)} .rmap-js .rmap-legend .rmap-geo{display:none} .rmap-js .rmap-pop .rmap-geo{display:block} .rmap-fail .rmap-legend .rmap-geo{display:block} /* Legend pointing at its place (owner, 2026-09-15): the highlighted pin and its tooltip, and the legend entry being pointed at. */ .rmap-pin span{transition:transform .15s ease,box-shadow .15s ease} .rmap-pin.rmap-hi span{transform:scale(1.3);box-shadow:0 0 0 3px var(--map-pin-ring),0 0 0 6px var(--accent),var(--map-pin-shadow)} .rmap .leaflet-tooltip.rmap-tip{background:var(--card);color:var(--ink);border:0;border-radius:var(--radius-map-tip); box-shadow:var(--map-popup-shadow);padding:7px 10px;font-family:var(--font-body);font-size:14px;line-height:1.35; width:max-content;max-width:220px;white-space:normal} .rmap .leaflet-tooltip.rmap-tip b{display:block;color:var(--ink)} .rmap .leaflet-tooltip.rmap-tip span{display:block;color:var(--ink-soft);font-size:13px} .rmap .leaflet-tooltip-top.rmap-tip::before{border-top-color:var(--card)} .rmap .leaflet-tooltip-bottom.rmap-tip::before{border-bottom-color:var(--card)} .rmap-js .rmap-legend .rmap-point{border-radius:var(--radius-map-tip);cursor:default;transition:background-color .15s ease} .rmap-js .rmap-legend .rmap-point.rmap-hi{background:var(--map-legend-hi)} @media (prefers-reduced-motion:reduce){.rmap-pin span{transition:none}} @media (max-width:900px){ .maplf-map{height:320px} .rmap-stage{height:360px} .rmap-route .rmap-stage{height:400px} .rmap-city .rmap-stage{height:480px} .rmap-legend ol{grid-template-columns:1fr;gap:9px} .rmap-city .rmap-legend ol{grid-template-columns:1fr;gap:9px} .rmap-city .rmap-i{font-size:14.5px} } .compact .crate{position:relative;display:flex;align-items:center;justify-content:center; gap:0;font-size:14px;line-height:1;white-space:nowrap;cursor:default;outline:none} .compact .crate .st{letter-spacing:1px} .compact .crate .st .on{color:var(--star-fill)} .compact .crate .st .off{color:var(--rule)} .compact .crate::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%; transform:translateX(-50%);background:var(--tip-bg);color:var(--tip-ink);font-size:12px;font-weight:600; letter-spacing:.01em;padding:6px 9px;border-radius:var(--radius-tip);white-space:nowrap; box-shadow:var(--shadow-tip);opacity:0;visibility:hidden;pointer-events:none;z-index:20} .compact .crate::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%; transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--tip-bg); opacity:0;visibility:hidden;pointer-events:none;z-index:20} .compact .crate{padding:8px 10px;margin:-8px -10px} .compact .crate::after,.compact .crate::before{transition:none} .compact .crate:hover::after,.compact .crate:focus-visible::after, .compact .crate:hover::before,.compact .crate:focus-visible::before{ opacity:1;visibility:visible} .compact{position:relative} .compact .cta::after{ content:"";position:absolute;inset:0;z-index:1} .compact:hover{border-color:var(--accent)} .compact{transition:border-color .12s ease,box-shadow .12s ease} .compact:hover{box-shadow:var(--shadow-hover)} .compact .crate{position:relative;z-index:3} .compact .cta{z-index:2} .compact{cursor:pointer} .compact a{cursor:pointer} .compact .mc-arrow, .compact .mc-dots{z-index:3} .srcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;align-items:center} .srcgrid .src{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:9px; width:auto;height:auto;min-width:0} .srcgrid img{width:24px;height:24px;padding:3px;border-radius:var(--radius-source-mark);object-fit:contain;background:var(--source-mark-bg); box-shadow:var(--source-mark-ring);filter:grayscale(1);opacity:.62; transition:filter .12s,opacity .12s} .srcgrid .src:hover img,.srcgrid .src:focus img{filter:none;opacity:1} .srcgrid .src > b{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .srcgrid .src:hover > b{color:var(--ink)} @media(max-width:860px){.srcgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }@media(max-width:760px){.finder .fin:not([data-collapsed]) .fr-t{transform:rotate(45deg); background:var(--paper-sunk)} }.finder .fcard .flag{display:inline-flex;align-items:center;gap:5px} .finder .fcard .flag svg{width:12px;height:12px;flex:none} .finder .fcard .flag.fl-hot{background:var(--cta);color:var(--cta-ink)} .finder .fcard .flag.fl-star{background:var(--finder-flag-star);color:var(--finder-flag-on)} .finder .fcard .flag.fl-loved{background:var(--finder-flag-loved);color:var(--finder-flag-on)} .finder .fcard .flag.fl-sellout{background:var(--finder-flag-sellout);color:var(--finder-flag-on)} .finder .fcard .flag.fl-cheap{background:var(--finder-flag-cheap);color:var(--finder-flag-on)} .finder .fcard .flag.fl-value{background:var(--finder-flag-value);color:var(--finder-flag-on)} .finder .fcard .flag.fl-proven{background:var(--finder-flag-proven);color:var(--finder-flag-on)} .finder .fcard .flag.fl-ticket{background:var(--finder-flag-ticket);color:var(--finder-flag-on)} .finder .fcard .flag.fl-pkg{background:var(--finder-flag-pkg);color:var(--finder-flag-on)} .finder .fcard .flag.fl-big,.finder .fcard .flag.fl-multi,.finder .fcard .flag.fl-quick{background:var(--finder-flag-fact);color:var(--finder-flag-on)} .finder .fcard .flag.fl-new{background:var(--finder-flag-new-bg);color:var(--finder-flag-new-ink)} .finder .pill[hidden]{display:none} .finder .fsortbar{display:flex;justify-content:flex-end;margin:0 0 12px} .finder .fsortbar label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px; color:var(--ink-soft)} .finder .fsort{font:inherit;font-size:13.5px;color:var(--ink);background:var(--card); border:1px solid var(--rule);border-radius:var(--radius-finder-sort);padding:7px 10px;cursor:pointer} .finder .rail.grid{overflow:visible;margin:0;padding:0} .finder .rail.grid .fnav{display:none} .finder .rail.grid .fcards{display:grid;grid-auto-flow:row; grid-template-columns:repeat(auto-fill,minmax(232px,1fr));grid-auto-columns:auto; gap:16px;overflow:visible;padding-bottom:0;scroll-snap-type:none;cursor:default} .finder .rail.grid .fcard{width:auto;scroll-snap-align:none} .finder .fmore{display:block;margin:18px auto 0;background:var(--card);color:var(--ink); border:1px solid var(--rule);border-radius:var(--radius-finder-button);padding:11px 22px;font:inherit; font-weight:700;font-size:15px;cursor:pointer;transition:border-color .12s,color .12s} .finder .fmore:hover{border-color:var(--accent);color:var(--accent)} .finder .fmore[hidden]{display:none} .finder .fcard .fctx{display:block;margin-top:5px;font-size:12px;font-weight:700; letter-spacing:.02em;color:var(--finder-ctx)} .finder .ffilters>summary{display:flex;align-items:center;gap:8px;list-style:none; cursor:default;margin:0 0 12px;font-size:12.5px;letter-spacing:.07em; text-transform:uppercase;font-weight:700;color:var(--ink)} .finder .ffilters>summary::-webkit-details-marker{display:none} .finder .ffilters>summary .ffic{width:18px;height:18px;flex:none;color:var(--accent)} .finder .ffilters>summary>svg:not(.ffic),.finder .ffilters>summary .fcount{display:none} .finder .ffilters .fgrid{border-top:1px solid var(--rule)} @media(max-width:760px){.finder .ffilters>summary{display:flex;align-items:center;gap:9px;cursor:pointer; list-style:none;padding:13px 0;border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);font-weight:700;font-size:15px} .finder .ffilters>summary::-webkit-details-marker{display:none} .finder .ffilters>summary{margin:0;text-transform:none;letter-spacing:0;cursor:pointer} .finder .ffilters>summary>svg:not(.ffic){display:block;width:17px;height:17px;margin-left:auto; transition:transform .16s ease} .finder .ffilters[open]>summary>svg:not(.ffic){transform:rotate(180deg)} .finder .ffilters>summary .ffic{width:19px;height:19px} .finder .ffilters>summary .fcount:not([hidden]){display:block} .finder .ffilters>summary .fcount{font-style:normal;font-size:12.5px;font-weight:600; color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; min-width:0;flex:1} .finder .ffilters>summary .fcount[hidden]{display:none} .finder .ffilters .fgrid{border-top:0;padding-top:14px;gap:16px 12px} .finder .rail.grid .fcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .finder .rail.grid .fcard :is(h3,h4){font-size:13.5px;line-height:1.25} .finder .rail.grid .fcard .fm{font-size:11.5px} .finder .rail.grid .fcard .flag{font-size:9.5px;padding:3px 7px;gap:4px} .finder .rail.grid .fcard .flag svg{width:10px;height:10px} .finder .fsortbar{justify-content:flex-start;margin-top:14px} }.finder .fsel{display:none} @media(max-width:760px){.finder .pills{display:none} .finder .fgrid{grid-template-columns:1fr;gap:10px} .finder .rlab{display:none} .finder .fsel{display:grid;gap:5px} .finder .fsel>span{font-size:12px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-faint)} .finder .fsel select{-webkit-appearance:none;appearance:none;width:100%; font:inherit;font-size:16px; /* 16px or iOS zooms the page on focus */ color:var(--ink);background:var(--card);border:1px solid var(--rule); border-radius:var(--radius-finder-button);padding:12px 38px 12px 13px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354626B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:16px} }.art-in .htools,.htools{background:var(--paper-sunk);border:1px solid var(--rule); border-radius:var(--radius-tools);padding:26px 24px 24px;margin-block:2.4em} .ht-head{display:block;margin:0 0 18px} .htools .eyebrow{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; font-weight:700;color:var(--accent);margin:0 0 8px;background:none;border:0;padding:0; text-shadow:none;backdrop-filter:none} .ht-head b{display:block;font-size:29px;font-weight:800;letter-spacing:-.025em; line-height:1.13;margin:0 0 7px;text-wrap:balance} .ht-head > span{display:block;font-size:16.5px;color:var(--ink-soft);max-width:64ch} .ht-head b > span{font:inherit;color:inherit;max-width:none;display:inline} .ht-grid{gap:12px} .htools .ht-grid a,.art-in .htools .ht-grid a{background:var(--card); border:1px solid var(--rule);border-radius:var(--radius-tool)} @media(max-width:760px){.art-in .htools,.htools{padding:20px 16px 18px;border-radius:var(--radius-tools-sm)} .ht-head b{font-size:24px} }.htools .ht-grid{grid-template-columns:repeat(3,1fr)} @media(max-width:1279px){.htools .ht-grid{grid-template-columns:repeat(2,1fr)} .htools .ht-grid a:last-child:nth-child(odd){grid-column:1/-1} }@media(min-width:900px){.htools .ht-grid a,.art-in .htools .ht-grid a{padding:18px 16px;font-size:15.5px;gap:14px} .htools .ht-grid i{width:42px;height:42px;border-radius:var(--radius-tool-icon)} .htools .ht-grid i svg{width:22px;height:22px} .htools .ht-grid span{font-size:15.5px;font-weight:600} .htools .ht-grid .ht-a{width:16px;height:16px} }@media(max-width:480px){.htools .ht-grid{gap:8px} .htools .ht-grid a,.art-in .htools .ht-grid a{padding:11px 10px;gap:9px;font-size:13.5px; line-height:1.22;border-radius:var(--radius-tool-sm)} .htools .ht-grid .ht-a{display:none} }.ht-head b{display:flex;align-items:center;gap:11px} .ht-head .ht-mark{width:28px;height:28px;flex:none;color:var(--accent)} @media(max-width:760px){.ht-head .ht-mark{width:23px;height:23px} }.ft{background:var(--paper-sunk);color:var(--ink);border-top:1px solid var(--rule);margin-top:60px} .ft-in{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:44px var(--gutter) 0} .ft-top{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); align-items:center;padding-bottom:34px} .fbrand{display:flex;align-items:center;gap:11px;margin:0;padding-right:34px; color:inherit;text-decoration:none} .fbrand:hover b{color:var(--accent)} .fbrand svg{width:36px;height:36px;flex:none;color:var(--ink)} .fbrand b{font-size:19px;letter-spacing:-.02em;line-height:1.1;display:block} .fbrand small{display:block;font-size:10.5px;letter-spacing:.055em;text-transform:uppercase; color:var(--ink-faint);margin-top:2px} .ft-blurb{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0; border-left:1px solid var(--rule);padding-left:34px} .ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 30px;padding:32px 0 34px; border-top:1px solid var(--rule)} .ft-cols h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent); font-weight:700;margin:0 0 11px} .ft-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .ft-cols a{color:var(--ink-soft);text-decoration:none;font-size:15.5px} .ft-cols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2.5px} .ft-mid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); border-top:1px solid var(--rule);padding:24px 0 22px} .ft-src{padding:0 34px 0 0} .ft-src h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent); font-weight:700;margin:0 0 4px} .ft-src .lead{font-size:14.5px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5} .ft-src .srcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px;align-items:center} .ft-src .srcgrid .src{grid-template-columns:32px minmax(0,1fr);gap:10px} .ft-src .srcgrid img{width:32px;height:32px;border-radius:var(--radius-footer-mark);background:var(--source-mark-bg);padding:4px; object-fit:contain;box-shadow:var(--source-mark-ring); filter:grayscale(1);opacity:.6;transition:filter .12s,opacity .12s;cursor:default} .ft-src .srcgrid .src:hover img{filter:none;opacity:1} .ft-aff{border-left:1px solid var(--rule);padding:0 0 0 34px;display:grid;grid-template-columns:auto 1fr; gap:14px;align-items:start} .ft-aff svg{width:19px;height:19px;color:var(--ink-faint);flex:none;margin-top:2px} .ft-aff p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)} .ft-aff .partners{margin-top:7px;font-size:13.5px;color:var(--ink-faint)} .ft-legal{border-top:1px solid var(--rule);padding:18px 0 30px;display:flex;justify-content:space-between; align-items:center;gap:16px;flex-wrap:wrap} .ft-legal nav{display:flex;gap:18px;flex-wrap:wrap} .ft-legal a{color:var(--ink-soft);text-decoration:none;font-size:14.5px; display:inline-block;padding-block:10px;margin-block:-10px} .ft-legal .cr{font-size:14px;color:var(--ink-faint)} .mc{position:relative;border-radius:var(--mc-radius,var(--radius-media));overflow:hidden;background:var(--paper-sunk)} .mc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; cursor:grab;touch-action:pan-x;user-select:none;scrollbar-width:none;-ms-overflow-style:none} .mc-track::-webkit-scrollbar{display:none} .mc-track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto} .mc-track img{flex:0 0 100%;width:100%;height:auto;display:block;scroll-snap-align:center; aspect-ratio:var(--ar,3/2);object-fit:cover;pointer-events:none} .mc-track:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .mc[data-n="1"] .mc-arrow,.mc[data-n="1"] .mc-dots{display:none} .mc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:var(--mc-arrow,32px);height:var(--mc-arrow,32px);border-radius:50%;border:0;padding:0; background:var(--media-arrow-bg);color:var(--ink);cursor:pointer;display:grid;place-items:center; box-shadow:var(--shadow-media-arrow);opacity:0;transition:opacity .14s,background .12s} .mc-arrow:hover{background:var(--media-arrow-bg-hover)} .mc-arrow svg{width:calc(var(--mc-arrow,32px) * .46);height:calc(var(--mc-arrow,32px) * .46)} .mc-arrow.prev{left:8px} .mc-arrow.next{right:8px} .mc:hover .mc-arrow,.mc-arrow:focus-visible{opacity:1} .mc-arrow[disabled]{opacity:0!important;pointer-events:none} .mc-dots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:3} .mc-dots button{width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer; background:var(--media-dot);transition:width .15s,background .15s} .mc-dots button[aria-current=true]{background:var(--media-dot-active);width:16px;border-radius:var(--radius-media-dot)} .mc.mc-mini .mc-arrow{--mc-arrow:22px} .mc.mc-mini .mc-dots{bottom:5px;gap:3px} .mc.mc-mini .mc-dots button{width:4px;height:4px} .mc.mc-mini .mc-dots button[aria-current=true]{width:10px} @media (hover:none){.mc-arrow{display:none} }@media (pointer:coarse){.mc .mc-dots{gap:0;bottom:0;max-width:calc(100% - 16px)} .mc .mc-dots button,.mc.mc-mini .mc-dots button,.mc .mc-dots button[aria-current=true],.mc.mc-mini .mc-dots button[aria-current=true]{ flex:0 1 24px;min-width:16px;width:24px;height:24px;border-radius:0;background:none; display:grid;place-items:center;transition:none} .mc .mc-dots button::before{content:"";width:6px;height:6px;border-radius:50%; background:var(--media-dot);transition:width .15s,background .15s} .mc .mc-dots button[aria-current=true]::before{width:16px;border-radius:var(--radius-media-dot);background:var(--media-dot-active)} .mc.mc-mini .mc-dots{bottom:0} .mc.mc-mini .mc-dots button::before{width:5px;height:5px} .mc.mc-mini .mc-dots button[aria-current=true]::before{width:12px} }.art-in .pcarousel a:not(.cta):not(.cta2){color:inherit;text-decoration:none;border-bottom:0} .pcarousel{ --space-2xs:.25rem; --space-xs:.5rem; --space-s:.75rem; --space-m:1rem; --space-l:1.25rem; --space-xl:1.5rem; --space-2xl:2rem; --space-3xl:2.75rem; --type-title-3:1.3rem; --type-subhead:.9375rem; --type-caption:.75rem; --weight-semibold:600; --weight-bold:700; --leading-tight:1.15; --track-title:-.018em; --shadow-sm:var(--carousel-shadow-sm); --shadow-md:var(--carousel-shadow-md); --shadow-lg:var(--carousel-shadow-lg); --ease:cubic-bezier(.32,.72,0,1); --dur-fast:.18s; --dur:.28s; --bg-elevated:var(--card); --label:var(--ink); } @media(min-width:1280px){.pcarousel{width:var(--width-wide);max-width:none;margin-left:50%;transform:translateX(-50%)} }.pcarousel .carousel{--c-visible:3.5;--c-peek:0px} @media(max-width:1024px){.pcarousel .carousel{--c-visible:2.4} }@media(max-width:760px){.pcarousel .carousel{--c-visible:1.6;--c-gap:14px;--c-radius:var(--radius-carousel-card-sm)} }@media(max-width:520px){.pcarousel .carousel{--c-visible:1.15;--c-gap:12px} }.pcarousel .c-track{list-style:none;margin:0;gap:var(--c-gap)} .pcarousel .c-slot{display:block;margin:0;padding:0;min-width:0} .pcarousel .c-slot::before,.pcarousel .c-slot::marker{content:none} @media(max-width:760px){.art-in .pcarousel .c-card__title{font-size:1.12rem} .art-in .pcarousel .c-card__body{padding:2.1rem .95rem .9rem} .art-in .pcarousel .c-card__eyebrow{font-size:.7rem} }.pcarousel .c-track{padding-inline:var(--c-peek);scroll-padding-inline:var(--c-peek)} .carousel{--c-gap:24px;--c-visible:3.2;--c-radius:var(--radius-carousel-card);position:relative;} @media (max-width:64rem){.carousel{--c-visible:2.2} }@media (max-width:40rem){.carousel{--c-visible:1.04;--c-gap:16px;--c-radius:var(--radius-carousel-card-sm)} }.c-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-m); margin-block-end:var(--space-l);} .c-controls{display:flex;gap:var(--space-2xs);flex:0 0 auto;} .c-arrow{inline-size:44px;block-size:44px;border-radius:50%;border:0;background:var(--bg-elevated); color:var(--label);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm); transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur-fast);} .c-arrow svg{inline-size:17px;block-size:17px;} .c-arrow:hover{background:var(--label);color:var(--bg-elevated);} .c-arrow:active{transform:scale(.92);} .c-arrow:disabled{opacity:.32;pointer-events:none;} @media (hover:none) and (pointer:coarse){.c-controls{display:none} }.carousel img{-webkit-user-drag:none;pointer-events:none;} .carousel a,.carousel .c-card{-webkit-user-drag:none;} .carousel .c-track,.carousel .c-card{user-select:none;} .c-viewport{container-type:inline-size;} .c-track{list-style:none;margin:0;display:grid;grid-auto-flow:column;gap:var(--c-gap); grid-auto-columns:min(30rem,calc((100cqw - (var(--c-visible) - 1) * var(--c-gap)) / var(--c-visible))); overflow-x:auto;overflow-y:hidden;padding-block:4px 14px;scrollbar-width:none; scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab;} .c-track::-webkit-scrollbar{display:none;} .c-slot{scroll-snap-align:start;min-width:0;} @media (hover:none) and (pointer:coarse){.c-slot{scroll-snap-stop:always;} }.c-track.sr-drag{scroll-snap-type:none;scroll-behavior:auto;} .c-track.sr-grab{cursor:grabbing;} .c-track.sr-grab .c-card{pointer-events:none;} .c-card{aspect-ratio:.747/1;border-radius:var(--c-radius);overflow:hidden;position:relative; display:flex;flex-direction:column;background:var(--bg-elevated);box-shadow:var(--shadow-md); text-decoration:none;color:var(--label); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);} .c-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);} .c-card>img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover; object-position:center center;} .c-card__body{position:relative;z-index:1;margin-block-start:auto; padding:var(--space-l) var(--space-m) var(--space-m);color:var(--carousel-on-photo); background:var(--carousel-scrim);} .c-card__eyebrow{font-size:var(--type-caption);font-weight:var(--weight-semibold);letter-spacing:.07em; text-transform:uppercase;color:var(--carousel-on-photo-soft);display:block;} .c-card__title{font-size:var(--type-title-3);font-weight:var(--weight-bold); line-height:var(--leading-tight);letter-spacing:var(--track-title);color:var(--carousel-on-photo);text-wrap:balance;margin:2px 0 0;} .c-card__text{font-size:var(--type-subhead);color:var(--carousel-on-photo-text);margin:3px 0 0;} .pcarousel{margin-block:var(--space-3xl,2.75rem);} .pc-head{margin-block-end:1.5rem;} .pc-head .eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:var(--carousel-eyebrow);margin:0;} .pc-head h2{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.2;letter-spacing:-.02em;margin:.15em 0 0;} .art-in .pcarousel .c-card__title{margin:2px 0 0;max-width:none;color:var(--carousel-on-photo); font-size:var(--type-title-3);font-weight:var(--weight-bold); line-height:var(--leading-tight);letter-spacing:var(--track-title);text-wrap:balance} .art-in .pcarousel .c-card__eyebrow{margin:0;letter-spacing:.07em; font-size:var(--type-caption);font-weight:var(--weight-semibold)} .art-in .pcarousel .c-card__body{padding:2.6rem 1.15rem 1.1rem} .art-in .pcarousel .pc-head h2{max-width:none} .art-in .pcarousel .c-arrow{ inline-size:46px;block-size:46px; color:var(--ink);background:var(--card); border:1px solid var(--rule); box-shadow:var(--carousel-arrow-shadow);} .art-in .pcarousel .c-arrow svg{inline-size:19px;block-size:19px;stroke-width:2.4} .art-in .pcarousel .c-arrow:hover{ background:var(--ink);color:var(--card);border-color:var(--ink); box-shadow:var(--carousel-arrow-shadow-hover)} .art-in .pcarousel .c-arrow:active{transform:scale(.94)} .art-in .pcarousel .c-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .art-in .pcarousel .c-arrow:disabled{opacity:1;background:transparent; border-color:var(--rule);color:var(--ink-faint);box-shadow:none} .art-in .pcarousel .c-controls{gap:8px} .sp{margin:0 0 2.4em} .sp-q{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-sp-panel); padding:26px 24px 24px} .sp-q h2{font-size:29px;font-weight:800;letter-spacing:-.025em;line-height:1.13; margin:0 0 7px;text-wrap:balance} .sp-lead{margin:0 0 18px;color:var(--ink-soft);font-size:16.5px;max-width:64ch} .sp-picks{display:flex;flex-wrap:wrap;gap:8px} .sp-pick{display:inline-flex;align-items:center;gap:8px;cursor:pointer; border:1px solid var(--rule);background:var(--card);border-radius:var(--radius-pill); padding:8px 14px 8px 11px;font-size:15px;font-weight:600;line-height:1.2; transition:background .13s,border-color .13s,color .13s} .sp-pick:hover{border-color:var(--accent)} .sp-pick input{position:absolute;opacity:0;pointer-events:none} .sp-pick .sp-i{width:17px;height:17px;flex:none;opacity:.72} .sp-pick:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--card)} .sp-pick:has(input:checked) .sp-i{opacity:1} .sp-pick:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px} .sp-mrow{margin-top:19px;padding-top:19px;border-top:1px solid var(--rule)} .sp-mlab{display:block;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase; font-weight:700;color:var(--ink-soft);margin-bottom:9px} .sp-ms{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px} .sp-m{font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:9px 4px; border:1px solid var(--rule);background:var(--card);color:var(--ink); border-radius:var(--radius-sp-month);transition:background .13s,border-color .13s,color .13s} .sp-m:hover{border-color:var(--accent)} .sp-m[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--card)} .sp-sel{display:none} .sp-chips{display:none} .sp-out{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px} .sp-card{margin:0} .sp-h{display:flex;align-items:center;gap:9px;margin-bottom:6px} .sp-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink); color:var(--card);display:grid;place-items:center;font-size:13.5px;font-weight:700; font-variant-numeric:tabular-nums} .sp-h .sp-i{width:19px;height:19px;flex:none;color:var(--accent)} .sp-h b{font-size:18px;font-weight:700;letter-spacing:-.015em} .sp-season{display:flex;align-items:center;gap:8px;margin:0 0 8px; font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--ink-soft)} .sp-mark{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center; font-size:12px;font-weight:700;color:var(--sp-mark-ink);background:var(--ink-faint)} .sp-yes .sp-mark{background:var(--sp-yes)} .sp-yes .sp-mark::before{content:"\2713"} .sp-no .sp-mark{background:var(--sp-no)} .sp-no .sp-mark::before{content:"\2717"} .sp-no .sp-season{color:var(--ink-faint)} .sp-no > .compact{opacity:.72} .sp-empty{margin:18px 0 0;color:var(--ink-faint);font-size:15px} .sp:not(.sp-ready) .sp-empty{display:none} @media(max-width:760px){.sp-q{padding:20px 16px 18px;border-radius:var(--radius-sp-panel-sm)} .sp-q h2{font-size:24px} .sp-picks,.sp-ms{display:none} .sp-sel{display:grid;gap:5px} .sp-sel > span{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase; font-weight:700;color:var(--ink-soft)} .sp-sel select{font:inherit;font-size:16px;font-weight:600;color:var(--ink); padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius-sp-select); background:var(--card);width:100%;-webkit-appearance:menulist} .sp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .sp-chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px; font-weight:600;cursor:pointer;background:var(--ink);color:var(--card);border:0; border-radius:var(--radius-pill);padding:8px 12px} .sp-chip span{font-size:15px;line-height:1;opacity:.7} .sp-mrow{margin-top:16px;padding-top:16px} .sp-mlab{display:none} }.tip{position:absolute;z-index:40;width:min(300px,72vw);background:var(--ink);color:var(--hint-ink); border-radius:var(--radius-hint);padding:12px 14px;box-shadow:var(--shadow-hint); transform:translate(-50%,0);pointer-events:none; display:none} .tip[data-on]{display:block} .tip b{display:block;font-size:14.5px;line-height:1.3;margin-bottom:5px} .tip span{display:block;font-size:13.5px;line-height:1.5;color:var(--hint-sub)} .tip::before{content:"";position:absolute;left:var(--arrow,50%);margin-left:-7px;border:7px solid transparent} .tip[data-side="below"]::before{top:-14px;border-bottom-color:var(--ink)} .tip[data-side="above"]::before{bottom:-14px;border-top-color:var(--ink)} @media (max-width:560px){.tip{width:min(260px,80vw)} } /* month-planner: redesigned by the owner */ /* month-planner. Moved from the frozen Reykjavik build, tools/monthplanner.css at tag reykjavik-frozen-2026-09-14 (rules selected by owners.yaml, tools/cssowners.py extract). Comments are the originals. Every colour and corner radius is a token (contract.yaml `tokens`); the owner's tuner values (2026-09-11) are the reference theme's. */ /* ==== from monthplanner.css ==== *//* ---- month planner (render.py month_planner, tools/monthplanner.js) ---- Daylight and what's in season, month by month, on the homepage under "When are you going?". The panel is the tour finder's and the sight picker's sunk panel at the same measurements, so the three tools read as one family. The sizes, colours and the result panel are the owner's, set in the local tuner on 2026-09-11: 24px season cells at a 10px radius, 7px between rows, teal fills on a light blue track, full-width daylight bars with 14px tops, 17px labels and month names, a 2px outline on the chosen month, and result concept C - a dark "night" panel with the month's numbers beside the two lists. On a phone the labels stay small: 17px in a 70px label column wraps every name onto three lines. Everything is scoped under .mp and at least two classes deep: the planner sits inside the article, where `.art-in a:not(.cta):not(.cta2)` (0,3,1) and the article's own paragraph, list and heading rules would otherwise restyle it. */ .mp{margin:2em 0} /* The same breakout as the tour finder and the tools strip above it (article.css), so the homepage's three tools share one edge. `.art-in .mp`, two classes, for the reason the tools strip gives: the one-class margin shorthand would win back margin-left and leave the block shifted half its width. */ @media(min-width:1280px){ .art-in .mp{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)} } .mp .mp-q{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-planner); padding:24px 22px 22px} .mp .mp-q h3{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15; margin:0 0 6px;text-wrap:balance} .mp .mp-lead{margin:0 0 18px!important;color:var(--ink-soft);font-size:15px!important; line-height:1.5;max-width:64ch} /* twelve columns: the months, their daylight, then one row per season */ .mp .mp-grid{display:grid;grid-template-columns:minmax(110px,190px) repeat(12,minmax(0,1fr)); gap:7px 3px;align-items:end} .mp .mp-rl{font-size:17px;line-height:1.2;color:var(--ink-soft);padding-right:8px;align-self:center; display:flex;align-items:center;gap:8px} .mp .mp-ic{width:17px;height:17px;flex:none;color:var(--accent)} .mp .mp-mh{font:inherit;font-size:17px;font-weight:700;color:var(--ink-soft); background:transparent;border:0;border-radius:var(--radius-planner-cell);padding:6px 0;cursor:pointer} .mp .mp-mh:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .mp .mp-ini{display:none} .mp .mp-dl{height:104px;display:flex;flex-direction:column;justify-content:flex-end; align-items:center;border-radius:var(--radius-planner-cell);cursor:pointer} .mp .mp-dl em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-soft); margin-bottom:3px;font-variant-numeric:tabular-nums} .mp .mp-dl i{display:block;width:100%;background:var(--teal);border-radius:var(--radius-planner-bar) var(--radius-planner-bar) 0 0; min-height:2px} .mp .mp-c{height:24px;background:var(--planner-track);border-radius:var(--radius-planner-row); position:relative;align-self:center;cursor:pointer} .mp .mp-c b{position:absolute;top:0;bottom:0;background:var(--teal);border-radius:var(--radius-planner-row)} /* The column under the pointer, lightly (monthplanner.js adds .hov). No transition. Set before the chosen month's rules so the chosen one always reads stronger. */ .mp .mp-mh.hov{background:var(--planner-hover-head);color:var(--ink)} .mp .mp-dl.hov{background:var(--planner-hover-day)} .mp .mp-c.hov{box-shadow:0 0 0 1px var(--planner-hover-ring)} .mp .mp-mh[aria-pressed=true]{background:var(--ink);color:var(--card)} .mp .mp-dl.sel{background:var(--planner-track)} .mp .mp-c.sel{box-shadow:inset 0 0 0 2px var(--ink)} /* Owner, 2026-09-15 (review 7): on a desktop the months must read as buttons. A line above the grid says so, and each month name sits in a light chip that fills on hover; the chosen month keeps its dark fill. Phones keep the plain grid (a tap is obvious there). */ .mp .mp-hint{display:none} @media (min-width:761px) and (hover:hover){ .mp .mp-hint{display:flex;align-items:center;gap:8px;margin:-4px 0 14px!important;font-size:14px!important; font-weight:600;color:var(--ink);line-height:1.3} /* owner, 2026-09-15 (lab): the hand icon pulses, so the eye goes to the hint */ .mp .mp-hint svg{width:18px;height:18px;flex:none;color:var(--accent);transform-origin:50% 60%; animation:mp-hint-pulse 1.8s ease-in-out infinite} .mp .mp-mh{background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)} .mp .mp-mh:hover,.mp .mp-mh.hov{background:var(--planner-hover-head);color:var(--ink); box-shadow:inset 0 0 0 1px var(--accent)} .mp .mp-mh[aria-pressed=true],.mp .mp-mh[aria-pressed=true]:hover{background:var(--ink);color:var(--card);box-shadow:none} } /* the chosen month: the night panel and the two lists (concept C) */ .mp .mp-out{margin-top:16px} .mp .mp-p{display:grid;grid-template-columns:minmax(220px,.85fr) 2fr;overflow:hidden; background:var(--planner-panel);border:1px solid var(--rule);border-radius:var(--radius-planner-panel)} .mp .mp-p[hidden]{display:none} .mp .mp-night{background:var(--ink);color:var(--on-ink);padding:22px} .mp .mp-mn{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase; font-weight:700;color:var(--planner-night-label)} .mp .mp-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:6px 0 4px!important; font-size:23px!important;font-weight:800;letter-spacing:-.02em;line-height:1.1; font-variant-numeric:tabular-nums;color:var(--on-ink)} .mp .mp-big small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--planner-night-small)} .mp .mp-t{margin:6px 0 0!important;font-size:14.5px!important;line-height:1.5;color:var(--planner-night-temps)} .mp .mp-lists{padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:18px} .mp .mp-col h4{font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:700; color:var(--ink-soft);margin:0 0 10px} .mp .mp-col ul{list-style:none;margin:0;padding:0} .mp .mp-col li{display:flex;gap:9px;align-items:flex-start;margin:0 0 9px;padding:0; font-size:15px;line-height:1.3} .mp .mp-col li::before{content:none} .mp .mp-col li .mp-ic{width:18px;height:18px;margin-top:1px} .mp .mp-col li b{font-weight:650} .mp .mp-col li small{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:1px} .art-in .mp .mp-col li a:not(.cta){text-decoration:none;border-bottom:0;color:inherit} .mp .mp-col li a b{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .mp .mp-col li.off{color:var(--ink-faint)} .mp .mp-col li.off .mp-ic{color:var(--ink-faint)} .mp .mp-more{margin:14px 0 0!important;font-size:15px!important;font-weight:600} @media (max-width:760px){ .mp .mp-p{grid-template-columns:1fr} .mp .mp-lists{grid-template-columns:1fr;gap:10px} } /* On a phone the twelve columns are about 24px each: initials instead of names, and a narrow label column with the mark above the words. Nothing scrolls sideways. */ @media (max-width:520px){ .mp .mp-q{padding:18px 14px} /* Phone: the row labels sit on their own line above each row instead of in a 70px column. With the column, twelve months shared 250px and every month was a 19px-wide tap target; across the full width each column is 25px, past the 24px minimum, and the whole column (name, daylight bar, season cells) still picks the month. */ .mp .mp-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:4px 2px} .mp .mp-rl{grid-column:1/-1;font-size:12px;line-height:1.2;padding:6px 0 0; flex-direction:row;align-items:center;gap:6px} .mp .mp-rl:empty{display:none} .mp .mp-rl br{display:none} .mp .mp-rl .mp-ic{width:14px;height:14px} .mp .mp-mh{font-size:14px} .mp .mp-long{display:none} .mp .mp-ini{display:inline} .mp .mp-dl{height:84px} .mp .mp-dl em{font-size:10px} .mp .mp-c{height:20px;border-radius:var(--radius-planner-cell)} .mp .mp-c b{border-radius:var(--radius-planner-cell)} } @keyframes mp-hint-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.7}} @media (prefers-reduced-motion:reduce){.mp .mp-hint svg{animation:none}} @media (max-width:900px){ } /* drive-times: redesigned by the owner */ /* drive-times. Moved from the frozen Reykjavik build, tools/drivetimes.css at tag reykjavik-frozen-2026-09-14 (rules selected by owners.yaml, tools/cssowners.py extract). Comments are the originals. Every colour and corner radius is a token (contract.yaml `tokens`); the amber and the daylight shading are the owner's pick (2026-09-11). */ /* ==== from drivetimes.css ==== *//* ---- drive times (render.py drive_times, tools/drivetimes.js) ---- How long the drive really is, on the homepage under "One day out, or two". The same sunk panel, width and teal bars as the month planner above it, so the homepage's tools read as one family. The minutes come from places.json; both views are in the page and `data-mode` on the section decides which one shows. Scoped under .dt and two classes deep for the article's link and paragraph rules. */ .dt{margin:2em 0} @media(min-width:1280px){ .art-in .dt{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)} } .dt .dt-q{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-drive-panel); padding:24px 22px 22px} .dt .dt-q h3{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15; margin:0 0 6px;text-wrap:balance} .dt .dt-lead{margin:0 0 14px!important;color:var(--ink-soft);font-size:15px!important;line-height:1.5} .dt .dt-seg{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--rule); border-radius:var(--radius-drive-seg);padding:4px;margin:0 0 14px} .dt .dt-seg button{font:inherit;font-size:15px;font-weight:700;border:0;background:transparent; color:var(--ink-soft);padding:8px 14px;border-radius:var(--radius-drive-button);cursor:pointer} .dt .dt-seg button:hover{color:var(--ink)} .dt .dt-seg button{position:relative} .dt .dt-seg button::after{content:"";position:absolute;inset:-5px -2px} .dt .dt-seg button[aria-pressed=true]{background:var(--ink);color:var(--card)} .dt .dt-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .dt .dt-legend{display:flex;align-items:center;gap:8px;margin:0 0 12px!important; font-size:13.5px!important;color:var(--ink-soft)} .dt .dt-legend i{width:18px;height:12px;border-radius:var(--radius-drive-key);background:var(--drive-daylight-key)} .dt .dt-rows{display:grid;gap:7px} .dt .dt-r{display:grid;grid-template-columns:minmax(120px,200px) 1fr minmax(118px,auto);gap:14px; align-items:center} .art-in .dt .dt-l:not(.cta){font-size:16px;font-weight:600;color:var(--ink);text-decoration:none; border-bottom:0;line-height:1.2;padding-block:12px;margin-block:-12px} .art-in .dt a.dt-l:not(.cta):hover{color:var(--accent);text-decoration:underline} .dt .dt-t{position:relative;height:22px;background:var(--drive-track);border-radius:var(--radius-drive-bar)} .dt .dt-t i{position:absolute;left:0;top:0;bottom:0;width:var(--o);background:var(--teal); border-radius:var(--radius-drive-bar);transition:width .18s ease} .dt[data-mode=round] .dt-t i{width:var(--r)} /* Owner's pick from five options, 2026-09-11 (option A): the long trip in amber, and December's daylight as a soft warm shading over the start of every track rather than a red dashed line, which read as an alarm. A bar that runs past the shading is a winter day trip that outlasts the light. */ .dt .dt-r.hot .dt-t i{background:var(--drive-hot)} .dt[data-mode=round] .dt-t{background:linear-gradient(to right,var(--drive-daylight) var(--dec), var(--drive-track) var(--dec))} .dt .dt-v{font-variant-numeric:tabular-nums;white-space:nowrap} .dt .dt-v b{font-size:15px;font-weight:750;color:var(--ink)} .dt .dt-v small{margin-left:7px;font-size:12.5px;color:var(--ink-soft)} .dt[data-mode=one] .dt-rt,.dt[data-mode=round] .dt-one{display:none!important} /* the hour axis under the bars */ .dt .dt-axr{margin-top:2px} .dt .dt-ax{position:relative;height:20px;border-top:1px solid var(--rule)} .dt .dt-ax span{position:absolute;top:4px;transform:translateX(-50%);font-size:12px; color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums} .dt .dt-ax span:first-child{transform:none} .dt .dt-note{margin:14px 0 0!important;font-size:15px!important;line-height:1.5;color:var(--ink)} /* Owner, 2026-09-15 (review 7): folded on a phone, a full-width "Show all" opens the rest (render.py: a checkbox and its label). Desktops show every row and no button. */ .dt .dt-fold-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .dt .dt-more{display:none} @media (max-width:640px){ .dt .dt-fold-in:not(:checked)~.dt-rows [data-extra]{display:none} .dt .dt-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px; margin-top:14px;padding:11px 14px;border:1px solid var(--rule);border-radius:var(--radius-drive-button); background:var(--card);color:var(--ink);font-size:15px;font-weight:700;cursor:pointer; box-sizing:border-box;-webkit-tap-highlight-color:transparent} .dt .dt-more svg{width:17px;height:17px;flex:none} .dt .dt-more-b{display:none} .dt .dt-fold-in:checked~.dt-more .dt-more-a{display:none} .dt .dt-fold-in:checked~.dt-more .dt-more-b{display:inline} .dt .dt-fold-in:checked~.dt-more svg{transform:rotate(180deg)} .dt .dt-fold-in:focus-visible~.dt-more{outline:2px solid var(--accent);outline-offset:2px} } @media (max-width:640px){ .dt .dt-q{padding:18px 14px} .dt .dt-r{grid-template-columns:104px 1fr 64px;gap:8px} .art-in .dt .dt-l:not(.cta){font-size:13.5px} .dt .dt-v small{display:none!important} .dt .dt-v b{font-size:13px} .dt .dt-ax span.odd{display:none} } @media (prefers-reduced-motion:reduce){ .dt .dt-t i{transition:none} } @media (max-width:900px){ } .stb{display:grid;grid-template-columns:auto 1fr;gap:14px;background:var(--card); border:1px solid var(--rule);border-radius:var(--radius-card);padding:16px 18px;margin:1.6em 0} .stb .stb-led{width:12px;height:12px;border-radius:50%;margin-top:7px;background:var(--status-ok); box-shadow:0 0 0 5px var(--status-ok-halo)} .stb-warn .stb-led{background:var(--status-warn);box-shadow:0 0 0 5px var(--status-warn-halo)} .stb-alert .stb-led{background:var(--status-alert);box-shadow:0 0 0 5px var(--status-alert-halo)} .stb .stb-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:10px} .stb .stb-h b{font-size:17px;font-weight:750;line-height:1.3} .stb .stb-pill{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill); background:var(--status-ok-bg);color:var(--status-ok-ink);white-space:nowrap} .stb-warn .stb-pill{background:var(--status-warn-bg);color:var(--status-warn-ink)} .stb-alert .stb-pill{background:var(--status-alert-bg);color:var(--status-alert-ink)} .stb dl{display:grid;grid-template-columns:max-content 1fr;gap:7px 16px;margin:0;font-size:15px;line-height:1.45} .stb dt{color:var(--ink-soft);margin:0} .stb dd{margin:0} .stb .stb-src{margin:12px 0 0!important;font-size:13.5px!important;color:var(--ink-soft)} @media (max-width:560px){.stb dl{grid-template-columns:1fr;gap:1px} .stb dd{margin-bottom:8px} } /* price-ladder: redesigned by the owner */ /* price-ladder, and the price-chart family's shared frame. Moved from the frozen Reykjavik build, tools/pricecharts.css at tag reykjavik-frozen-2026-09-14 (every rule whose owner is the panel, its heading, lead, note, legend, labels and axis, the tour point's tooltip and the price ladder itself). Comments as they were. Every colour and corner is a token (contract.yaml `tokens`): the amber tour point, its pulse and the dark tooltip were literal values and are this block's own tokens now (tokens.reference.css), shared by tour-ranges. The rules of tour-ranges (.tr-*) and transfer-cost (.tx-*, .hc-seg) are theirs; the legend's tour-ranges marks are here because the legend is this frame's. */ /* ---- homepage charts: transfer-cost, price-ladder, tour-ranges, kp-cloud panel ---- (render.py; the Kp picture's skies are in kpcloud.css). One family with the month planner and the drive chart: the same sunk panel at the same width, teal for the thing measured and amber for the one thing to notice, the owner's pair from the drive chart. Scoped under .hc and two classes deep for the article's link and text rules. */ .hc{margin:2em 0} @media(min-width:1280px){ .art-in .hc{width:var(--width-wide);margin-left:50%;transform:translateX(-50%)} } .hc .hc-q{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-hc-panel);padding:24px 22px 22px} .hc .hc-q h3{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 6px;text-wrap:balance} .hc .hc-lead{margin:0 0 14px!important;color:var(--ink-soft);font-size:15px!important;line-height:1.5} .hc .hc-note{margin:14px 0 0!important;font-size:15px!important;line-height:1.5;color:var(--ink)} .hc .hc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px!important;font-size:13.5px!important;color:var(--ink-soft)} .hc .hc-legend span{display:inline-flex;align-items:center;gap:7px} .art-in .hc .hc-l:not(.cta){font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:0;line-height:1.2; padding-block:12px;margin-block:-12px} /* 40px+ tap height, same row */ .art-in .hc a.hc-l:not(.cta):hover{color:var(--accent);text-decoration:underline} .hc .hc-lw .hc-l{font-size:15px} .hc .hc-ax{position:relative;height:20px;border-top:1px solid var(--rule)} .hc .hc-ax span{position:absolute;top:4px;transform:translateX(-50%);font-size:12px;color:var(--ink-soft); white-space:nowrap;font-variant-numeric:tabular-nums} .hc b[data-eur]{font-variant-numeric:tabular-nums} /* price ladder */ .hc .pl-rows{display:grid;gap:6px} .hc .pl-r{display:grid;grid-template-columns:minmax(150px,230px) 1fr minmax(120px,auto);gap:14px;align-items:center} .hc .pl-t{position:relative;height:18px} .hc .pl-t::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dotted var(--pc-track-dots)} .hc .pl-d{position:absolute;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%; box-shadow:0 0 0 2px var(--paper-sunk)} .hc .pl-d.o{background:var(--teal)} .hc .pl-d.t{background:var(--pc-amber);border-radius:2px;transform:translate(-50%,-50%) rotate(45deg)} .hc .hc-legend .pl-d{position:static;transform:none;display:inline-block;box-shadow:none} .hc .hc-legend .pl-d.t{transform:rotate(45deg);width:10px;height:10px} .hc .pl-v{white-space:nowrap;font-size:15px} .hc .pl-v small{margin-left:7px;font-size:12.5px;color:var(--ink-soft)} .hc .pl-ax{margin-top:2px} /* A tour point is a link to that tour (render.py _pc_dot). The article's link rule weighs (0,3,1), so the reset is at the same weight with one more class. The link stays upright and the diamond is drawn by ::before, because the tooltip lives inside the link: a rotated link would turn its tooltip 45 degrees with it. ::after is an invisible 28px target around a 12px mark. */ .art-in .hc a.pl-d:not(.cta){border-bottom:0;text-decoration:none;padding:0; cursor:pointer;z-index:2} .hc a.pl-d.t{background:none;border-radius:0;box-shadow:none;transform:translate(-50%,-50%)} .hc a.pl-d.t::before{content:"";position:absolute;inset:0;background:var(--pc-amber); border-radius:2px;transform:rotate(45deg);box-shadow:0 0 0 2px var(--paper-sunk); animation:pc-pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:calc(var(--x,0) * .02s)} .hc a.pl-d::after{content:"";position:absolute;inset:-8px} /* The pulse says "this is a thing you can touch": an amber ring that leaves the diamond and fades, one wave across the chart every 2.4s. It stops on the point being hovered. */ @keyframes pc-pulse{ 0%{box-shadow:0 0 0 2px var(--paper-sunk),0 0 0 2px var(--pc-amber-pulse)} 70%,100%{box-shadow:0 0 0 2px var(--paper-sunk),0 0 0 12px var(--pc-amber-fade)}} /* Owner, 2026-09-23: other diamonds painted over the tooltip. The reset above weighs (0,4,1) because of `.art-in` and `:not(.cta)`, and `z-index:2` in it beat the (0,3,1) hover rule that is meant to lift the hovered point and its tooltip over the rest - so on every article page the lift never happened. The hover rule carries the same weight now. A tooltip must win over its neighbours, always. */ .hc a.pl-d:hover,.hc a.pl-d:focus-visible, .art-in .hc a.pl-d:not(.cta):hover,.art-in .hc a.pl-d:not(.cta):focus-visible{z-index:6;outline:0} .hc a.pl-d:hover::before,.hc a.pl-d:focus-visible::before{ animation:none;inset:-2px;box-shadow:0 0 0 2px var(--paper-sunk),0 0 0 5px var(--pc-amber-ring)} /* The tooltip (render.py _pc_tip). Instant both ways and nothing animates, the owner's rule for every tooltip on the site. display, not visibility: a hidden 270px box still widens the page, and on a phone that is a sideways scroll. The invisible ::after bridges the gap to the point, so the pointer can travel into the tooltip - which is part of the link - without closing it on the way. pricecharts.js keeps it on screen through --tx and flips it under the point near the top of the window. */ .hc .pc-tip{display:none;position:absolute;bottom:calc(100% + 13px);left:50%; transform:translateX(calc(-50% + var(--tx,0px)));width:max-content;max-width:min(270px,calc(100vw - 32px)); gap:5px;padding:11px 13px 12px;border-radius:var(--radius-pc-tip);background:var(--pc-tip-bg);color:var(--pc-tip-ink); box-shadow:var(--shadow-pc-tip);text-align:left;white-space:normal; font-size:13px;font-weight:500;line-height:1.35;cursor:pointer} .hc a:hover>.pc-tip,.hc a:focus-visible>.pc-tip{display:grid} .hc .pc-tip::before{content:"";position:absolute;top:100%;left:calc(50% - var(--tx,0px));transform:translateX(-50%); border:6px solid transparent;border-top-color:var(--pc-tip-bg)} .hc .pc-tip::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px} .hc .pc-tip.below{bottom:auto;top:calc(100% + 13px)} .hc .pc-tip.below::before{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--pc-tip-bg)} .hc .pc-tip.below::after{top:auto;bottom:100%} .hc .pc-tip .pt-b{justify-self:start;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--pc-tip-bg);background:var(--pc-tip-badge);padding:3px 8px;border-radius:var(--radius-pill)} .hc .pc-tip .pt-n{font-size:14.5px;font-weight:700;line-height:1.25;color:var(--pc-tip-ink)} .hc .pc-tip .pt-r{color:var(--pc-tip-soft)} .hc .pc-tip .pt-r i{font-style:normal;color:var(--pc-tip-badge)} .hc .pc-tip .pt-f{display:flex;align-items:center;gap:6px;color:var(--pc-tip-feature)} .hc .pc-tip .pt-f svg{width:13px;height:13px;flex:none;color:var(--pc-tip-check)} .hc .pc-tip .pt-go{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:5px;padding-top:9px;border-top:1px solid var(--pc-tip-line)} .hc .pc-tip .pt-p{color:var(--pc-tip-soft);white-space:nowrap} .hc .pc-tip .pt-p b{color:var(--pc-tip-ink);font-size:15px} .hc .pc-tip .pt-cta{background:var(--cta);color:var(--cta-ink);font-weight:700;padding:6px 10px; border-radius:var(--radius-pc-cta);white-space:nowrap} .hc a:hover .pt-cta{background:var(--cta-hover)} .hc .hc-legend .tr-iqr,.hc .hc-legend .tr-med,.hc .hc-legend .tr-bk{position:static;display:inline-block;transform:none;box-shadow:none} .hc .hc-legend .tr-iqr{width:18px;height:12px} .hc .hc-legend .tr-med{height:14px} .hc .hc-legend .tr-bk{transform:rotate(45deg);width:10px;height:10px} /* Owner, 2026-09-15 (review 7). On a phone the price charts open folded: the first rows, then a full-width "Show all" that opens the rest (render.py _pc_fold, a checkbox and its label, so no script is needed). On a desktop every row shows and the button is not there; instead a line above the chart says the diamonds can be pointed at and clicked (_pc_hint), with a diamond that pulses like the points themselves. Shared by tour-ranges. */ .hc .hc-fold-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .hc .hc-more{display:none} /* Owner, 2026-09-15 (lab): the hint is a thin breathing arrow beside the first diamond, "Hover to see more"; it goes away once pointed at (behaviour.js). Desktop only. */ .hc .hc-arrow{display:none} @media (min-width:641px) and (hover:hover){ /* anchored at the diamond's centre; the head ends just below-left of it */ .hc .hc-arrow{display:block;position:absolute;top:50%;width:0;height:0;z-index:3;transition:opacity .35s ease; white-space:nowrap;font-size:13px;font-weight:600;line-height:1;color:var(--ink)} /* only the wrapper moves, by transform alone: the browser slides one ready layer instead of redrawing the curve each frame (owner, 2026-09-15: the first version stuttered) */ .hc .hc-arrow-w{position:absolute;left:-59px;top:5px;width:60px;height:46px;will-change:transform; animation:hc-breathe 2.2s cubic-bezier(.45,0,.55,1) infinite} .hc .hc-arrow-s{display:block;width:60px;height:46px;color:var(--ink)} .hc .hc-arrow-t{position:absolute;right:62px;top:40px} .hc .hc-arrow.flip .hc-arrow-w{left:-1px;animation-name:hc-breathe-r} .hc .hc-arrow.flip .hc-arrow-s{transform:scaleX(-1)} .hc .hc-arrow.flip .hc-arrow-t{right:auto;left:64px} .hc .hc-arrow-t{padding:3px 7px;border-radius:var(--radius-control);background:var(--paper-sunk); box-shadow:0 0 0 1px var(--rule)} .hc .hc-arrow.gone{opacity:0;pointer-events:none} } @keyframes hc-breathe{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-4px,4px,0)}} @keyframes hc-breathe-r{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4px,4px,0)}} @media (prefers-reduced-motion:reduce){.hc .hc-arrow-w{animation:none}} @media (max-width:640px){ .hc .hc-fold-in:not(:checked)~.pl-rows [data-extra], .hc .hc-fold-in:not(:checked)~.tr-rows [data-extra]{display:none} .hc .hc-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px; margin-top:14px;padding:11px 14px;border:1px solid var(--rule);border-radius:var(--radius-control); background:var(--card);color:var(--ink);font-size:15px;font-weight:700;cursor:pointer; box-sizing:border-box;-webkit-tap-highlight-color:transparent} .hc .hc-more svg{width:17px;height:17px;flex:none} .hc .hc-more-b{display:none} .hc .hc-fold-in:checked~.hc-more .hc-more-a{display:none} .hc .hc-fold-in:checked~.hc-more .hc-more-b{display:inline} .hc .hc-fold-in:checked~.hc-more svg{transform:rotate(180deg)} .hc .hc-fold-in:focus-visible~.hc-more{outline:2px solid var(--accent);outline-offset:2px} } @media (max-width:640px){ .hc .hc-q{padding:18px 14px} .hc .pl-r{grid-template-columns:110px 1fr 58px;gap:8px} .art-in .hc .hc-l:not(.cta),.hc .hc-lw .hc-l{font-size:13px} .hc .pl-v small{display:none} .hc .hc-ax span:nth-child(even){display:none} } @media (prefers-reduced-motion:reduce){ .hc a.pl-d.t::before,.hc .hc-hint-d{animation:none} } @media (max-width:900px){ } .hc .hc-seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--card);border:1px solid var(--rule); border-radius:var(--radius-hc-seg);padding:4px;margin:0 0 16px} .hc .hc-seg button{font:inherit;font-size:15px;font-weight:700;border:0;background:transparent;color:var(--ink-soft); padding:8px 14px;border-radius:var(--radius-hc-seg-button);cursor:pointer} .hc .hc-seg button:hover{color:var(--ink)} .hc .hc-seg button[aria-pressed=true]{background:var(--ink);color:var(--card)} .hc .hc-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .hc .tx-set[hidden]{display:none} .hc .tx-r{display:grid;grid-template-columns:minmax(120px,200px) 1fr minmax(110px,auto);gap:14px;align-items:center;margin:0 0 9px} .hc .tx-t{position:relative;height:30px;background:var(--tx-track);border-radius:var(--radius-tx-bar)} .hc .tx-t i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--radius-tx-bar);transition:width .18s ease} .hc .tx-t i.coach{background:var(--teal)} .hc .tx-t i.taxi{background:var(--pc-amber)} .hc .tx-v{white-space:nowrap} .hc .tx-v b{font-size:17px} .hc .tx-v small{font-size:13px;color:var(--ink-soft)} /* tour-ranges: redesigned by the owner */ /* tour-ranges. Moved from the frozen Reykjavik build, tools/pricecharts.css at tag reykjavik-frozen-2026-09-14 (the range rows, median tick, booked point and value column). Comments as they were. Every colour and corner is a token (contract.yaml `tokens`): the track and range tints were rgba() of --accent-rgb and are this block's --tr-track and --tr-range now; the amber point is price-ladder's --pc-amber. The panel, legend frame, tooltip and pulse are price-ladder's rules (css_depends). */ .hc .tr-ax{margin-top:2px} /* A tour point is a link to that tour (render.py _pc_dot). The article's link rule weighs (0,3,1), so the reset is at the same weight with one more class. The link stays upright and the diamond is drawn by ::before, because the tooltip lives inside the link: a rotated link would turn its tooltip 45 degrees with it. ::after is an invisible 28px target around a 12px mark. */ .art-in .hc a.tr-bk:not(.cta){border-bottom:0;text-decoration:none;padding:0; cursor:pointer;z-index:2} .hc a.tr-bk{background:none;border-radius:0;box-shadow:none;transform:translate(-50%,-50%)} .hc a.tr-bk::before{content:"";position:absolute;inset:0;background:var(--pc-amber); border-radius:2px;transform:rotate(45deg);box-shadow:0 0 0 2px var(--paper-sunk); animation:pc-pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:calc(var(--x,0) * .02s)} .hc a.tr-bk::after{content:"";position:absolute;inset:-8px} /* Owner, 2026-09-23: other diamonds painted over the tooltip. The reset above weighs (0,4,1) because of `.art-in` and `:not(.cta)`, and `z-index:2` in it beat the (0,3,1) hover rule that is meant to lift the hovered point and its tooltip over the rest - so on every article page the lift never happened. The hover rule carries the same weight now. A tooltip must win over its neighbours, always. */ .hc a.tr-bk:hover,.hc a.tr-bk:focus-visible, .art-in .hc a.tr-bk:not(.cta):hover,.art-in .hc a.tr-bk:not(.cta):focus-visible{z-index:6;outline:0} .hc a.tr-bk:hover::before,.hc a.tr-bk:focus-visible::before{ animation:none;inset:-2px;box-shadow:0 0 0 2px var(--paper-sunk),0 0 0 5px var(--pc-amber-ring)} /* tour ranges */ .hc .tr-rows{display:grid;gap:8px} .hc .tr-r{display:grid;grid-template-columns:minmax(140px,220px) 1fr minmax(150px,auto);gap:14px;align-items:center} .hc .tr-t{position:relative;height:22px;background:var(--tr-track);border-radius:var(--radius-tr-track)} .hc .tr-iqr{position:absolute;top:4px;height:14px;background:var(--tr-range);border-radius:var(--radius-tr-range)} .hc .tr-med{position:absolute;top:1px;height:20px;width:3px;background:var(--ink);transform:translateX(-50%);border-radius:2px} .hc .tr-bk{position:absolute;top:50%;width:11px;height:11px;background:var(--pc-amber);border-radius:2px; transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 2px var(--paper-sunk)} .hc .tr-clip{position:absolute;right:4px;top:3px;font-size:11.5px;font-weight:700;color:var(--accent)} .hc .tr-v{white-space:nowrap} .hc .tr-v b{font-size:15px} .hc .tr-v small{display:block;font-size:12px;color:var(--ink-soft)} @media (max-width:640px){ .hc .tr-r{grid-template-columns:100px 1fr 70px;gap:8px} /* "Most booked $132" does not fit a 70px column: on a phone the legend's amber diamond stands in for the words. */ .hc .tr-v small{font-size:11px} .hc .tr-v .tr-bw{display:none} .hc .tr-v small::before{content:"";display:inline-block;width:7px;height:7px;margin:0 5px 1px 1px; background:var(--pc-amber);border-radius:1px;transform:rotate(45deg)} } @media (prefers-reduced-motion:reduce){ .hc a.tr-bk::before{animation:none} } @media (max-width:900px){ } @media (max-width:640px){.hc .tx-r{grid-template-columns:90px 1fr 84px;gap:8px} .hc .tx-v small{display:none} }@media (prefers-reduced-motion:reduce){.hc .tx-t i{transition:none} }.hc .kp-g{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px} .hc .kp-ax{display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700; color:var(--ink-soft);text-align:center} .hc .kp-c{border-radius:var(--radius-kp-cell);overflow:hidden;background:var(--card);border:1px solid var(--rule);display:grid} .hc .kp-sky{position:relative;height:104px;background:var(--kp-sky)} .hc .kp-st{position:absolute;inset:0;opacity:.85; background-image:var(--kp-stars)} .hc .kp-au{position:absolute;left:0;right:0;top:16px;height:58px;filter:blur(2px); background:var(--kp-aurora)} .hc .kp-au.weak{opacity:.42} .hc .kp-cl{position:absolute;inset:0; background:var(--kp-cloud)} .hc .kp-x{padding:11px 13px;display:grid;gap:4px} .hc .kp-x b{font-size:14px;font-weight:750;display:inline-flex;align-items:center;gap:6px} .hc .kp-x b::before{font-weight:800} .hc .kp-c.good .kp-x b{color:var(--kp-good)} .hc .kp-c.good .kp-x b::before{content:"✓"} .hc .kp-c.bad .kp-x b{color:var(--kp-bad)} .hc .kp-c.bad .kp-x b::before{content:"✕"} .hc .kp-x span{font-size:14px;line-height:1.4;color:var(--ink-soft)} @media (max-width:560px){.hc .kp-g{grid-template-columns:1fr 1fr} .hc .kp-g > span:first-child,.hc .kp-side{display:none} .hc .kp-sky{height:80px} }.tb .tb-form{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 20px} .tb .tb-row{grid-column:1/-1;display:grid;grid-template-columns:minmax(150px,210px) 1fr; gap:10px 16px;align-items:center;padding:11px 0;border-top:1px solid var(--rule-soft)} .tb .tb-row:first-child{border-top:0;padding-top:2px} .tb .tb-row>.tb-lab{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:650;color:var(--ink)} .tb .tb-lab .tb-ic{width:19px;height:19px;flex:none;color:var(--accent)} .tb .tb-chips .tb-ic{width:15px;height:15px;margin-right:6px;vertical-align:-2px} .tb .tb-chips button[aria-pressed=true] .tb-ic{color:currentColor} .tb .tb-chips{display:flex;flex-wrap:wrap;gap:6px} .tb .tb-chips button{display:inline-flex;align-items:center;font:inherit;font-size:14.5px;font-weight:600; border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);padding:8px 14px; border-radius:var(--radius-pill);cursor:pointer;min-height:38px} .tb .tb-chips button:hover{border-color:var(--accent);color:var(--accent)} .tb .tb-chips button[aria-pressed=true],.tb .tb-months button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--card)} .tb .tb-chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .tb .tb-months{display:grid;grid-template-columns:repeat(12,1fr);gap:4px} .tb .tb-months button{font:inherit;font-size:13.5px;font-weight:600;padding:7px 0;border-radius:var(--radius-control); border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);cursor:pointer} .tb .tb-months button:hover{border-color:var(--accent);color:var(--accent)} .tb .tb-months button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .tb .tb-num{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--rule); background:var(--card);border-radius:var(--radius-tb-stepper);padding:3px} .tb .tb-num button{font:inherit;font-size:17px;font-weight:700;width:34px;height:34px;border:0; background:transparent;color:var(--ink);border-radius:var(--radius-tb-step);cursor:pointer;line-height:1} .tb .tb-num button:hover{background:var(--paper-sunk);color:var(--accent)} .tb .tb-num button,.tb .tb-months button{position:relative} .tb .tb-num button::after{content:"";position:absolute;inset:-5px -3px} .tb .tb-months button::after{content:"";position:absolute;inset:-3px -2px} .tb .tb-num b{min-width:44px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums} .tb .tb-num small{color:var(--ink-soft);font-size:13px;padding-right:8px} .tb .tb-form{column-gap:0} .tb .tb-row.tb-half{grid-column:span 1;grid-template-columns:min(210px,45%) 1fr} .tb .tb-row.tb-half + .tb-row.tb-half{grid-template-columns:auto 1fr;padding-left:28px} .tb .tb-row.tb-half:first-child + .tb-row.tb-half{border-top:0;padding-top:2px} .tb .tb-row .tb-num{justify-self:start} .tb .tb-out>.ch{display:grid;gap:12px} .hc.tb .tb-out{margin-inline:-22px} @media (max-width:640px){.hc.tb .tb-out{margin-inline:-14px} }.tb .ch-win .ch-body{padding:2px 0 0} .tb .ch-win .ch-figs b{font-size:34px} .tb .ch-lines .ch-d{grid-column:1;grid-row:2} .tb .ch-lines .ch-lgo{grid-column:2;grid-row:2;align-self:start;justify-self:end} .art-in .tb .ch .ch-win .ch-lines a.ch-book:not(.cta){display:inline-block;font-size:13.5px; padding:5px 11px;border-radius:var(--radius-tb-book);position:relative} .art-in .tb .ch .ch-win .ch-lines a.ch-book:not(.cta)::after{content:"";position:absolute;inset:-6px -4px} @media (max-width:640px){.tb .tb-form{grid-template-columns:1fr 1fr;column-gap:10px} .tb .tb-row{grid-column:1/-1;grid-template-columns:1fr;gap:6px;min-width:0} .tb .tb-row>*{min-width:0} .tb .tb-chips{width:100%} .tb .tb-row.tb-half{grid-column:span 1;border-top:0;padding-top:2px} .tb .tb-row.tb-half + .tb-row:not(.tb-half){border-top:1px solid var(--rule-soft)} .tb .tb-num{width:100%;max-width:100%;justify-content:space-between;box-sizing:border-box} .tb .tb-num b{min-width:28px} .tb .tb-num small{padding-right:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tb .tb-lab .tb-ic{width:17px;height:17px} .tb .tb-months{grid-template-columns:repeat(6,1fr)} .tb .tb-row .tb-num{justify-self:stretch} .tb .tb-row.tb-half,.tb .tb-row.tb-half + .tb-row.tb-half{grid-template-columns:1fr;padding-left:0} .tb .ch-win .ch-figs b{font-size:clamp(22px,8cqi,28px)} .tb .ch-lines .ch-d{grid-column:1/-1;grid-row:auto} .tb .ch-lines .ch-lgo{grid-column:1/-1;grid-row:auto;justify-self:start;margin-top:4px} }@media (max-width:380px){.tb .tb-months{grid-template-columns:repeat(4,1fr)} }.ch .ch-form{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 20px} .ch .ch-row{grid-column:1/-1;display:grid;grid-template-columns:minmax(150px,210px) 1fr; gap:10px 16px;align-items:center;padding:11px 0;border-top:1px solid var(--rule-soft)} .ch .ch-row:first-child{border-top:0;padding-top:2px} .ch .ch-row>.ch-lab{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:650;color:var(--ink)} .ch .ch-lab .ch-ic{width:19px;height:19px;flex:none;color:var(--accent)} .ch .ch-chips{display:flex;flex-wrap:wrap;gap:6px} .ch .ch-chips button{display:inline-flex;align-items:center;font:inherit;font-size:14.5px;font-weight:600; border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);padding:8px 14px; border-radius:var(--radius-pill);cursor:pointer;min-height:38px} .ch .ch-chips button:hover{border-color:var(--accent);color:var(--accent)} .ch .ch-chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--card)} .ch .ch-chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ch .ch-chips .ch-ic{width:15px;height:15px;margin-right:6px;vertical-align:-2px} .ch .ch-months{display:grid;grid-template-columns:repeat(12,1fr);gap:4px} .ch .ch-months button{font:inherit;font-size:13.5px;font-weight:600;padding:7px 0;border-radius:var(--radius-control); border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);cursor:pointer} .ch .ch-months button:hover{border-color:var(--accent);color:var(--accent)} .ch .ch-months button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--card)} .ch .ch-months button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ch .ch-says{margin:0;padding:12px 15px;border-radius:var(--radius-ch-says);background:var(--ch-says-bg); border:1px solid var(--ch-says-line);font-size:14.5px;font-weight:600;line-height:1.5;color:var(--ink)} .ch .ch-num{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--rule); background:var(--card);border-radius:var(--radius-ch-num);padding:3px} .ch .ch-num button{font:inherit;font-size:17px;font-weight:700;width:40px;height:40px;border:0; background:transparent;color:var(--ink);border-radius:var(--radius-ch-num-button);cursor:pointer;line-height:1} .ch .ch-num button:hover{background:var(--paper-sunk);color:var(--accent)} .ch .ch-num button{position:relative} .ch .ch-num button::after{content:"";position:absolute;inset:-2px} .ch .ch-num b{min-width:44px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums} .ch .ch-num small{color:var(--ink-soft);font-size:13px;padding-right:8px} .ch .ch-form{column-gap:0} .ch .ch-row.ch-half{grid-column:span 1;grid-template-columns:min(210px,45%) 1fr} .ch .ch-row.ch-half + .ch-row.ch-half{grid-template-columns:auto 1fr;padding-left:28px} .ch .ch-row.ch-half:first-child + .ch-row.ch-half{border-top:0;padding-top:2px} .ch .ch-row .ch-num{justify-self:start} .ch .ch-out{display:grid;gap:12px} .hc.ch .ch-out{margin-inline:-22px} @media (max-width:640px){.hc.ch .ch-out{margin-inline:-14px} }.ch .ch-card{display:grid;gap:12px;padding:16px 18px;border:1px solid var(--rule); border-radius:var(--radius-card);background:var(--card);min-width:0} .ch .ch-win{--pz:var(--ch-prize);--pz-ink:var(--ch-prize-ink);border:4px solid var(--pz);border-radius:var(--radius-ch-win); box-shadow:var(--shadow-ch-win)} .ch .ch-win.ch-has-pic{padding:0;overflow:hidden;gap:0} .ch .ch-body{display:grid;gap:12px;min-width:0} .ch .ch-has-pic .ch-body{padding:0 18px 18px} .ch .ch-pic{position:relative;margin:0;aspect-ratio:3.25;overflow:hidden;background:var(--paper-sunk)} .ch .ch-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)} .art-in .ch a.ch-pic-link:not(.cta){position:absolute;inset:0;display:block;color:inherit; text-decoration:none;border-bottom:0;cursor:pointer} .ch a.ch-pic-link:hover img{transform:scale(1.04)} .ch a.ch-pic-link:focus-visible{outline:3px solid var(--accent);outline-offset:-3px} .ch .ch-chips-pic{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px;z-index:1} .ch .ch-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1; color:var(--ch-chip-ink);background:var(--ch-chip-bg);padding:6px 10px 6px 8px;border-radius:var(--radius-pill); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:nowrap} .ch .ch-chip-ic{width:15px;height:15px;flex:none} .ch .ch-chip-rate .ch-chip-ic{color:var(--ch-chip-rate)} .ch .ch-chip-fc .ch-chip-ic{color:var(--ch-chip-fc)} .ch .ch-flag{justify-self:start;display:inline-flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap; letter-spacing:.07em;text-transform:uppercase;font-weight:800;background:var(--pz,var(--ink)); color:var(--pz-ink,var(--card));padding:6px 13px 6px 9px;border-radius:var(--radius-pill)} .ch .ch-flag-ic{width:18px;height:18px;flex:none} .ch .ch-has-pic .ch-flag{margin-top:-16px;position:relative;box-shadow:var(--shadow-ch-flag)} .ch .ch-win .ch-go{justify-self:stretch} .art-in .ch .ch-win a.ch-book:not(.cta){display:block;text-align:center;font-size:16px;padding:12px 18px;border-radius:var(--radius-ch-win-book)} .ch .ch-shine .ch-pic::after{content:"";position:absolute;inset:0;pointer-events:none; background:var(--ch-shine); transform:translateX(-120%);animation:ch-shine 1.1s .25s cubic-bezier(.3,.7,.2,1) 1 forwards} @keyframes ch-shine{to{transform:translateX(120%)}} @media (prefers-reduced-motion:reduce){.ch .ch-shine .ch-pic::after{animation:none;display:none} }.ch .ch-name{display:flex;align-items:center;gap:9px;margin:0;font-size:19px;font-weight:750; letter-spacing:-.01em;color:var(--ink)} .ch .ch-name .ch-ic{width:21px;height:21px;flex:none;color:var(--accent)} .ch .ch-figs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);gap:0 26px;align-items:end} .ch .ch-figs div{display:grid;gap:1px;min-width:0} .ch .ch-figs b{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.05; font-variant-numeric:tabular-nums;color:var(--ink)} .ch .ch-figs small{font-size:12.5px;color:var(--ink-soft);line-height:1.35} .ch .ch-lines{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule-soft); border:1px solid var(--rule-soft);border-radius:var(--radius-ch-lines);overflow:hidden} .ch .ch-lines li{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:9px 12px;background:var(--card)} .ch .ch-lines .ch-k{font-size:14.5px;font-weight:650;color:var(--ink)} .ch .ch-lines .ch-v{font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums} .ch .ch-lines .ch-d{grid-column:1/-1;font-size:13px;color:var(--ink-soft);line-height:1.45} .art-in .ch .ch-lines .ch-d a:not(.cta){color:var(--ink-faint);text-decoration:none;border-bottom:1px dotted var(--rule)} .art-in .ch .ch-lines .ch-d a:not(.cta):hover{color:var(--accent);border-bottom-color:var(--accent)} .ch .ch-why{list-style:none;margin:0;padding:0;display:grid;gap:5px} .ch .ch-why li{display:grid;grid-template-columns:16px 1fr;gap:8px;font-size:14px;line-height:1.45;color:var(--ink-soft)} .ch .ch-why li::before{content:"+";font-weight:800;color:var(--accent);text-align:center} .ch .ch-why li.ch-con::before{content:"!";color:var(--ch-con)} .ch .ch-why li.ch-veto::before{content:"\00d7";color:var(--ch-veto)} .ch .ch-why li.ch-veto{color:var(--ink)} .ch .ch-go{justify-self:start} .art-in .ch a.ch-book:not(.cta){display:inline-block;background:var(--cta);color:var(--cta-ink); font-size:14.5px;font-weight:700;padding:8px 16px;border-radius:var(--radius-control);text-decoration:none; border-bottom:0;white-space:nowrap} .art-in .ch a.ch-book:not(.cta):hover{background:var(--cta-hover);color:var(--cta-ink)} .ch .ch-no{background:var(--paper-sunk);border-style:dashed} .ch .ch-no .ch-name{color:var(--ink-soft)} .ch .ch-no .ch-name .ch-ic{color:var(--ink-faint)} @media (max-width:640px){.ch .ch-form{grid-template-columns:1fr 1fr;column-gap:10px} .ch .ch-row{grid-column:1/-1;grid-template-columns:1fr;gap:6px;min-width:0} .ch .ch-row>*{min-width:0} .ch .ch-chips{width:100%} .ch .ch-row.ch-half{grid-column:span 1;border-top:0;padding-top:2px} .ch .ch-row.ch-half + .ch-row:not(.ch-half){border-top:1px solid var(--rule-soft)} .ch .ch-num{width:100%;max-width:100%;justify-content:space-between;box-sizing:border-box} .ch .ch-num b{min-width:28px} .ch .ch-num small{padding-right:4px;white-space:normal;line-height:1.2;font-size:12.5px;text-align:right} .ch .ch-row .ch-num{justify-self:stretch} .ch .ch-row.ch-half,.ch .ch-row.ch-half + .ch-row.ch-half{grid-template-columns:1fr;padding-left:0} .ch .ch-lab .ch-ic{width:17px;height:17px} .ch .ch-months{grid-template-columns:repeat(6,1fr)} .ch .ch-card{padding:14px 14px} .ch .ch-figs{grid-auto-columns:auto;justify-content:start;gap:0 26px} .ch .ch-figs:has(> div:nth-child(3)){justify-content:space-between;gap:0 10px} .ch .ch-body{container-type:inline-size} .ch .ch-figs div{min-width:auto} .ch .ch-figs b{font-size:clamp(15px,5.6cqi,19px);white-space:nowrap} .ch .ch-figs small{font-size:11.5px} .ch .ch-chips-pic{top:10px;left:10px;right:10px;gap:4px} .ch .ch-chip{font-size:11.5px;padding:5px 8px 5px 6px;gap:4px} .ch .ch-chip-ic{width:12px;height:12px} .ch .ch-has-pic .ch-body{padding:0 14px 14px} .ch .ch-pic{aspect-ratio:1} .ch .ch-lines li{padding:9px 11px} } /* contact-form: redesigned by the owner */ /* contact-form: the publisher's details beside the form, the fields, the send states. Moved from the frozen Reykjavik stylesheet (contact.css at tag reykjavik-frozen-2026-09-14) by tools/cssowners.py; comments as they were. Colours and corner radii read theme tokens (tokens.reference.css holds Reykjavik's); the two `font:inherit` shorthands are written as their longhands. */ /* ==== from contact.css ==== *//* ---- contact page (render.py contact_form, tools/contact.js) ---- Two columns on a wide screen - how to reach us beside the form - one on a phone. Controls follow the calculators' form language (chooser.css): 16px text so iOS does not zoom, 44px tall fields, a visible focus ring. */ .cf{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:start; margin:2.2em 0;padding:26px 24px;background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-form)} .art-in .cf .cf-h{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px} .art-in .cf .cf-h::before{content:none} .cf .cf-lead{margin:0 0 18px;color:var(--ink-soft);font-size:16.5px} .cf .cf-ways{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px} .cf .cf-ways li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;margin:0;padding:0} .cf .cf-ways li::before{content:none} .cf .cf-ways svg{width:40px;height:40px;padding:9px;box-sizing:border-box;border-radius:var(--radius-form-icon); background:var(--card);border:1px solid var(--rule);color:var(--accent)} .cf .cf-ways small{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase; font-weight:700;color:var(--ink-soft)} .cf .cf-ways span{font-size:16.5px;color:var(--ink);overflow-wrap:anywhere} .art-in .cf .cf-ways a:not(.cta):not(.cta2){color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;font-weight:600} .art-in .cf .cf-ways a:not(.cta):not(.cta2):hover{border-bottom-color:currentColor} .cf .cf-note{margin:0;font-size:14.5px;color:var(--ink-soft)} .cf .cf-form{display:grid;gap:14px;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-form-panel);padding:20px} .cf .cf-row{display:grid;gap:6px} .cf .cf-row[hidden],.cf .cf-actions[hidden],.cf .cf-privacy[hidden],.cf .cf-turnstile[hidden]{display:none} .cf label{font-size:15px;font-weight:650;color:var(--ink)} .cf label i{font-style:normal;font-weight:500;color:var(--ink-soft);font-size:13.5px} .cf input,.cf select,.cf textarea{font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;font-size:16px;line-height:inherit;font-family:inherit;color:var(--ink);background:var(--card); border:1px solid var(--rule);border-radius:var(--radius-form-field);padding:11px 13px;min-height:46px;box-sizing:border-box;width:100%} .cf textarea{resize:vertical;min-height:140px;line-height:1.5} .cf input:focus-visible,.cf select:focus-visible,.cf textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} .cf [aria-invalid="true"]{border-color:var(--form-invalid)} .cf .cf-err{font-size:13.5px;color:var(--form-error-ink);font-weight:600} .cf .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .cf .cf-turnstile{min-height:66px} .cf .cf-privacy{margin:0;font-size:13.5px;color:var(--ink-soft)} .cf .cf-send{font-style:inherit;font-variant:inherit;font-weight:700;font-stretch:inherit;font-size:16px;line-height:inherit;font-family:inherit;color:var(--cta-ink);background:var(--cta); border:0;border-radius:var(--radius-form-field);padding:13px 22px;min-height:48px;cursor:pointer;width:100%} .cf .cf-send:hover{background:var(--cta-hover,var(--cta))} .cf .cf-send:disabled{opacity:.7;cursor:progress} .cf .cf-send:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .cf .cf-status{margin:0;font-size:15.5px;font-weight:600;padding:12px 14px;border-radius:var(--radius-form-field)} .cf .cf-status.good{background:var(--form-good-bg);color:var(--form-good-ink)} .cf .cf-status.bad{background:var(--form-bad-bg);color:var(--form-bad-ink)} @media (max-width:760px){ .cf{grid-template-columns:minmax(0,1fr);padding:20px 16px;gap:20px;border-radius:var(--radius-form-panel)} .cf .cf-form{padding:16px} } /* Phones (owner, 2026-09-15, decision 1a: fix the overflow). With a plain `1fr` column the grid grew to the Turnstile widget's 300px minimum and pushed the lead, the details and the form out of the card on a 360-390px phone. The column may now shrink, the paddings give way first, and below 400px the widget is drawn at 86% so it fits the form. */ .cf>*{min-width:0} @media (max-width:420px){ .cf{padding:18px 12px} .cf .cf-form{padding:14px 12px} } @media (max-width:400px){ .cf .cf-turnstile{zoom:.86} } @media (max-width:900px){ } .art-in .aff-note{display:flex;gap:8px;align-items:flex-start;margin:0 0 1.4em;padding:9px 12px; font-size:14px;line-height:1.5;color:var(--ink-soft);background:var(--paper-sunk); border:1px solid var(--rule-soft,var(--rule));border-radius:var(--radius-note);max-width:none} .art-in .aff-note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ink-soft)} .art-in .aff-note a:not(.cta):not(.cta2){color:var(--accent);text-decoration:underline;text-underline-offset:2px;border-bottom:0} .hubhead.e404{margin-bottom:22px} .e404-code{font-size:clamp(64px,12vw,120px);font-weight:800;letter-spacing:-.04em;line-height:1; color:var(--accent);margin:0 0 6px;opacity:.9} .e404-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;max-width:760px} .e404-links li{margin:0} .e404-links a{display:block;padding:14px 16px;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-panel); color:var(--ink);font-weight:650;text-decoration:none} .e404-links a:hover{border-color:var(--accent);color:var(--accent)} /* amazon-gear: redesigned by the owner */ /* amazon-gear. Extracted from the frozen Reykjavik build's contact.css; redesigned by the owner in review 5 (2026-09-15): each item is a row with a small square photo in the first column, the label and reason beside it, and a "Check on Amazon" button. The lab sizes (--amz-*) are local variables with defaults (contract local_tokens). */ /* ---- packing list with Amazon searches (render.py amazon_gear) ---- */ .art-in .amz{margin:2em 0;padding:20px 22px;background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-gear-panel)} .art-in .amz h3{margin:0 0 6px;font-size:21px;font-weight:750;letter-spacing:-.01em} .art-in .amz > p{margin:0 0 14px;color:var(--ink-soft);font-size:16px} .art-in .amz-list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .art-in .amz-list li{margin:0;padding:0} .art-in .amz-list li::before{content:none} .art-in .amz .amz-row{display:grid;grid-template-columns:var(--amz-photo,72px) minmax(0,1fr) auto;align-items:center; column-gap:var(--amz-gap,14px);row-gap:10px;padding:var(--amz-row-pad,12px);background:var(--card); border:1px solid var(--rule);border-radius:var(--radius-gear-item)} .art-in .amz .amz-row.amz-noimg{grid-template-columns:minmax(0,1fr) auto} .art-in .amz .amz-ph{width:var(--amz-photo,72px);height:var(--amz-photo,72px);object-fit:cover;display:block; border-radius:var(--radius-gear-photo);background:var(--paper-sunk)} .art-in .amz .amz-tx{display:grid;gap:3px;min-width:0} .art-in .amz .amz-tx b{font-size:16px;font-weight:700;color:var(--ink)} .art-in .amz .amz-tx span{font-size:14.5px;color:var(--ink-soft);line-height:1.45} .art-in .amz a.amz-btn{min-height:var(--amz-btn-h,42px);padding-block:0;border-radius:var(--amz-btn-radius,var(--radius-control)); text-decoration:none;border-bottom:0;white-space:nowrap} .art-in .amz-note{margin:12px 0 0;font-size:13px;color:var(--ink-soft)} @media (max-width:900px){ .art-in .amz .amz-row{grid-template-columns:var(--amz-photo,72px) minmax(0,1fr);align-items:start} .art-in .amz .amz-row.amz-noimg{grid-template-columns:minmax(0,1fr)} .art-in .amz a.amz-btn{grid-column:1 / -1;width:100%;white-space:normal} } .site-search{max-width:760px;margin:0 0 40px; --pagefind-ui-scale:1;--pagefind-ui-primary:var(--accent);--pagefind-ui-text:var(--ink); --pagefind-ui-background:var(--card);--pagefind-ui-border:var(--rule);--pagefind-ui-tag:var(--paper-sunk); --pagefind-ui-border-width:1px;--pagefind-ui-border-radius:var(--radius-panel);--pagefind-ui-font:inherit} .site-search .pagefind-ui__search-input{font-size:17px} .site-search .pagefind-ui__result-link{color:var(--accent)} .lsw{position:relative} .lsw summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px; -webkit-user-select:none;user-select:none} .lsw summary::-webkit-details-marker{display:none} .lsw summary svg{width:14px;height:14px} .lsw summary .chev{width:12px;height:12px;transition:transform .18s ease} .lsw[open] summary .chev{transform:rotate(180deg)} .lsw-m{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;z-index:80; background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-menu); box-shadow:var(--shadow-menu);padding:7px;display:flex;flex-direction:column} .lsw-m a,.lsw-m .cur,.lsw-m button{display:flex;align-items:center;gap:10px;padding:8px 11px; border-radius:var(--radius-item);font-size:13.5px;color:var(--ink);text-decoration:none; text-shadow:none;white-space:nowrap;border:0;background:none;font-family:inherit; width:100%;text-align:left;cursor:pointer} .lsw-m a:hover,.lsw-m button:hover{background:var(--card)} .lsw-cur{min-width:250px} .lsw-cur em{font-style:normal;margin-left:auto;padding-left:14px;font-size:11.5px; color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap} .lsw-cur button>svg{width:14px;height:14px;flex:none;margin-left:10px;color:var(--accent)} .lsw-cur button[aria-current]{font-weight:800} .lsw-m .cur{font-weight:700} .lsw-m .cur svg{width:14px;height:14px;margin-left:auto;color:var(--accent)} .lsw-m i{font-style:normal;font-weight:800;font-size:10.5px;letter-spacing:.04em; width:24px;flex:none;color:var(--ink-faint)} .lsw-flat{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 0;font-size:13.5px} .lsw-flat a{color:inherit;text-decoration:none;opacity:.75} .lsw-flat a:hover{opacity:1;text-decoration:underline} .lsw-flat b{font-weight:800} .drawer{position:fixed;top:66px;left:0;right:0;bottom:0;height:auto; display:none;flex-direction:column;background:var(--paper); border-top:1px solid var(--rule);z-index:70;overscroll-behavior:contain} .drawer[data-open]{display:flex;animation:dw-in .24s ease} @keyframes dw-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.drawer[data-open]{animation:none} }body.dw-open{overflow:hidden} .dw-scroll{flex:1;overflow-y:auto;padding:10px 26px 24px;-webkit-overflow-scrolling:touch; scrollbar-width:none} .dw-scroll::-webkit-scrollbar{display:none} .drawer details{border-bottom:1px solid var(--rule-soft)} .drawer details:last-child{border-bottom:0} .drawer summary{display:flex;align-items:center;justify-content:space-between; padding:19px 0;font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink); cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none} .drawer summary::-webkit-details-marker{display:none} .drawer summary svg{width:17px;height:17px;flex:none;color:var(--ink-faint); transition:transform .2s ease} .drawer details[open] summary svg{transform:rotate(180deg)} .dw-links{padding:2px 0 16px} .drawer .dw-links a{display:block;padding:11.5px 0;font-size:15.5px;font-weight:500; color:var(--ink-soft);text-decoration:none;border:0} .drawer .dw-links a.all{color:var(--accent);font-weight:700;padding-top:14px} .dw-foot{flex:none;border-top:1px solid var(--rule);background:var(--card)} .burger span{transition:transform .2s ease,opacity .15s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .site-header.dw-solid{background:var(--paper);border-bottom-color:var(--rule)} .site-header.dw-solid .brand b{color:var(--ink);text-shadow:none} .site-header.dw-solid .brand svg path{fill:var(--ink);stroke:var(--ink)} .site-header.dw-solid .burger{background:var(--card);border-color:var(--rule)} .site-header.dw-solid .burger span{background:var(--ink)} .picker{position:fixed;inset:0;z-index:100;background:var(--paper); display:flex;flex-direction:column;animation:pk-in .22s ease} .picker[hidden]{display:none} @keyframes pk-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.picker{animation:none} }.pk-top{display:flex;align-items:center;gap:12px;padding:20px 26px; border-bottom:1px solid var(--rule);flex:none} .pk-top svg{width:20px;height:20px;color:var(--accent);flex:none} .pk-top b{font-size:19px;letter-spacing:-.01em} .pk-x{margin-left:auto;border:1px solid var(--rule);background:var(--card); border-radius:var(--radius-pill);width:38px;height:38px;display:flex;align-items:center; justify-content:center;cursor:pointer;color:var(--ink)} .pk-x svg{width:16px;height:16px;color:inherit} .pk-list{flex:1;overflow:hidden;padding:8px 14px calc(10px + env(safe-area-inset-bottom)); display:flex;flex-direction:column;justify-content:center} .pk-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left; flex:1 1 0;min-height:42px;max-height:70px;padding:0 14px; border:0;border-radius:var(--radius-row);background:none;cursor:pointer; font-size:16.5px;font-weight:600;color:var(--ink);text-decoration:none} .pk-row:hover{background:var(--card)} .pk-row[aria-current]{font-weight:800} .pk-row i{font-style:normal;font-weight:800;font-size:12px;width:38px;height:38px; flex:none;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-pill); background:var(--card);border:1px solid var(--rule);color:var(--ink-soft); letter-spacing:.02em} .pk-row span{flex:1;min-width:0} .pk-row em{font-style:normal;margin-left:12px;font-size:12.5px;color:var(--ink-faint); font-variant-numeric:tabular-nums;white-space:nowrap;flex:none} .pk-row>svg{width:16px;height:16px;color:var(--accent);flex:none;margin-left:10px} .pk-row[aria-current]>svg{margin-left:auto} .pk-row em+svg{margin-left:10px} .dw-foot{padding:10px 14px calc(12px + env(safe-area-inset-bottom))} .dw-set{display:flex;align-items:center;gap:13px;width:100%;padding:15px 12px; border:0;background:none;border-radius:var(--radius-row);cursor:pointer;text-align:left; font-size:15.5px;color:var(--ink)} .dw-set:hover{background:var(--paper)} .dw-set>svg:first-child{width:19px;height:19px;color:var(--accent);flex:none} .dw-set>svg:last-child{width:15px;height:15px;color:var(--ink-faint);flex:none;margin-left:auto} .dw-set .s-l{font-weight:700} .dw-set .s-v{color:var(--ink-faint);font-weight:600;margin-left:auto} .dw-set .s-v+svg{margin-left:10px} .dw-set+.dw-set{border-top:1px solid var(--rule-soft)} body.pk-open{overflow:hidden} .ht-head b{display:flex;align-items:center;gap:10px} .ht-head .ht-mark{width:26px;height:26px;flex:none;color:var(--accent)} .ht-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .htools .ht-grid a,.art-in .htools .ht-grid a{text-decoration:none;border-bottom:0; color:var(--ink);font-size:12.5px;font-weight:700;line-height:1.2; display:flex;align-items:center;gap:11px;padding:11px 12px; transition:transform .15s ease,box-shadow .15s ease} .ht-grid a:hover{transform:translateY(-2px);box-shadow:var(--shadow-tool-hover)} .ht-grid i{flex:none;width:30px;height:30px;border-radius:var(--radius-tool-icon-sm);display:flex;align-items:center; justify-content:center;background:color-mix(in srgb,var(--accent),var(--on-ink) 86%); color:var(--accent)} .ht-grid i svg{width:17px;height:17px} .ht-grid span{flex:1;min-width:0} .ht-grid .ht-a{width:13px;height:13px;flex:none;color:var(--ink-faint)} @media(max-width:900px){.ht-grid{grid-template-columns:1fr 1fr} }@media(max-width:430px){.ht-grid{grid-template-columns:1fr 1fr} .ht-grid a{padding:11px 10px;font-size:12.5px} }.tourbar[hidden],.tb-pill[hidden]{display:none!important} .tourbar{position:fixed;z-index:60;overflow:visible;color:var(--ink); right:16px;bottom:22px;left:auto;padding:0;background:none;border:0; container-type:inline-size;animation:tb-in .22s ease-out} @keyframes tb-in{from{transform:translateY(calc(100% + 30px))}to{transform:none}} @media (prefers-reduced-motion:reduce){.tourbar{animation:none} }.tb-card{display:grid; grid-template-columns:82px minmax(0,1fr) fit-content(46%); grid-template-areas:"im title price" "im md cta" "im meta cta"; column-gap:16px;row-gap:6px;align-items:center; background:var(--paper-sunk);border:1px solid var(--rule); border-radius:var(--radius-card);padding:14px; text-decoration:none;color:var(--ink);box-shadow:var(--shadow-bar)} .tb-title{grid-area:title;align-self:end;font-size:16px;font-weight:700;line-height:1.3; color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} .tb-im{grid-area:im;align-self:center;width:82px;height:82px;border-radius:var(--radius-thumb); overflow:hidden;background:var(--rule-soft)} .tb-im img{width:100%;height:100%;object-fit:cover;display:block} .tb-md{grid-area:md;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .tb-b{background:var(--badge);color:var(--badge-ink);font-size:10.5px;font-weight:700; letter-spacing:.02em;padding:3px 7px;border-radius:var(--radius-pill);white-space:nowrap} .tb-r{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap} .tb-star{color:var(--star)} .tb-meta{grid-area:meta;align-self:start;display:flex;gap:10px;flex-wrap:wrap; font-size:12.5px;color:var(--ink-soft)} .tb-p{grid-area:price;align-self:end;text-align:right;white-space:nowrap;line-height:1.2; font-size:19px;font-weight:800;color:var(--ink)} .tb-p i{display:block;font-style:normal;font-size:11px;font-weight:600; color:var(--ink-soft);margin:0 0 2px} .tb-cta{grid-area:cta;align-self:start;justify-self:end;background:var(--cta); color:var(--cta-ink);font-size:13.5px;font-weight:700;padding:10px 16px; border-radius:var(--radius-pill);white-space:nowrap;text-align:center;margin-top:4px} .tb-t{color:var(--teal)} .tb-x{position:absolute;top:-13px;right:-9px;z-index:2; width:30px;height:30px;border-radius:50%;cursor:pointer; border:1px solid var(--rule);background:var(--card);color:var(--ink-soft); display:flex;align-items:center;justify-content:center;padding:0; box-shadow:var(--shadow-bar-close); transition:background .15s ease,color .15s ease,transform .15s ease} .tb-x:hover{background:var(--ink);color:var(--card);border-color:var(--ink)} .tb-x:active{transform:scale(.92)} .tb-x svg{width:13px;height:13px} .tb-x::after{content:"";position:absolute;inset:-7px} .tb-pill{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60; border:0;background:var(--ink);color:var(--on-ink);font-weight:700;font-size:12.5px;padding:11px 17px; border-radius:var(--radius-pill);cursor:pointer;box-shadow:var(--shadow-bar-pill)} body.tb-open{padding-bottom:var(--tb-h,0px)} @container (max-width:439px){ .tb-card{grid-template-columns:56px minmax(0,1fr); grid-template-areas:"im title" "im md" "price price" "cta cta" "meta meta"; column-gap:12px;row-gap:6px;padding:12px} .tb-im{width:56px;height:56px} .tb-title{font-size:14.5px} .tb-p{text-align:left;font-size:17px;margin-top:4px} .tb-p i{display:inline;margin:0 4px 0 0} .tb-cta{justify-self:stretch;margin-top:0;padding:9px 12px} .tb-meta{gap:4px 10px;font-size:12px} } .tourbar[data-mode=bar],.tourbar[data-mode=pill]{container-type:normal} .tourbar[data-mode=pill] .tb-card{grid-template-columns:40px auto;grid-template-areas:"im price"; column-gap:8px;padding:5px 14px 5px 5px;border-radius:var(--radius-pill)} .tourbar[data-mode=pill] .tb-im{width:40px;height:40px;border-radius:50%} .tourbar[data-mode=pill] .tb-p{align-self:center;text-align:left;font-size:15px;margin:0} .tourbar[data-mode=pill] .tb-p i{display:block;font-size:10.5px;margin:0} .tourbar[data-mode=pill] :is(.tb-md,.tb-cta,.tb-meta){display:none} .tourbar[data-mode=pill] .tb-title{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} .tourbar[data-mode=pill] .tb-x{top:-11px;right:-11px;width:24px;height:24px} .tourbar[data-mode=pill] .tb-x::after{inset:-10px} .tourbar[data-mode=pill] .tb-x svg{width:11px;height:11px} .tourbar[data-mode=bar]{left:0;right:0;bottom:0;width:auto!important} .tourbar[data-mode=bar] .tb-card{grid-template-columns:56px minmax(0,1fr) auto; grid-template-areas:"im title price" "im md cta";column-gap:10px;row-gap:2px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)) 10px; border-width:1px 0 0;border-radius:var(--radius-card) var(--radius-card) 0 0;box-shadow:var(--shadow-bar-edge)} .tourbar[data-mode=bar] .tb-im{width:56px;height:56px;border-radius:var(--radius-thumb-small);align-self:center} .tourbar[data-mode=bar] .tb-title{font-size:14px;line-height:1.25;align-self:end} .tourbar[data-mode=bar] .tb-md{align-self:start;gap:6px;flex-wrap:nowrap} .tourbar[data-mode=bar] .tb-b,.tourbar[data-mode=bar] .tb-meta{display:none} .tourbar[data-mode=bar] .tb-p{align-self:end;text-align:right;font-size:16px;margin:0} .tourbar[data-mode=bar] .tb-p i{display:inline;font-size:11px;margin:0 3px 0 0} .tourbar[data-mode=bar] .tb-cta{align-self:start;justify-self:end;margin:0; font-size:12.5px;line-height:1.2;padding:6px 12px} .tourbar[data-mode=bar] .tb-x{top:-15px;right:10px} .smap-lang{margin-top:34px} .smap-lang h2{display:flex;align-items:baseline;gap:10px;font-size:24px; border-bottom:1px solid var(--rule);padding-bottom:8px} .smap-lang h2 i{font-style:normal;font-size:13px;font-weight:400;color:var(--ink-faint)} .smap-lang .hubcol h3{display:flex;align-items:baseline;gap:8px;font-size:17px;margin:18px 0 10px} .smap-lang .hubcol h3 i{font-style:normal;font-size:12px;font-weight:400;color:var(--ink-faint)} .smap-lang .hubcol h3 a{color:inherit;text-decoration:none} .smap-lang .hubcol h3 a:hover{text-decoration:underline} .smap-jump{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px} .smap-jump a{color:var(--ink-soft);text-decoration:none} .smap-jump a:hover{text-decoration:underline} .hubwrap{max-width:var(--container);margin:0 auto;padding:26px var(--gutter) 80px} .hubhead{max-width:660px;margin:0 0 34px} .hubhead h1{font-size:clamp(30px,5vw,44px);line-height:1.1;letter-spacing:-.025em;margin:0 0 12px} .hubhead p{color:var(--ink-soft);font-size:18px;margin:0} .hubhead .cnt{margin-top:12px;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--accent);font-weight:700} .huboffer{max-width:var(--measure);margin:0 0 34px} .hubfinder{margin:0 0 38px;max-width:none;padding:0} .hubnote{max-width:none;padding:0;margin:0} .huboffer .offer{margin:0} .hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:30px 34px;align-items:start} .hubcol h2{font-size:15px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint); border-bottom:1px solid var(--rule);padding-bottom:9px;margin:0 0 12px;display:flex; justify-content:space-between;align-items:baseline} .hubcol h2 i{font-style:normal;font-size:13px;color:var(--ink-faint);opacity:.7} .hubcol ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .hubcol li a{display:block;font-weight:700;color:var(--ink);text-decoration:none;font-size:16.5px;line-height:1.3} .hubcol li a:hover{color:var(--accent)} .hubcol li span{display:block;color:var(--ink-soft);font-size:13.5px;line-height:1.45;margin-top:3px} .hnav .mpanel .mhead,.dw-links .mhead{display:block;font-size:11px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint); padding:6px 0 4px;pointer-events:none} .hnav .mpanel .mrule,.dw-links .mrule{display:block;height:1px;background:var(--rule); margin:8px 0 6px} .site-header .hnav .mpanel .mhead{color:var(--ink-faint);text-shadow:none;border-radius:0} .site-header .hnav .mpanel .mrule{padding:0;border-radius:0} .hnav .mpanel a.all{color:var(--accent);font-weight:700; border-top:1px solid var(--rule-soft);margin-top:5px;padding-top:9px} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--on-ink);padding:10px 16px;z-index:200} .skip:focus{left:8px;top:8px} .crumbs{max-width:var(--container);margin:0 auto;padding:14px var(--gutter) 0;display:flex; gap:7px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--ink-faint)} .crumbs a{color:var(--ink-soft);text-decoration:none; padding:11px 6px;margin:-11px -6px} .crumbs a:hover{color:var(--accent)} .crumbs svg{width:14px;height:14px;flex:none;opacity:.55} .crumbs [aria-current]{color:var(--ink)} .hnav .mgroup{position:relative} .hnav .mgroup>button{background:none;border:0;font:inherit;cursor:pointer;color:inherit; display:inline-flex;align-items:center;gap:2px;padding:8px 5px;white-space:nowrap} .site-header:not(.solid) .hnav .mgroup>button{color:var(--on-photo); text-shadow:var(--on-photo-shadow)} .hnav .mgroup>button svg{width:12px;height:12px;transition:transform .15s} .hnav .mgroup[data-open] >button svg{transform:rotate(180deg)} .hnav .mpanel{display:none;position:absolute;top:100%;left:-14px;min-width:250px;background:var(--card); border:1px solid var(--rule);border-radius:var(--radius-panel);padding:9px;box-shadow:var(--shadow-panel);z-index:60} .hnav .mgroup[data-open] .mpanel{display:grid} .hnav .mpanel a{padding:7px 11px;border-radius:var(--radius-link);text-decoration:none;color:var(--ink);font-size:15.5px} .hnav .mpanel a:hover{background:var(--paper-sunk);color:var(--accent)} .drawer details a{display:block;padding:9px 14px;color:var(--ink-soft);text-decoration:none} .srcgrid .src{position:relative;display:inline-flex} .srcgrid .tip{display:none;position:absolute;bottom:130%;left:50%;transform:translateX(-50%); background:var(--ink);color:var(--on-ink);padding:9px 12px;border-radius:var(--radius-source-tip);width:max-content;max-width:250px; font-size:13px;line-height:1.45;z-index:70} .srcgrid .tip i{display:block;opacity:.72;font-style:normal} .srcgrid .src:hover .tip,.srcgrid .src:focus .tip{display:block} @media (max-width:900px){:root{--gutter:20px} .burger{display:flex} .hnav, .hutil{display:none} .hero{margin-top:-66px} .hero-bg img{object-position:72% 50%} .hero-in{padding-bottom:64px} .hero h1{font-size:38px} .cta, .cta2{width:100%} .glance-in{grid-template-columns:1fr 1fr;gap:18px;padding:22px var(--gutter)} .glance-in>div{padding-inline:0;border-left:0; border-top:1px solid var(--glance-rule);padding-block:14px} .glance-in>div:nth-child(-n+2){border-top:0;padding-top:0} .glance b{font-size:23px} .glance .gl-ic svg{width:56px;height:56px} .secs-in{grid-template-columns:1fr} .sec{grid-template-columns:1fr} .sec-img img{aspect-ratio:16/9} .secs h2{font-size:24px} .secs{padding-top:34px} .frow{flex-direction:column;gap:2px} .frow dd{text-align:left} .frow dt{max-width:none} .tw{display:none} .stack{display:block} .myth>li{grid-template-columns:1fr;gap:7px} .vd{width:auto;justify-self:start} .price.sm{font-size:14.5px} .compact{grid-template-columns:78px minmax(0,1fr); grid-template-areas:"media text" "price cta";column-gap:14px;row-gap:12px; align-items:start} .compact.noimg{grid-template-columns:1fr; grid-template-areas:"text" "cta"} .compact img{width:78px;height:78px} .compact > .cmedia{grid-area:media} .compact > .cmedia, .compact .price{ justify-self:center;text-align:center} .compact > .side{display:contents} .compact .price{grid-area:price;align-self:center; display:flex;flex-direction:column;align-items:center;gap:1px} .compact .cta{grid-area:cta;justify-self:stretch;align-self:center; width:100%;white-space:nowrap} .compact .cfeat{display:none} .compact > div:not(.cmedia):not(.side) p{display:none} .compact .price b{font-size:22px} .compact .cta{white-space:nowrap} .faq h2{font-size:var(--size-h2-sm)} .faq summary{font-size:16px} .faq .a{font-size:16px;padding-right:0} }@media (max-width:640px){.art-in h2.ah > span,.art-in h2.ah.ah-wait > span{background-size:100% .66em;transition:none} }@media(prefers-reduced-motion:reduce){.art-in h2.ah > span,.art-in h2.ah::before{transition:none} }@media (max-width:900px){.sheet .tw{display:block;margin:0;padding:0} .sheet table{min-width:480px} .ds td:first-child{width:auto} .ft-src .srcgrid{grid-template-columns:minmax(0,1fr)} .ft-top{grid-template-columns:1fr;gap:20px;align-items:start} .fbrand{padding:0} .ft-blurb{border-left:0;padding-left:0} .ft-cols{grid-template-columns:1fr 1fr;gap:22px} .ft-mid{grid-template-columns:1fr;gap:20px} .ft-src{padding:0} .ft-aff{border-left:0;border-top:1px solid var(--rule);padding:18px 0 0} .ft-legal{flex-direction:column;align-items:flex-start;gap:12px} } /* directory-portal */ /* directory-portal: the homepage door into an item directory (owner, 2026-09-16, design A of the portal lab: text, three highlights and a button beside four photos). */ .portal{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;align-items:start;margin:2.2em 0;padding:22px; background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card); font-family:var(--font-body);color:var(--ink)} .portal .pt-eb{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent);margin:0 0 6px} .portal .pt-h{font-family:var(--font-head);font-size:26px;line-height:1.15;letter-spacing:-.02em;margin:0 0 8px} .portal .pt-ln{color:var(--ink-soft);margin:0 0 14px;font-size:16px;line-height:1.5} .portal .pt-top{list-style:none;padding:0;margin:0 0 18px} .portal .pt-top li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--rule-soft)} .portal .pt-top .pt-m{color:var(--ink-faint);white-space:nowrap;display:inline-flex;gap:4px;align-items:center} .portal .pt-top .pt-m svg{width:14px;height:14px;color:var(--star)} .portal .pt-go{display:inline-flex;align-items:center;gap:8px;background:var(--cta);font-weight:700;padding:12px 18px;border-radius:var(--radius-control)} .portal .pt-go:hover{background:var(--cta-hover)} .portal .pt-go svg{width:18px;height:18px} .portal .pt-gr{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start} .portal .pt-ph{position:relative;display:block;border-radius:var(--radius-portal-photo);overflow:hidden;aspect-ratio:4/3} .portal .pt-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .portal .pt-ph:hover img{transform:scale(1.04)} .portal .pt-ph span{position:absolute;left:0;right:0;bottom:0;padding:18px 9px 7px;font-size:13px;font-weight:600;line-height:1.25; background:linear-gradient(transparent,var(--portal-photo-fade))} /* links: .art-in a:not(.cta):not(.cta2) (0,3,1) colours and underlines every article link */ .art-in .portal a:not(.cta):not(.cta2){text-decoration:none;border-bottom:0} .art-in .portal .pt-top a:not(.cta):not(.cta2){color:var(--ink);font-weight:600} .art-in .portal .pt-top a:not(.cta):not(.cta2):hover{color:var(--accent)} .art-in .portal a.pt-go:not(.cta):not(.cta2){color:var(--cta-ink)} .art-in .portal a.pt-ph:not(.cta):not(.cta2){color:var(--portal-on-photo)} @media (prefers-reduced-motion:reduce){.portal .pt-ph img{transition:none}} @media (max-width:700px){.portal{grid-template-columns:1fr;padding:14px}.portal .pt-gr{order:-1}.portal .pt-h{font-size:22px}} @media (max-width:900px){ } /* item-finder */ /* item-finder: the look is tour-finder's (.finder); only what this block adds. */ .finder.ifinder .fcard[hidden],.finder.ifinder .fempty[hidden],.finder.ifinder .fmore[hidden],.finder.ifinder .reset[hidden]{display:none} @media (max-width:900px){ } /* route-finder */ /* route-finder: the look is tour-finder's (.finder); only what this block adds. */ .finder.rfinder .rfcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:14px} .finder.rfinder .rfcard{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line,#dde3e7);border-radius:var(--radius,10px);background:var(--paper,#fff);color:inherit;text-decoration:none} .finder.rfinder .rfcard:hover{border-color:var(--brand,#0F6C9E)} .finder.rfinder .rfcard[hidden],.finder.rfinder .fempty[hidden],.finder.rfinder .reset[hidden]{display:none} .finder.rfinder .rfno{flex:0 0 auto;min-width:3.2em;padding:6px 8px;border-radius:8px;background:var(--rc);color:#fff;font-weight:700;text-align:center;text-shadow:0 1px 1px rgba(0,0,0,.35)} .finder.rfinder .rfb{display:flex;flex-direction:column;gap:2px;min-width:0} .finder.rfinder .rfb b{font-weight:650} .finder.rfinder .rfq{width:100%;max-width:420px;padding:9px 12px;border:1px solid var(--line,#cfd6db);border-radius:8px;font:inherit} .finder.rfinder .rmap{margin-top:14px} @media (max-width:900px){ } /* tour-related */ /* tour-related. Redesigned by the owner in review 5 (2026-09-15): its own row markup (.trel-*), the row of tour-list as it was at extraction (article.css "Tourverzeichnis") with the info replaced by one fact per line, each an icon and a fact. The lab sizes (--trel-*) are local variables with defaults (contract local_tokens). The box is the shared .blk frame; price and button are the shared .price.sm and .cta.sm primitives. */ .trel-l{list-style:none;margin:0;padding:0;display:grid;gap:12px} .trel-i{display:grid;grid-template-columns:var(--trel-thumb,152px) 1fr auto;gap:16px;align-items:start; background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-card);padding:var(--trel-pad,12px)} .trel-pic{display:block;border-radius:var(--radius-trel-pic);overflow:hidden;line-height:0} .trel-pic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block} .trel-b{min-width:0} .trel-b h4{font-size:17px;margin:0 0 8px;letter-spacing:-.015em;line-height:1.32} .art-in .trel-b h4 a:not(.cta):not(.cta2){color:var(--ink);text-decoration:none} .art-in .trel-b h4 a:not(.cta):not(.cta2):hover{text-decoration:underline; text-underline-offset:2.5px;text-decoration-color:var(--rule)} .trel-f{list-style:none;margin:0;padding:0;display:grid;gap:var(--trel-line-gap,5px);font-size:14.5px;color:var(--ink-soft)} .art-in .trel-f li{margin:0;padding:0;display:flex;align-items:center;gap:var(--trel-icon-gap,8px);line-height:1.35} .art-in .trel-f li::before{content:none} .trel-f svg{width:var(--trel-icon,16px);height:var(--trel-icon,16px);flex:none;color:var(--teal)} .trel-f .trel-r svg{color:var(--cta)} .trel-f .trel-r b{color:var(--ink);font-weight:800} .trel-f .trel-r em{font-style:normal;color:var(--ink-faint)} .trel-f .trel-r.thin b,.trel-f .trel-r.thin em{color:var(--ink-faint);font-weight:600} .trel-f .trel-r.thin svg{color:var(--rule)} .trel-p{display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding-left:4px} .trel-p .price.sm{text-align:right} .trel .foot{line-height:1.5} @media (max-width:900px){ .trel-i{grid-template-columns:1fr;gap:11px} .trel-pic img{aspect-ratio:16/9} .trel-p{flex-direction:row;align-items:center;justify-content:space-between;padding:0;width:100%} } /* headings */ /* Headings read --font-head (gap 17, 2026-09-19). The reference theme sets it to --font-body, so a site with one font looks exactly as before; a site the owner gives a heading font sets it in site/design-tokens.css and every h1-h4 follows, the hero's and the blocks' included. A bare element selector: any block rule that names a heading's font by class still wins. */ h1,h2,h3,h4{font-family:var(--font-head)} @media (max-width:900px){ } /* theme: site/design-tokens.css */ /* site/design-tokens.css: porto.tours. Palette A "Azulejo" (owner pick, 2026-09-15, palette lab): cobalt tile blue, white-tile paper, ochre buttons. Started from the reference theme. */ /* The reference theme: Reykjavik Tours' rendered values, every themeable custom property of the reference build at the value that wins its cascade (design-tokens.css, then home.css which loads later), plus its font faces. Colour locked with the owner on 2026-09-07 ("Roof red"), later amber CTAs and the cream paper of home.css; see library/theme/base/style.css for where each came from. Element-specific tokens live next to each element (library///tokens.reference.css). tools/themefiles.py joins them. */ @font-face{ font-family: "Figtree"; font-style: normal; font-weight: 400 700; /* one variable file, not two static cuts */ font-display: swap; src: url("/assets/fonts/figtree-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: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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; } :root{ --accent:#1D4F9C; --accent-ink:#133A75; --accent-rgb:29,79,156; --badge:#E6EEFA; --badge-ink:#1D4F9C; --card:#FFFFFF; --chart-cool:#1D4F9C; --chart-mute:#98A2B3; --chart-track:#E3E8F0; --chart-warm:#C8502E; --cta:#E3A23A; --cta-hover:#CF8F27; --cta-ink:#14213D; --font-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-head:var(--font-body); --ink:#14213D; --ink-faint:#6A7385; --ink-soft:#4B566B; --mark-band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath fill='%238FB0E3' fill-opacity='.78' d='M6 5C60 3 140 5 294 2l3 4-4 4 5 5-4 6c-94 1-204-1-289 1l-3-5 4-5-5-4z'/%3E%3Cpath fill='none' stroke='%238FB0E3' stroke-opacity='.28' stroke-width='2' d='M12 9c90-2 190 1 280-1M14 16c100-1 200 1 276-1'/%3E%3C/svg%3E"); --mark-sparks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231D4F9C' stroke-width='4.2' stroke-linecap='round'%3E%3Cpath d='M33 34 15 16'/%3E%3Cpath d='M24 42H2'/%3E%3Cpath d='M42 28 41 4'/%3E%3C/g%3E%3C/svg%3E"); --paper:#F8FAFD; --paper-sunk:#EEF2F8; --radius-card:14px; --radius-control:9px; --radius-pill:999px; --rule:#DCE3EE; --rule-soft:#E9EEF5; --shadow-card:0 1px 2px rgba(25,23,19,.05), 0 8px 24px -12px rgba(25,23,19,.14); --star:#B8730B; --teal:#1E6B73; --teal-bg:#E7F2F3; } /* tokens from blocks/amazon-gear */ /* amazon-gear: corner radii of the packing panel, of each item row (Reykjavik contact.css) and of the product photo (owner redesign, review 5). */ :root{--radius-gear-panel:16px;--radius-gear-item:12px;--radius-gear-photo:8px;} /* tokens from blocks/compact-offer */ :root{ /* compact-offer tokens, lifted unchanged from article.css (2026-09-14) */ --star-fill:#E8A317; --ok:#1E8E5A; --tip-bg:#16212B; --tip-ink:#fff; --shadow-tip:0 4px 14px rgba(11,17,25,.22); --shadow-hover:0 4px 16px rgba(20,29,41,.08); --radius-thumb:9px; --radius-tip:7px; } /* tokens from blocks/contact-form */ /* contact-form tokens, Reykjavik values (contact.css at the frozen tag). */ :root{ --form-invalid:#B4331F; --form-error-ink:#9E2A17; --form-good-bg:#E4F2EB; --form-good-ink:#1F5E43; --form-bad-bg:#FBEAE6; --form-bad-ink:#8E2A18; --radius-form:20px; --radius-form-panel:16px; --radius-form-icon:12px; --radius-form-field:11px; } /* tokens from blocks/data-chart */ :root{ /* data-chart tokens, lifted unchanged from article.css (2026-09-15) */ --radius-chart-bar:7px; --chart-grid:#EAE3D6; /* the line chart's grid, a literal in the reference HTML until 2026-09-15 */ } /* tokens from blocks/data-sheet */ :root{ /* data-sheet tokens, lifted unchanged from article.css (2026-09-15) */ --radius-sheet-toggle:10px; --radius-sheet-group:6px; } /* tokens from blocks/decision-tool */ /* decision-tool: the colours and radii its inline style wrote as literals in the reference (render.py TOOL_CSS / TOOL_JS; owner, 2026-09-15, review queue 7a), at their reference values. Everything else it wears is the chooser's and the theme's. */ :root{ --dt-level-1:#2E7D4F; --dt-level-2:#B4740A; --dt-level-3:#B23A1E; --dt-fit-yes:#146B47; --dt-fit-yes-bg:rgba(20,107,71,.09); --dt-fit-yes-line:rgba(20,107,71,.28); --dt-fit-no:#9A3412; --dt-fit-no-bg:rgba(154,52,18,.08); --dt-fit-no-line:rgba(154,52,18,.26); --dt-on-accent:#FFFFFF; --dt-tip-ink:#FFFFFF; --shadow-dt-tip:0 6px 20px rgba(0,0,0,.22); --dt-series-1:#B23A1E; --dt-series-2:#2E6F9E; --dt-series-3:#2E7D4F; --dt-series-4:#7A4FA3; --radius-dt-tip:8px; } /* tokens from blocks/drive-times */ /* drive-times tokens, Reykjavik values (tools/drivetimes.css at the frozen tag; option A, owner 2026-09-11). */ :root{ --radius-drive-panel:20px; --radius-drive-seg:12px; --radius-drive-button:9px; --radius-drive-bar:8px; --radius-drive-key:3px; --drive-track:rgba(var(--accent-rgb),.08); --drive-hot:#E2A33B; --drive-daylight:rgba(226,163,59,.20); --drive-daylight-key:rgba(226,163,59,.30); } /* tokens from blocks/image */ /* image tokens, Reykjavik values (article.css and site.py EXTRA_CSS at the frozen tag). */ :root{ --photo-label-bg:rgba(10,20,28,.74); --photo-label-shadow:0 6px 24px rgba(0,0,0,.25); --photo-label-meta:rgba(255,255,255,.86); --caption-panel-bg:rgba(14,19,26,.74); --caption-panel-ink:#F4F6F8; --caption-panel-shadow:0 8px 24px -10px rgba(0,0,0,.55); --caption-scrim:linear-gradient(to top,rgba(10,18,24,.8) 0%,rgba(10,18,24,.36) 46%,transparent 100%); --caption-ink:rgba(255,255,255,.86); --caption-shadow:0 1px 3px rgba(0,0,0,.45); --credit-bg:rgba(18,22,28,.62); --radius-photo:10px; --radius-photo-button:10px; --radius-caption:10px; --radius-credit:5px; } /* tokens from blocks/kp-cloud */ /* kp-cloud tokens, Reykjavik values (tools/kpcloud.css at the frozen tag). */ :root{ --radius-kp-cell:14px; --kp-sky:linear-gradient(#081521,#15314A); --kp-stars:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 68% 14%,#fff,transparent), radial-gradient(1px 1px at 86% 62%,#fff,transparent),radial-gradient(1px 1px at 32% 78%,#fff,transparent), radial-gradient(1.2px 1.2px at 52% 40%,#fff,transparent); --kp-aurora:radial-gradient(60% 70% at 40% 60%,rgba(79,211,157,.85),rgba(79,211,157,0) 70%), radial-gradient(40% 60% at 75% 40%,rgba(79,211,157,.6),rgba(79,211,157,0) 70%); --kp-cloud:radial-gradient(40% 45% at 20% 40%,#8A979F,transparent 70%),radial-gradient(45% 50% at 55% 35%,#9AA6AD,transparent 72%), radial-gradient(40% 50% at 85% 55%,#8A979F,transparent 70%),linear-gradient(rgba(120,132,140,.78),rgba(90,102,110,.9)); --kp-good:#1D7A4E; --kp-bad:#9A3412; } /* tokens from blocks/map-leaflet */ /* map-leaflet tokens, Reykjavik values (map.css at the frozen tag). */ :root{ --map-sight:#C2301A; --map-museum:#7A4A8C; --map-nature:#3D7A50; --map-town:#54626B; --map-hotel:#B8730B; --map-water:#CFE2EE; --map-hint-bg:rgba(18,34,44,.55); --map-hint-ink:#fff; --map-pin-ink:#fff; --map-pin-ring:#fff; --map-pin-shadow:0 1px 4px rgba(18,34,44,.45); --map-popup-shadow:0 8px 28px rgba(18,34,44,.22); --map-control-bg:#fff; --map-control-shadow:0 1px 3px rgba(18,34,44,.12); --map-attribution-bg:rgba(255,255,255,.82); --map-focus-halo:rgba(var(--accent-rgb),.25); --radius-map-origin:7px; --radius-map-popup:12px; --radius-map-control:4px; --radius-map-tip:8px; --map-legend-hi:rgba(var(--accent-rgb),.08); } /* tokens from blocks/month-planner */ /* month-planner tokens, Reykjavik values (tools/monthplanner.css at the frozen tag; the owner's tuner, 2026-09-11). The tints are the accent at fixed strengths, so they follow the theme's accent. */ :root{ --radius-planner:20px; --radius-planner-panel:14px; --radius-planner-bar:14px; --radius-planner-row:10px; --radius-planner-cell:8px; --planner-track:rgba(var(--accent-rgb),.12); --planner-panel:rgba(var(--accent-rgb),.06); --planner-hover-head:rgba(var(--accent-rgb),.11); --planner-hover-day:rgba(var(--accent-rgb),.07); --planner-hover-ring:rgba(var(--accent-rgb),.175); --planner-night-label:rgba(255,255,255,.7); --planner-night-small:rgba(255,255,255,.75); --planner-night-temps:rgba(255,255,255,.78); } /* tokens from blocks/offer-card */ /* offer-card tokens, Reykjavik values (article.css and site.py EXTRA_CSS at the frozen tag). */ :root{ --rate-score:#94600A; --radius-offer:16px; --radius-offer-thumb:11px; --radius-othumb:12px; } /* tokens from blocks/offer-comparison */ /* offer-comparison tokens, Reykjavik values (article.css at the frozen tag). */ :root{ --shadow-opt-best:0 0 0 3px rgba(242,167,42,.16); --shadow-opt-hover:0 8px 22px rgba(20,29,41,.10); --badge-alt-bg:rgba(16,22,30,.78); --badge-alt-ink:#fff; --badge-flame:#D2500F; --opt-gold-border:#D9920F; } /* tokens from blocks/photo-carousel */ /* photo-carousel tokens, Reykjavik values (tools/carousel-photo.css at the frozen tag). */ :root{ --carousel-shadow-sm:0 1px 2px rgba(0,0,0,.05); --carousel-shadow-md:0 1px 3px rgba(0,0,0,.06),0 6px 16px -6px rgba(0,0,0,.10); --carousel-shadow-lg:0 2px 6px rgba(0,0,0,.07),0 14px 34px -10px rgba(0,0,0,.16); --carousel-scrim:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.66) 45%,rgba(0,0,0,.34) 78%,transparent 100%); --carousel-on-photo:#fff; --carousel-on-photo-soft:rgba(255,255,255,.8); --carousel-on-photo-text:rgba(255,255,255,.88); --carousel-eyebrow:#4a6070; --carousel-arrow-shadow:0 1px 2px rgba(18,34,44,.06),0 6px 16px -8px rgba(18,34,44,.28); --carousel-arrow-shadow-hover:0 2px 6px rgba(18,34,44,.10),0 10px 24px -10px rgba(18,34,44,.45); --radius-carousel-card:22px; --radius-carousel-card-sm:16px; } /* tokens from blocks/place-stops */ :root{ /* place-stops tokens, lifted unchanged from article.css (2026-09-15) */ --stops-dot:rgb(var(--accent-rgb)); --stops-link-line:rgba(var(--accent-rgb),.35); --radius-stops-chip:8px; } /* tokens from blocks/price-ladder */ :root{ /* price-chart tokens, lifted unchanged from pricecharts.css (2026-09-15) */ --radius-hc-panel:20px; --radius-pc-tip:11px; --radius-pc-cta:8px; --pc-track-dots:rgba(var(--accent-rgb),.35); --pc-amber:#E2A33B; --pc-amber-pulse:rgba(226,163,59,.65); --pc-amber-fade:rgba(226,163,59,0); --pc-amber-ring:rgba(226,163,59,.45); --pc-tip-bg:#16212B; --pc-tip-ink:#fff; --pc-tip-soft:rgba(255,255,255,.8); --pc-tip-line:rgba(255,255,255,.13); --pc-tip-badge:#E8A317; --pc-tip-feature:#CDEFE0; --pc-tip-check:#5FD4A0; --shadow-pc-tip:0 10px 28px rgba(11,17,25,.32); } /* tokens from blocks/sight-picker */ :root{ /* sight-picker tokens, lifted unchanged from sightpicker.css (2026-09-15) */ --radius-sp-panel:20px; --radius-sp-panel-sm:16px; --radius-sp-month:10px; --radius-sp-select:12px; --sp-mark-ink:#fff; --sp-yes:#1E8E5A; --sp-no:#C2301A; } /* tokens from blocks/status-box */ /* status-box tokens, Reykjavik values (tools/statusbox.css at the frozen tag). */ :root{ --status-ok:#1E8E5A; --status-ok-halo:rgba(30,142,90,.15); --status-ok-bg:#DFF1E7; --status-ok-ink:#1D7A4E; --status-warn:#C98A12; --status-warn-halo:rgba(201,138,18,.18); --status-warn-bg:#FBF1DD; --status-warn-ink:#8F5508; --status-alert:#C2301A; --status-alert-halo:rgba(194,48,26,.16); --status-alert-bg:#FAE3DF; --status-alert-ink:#B42318; } /* tokens from blocks/tour-compare */ :root{ /* tour-compare tokens (owner redesign 2026-09-15), reference theme */ --cmpt-on-photo:#FFFFFF; --cmpt-scrim:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.72) 100%); --cmpt-photo-shadow:0 1px 3px rgba(0,0,0,.35); --cmpt-badge-bg:#FFFFFF; --cmpt-badge-ink:#1A2737; --cmpt-best-bg:var(--accent-ink); --cmpt-best-ink:#FFFFFF; --cmpt-star-empty:rgba(255,255,255,.35); --cmpt-pick-bg:rgba(var(--accent-rgb),.05); --cmpt-pro-mark:#2E7D4F; --cmpt-see-bg:rgba(var(--accent-rgb),.09); --cmpt-see-bg-hover:rgba(var(--accent-rgb),.15); --cmpt-tog-bg:rgba(var(--accent-rgb),.07); --cmpt-tog-bg-hover:rgba(var(--accent-rgb),.12); --cmpt-go-shadow:0 6px 16px rgba(0,0,0,.14); } /* tokens from blocks/tour-finder */ /* tour-finder tokens, Reykjavik values (article.css "Tour-Finder" at the frozen tag). */ :root{ --radius-finder:20px; --radius-finder-sm:16px; --radius-finder-card:14px; --radius-finder-rail:22px; --radius-finder-rail-sm:16px; --radius-finder-button:11px; --radius-finder-tile:13px; --radius-finder-tile-icon:9px; --radius-finder-tile-icon-sm:8px; --radius-finder-empty:12px; --radius-finder-sort:9px; --finder-pill-hover:rgba(var(--accent-rgb),.5); --finder-on-accent:#fff; --finder-on-accent-soft:rgba(255,255,255,.92); --finder-focus:rgb(var(--accent-rgb)); --finder-card-ink:#fff; --finder-card-bg:#2A3646; --finder-card-shade:linear-gradient(to top, rgba(10,16,24,.93) 0%,rgba(10,16,24,.6) 36%,rgba(10,16,24,.04) 74%); --finder-card-meta:#D6DDE6; --finder-card-star:#FFCF8B; --finder-card-thin:#B6C0CC; --finder-flag-bg:rgba(255,255,255,.94); --finder-flag-ink:#16202C; --finder-nav-bg:rgba(255,255,255,.94); --finder-nav-shadow:0 3px 14px rgba(20,30,45,.13); --finder-rail-shadow:0 1px 3px rgba(0,0,0,.06),0 6px 16px -6px rgba(0,0,0,.10); --finder-rail-shadow-hover:0 2px 6px rgba(0,0,0,.07),0 14px 34px -10px rgba(0,0,0,.16); --finder-rail-scrim:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.66) 45%,rgba(0,0,0,.34) 78%,transparent 100%); --finder-rail-meta:rgba(255,255,255,.88); --finder-rail-thin:rgba(255,255,255,.72); --finder-tile-shade:linear-gradient(to top, rgba(10,16,24,.9) 0%,rgba(10,16,24,.5) 44%,rgba(10,16,24,.06) 78%); --finder-tile-icon-bg:rgba(255,255,255,.18); --finder-tile-meta:#C7D0DA; --finder-flag-on:#fff; --finder-flag-star:#5B3FA8; --finder-flag-loved:#C2185B; --finder-flag-sellout:#C0392B; --finder-flag-cheap:#177245; --finder-flag-value:#1A7F50; --finder-flag-proven:#0F6C9E; --finder-flag-ticket:#0E7C86; --finder-flag-pkg:#3E4C99; --finder-flag-fact:rgba(22,32,44,.82); --finder-flag-new-bg:rgba(255,255,255,.92); --finder-flag-new-ink:#4A5561; --finder-ctx:#8FE3B8; } /* tokens from blocks/tour-gallery */ /* tour-gallery and media carousel tokens, Reykjavik values (tools/carousel.css at the frozen tag). */ :root{ --radius-media-dot:3px; --radius-media:11px; --media-arrow-bg:rgba(254,251,246,.94); --media-arrow-bg-hover:#fff; --shadow-media-arrow:0 2px 8px rgba(26,39,55,.24); --media-dot:rgba(255,255,255,.65); --media-dot-active:#fff; } /* tokens from blocks/tour-list */ :root{ /* tour-list tokens, lifted unchanged from article.css (2026-09-15) */ --radius-trl-pic:10px; } /* tokens from blocks/tour-ranges */ :root{ /* tour-ranges tokens, lifted unchanged from pricecharts.css (2026-09-15) */ --tr-track:rgba(var(--accent-rgb),.05); --tr-range:rgba(var(--accent-rgb),.22); --radius-tr-track:6px; --radius-tr-range:5px; } /* tokens from blocks/tour-related */ /* tour-related: the photo corner (tour-list's 10px at extraction). */ :root{--radius-trel-pic:10px;} /* tokens from blocks/transfer-cost */ /* transfer-cost tokens, Reykjavik values (tools/pricecharts.css at the frozen tag). */ :root{ --radius-hc-seg:12px; --radius-hc-seg-button:9px; --radius-tx-bar:9px; --tx-track:rgba(var(--accent-rgb),.08); } /* tokens from blocks/trip-budget */ :root{ /* trip-budget tokens, lifted unchanged from tripbudget.css (2026-09-15) */ --radius-tb-stepper:11px; --radius-tb-step:8px; --radius-tb-book:8px; } /* tokens from chrome/affiliate-notice */ :root{ --radius-note:10px; } /* affiliate notice corners (contact.css L51) */ /* tokens from chrome/footer */ :root{ /* footer (new tokens, 2026-09-14): the cited institutions' marks and their tooltip. Values lifted unchanged from article.css, foot.css and site.py EXTRA_CSS. */ --source-mark-bg:#fff; --source-mark-ring:0 0 0 1px rgba(26,39,55,.08); --radius-source-mark:6px; --radius-footer-mark:7px; --radius-source-tip:9px; } /* tokens from chrome/header */ :root{ /* header (new tokens, 2026-09-14): ink and glass over the hero photograph, menu shadows, corner radii by role. Values lifted unchanged from home.css and site.py EXTRA_CSS. */ --on-photo:#fff; --on-photo-shadow:0 1px 10px rgba(10,16,24,.5); --on-photo-line:rgba(255,255,255,.4); --on-photo-glass:rgba(255,255,255,.12); --on-photo-glass-strong:rgba(255,255,255,.14); --on-ink:#fff; --shadow-menu:0 14px 40px rgba(26,39,55,.18); --shadow-panel:0 16px 40px rgba(20,25,35,.13); --radius-label:8px; --radius-menu:16px; --radius-item:10px; --radius-row:14px; --radius-panel:12px; --radius-link:7px; } /* tokens from chrome/hero */ :root{ /* hero (new tokens, 2026-09-14): the scrim over the photograph (owner-tuned on the stage 2 tuner: 0.65 at the words, no more), text tints and shadows on the photograph. Values lifted unchanged from home.css. Uses --on-photo and --radius-pill from the header. */ --hero-scrim:linear-gradient(180deg, rgba(20,29,41,.38) 0%, rgba(20,29,41,.12) 26%, rgba(20,29,41,.26) 52%, rgba(20,29,41,.50) 78%, rgba(20,29,41,.65) 100%); --hero-eyebrow:#FBD98A; --hero-eyebrow-line:rgba(251,217,138,.45); --hero-h1-shadow:0 2px 24px rgba(10,16,24,.45); --hero-lede:#E7EBF1; --hero-lede-shadow:0 1px 12px rgba(10,16,24,.5); --hero-meta-ink:rgba(255,255,255,.94); --hero-meta-shadow:0 1px 3px rgba(0,0,0,.55); --hero-meta-sep:rgba(255,255,255,.55); --hero-byline-ink:#C7CFDA; --hero-byline-shadow:0 1px 8px rgba(10,16,24,.5); --hero-byline-sep:rgba(255,255,255,.32); --hero-byline-sources:#8FD3DC; } /* tokens from chrome/offer-bar */ :root{ /* offer-bar (new tokens, 2026-09-14): the bar's shadows and the phone bar's small thumbnail radius. Values lifted unchanged from site.py EXTRA_CSS. */ --shadow-bar:0 16px 44px rgba(18,34,44,.22); /* the card lifted off the page */ --shadow-bar-close:0 2px 8px rgba(18,34,44,.16); /* the close button on the corner */ --shadow-bar-pill:0 8px 24px rgba(18,34,44,.28); /* the collapsed pill */ --shadow-bar-edge:0 -6px 24px rgba(18,34,44,.16); /* the phone bar along the bottom edge */ --radius-thumb-small:8px; /* the phone bar's 56px thumbnail */ } /* tokens from engines/chooser */ /* chooser engine tokens (tools/chooser.css): the season banner, the prize card, the photo chips, and the con and veto marks. Reykjavik's values. */ :root{ --radius-ch-says:12px; --radius-ch-num:11px; --radius-ch-num-button:8px; --radius-ch-win:16px; --radius-ch-win-book:11px; --radius-ch-lines:11px; --ch-says-bg:rgba(226,163,59,.12); --ch-says-line:rgba(226,163,59,.5); --ch-prize:#E2A33B; --ch-prize-ink:#12222C; --shadow-ch-win:0 18px 44px -20px rgba(18,34,44,.45); --ch-chip-ink:#fff; --ch-chip-bg:rgba(12,20,28,.64); --ch-chip-rate:#FFCF8B; --ch-chip-fc:#8FE3B8; --shadow-ch-flag:0 4px 12px -4px rgba(0,0,0,.35); --ch-shine:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%); --ch-con:#b4761c; --ch-veto:#a33; } /* tokens from pages/home */ :root{ --glance-rule:rgba(255,255,255,.16); --glance-icon:rgba(127,196,236,.22); --glance-label:rgba(255,255,255,.72); --shadow-sec-hover:0 10px 26px -14px rgba(26,39,55,.3); --shadow-tool-hover:0 8px 22px rgba(26,39,55,.10); --radius-sec-item:6px; --radius-tools:20px; --radius-tools-sm:16px; --radius-tool:14px; --radius-tool-sm:12px; --radius-tool-icon:12px; --radius-tool-icon-sm:9px; } /* tokens from theme/primitives */ :root{ --radius-cta:12px; --radius-cta-sm:10px; --shadow-cta:0 8px 26px -8px rgba(242,167,42,.6); --cta2-bg:rgba(255,255,255,.1); --cta2-bg-hover:rgba(255,255,255,.2); --cta2-ink:#fff; --cta2-line:rgba(255,255,255,.45); --hint-ink:#fff; --hint-sub:#c8d1dd; --radius-hint:11px; --shadow-hint:0 8px 28px -8px rgba(26,39,55,.55); } /* Font (owner pick, 2026-09-15, font lab): Manrope, self-hosted, OFL. */ @font-face{ font-family:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/assets/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/assets/fonts/manrope-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; } :root{ --font-body:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-head:var(--font-body); } /* directory-portal (library/blocks/directory-portal/tokens.reference.css), 2026-09-16 */ :root{ --portal-on-photo:#fff; --portal-photo-fade:rgba(0,0,0,.65); --radius-portal-photo:8px; } /* ------------------------------------------------------------------ heading mark The site's own h2 mark, chosen in /_lab/headings/ (owner, 2026-09-18): a two-line port scribble under the words, and a bunch of grapes that grows in the corner - stem, then berry, berry, berry, each falling the last few pixels into place. The berries are 38% of the mark box, so the two top ones only touch, and the stem's tip lands on their join. The line waits 0.28s and draws for 0.30s, so it lands on the same frame as the last berry. Only background-size and background-position move, on one small box: nothing reflows. `.ah-wait` is the library's own hook - site.js puts it on headings below the fold and takes it off when they arrive - so a heading animates once, when the reader reaches it. */ :root{ --mark-band:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2024%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%237B2233%27%20stroke-opacity%3D%27.62%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20d%3D%27M6%2015c60-6%20120-8%20180-6%2034%201%2066%203%2096%206%27%2F%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%237B2233%27%20stroke-opacity%3D%27.4%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20d%3D%27M18%2020c58-5%20116-7%20174-5%2030%201%2058%203%2084%205%27%2F%3E%3C%2Fsvg%3E"); --mark-grape-stem:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%237B2233%27%20stroke-opacity%3D%27.85%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20d%3D%27M6%2018c0-9%204-13%2012-14%27%2F%3E%3C%2Fsvg%3E"); --mark-grape-berry:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2710%27%20r%3D%279%27%20fill%3D%27%237B2233%27%20fill-opacity%3D%27.78%27%2F%3E%3C%2Fsvg%3E"); } .art-in h2.ah > span{ background:var(--mark-band) 0 100%/100% .4em no-repeat; padding:0 .1em .26em;margin:0 -.1em; transition:background-size .30s cubic-bezier(.2,.85,.25,1) .28s} .art-in h2.ah::before{ content:"";position:absolute;left:-1.25em;top:-.30em;width:1.05em;height:1.05em; opacity:1;transform:none; background-image:var(--mark-grape-stem),var(--mark-grape-berry),var(--mark-grape-berry),var(--mark-grape-berry); background-repeat:no-repeat;background-position:41% 4%,0% 42%,61% 42%,31% 95%;background-size:30% 30%,38% 38%,38% 38%,38% 38%; animation:ah-bunch .58s cubic-bezier(.22,1.15,.35,1) both} .art-in h2.ah.ah-wait > span{background-size:0% .4em;transition:none} .art-in h2.ah.ah-wait::before{animation:none;background-size:0% 0%,0% 0%,0% 0%,0% 0%;transform:none;opacity:1} @keyframes ah-bunch{ 0%,30%{background-size:0% 0%,0% 0%,0% 0%,0% 0%;background-position:41% 4%,0% 24%,61% 24%,31% 78%} 48%{background-size:32% 32%,40% 40%,0% 0%,0% 0%;background-position:41% 4%,0% 42%,61% 24%,31% 78%} 70%{background-size:30% 30%,38% 38%,41% 41%,0% 0%;background-position:41% 4%,0% 42%,61% 42%,31% 95%} 88%{background-size:30% 30%,38% 38%,38% 38%,41% 41%;background-position:41% 4%,0% 42%,61% 42%,31% 95%} 100%{background-size:30% 30%,38% 38%,38% 38%,38% 38%;background-position:41% 4%,0% 42%,61% 42%,31% 95%}} @media (prefers-reduced-motion:reduce){ .art-in h2.ah > span{transition:none} .art-in h2.ah::before{animation:none}} /* Phones: the line under the words and nothing else (owner, 2026-09-20). The bunch sits in the left margin a phone does not have, and an animation on a screen the reader scrolls fast is noise: the mark is drawn in its finished state, with no grapes and no movement. */ @media (max-width:640px){ .art-in h2.ah::before,.art-in h2.ah.ah-wait::before{content:none;display:none;animation:none} .art-in h2.ah > span,.art-in h2.ah.ah-wait > span{background-size:100% .4em;transition:none}} /* ---- header logo: the animator's "Rosette Bloom", once per visit (owner, 2026-09-19). Its SVG is site/nav.yaml logo_svg; the once-per-visit class comes from head_script. */ /* Porto Tours logo: "Rosette Bloom" load animation 1.41 s, plays once when the page first renders. Pure CSS, no JavaScript. Works only with the inline SVG from logo-snippet.html (classes pt-*). All px values below are SVG user units in the 64×64 viewBox, not screen pixels. Keep them as px; don't convert them to rem. */ .pt-logo { overflow: hidden; } .pt-logo * { transform-box: view-box; } /* Tile: fades and scales up */ .pt-logo .pt-tile { transform-origin: 32px 32px; animation: pt-bloom-tile 480ms cubic-bezier(.22, 1, .36, 1) both; } /* Petals + stars turn 135° and glide to a stop */ .pt-logo .pt-rosette { transform-origin: 32px 32px; animation: pt-bloom-rosette 1300ms cubic-bezier(.16, 1, .3, 1) both; } /* Stars shoot out from the center */ .pt-logo .pt-star { transform-origin: 32px 17.25px; animation: pt-bloom-star 620ms cubic-bezier(.22, 1, .36, 1) 80ms both; } /* Petals unfurl from their base, one after another */ .pt-logo .pt-petal { transform-origin: 33px 31px; animation: pt-bloom-petal 720ms cubic-bezier(.3, 1.35, .5, 1) calc(220ms + var(--i) * 90ms) both; } /* Border scallops ripple out from their centers */ .pt-logo .pt-edge { transform-origin: 32px 2px; animation: pt-bloom-edge 520ms cubic-bezier(.22, 1, .36, 1) calc(700ms + var(--i) * 50ms) both; } /* Corners pop in last */ .pt-logo .pt-corner { transform-origin: 2px 2px; animation: pt-bloom-corner 440ms cubic-bezier(.34, 1.56, .64, 1) calc(820ms + var(--i) * 50ms) both; } @keyframes pt-bloom-tile { 0% { transform: scale(.82); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes pt-bloom-rosette { 0% { transform: rotate(-135deg); } 100% { transform: rotate(0deg); } } @keyframes pt-bloom-star { 0% { transform: translateY(14.75px) scale(0); opacity: 0; } 55% { transform: translateY(-1.2px) scale(1.12); opacity: 1; } 100% { transform: translateY(0px) scale(1); opacity: 1; } } @keyframes pt-bloom-petal { 0% { transform: scale(0) rotate(-50deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes pt-bloom-edge { 0% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } } @keyframes pt-bloom-corner { 0% { transform: scale(0); } 100% { transform: scale(1); } } /* Visitors who ask for less motion get the static logo. */ @media (prefers-reduced-motion: reduce) { .pt-logo * { animation: none !important; } } /* Optional: play only on the first page of a visit (see README, "Once per visit"). */ .pt-logo-seen .pt-logo * { animation: none !important; } /* no thin outline around the logo's shapes (owner, 2026-09-19): the header rules above draw one over the photo and on the solid header */ .site-header:not(.solid) .brand svg path,.site-header.solid .brand svg path,.site-header.dw-solid .brand svg path{stroke:none} /* ---- the homepage hero's words stay readable over the photo: a soft halo around the letters, no shapes (owner's pick in the hero lab, 2026-09-19) */ .hero-home h1{text-shadow:0 0 18px rgba(6,16,34,.75),0 0 42px rgba(6,16,34,.55),0 2px 4px rgba(6,16,34,.6)} .hero-home .lede,.hero-home .hero-meta{text-shadow:0 0 10px rgba(6,16,34,.9),0 0 26px rgba(6,16,34,.7),0 1px 2px rgba(6,16,34,.8)} .hero-home .eyebrow{background:rgba(6,16,34,.35)}