/* Dearling — design tokens · v1.0 */
:root {
  /* Glazes (accent) — cobalt is the default; the rest are user-selectable */
  --dl-cobalt: #244B7A;  --dl-cobalt-deep: #16335B;  --dl-cobalt-soft: #4A6E9C;
  --dl-clay:    #C25B3A;  --dl-clay-deep:   #9C4126;  --dl-clay-soft:   #D07F63;
  --dl-celadon: #4F9E90;  --dl-celadon-deep:#357567;  --dl-celadon-soft:#76B6AA;
  --dl-madder:  #A23830;  --dl-madder-deep: #7C261F;  --dl-madder-soft: #BC5F57;
  --dl-ochre:   #B8862B;  --dl-ochre-deep:  #8E6618;  --dl-ochre-soft:  #CBA053;

  /* Studio walls (ground) — porcelain is default */
  --dl-porcelain: #F4F5F1;  --dl-porcelain-card: #FFFFFF;  --dl-porcelain-grout: #DFE0D8;
  --dl-bone:      #F1E7D6;  --dl-bone-card:      #FBF6EC;  --dl-bone-grout:      #E0CFB2;
  --dl-chalk:     #F7F3E9;  --dl-chalk-card:     #FFFDF7;  --dl-chalk-grout:     #E6DDC8;

  /* Ink */
  --dl-ink:  #2A2420;
  --dl-ink2: rgba(42,36,32,0.72);
  --dl-muted:rgba(42,36,32,0.54);
  --dl-line: rgba(42,36,32,0.14);

  /* Type */
  --dl-display: 'Bricolage Grotesque', system-ui, sans-serif;  /* display & brand */
  --dl-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; /* interface */

  /* Type sizes — the app's tokens (Typography.swift), in rem so they follow
     the browser's text size (website, spec 025) */
  --dl-size-display: 2.125rem;  /* 34 */
  --dl-size-h1: 1.75rem;        /* 28 */
  --dl-size-h2: 1.375rem;       /* 22 */
  --dl-size-h3: 1.125rem;       /* 18 */
  --dl-size-body: 1.0625rem;    /* 17 */
  --dl-size-body-medium: 0.9375rem; /* 15 */
  --dl-size-label: 0.8125rem;   /* 13 */
  --dl-size-caption: 0.75rem;   /* 12 */

  /* Geometry */
  --dl-radius-card: 14px;  --dl-radius-tile: 4px;  --dl-radius-pill: 999px;

  /* Spacing — 4 pt scale and edge gutter (DesignTokens.Spacing) */
  --dl-space-4: 4px;  --dl-space-8: 8px;  --dl-space-12: 12px;  --dl-space-16: 16px;
  --dl-space-24: 24px;  --dl-space-32: 32px;  --dl-space-48: 48px;  --dl-space-64: 64px;
  --dl-gutter: 20px;

  /* Web layout (spec 025): button height as the app's primary button, the
     minimum tap target, and the reading column */
  --dl-button-height: 52px;
  --dl-tap: 44px;
  --dl-column: 42rem;

  /* Atelier Book v1.5 surface recipes, for the web (spec 030) */
  --dl-wide: 72rem;                                   /* landing-page sections */
  --dl-radius-panel: 28px;                            /* glass panels */
  --dl-radius-phone: 42px;                            /* phone frame */
  --dl-glass-veil: rgba(251,246,236,.80);             /* bone card veil, readable over any tile */
  --dl-glass-blur: blur(18px) saturate(160%);
  --dl-glass-line: rgba(42,36,32,.08);
  --dl-glass-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.05), 0 8px 20px rgba(36,75,122,.10);
  --dl-tile-shadow: inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -2px 3px rgba(42,36,32,.10), 0 1px 2px rgba(42,36,32,.10), 0 10px 22px rgba(42,36,32,.12);
  --dl-tile-sheen: linear-gradient(125deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.05) 28%, transparent 48%);
  --dl-glaze-highlight: inset 0 1px 0 rgba(255,255,255,.28);
  --dl-glaze-edge: rgba(255,255,255,.32);
  --dl-phone-shadow: 0 20px 40px rgba(42,36,32,.20);

  /* Motion for the web (spec 030), after Motion.swift: the brush curve and two durations */
  --dl-motion-brush: cubic-bezier(.3,.7,.4,1);   /* confident start, soft landing */
  --dl-motion-reveal: .6s;                      /* a tile settling after a change */
  --dl-motion-drift: 120s;                      /* the gallery wall's slow fall: mechanical, so linear */
}

/* dearlinggift.nl — only var(--dl-*) values from dearling-tokens.css (spec 025
   FR-010). A missing value is added to the tokens, never inlined here.
   Defaults of a fresh app install: cobalt glaze, porcelain wall (FR-011).
   Light mode only (FR-014). Font sizes in rem (FR-018). */

/* The glaze and the wall are themeable, as in the app's Atelier (spec 030 R11):
   025 pages and the default home are Delft (cobalt on porcelain). */
:root {
  --accent: var(--dl-cobalt); --accent-deep: var(--dl-cobalt-deep); --accent-soft: var(--dl-cobalt-soft);
  --wall: var(--dl-porcelain); --wall-card: var(--dl-porcelain-card);
}
.theme-delft    { --accent: var(--dl-cobalt);     --accent-deep: var(--dl-cobalt-deep); --accent-soft: var(--dl-cobalt-soft); --wall: var(--dl-porcelain); --wall-card: var(--dl-porcelain-card); }
.theme-azulejo  { --accent: var(--dl-ochre-deep); --accent-deep: var(--dl-ochre-deep); --accent-soft: var(--dl-ochre);       --wall: var(--dl-chalk);     --wall-card: var(--dl-chalk-card); }
.theme-talavera { --accent: var(--dl-madder);     --accent-deep: var(--dl-madder-deep); --accent-soft: var(--dl-madder-soft); --wall: var(--dl-bone);      --wall-card: var(--dl-bone-card); }

@font-face {
  font-family: 'Bricolage Grotesque'; font-weight: 700; font-display: optional;
  src: url(/assets/BricolageGrotesque-Bold.913ee363.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-weight: 800; font-display: optional;
  src: url(/assets/BricolageGrotesque-ExtraBold.50fe1039.ttf) format('truetype');
}

:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wall);
  color: var(--dl-ink);
  font-family: var(--dl-ui);
  font-size: var(--dl-size-body);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

main { overflow-wrap: break-word; }

h1, h2, h3 { font-family: var(--dl-display); font-weight: 700; line-height: 1.2; color: var(--dl-ink); }
h1 { font-size: var(--dl-size-h1); margin: 0 0 var(--dl-space-12); }
h2 { font-size: var(--dl-size-h2); margin: var(--dl-space-32) 0 var(--dl-space-8); }
h3 { font-size: var(--dl-size-h3); margin: var(--dl-space-24) 0 var(--dl-space-8); }
p, ul, ol { margin: 0 0 var(--dl-space-12); }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--dl-radius-tile); }

/* Skip link: off screen until focused. */
.skip {
  position: absolute; z-index: 30; left: var(--dl-space-8); top: calc(-1 * var(--dl-space-64));
  background: var(--wall-card); padding: var(--dl-space-8) var(--dl-space-12);
  border-radius: var(--dl-radius-card);
}
.skip:focus { top: var(--dl-space-8); }

/* Staging band (FR-009). */
.band {
  margin: 0; padding: var(--dl-space-8) var(--dl-gutter); text-align: center;
  background: var(--dl-ochre-deep); color: var(--dl-porcelain-card);
  font-size: var(--dl-size-label); font-weight: 600;
}

/* ---- Header: a floating glass pill that stays in reach (FR-025). ---- */
/* A zero-height sticky holder, so the pill floats over each page's hero. */
.site-top { position: sticky; top: 0; z-index: 20; height: 0; padding: 0 var(--dl-gutter); }
.site-header {
  max-width: var(--dl-wide); margin: var(--dl-space-12) auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-16);
  padding: var(--dl-space-4) var(--dl-space-8) var(--dl-space-4) var(--dl-space-16);
  border-radius: var(--dl-radius-pill);
  background: color-mix(in srgb, var(--wall-card) 55%, transparent);
  -webkit-backdrop-filter: var(--dl-glass-blur); backdrop-filter: var(--dl-glass-blur);
  border: 1px solid var(--dl-glass-line); box-shadow: var(--dl-glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--wall-card); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .glass { background: var(--wall-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.wordmark { display: inline-flex; align-items: center; gap: var(--dl-space-8); min-height: var(--dl-tap); text-decoration: none; color: var(--dl-cobalt-deep); font-family: var(--dl-display); font-weight: 800; font-size: var(--dl-size-h3); }
.wordmark img { display: block; height: 32px; width: auto; }
.wordmark .logo-mark { display: none; border-radius: 22.5%; }
@media (max-width: 44rem) {
  .wordmark img.logo-full { height: 28px; }
  .lang-switch a, .site-header .lang-switch a { min-width: 36px; }
}
/* Very narrow phones: the tile mark alone, so logo, language and menu fit. */
@media (max-width: 22.5rem) {
  .wordmark .logo-full { display: none; }
  .wordmark .logo-mark { display: block; }
}
.wordmark .mark { width: 32px; border-radius: 22.5%; box-shadow: 0 1px 3px var(--dl-line); }  /* the iOS icon corner */
.site-header ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--dl-space-4); }
.site-header nav a { display: inline-flex; align-items: center; min-height: var(--dl-tap); padding: 0 var(--dl-space-12); border-radius: var(--dl-radius-pill); color: var(--dl-ink); text-decoration: none; font-size: var(--dl-size-body-medium); font-weight: 600; }
.site-header nav a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-deep); }
.site-header nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }
/* Phones: the links fold into a <details> menu, no script. */
.nav-menu { display: none; position: relative; }
.nav-menu summary { list-style: none; display: grid; place-items: center; width: var(--dl-tap); height: var(--dl-tap); border-radius: var(--dl-radius-pill); cursor: pointer; color: var(--dl-ink); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:focus-visible { border-radius: var(--dl-radius-pill); }
.nav-menu[open] summary { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nav-menu nav { position: absolute; right: 0; top: calc(100% + var(--dl-space-8)); min-width: 14rem; padding: var(--dl-space-8); border-radius: var(--dl-radius-card); background: var(--wall-card); border: 1px solid var(--dl-glass-line); box-shadow: var(--dl-glass-shadow); }
.nav-menu ul { flex-direction: column; align-items: stretch; }
.nav-menu nav a { width: 100%; }
@media (max-width: 44rem) {
  .nav-inline { display: none; }
  .nav-menu { display: block; }
}

/* Buttons — Atelier Book v1.5 secondary (FR-013); the glaze button is below. */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--dl-button-height); padding: var(--dl-space-12) var(--dl-space-24);
  border-radius: var(--dl-radius-card);
  font-family: var(--dl-ui); font-size: var(--dl-size-body); font-weight: 600;
  text-decoration: none; text-align: center;
}
.button.secondary {
  background: var(--wall-card); color: var(--accent);
  border: 1.5px solid var(--accent); border-radius: var(--dl-radius-pill);
}
.button.secondary:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* ---- Inner pages: a smaller hero, then content on ceramic paper (FR-025). ---- */
.page-hero { position: relative; overflow: hidden; display: grid; place-items: center; padding: calc(var(--dl-space-64) + var(--dl-space-48)) var(--dl-gutter) var(--dl-space-48); }
.page-hero .hero-panel h1 { font-size: clamp(var(--dl-size-h1), 5vw, 2.75rem); }
/* A fade into the wall, not a brand gradient (as on the home hero). */
.page-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 45%, var(--wall)); }
.page-body { max-width: calc(var(--dl-column) + 2 * var(--dl-gutter)); margin: 0 auto; padding: 0 var(--dl-gutter) var(--dl-space-64); }
.page-body.wide { max-width: calc(var(--dl-wide) - 8rem); }
.paper {
  background: var(--wall-card); border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius-card); box-shadow: var(--dl-glass-shadow);
  padding: clamp(var(--dl-space-24), 5vw, var(--dl-space-48));
}
.paper > :first-child { margin-top: 0; }
.version { color: var(--dl-ink2); font-size: var(--dl-size-body-medium); margin: 0; }
.banner, .notice {
  background: var(--wall); border: 1px solid var(--dl-line);
  border-left: 4px solid var(--dl-ochre-deep);
  border-radius: var(--dl-radius-card);
  padding: var(--dl-space-12) var(--dl-space-16);
  font-weight: 600;
}
.notice { margin-bottom: var(--dl-space-24); }
.toc {
  background: var(--wall); border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius-card); padding: var(--dl-space-16) var(--dl-space-16) var(--dl-space-8);
  margin: var(--dl-space-16) 0 var(--dl-space-8);
}
.toc ol { list-style: none; padding: 0; margin: 0; columns: 2 12rem; column-gap: var(--dl-space-24); }
.toc li { margin-bottom: var(--dl-space-8); break-inside: avoid; font-size: var(--dl-size-body-medium); }
.toc a { display: inline-flex; align-items: center; min-height: var(--dl-tap); }
/* Room under the floating header after a jump to an anchor. */
article section, .tryit, .app { scroll-margin-top: calc(var(--dl-space-64) + var(--dl-space-24)); }
article ul { padding-left: var(--dl-space-24); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--dl-space-16); }
.card { background: var(--wall-card); border: 1px solid var(--dl-line); border-radius: var(--dl-radius-card); box-shadow: var(--dl-glass-shadow); padding: var(--dl-space-24); }
.card h2 { margin-top: 0; font-size: var(--dl-size-h3); }
.card p:last-child { margin-bottom: 0; }
.page-more { margin: var(--dl-space-32) 0 0; text-align: center; }
.links { list-style: none; padding-left: 0; }
.paper.links { columns: 2 14rem; }
.links li { margin-bottom: var(--dl-space-4); }
.links a { display: inline-flex; align-items: center; min-height: var(--dl-tap); }

/* ---- Footer, the same on every page (FR-025): a deep-glaze field under the
   ornament band, like the glazed foot of a tile. White on --accent-deep is
   at least 5:1 in all three themes. ---- */
.site-footer { margin-top: var(--dl-space-32); }
.footer-glaze { background: var(--accent-deep); color: var(--dl-porcelain-card); font-size: var(--dl-size-body-medium); }
.footer-glaze a { color: var(--dl-porcelain-card); text-decoration: none; }
.footer-glaze a:hover, .footer-glaze a[aria-current] { text-decoration: underline; text-underline-offset: .3em; }
.footer-glaze :focus-visible { outline-color: var(--dl-porcelain-card); }
.footer-inner { max-width: var(--dl-wide); margin: 0 auto; padding: var(--dl-space-48) var(--dl-gutter) var(--dl-space-32); display: flex; flex-wrap: wrap; gap: var(--dl-space-48); }
.footer-brand { flex: 1 1 16rem; min-width: 0; }
.footer-brand p { margin: var(--dl-space-12) 0 0; max-width: 22rem; }
.footer-mark { display: inline-flex; align-items: center; gap: var(--dl-space-12); min-height: var(--dl-tap); font-family: var(--dl-display); font-weight: 800; font-size: var(--dl-size-h3); }
.footer-mark img { border-radius: 22.5%; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.footer-cols { flex: 2 1 28rem; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--dl-space-24); }
.footer-cols h2 { margin: 0 0 var(--dl-space-8); font-family: var(--dl-ui); font-size: var(--dl-size-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dl-porcelain-card); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols a { display: inline-flex; align-items: center; gap: var(--dl-space-8); min-height: var(--dl-tap); overflow-wrap: anywhere; }
.footer-bottom { max-width: var(--dl-wide); margin: 0 auto; padding: var(--dl-space-16) var(--dl-gutter) var(--dl-space-32); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dl-space-12) var(--dl-space-24); border-top: 1px solid color-mix(in srgb, var(--dl-porcelain-card) 18%, transparent); }
.footer-bottom .company { margin: 0; font-size: var(--dl-size-label); }
.footer-glaze .soon { background: transparent; border-color: color-mix(in srgb, var(--dl-porcelain-card) 45%, transparent); color: var(--dl-porcelain-card); }
.footer-glaze .button.glaze { background: var(--dl-porcelain-card); color: var(--accent-deep); }

/* ---- The language switch: NL | EN, always on top (owner, 2026-10-31). ---- */
.header-end { display: flex; align-items: center; gap: var(--dl-space-4); }
.lang-switch { list-style: none; margin: 0; padding: var(--dl-space-4); display: flex; gap: 2px; border-radius: var(--dl-radius-pill); background: var(--dl-line); }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--dl-tap); min-height: 36px; padding: 0 var(--dl-space-8); border-radius: var(--dl-radius-pill); font-size: var(--dl-size-label); font-weight: 700; letter-spacing: .04em; text-decoration: none; color: var(--dl-ink2); }
.lang-switch a[aria-current] { background: var(--wall-card); color: var(--dl-ink); box-shadow: 0 1px 3px var(--dl-line); }
.site-header .lang-switch a { padding: 0 var(--dl-space-8); min-height: 36px; }
.footer-glaze .lang-switch { background: transparent; border: 1px solid color-mix(in srgb, var(--dl-porcelain-card) 45%, transparent); }
.footer-glaze .lang-switch a { color: var(--dl-porcelain-card); }
.footer-glaze .lang-switch a[aria-current] { background: var(--dl-porcelain-card); color: var(--accent-deep); text-decoration: none; }

/* ===================================================================== */
/* Home — the landing page (spec 030, concept C). Tokens only.           */
/* ===================================================================== */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sr-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }


.glass {
  background: var(--dl-glass-veil);
  -webkit-backdrop-filter: var(--dl-glass-blur); backdrop-filter: var(--dl-glass-blur);
  border: 1px solid var(--dl-glass-line);
  box-shadow: var(--dl-glass-shadow);
  border-radius: var(--dl-radius-panel);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--wall-card); }
}

/* Atelier Book .btn-glaze: translucent glaze, blur, wet top-half sheen. */
.button.glaze {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--dl-radius-pill);
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--dl-porcelain-card);
  border: 1px solid var(--dl-glaze-edge);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.button.glaze::before { content: ''; position: absolute; inset: 0 0 50% 0; z-index: -1; background: linear-gradient(to bottom, rgba(255,255,255,.18), transparent); }
.theme-azulejo .button.glaze { background: color-mix(in srgb, var(--accent-deep) 92%, transparent); }
.button.glaze:hover { color: var(--dl-porcelain-card); }
/* Before launch: plain text in a quiet pill, never button-shaped (no dead tap). */
.soon { display: inline-flex; align-items: center; min-height: var(--dl-tap); padding: 0 var(--dl-space-24); border-radius: var(--dl-radius-pill); background: var(--wall-card); border: 1px solid var(--dl-line); color: var(--dl-ink2); font-weight: 600; }

/* Hero over the drifting wall (R3) */
.hero { position: relative; overflow: hidden; display: grid; place-items: center; min-height: min(48rem, 92vh); padding: calc(var(--dl-space-64) + var(--dl-space-32)) var(--dl-gutter) var(--dl-space-64); }
.wall { position: absolute; inset: calc(-1 * var(--dl-space-48)); overflow: hidden; opacity: .55; filter: blur(3px) saturate(.9); transform: rotate(-3deg) scale(1.08); }
.wall-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--dl-space-8); animation: drift var(--dl-motion-drift) linear infinite; }
.wall-track img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--dl-radius-tile); }
/* A scrim, not a brand gradient: it lets the wall fade into the page, as the app's bottom edge does. */
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 55%, var(--wall)); }
@keyframes drift { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hero-panel { position: relative; z-index: 1; max-width: 40rem; padding: clamp(var(--dl-space-24), 5vw, var(--dl-space-48)); text-align: center; }
.hero-panel h1 { font-size: clamp(var(--dl-size-h1), 6vw, 3.75rem); font-weight: 800; margin: 0 0 var(--dl-space-16); line-height: 1.04; }
.hero-panel .lead { font-size: var(--dl-size-h3); color: var(--dl-ink2); margin-bottom: var(--dl-space-24); }
.hero-cta { margin: 0 0 var(--dl-space-12); }
.first-look { margin: 0; font-size: var(--dl-size-body-medium); color: var(--dl-ink2); }

/* Shared section frame */
.tryit, .app, .closing { max-width: var(--dl-wide); margin: 0 auto; padding: var(--dl-space-64) var(--dl-gutter); }

/* Before / after (R2): without :has() the stage shows the first photo and its three tiles in a 2 × 2 grid */
.tryit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dl-space-48); }
.tryit-copy { flex: 1 1 20rem; min-width: 0; }
.tryit-stage { flex: 1 1 24rem; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--dl-space-16); }
.choice { display: none; border: 0; padding: 0; margin: var(--dl-space-24) 0 0; }
.choice legend { font-size: var(--dl-size-label); font-weight: 600; color: var(--dl-ink2); margin-bottom: var(--dl-space-8); }
.photos label, .trads label { cursor: pointer; }
.thumb { display: inline-block; width: 52px; height: 52px; margin: 0 var(--dl-space-8) var(--dl-space-8) 0; border-radius: var(--dl-radius-pill); overflow: hidden; border: 2px solid transparent; vertical-align: top; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sr-input:checked + .thumb { border-color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: var(--dl-space-8); min-height: var(--dl-tap); padding: 0 var(--dl-space-16); margin: 0 var(--dl-space-8) var(--dl-space-8) 0; border-radius: var(--dl-radius-pill); border: 1px solid var(--dl-line); background: var(--wall-card); font-weight: 600; font-size: var(--dl-size-body-medium); }
.sr-input:checked + .chip { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dot { width: 12px; height: 12px; border-radius: var(--dl-radius-pill); }
.dot-delft { background: var(--dl-cobalt); }
.dot-azulejo { background: var(--dl-ochre-deep); }
.dot-talavera { background: var(--dl-madder); }
.sr-input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dl-space-12); width: min(100%, 28rem); }
.stage .ba { display: none; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--dl-radius-tile); box-shadow: var(--dl-tile-shadow); }
.stage .ba.fallback { display: block; }
.seg { display: none; padding: var(--dl-space-4); margin: 0; border: 0; border-radius: var(--dl-radius-pill); background: var(--dl-line); }
.seg label { display: inline-flex; align-items: center; min-height: var(--dl-tap); padding: 0 var(--dl-space-24); border-radius: var(--dl-radius-pill); font-weight: 600; color: var(--dl-ink2); cursor: pointer; }
.seg .sr-input:checked + label { background: var(--wall-card); color: var(--dl-ink); box-shadow: 0 1px 3px var(--dl-line); }
@supports selector(:has(*)) {
  .stage .ba { animation: reveal var(--dl-motion-reveal) var(--dl-motion-brush); }
}
@keyframes reveal { from { opacity: .2; filter: saturate(.2); } to { opacity: 1; filter: none; } }

/* The app on phones, beside three steps */
.app { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dl-space-48); border-top: 1px solid var(--dl-line); }
.phones { flex: 1 1 22rem; min-width: 0; display: flex; justify-content: center; gap: var(--dl-space-16); }
.phone { margin: 0; flex: 0 1 12rem; padding: var(--dl-space-8); border-radius: var(--dl-radius-phone); background: var(--dl-ink); box-shadow: var(--dl-phone-shadow); }
.phone img { display: block; width: 100%; height: auto; border-radius: calc(var(--dl-radius-phone) - var(--dl-space-8)); }
.phone:nth-child(2) { transform: translateY(calc(-1 * var(--dl-space-24))); }
.app-copy { flex: 1 1 20rem; min-width: 0; }
.steps { list-style: none; padding: 0; margin: var(--dl-space-24) 0 0; display: flex; flex-direction: column; gap: var(--dl-space-24); }
.steps li { display: flex; gap: var(--dl-space-16); }
.steps .num { flex: none; width: var(--dl-tap); height: var(--dl-tap); display: grid; place-items: center; border-radius: var(--dl-radius-pill); background: var(--accent); color: var(--dl-porcelain-card); font-weight: 700; }
.steps h3 { margin: 0 0 var(--dl-space-4); }
.steps p { margin: 0; color: var(--dl-ink2); }
@media (max-width: 40rem) {
  .phone { flex-basis: 7rem; padding: var(--dl-space-4); border-radius: calc(var(--dl-radius-phone) / 2); }
  .phone img { border-radius: calc(var(--dl-radius-phone) / 2 - var(--dl-space-4)); }
}

/* A download button in reach between hero and closing CTA (FR-022, R10a) */
.reach { position: relative; }
.reach-bar { position: sticky; bottom: max(var(--dl-space-16), env(safe-area-inset-bottom)); z-index: 2; display: flex; justify-content: center; margin: 0; padding: 0 var(--dl-gutter) var(--dl-space-16); pointer-events: none; }
.reach-bar .button { pointer-events: auto; }

/* Closing call to action */
.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dl-space-24); margin-bottom: var(--dl-space-64); padding: var(--dl-space-48) clamp(var(--dl-space-24), 4vw, var(--dl-space-48)); max-width: calc(var(--dl-wide) - 2 * var(--dl-gutter)); }
.closing h2 { margin: 0 0 var(--dl-space-8); font-weight: 800; }
.closing p { margin: 0; color: var(--dl-ink2); }
.instagram { display: inline-flex; align-items: center; gap: var(--dl-space-8); min-height: var(--dl-tap); font-weight: 600; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .wall-track, .stage .ba { animation: none; }
}

/* Ornaments per theme (R11): a tile band above the closing CTA, a seal above
   the headline, and Delft corners on the hero panel. The images come from the
   build as --ornament-* variables. */
.seal { position: relative; overflow: hidden; display: block; width: 56px; height: 56px; margin: 0 auto var(--dl-space-16); border-radius: var(--dl-radius-tile); background: var(--ornament-seal) center / cover; box-shadow: var(--dl-tile-shadow); }
.seal::after { content: ''; position: absolute; inset: 0; background: var(--dl-tile-sheen); mix-blend-mode: soft-light; }
.ornament-band { height: 72px; margin: 0; background: var(--ornament-band) left center / 72px 72px repeat-x; box-shadow: inset 0 1px 0 var(--dl-line), inset 0 -1px 0 var(--dl-line); }
.theme-delft .hero-panel::before, .theme-delft .hero-panel::after { content: ''; position: absolute; width: 64px; height: 64px; background: var(--ornament-corner) left top / 128px 128px no-repeat; pointer-events: none; }
.theme-delft .hero-panel::before { top: var(--dl-space-8); left: var(--dl-space-8); }
.theme-delft .hero-panel::after { bottom: var(--dl-space-8); right: var(--dl-space-8); transform: rotate(180deg); }

@supports selector(:has(*)) {
  .tryit .choice { display: block; }
  .tryit .seg { display: inline-flex; }
  .tryit .stage { display: block; }
  .tryit .stage .ba { display: none; }
  .tryit .stage { position: relative; }
  .tryit:has(#v-na:checked) .stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--dl-radius-tile); background: var(--dl-tile-sheen); mix-blend-mode: soft-light; }
  .tryit:has(#p01:checked):has(#v-voor:checked) .ba-01-photo { display: block; }
  .tryit:has(#p01:checked):has(#t-delft:checked):has(#v-na:checked) .ba-01-delft { display: block; }
  .tryit:has(#p01:checked):has(#t-azulejo:checked):has(#v-na:checked) .ba-01-azulejo { display: block; }
  .tryit:has(#p01:checked):has(#t-talavera:checked):has(#v-na:checked) .ba-01-talavera { display: block; }
  .tryit:has(#p03:checked):has(#v-voor:checked) .ba-03-photo { display: block; }
  .tryit:has(#p03:checked):has(#t-delft:checked):has(#v-na:checked) .ba-03-delft { display: block; }
  .tryit:has(#p03:checked):has(#t-azulejo:checked):has(#v-na:checked) .ba-03-azulejo { display: block; }
  .tryit:has(#p03:checked):has(#t-talavera:checked):has(#v-na:checked) .ba-03-talavera { display: block; }
  .tryit:has(#p05:checked):has(#v-voor:checked) .ba-05-photo { display: block; }
  .tryit:has(#p05:checked):has(#t-delft:checked):has(#v-na:checked) .ba-05-delft { display: block; }
  .tryit:has(#p05:checked):has(#t-azulejo:checked):has(#v-na:checked) .ba-05-azulejo { display: block; }
  .tryit:has(#p05:checked):has(#t-talavera:checked):has(#v-na:checked) .ba-05-talavera { display: block; }
  .tryit:has(#p12:checked):has(#v-voor:checked) .ba-12-photo { display: block; }
  .tryit:has(#p12:checked):has(#t-delft:checked):has(#v-na:checked) .ba-12-delft { display: block; }
  .tryit:has(#p12:checked):has(#t-azulejo:checked):has(#v-na:checked) .ba-12-azulejo { display: block; }
  .tryit:has(#p12:checked):has(#t-talavera:checked):has(#v-na:checked) .ba-12-talavera { display: block; }
  .tryit:has(#p16:checked):has(#v-voor:checked) .ba-16-photo { display: block; }
  .tryit:has(#p16:checked):has(#t-delft:checked):has(#v-na:checked) .ba-16-delft { display: block; }
  .tryit:has(#p16:checked):has(#t-azulejo:checked):has(#v-na:checked) .ba-16-azulejo { display: block; }
  .tryit:has(#p16:checked):has(#t-talavera:checked):has(#v-na:checked) .ba-16-talavera { display: block; }
}
.theme-delft { --ornament-band: url(/assets/band-delft.d3796fac.webp); --ornament-seal: url(/assets/seal-delft.29d03fa3.webp); --ornament-corner: url(/assets/corner-delft.9e8cecbc.webp); }
.theme-azulejo { --ornament-band: url(/assets/band-azulejo.2ee07c51.webp); --ornament-seal: url(/assets/seal-azulejo.a9d3ba72.webp); }
.theme-talavera { --ornament-band: url(/assets/band-talavera.822e35af.webp); --ornament-seal: url(/assets/band-talavera.822e35af.webp); }