/* Zuhause im Morgen · Design master v0.1
   Authoritative design source. Values are design decisions,
   not measurements of the AI sketch. Base: 1rem = 16px at default text size.
   Order: reset → tokens → base → components → layouts → utilities.
   Product rules belong here; documentation UI belongs in desktop-master.css. */
@layer reset, tokens, base, components, layouts, motion, utilities;
@import url("colors.css") layer(tokens);
@import url("offer.css") layer(layouts);
@import url("navigation.css") layer(utilities);
@import url("provider.css") layer(layouts);

/* Signed-in workspace candidates. Product content starts directly below a compact masthead. */
@layer layouts {
  .work-content { min-height:100svh; }
  .work-page { padding:clamp(1.5rem,3vw,3rem) clamp(1.5rem,4vw,4.5rem) 5rem; }
  .work-masthead { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--zim-line); }
  .work-kicker,.work-folio { margin:0; color:var(--zim-muted); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
  .work-masthead-name { margin:.1rem 0 0; font-family:var(--zim-font-editorial); font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.1; }
  .work-identity { position:relative; z-index:3; flex:none; }
  .work-identity-trigger { display:flex; align-items:center; gap:.7rem; min-height:3.25rem; padding:.25rem .5rem; border:1px solid transparent; background:transparent; text-align:left; }
  .work-identity-trigger:hover,.work-identity-trigger[aria-expanded=true] { border-color:var(--zim-line); background:var(--zim-home-paper); }
  .work-avatar { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--zim-identity-bg); color:var(--zim-identity-ink); font-size:.8rem; font-weight:700; }
  .work-identity-copy { display:grid; line-height:1.25; }
  .work-identity-copy strong { font-size:.85rem; }
  .work-identity-copy small { color:var(--zim-muted); font-size:.75rem; }
  .work-identity-menu { position:absolute; top:calc(100% + .3rem); right:0; min-width:15rem; padding:.4rem; background:var(--zim-surface); border:1px solid var(--zim-line); box-shadow:0 .5rem 1.5rem var(--zim-shadow); }
  .work-identity-menu[hidden] { display:none; }
  .work-identity-menu a,.work-identity-menu button { display:block; width:100%; min-height:2.7rem; padding:.5rem .7rem; border:0; background:transparent; color:var(--zim-ink); text-align:left; text-decoration:none; font-size:.9rem; }
  .work-identity-menu a:hover,.work-identity-menu button:hover { background:var(--zim-home-paper); }
  .work-identity-menu button { border-top:1px solid var(--zim-line); }
  .work-utility { color:var(--zim-action); font-size:.9rem; text-underline-offset:.3em; white-space:nowrap; }
  .work-board { display:flex; flex-wrap:wrap; margin-top:1.5rem; border:1px solid var(--zim-line); min-height:39rem; }
  .work-place-selector { flex:1 1 19rem; min-width:0; padding:clamp(1.5rem,2.5vw,2.5rem); background:var(--zim-home-paper); border-right:1px solid var(--zim-line); border-bottom:1px solid var(--zim-line); }
  .work-place-selector h2 { margin:.4rem 0 .7rem; font-family:var(--zim-font-editorial); font-size:clamp(1.8rem,2.5vw,2.6rem); font-weight:400; line-height:1.1; }
  .work-mobile-picker { display:none; }
  .work-place-list { margin-bottom:1.3rem; }
  .work-place { display:grid; grid-template-columns:1.8rem minmax(0,1fr) 1.25rem; align-items:start; gap:.5rem; padding:1rem .75rem; border-top:1px solid var(--zim-line); color:var(--zim-ink); text-decoration:none; }
  .work-place:last-child { border-bottom:1px solid var(--zim-line); }
  .work-place:hover { background:var(--zim-hover-bg); }
  .work-place--selected,.work-place--selected:hover { background:var(--zim-selected-bg); box-shadow:inset 3px 0 var(--zim-action); }
  .work-place-index { color:var(--zim-muted); font-family:var(--zim-font-editorial); font-size:1rem; }
  .work-place-body { display:grid; gap:.15rem; min-width:0; }
  .work-place-body strong { font-size:1rem; line-height:1.25; }
  .work-place-body>span { color:var(--zim-muted); font-size:.8rem; }
  .work-place-body em { color:var(--zim-muted); font-size:.8rem; font-style:normal; }
  .work-place-next { color:var(--zim-action); }
  .work-place-next .icon { width:1.1rem; height:1.1rem; }
  .work-selected-place { flex:2 1 28rem; min-width:0; padding:clamp(1.5rem,3vw,3rem); background:var(--zim-surface); }
  .work-selected-head { display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-bottom:1.4rem; border-bottom:1px solid var(--zim-line); }
  .work-selected-head h1 { max-width:22ch; margin:.4rem 0 .6rem; font-family:var(--zim-font-editorial); font-size:clamp(2.2rem,3vw,3.4rem); font-weight:400; line-height:1.06; letter-spacing:-.04em; }
  .work-selected-head p:last-child { color:var(--zim-muted); font-size:.9rem; }
  .work-draft-state { padding:.25rem .6rem; background:var(--zim-soft); color:var(--zim-muted); font-size:.8rem; white-space:nowrap; }
  .work-offer-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-offer-facts>div { display:grid; align-content:start; gap:.3rem; padding:1rem .7rem 1rem 0; border-bottom:1px solid var(--zim-line); }
  .work-offer-facts>div:nth-child(even) { padding-left:.7rem; }
  .work-offer-facts span { color:var(--zim-muted); font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
  .work-offer-facts strong { font-size:.95rem; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
  .work-next { padding:1.6rem 0; border-bottom:1px solid var(--zim-line); }
  .work-next h2 { margin:.35rem 0 .4rem; font-family:var(--zim-font-editorial); font-size:clamp(1.5rem,2vw,2rem); font-weight:400; }
  .work-next>p:not(.work-kicker) { margin-bottom:.7rem; font-size:.9rem; line-height:1.5; }
  .work-privacy-note { margin-top:1.2rem; color:var(--zim-muted); font-size:.8rem; line-height:1.5; }
  .work-places--empty { max-width:38rem; margin-top:2rem; }
  .work-places--empty h1 { margin:.4rem 0 1rem; font-family:var(--zim-font-editorial); font-size:clamp(2rem,3vw,3rem); font-weight:400; }
  .work-places--empty>p:not(.work-kicker) { margin:1rem 0 1.5rem; line-height:1.5; }
  .work-steps { display:flex; gap:1.6rem; flex-wrap:wrap; margin:1.2rem 0; color:var(--zim-muted); font-size:.9rem; }
  .work-steps a { color:var(--zim-action); font-weight:700; text-underline-offset:.35em; }
  .work-editor { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(17rem,.8fr); min-height:40rem; }
  .work-form-page { padding:2rem clamp(1.5rem,4vw,4rem) 3rem; background:var(--zim-surface); }
  .work-form-page h1 { margin:.7rem 0; font-size:clamp(2.2rem,3vw,3.5rem); line-height:1.1; letter-spacing:-.04em; }
  .work-form-intro { max-width:31rem; margin:0 0 1.2rem; font-size:1rem; line-height:1.5; }
  .work-form { display:grid; gap:.6rem; max-width:32rem; }
  .work-form label { margin-top:.6rem; font-weight:650; }
  .work-form-row { display:grid; grid-template-columns:1fr 2fr; gap:1rem; }
  .work-form-row>div { display:grid; gap:.6rem; align-content:start; }
  .work-save-status { margin-top:1rem; color:var(--zim-muted); font-size:.85rem; }
  .work-editor-note { display:flex; flex-direction:column; padding:clamp(2rem,3vw,3rem); background:var(--zim-magazine-note); }
  .work-editor-quote { margin:4rem 0 1.5rem; font-family:var(--zim-font-editorial); font-size:clamp(2.25rem,3vw,3.5rem); line-height:1.05; }
  .work-editor-note>p:not(.work-folio):not(.work-editor-quote) { max-width:24rem; line-height:1.55; }
  .work-editor-note a { margin-top:auto; color:var(--zim-action); text-underline-offset:.3em; }
  .work-settings { max-width:47rem; margin-top:2.5rem; }
  .work-settings h1 { margin:.6rem 0 1.5rem; font-size:clamp(2.2rem,3vw,3.5rem); }
  .work-settings dl { margin:0; }
  .work-settings dl>div { display:grid; grid-template-columns:minmax(9rem,1fr) 2fr; gap:1rem; padding:1.1rem 0; border-top:1px solid var(--zim-line); }
  .work-settings dt { color:var(--zim-muted); }
  .work-settings dd { margin:0; }
  .work-quiet-button { margin-top:2rem; border:0; padding:.5rem 0; background:none; color:var(--zim-action); text-decoration:underline; text-underline-offset:.3em; cursor:pointer; }
  .work-sidebar .brand span { white-space:nowrap; }
  @media(max-width:70rem) { .work-editor { grid-template-columns:minmax(0,1fr); } .work-place-selector { border-right:0; padding:1.25rem; } .work-place-selector h2 { margin:.25rem 0 .75rem; font-size:1.6rem; } .work-place-list { display:none; } .work-mobile-picker { display:grid; gap:.25rem; margin-bottom:.6rem; } .work-mobile-picker label { font-size:.8rem; font-weight:700; } .work-mobile-picker .input { min-height:3rem; background:var(--zim-surface); } }
  @container page (max-width:70rem) { .work-editor { grid-template-columns:minmax(0,1fr); } }
  @media(max-width:63.99em) { .app-sidebar.work-sidebar { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; padding:1rem 1.5rem; background:var(--zim-sidebar-paper); } .work-sidebar .app-navigation { display:flex; flex-wrap:wrap; gap:1rem; } .work-sidebar .app-sidebar__motto,.work-sidebar .app-sidebar__rule { display:none; } }
  @media(max-width:42rem) { .work-masthead { align-items:start; } .work-identity-copy { display:none; } .work-place-list,.work-offer-facts { grid-template-columns:1fr; } .work-offer-facts>div:nth-child(even) { padding-left:0; } .work-form-row { grid-template-columns:1fr; } .work-settings dl>div { grid-template-columns:1fr; gap:.25rem; } }
}

/* Product extension: account and invitation surfaces use the same master tokens. */
@layer layouts {
  .access-shell { display:grid; grid-template-columns:clamp(9rem,13.333vw,12rem) 1fr; min-height:100vh; }
  .access-nav { padding:3rem clamp(1rem,2.222vw,2rem); background:var(--zim-sidebar-paper); display:flex; flex-direction:column; gap:4rem; min-width:0; }
  .access-nav .brand { font-size:1.5rem; line-height:1; letter-spacing:-.05em; }
  .access-nav .brand span { display:block; white-space:nowrap; }
  .access-nav a { overflow-wrap:normal; }
  .access-nav nav a { font-size:1rem; font-weight:600; text-underline-offset:.3em; }
  .access-nav nav { display:flex; flex-direction:column; gap:1.5rem; }
  .access-main.access-workspace { grid-template-columns:1fr; }
  .access-workspace .access-panel { align-self:start; width:100%; max-width:90rem; }
  .provider-heading,.provider-section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:2rem; flex-wrap:wrap; }
  .provider-heading h1 { margin-top:1rem; }
  .provider-facilities { margin-top:2rem; }
  .provider-section-heading { margin-bottom:2rem; }
  .provider-section-heading h2 { font-size:1.75rem; }
  .provider-facility { padding:1.75rem 0; border-top:1px solid var(--zim-line); display:flex; align-items:center; justify-content:space-between; gap:2rem; }
  .provider-facility h3 { font-size:1.5rem; margin:.5rem 0; }
  .provider-draft { color:var(--zim-muted); font-size:1rem; }
  .provider-notice { color:var(--zim-action); }
  .provider-empty { max-width:42rem; padding:3rem 0; }
  .provider-empty h3 { font-family:var(--zim-font-editorial); font-size:2.5rem; font-weight:400; margin-bottom:1rem; }
  .provider-address-row { display:grid; grid-template-columns:1fr 2fr; gap:1rem; }
  .provider-address-row label { display:block; margin-bottom:.75rem; }
  .access-motto { font-size:1.125rem; line-height:1.6; margin-top:auto; }
  .access-privacy { font-size:1rem; }
  .access-main { display:grid; grid-template-columns:1fr 1fr; min-width:0; }
  .access-panel { padding:clamp(2rem,4.5vw,5rem); align-self:center; min-width:0; }
  .access-panel h1 { font-size:clamp(2.75rem,4.2vw,4.5rem); line-height:1.04; letter-spacing:-.055em; font-weight:600; margin:1.4rem 0 1.75rem; }
  .access-eyebrow { font-size:1rem; letter-spacing:.06em; text-transform:uppercase; color:var(--zim-muted); }
  .access-lead { font-size:1.25rem; line-height:1.6; max-width:32rem; overflow-wrap:anywhere; }
  .access-form { margin-top:2.5rem; display:flex; flex-direction:column; gap:.75rem; }
  .access-form label { font-weight:600; }
  .access-form .input { width:100%; background:var(--zim-surface); min-height:3.75rem; }
  .access-hint { color:var(--zim-muted); font-size:1rem; line-height:1.6; }
  .access-primary { width:100%; margin-top:1rem; justify-content:space-between; text-align:left; }
  .access-primary .action__disc { font-size:2rem; }
  .access-footnote { border-top:1px solid var(--zim-line); margin-top:2.5rem; padding-top:1.5rem; color:var(--zim-muted); font-size:1rem; line-height:1.7; }
  .access-companion { background:linear-gradient(180deg,transparent 15%,var(--zim-image-shade)),url('/design/assets/images/hero-room-v1.png') center/cover; display:flex; align-items:end; padding:clamp(2rem,4vw,4rem); color:var(--zim-on-image); min-height:100vh; }
  .access-companion .access-eyebrow { color:var(--zim-on-image); }
  .access-companion-copy>p:nth-child(2) { font-family:var(--zim-font-editorial); font-size:clamp(2.75rem,4vw,4rem); line-height:1.12; margin:1rem 0 1.5rem; }
  .access-companion-copy>span { font-size:1.125rem; }
  .access-back,.access-text-button { background:none; border:0; padding:.75rem 0; text-align:left; color:var(--zim-action); min-height:3rem; text-decoration:underline; text-underline-offset:.25em; }
  .access-back { margin-bottom:2rem; }
  .access-code { letter-spacing:.4em; font-size:1.75rem; }
  .access-error { padding:1rem; background:var(--zim-error-bg); color:var(--zim-error); border-left:3px solid var(--zim-error); font-size:1rem; line-height:1.6; }
  .access-error[hidden] { display:none; }
  .account-details { margin:2.5rem 0; padding:1.5rem 0; border-block:1px solid var(--zim-line); }
  .account-details dt { color:var(--zim-muted); font-size:1rem; }
  .account-details dd { margin:.4rem 0 1.5rem; overflow-wrap:anywhere; }
  .account-details dd:last-child { margin-bottom:0; }
  .access-verified { color:var(--zim-action); }
  .access-prose { margin:2rem 0; }
  .access-prose h2 { font-size:1.25rem; margin:1.5rem 0 .5rem; }
  .access-prose p { font-size:1.125rem; line-height:1.6; }
  @media(max-width:68rem) {
    .access-main { grid-template-columns:1fr; }
    .access-companion { min-height:22rem; }
    .access-panel { padding:3rem; }
  }
  @media(max-width:44rem) {
    .provider-facility { display:block; }
    .access-shell { display:block; }
    .access-nav { padding:1.5rem; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
    .access-nav .brand { font-size:1.25rem; }
    .access-motto { display:none; }
    .access-nav nav { order:3; flex-basis:100%; flex-direction:row; justify-content:space-between; }
    .access-privacy { font-size:.875rem; }
    .access-panel { padding:2.5rem 1.5rem; }
    .access-panel h1 { font-size:2.75rem; }
    .access-companion { min-height:24rem; padding:2rem 1.5rem; }
    .access-companion-copy>p:nth-child(2) { font-size:3rem; }
  }
}

@font-face {
  font-family: Inter;
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/SourceSerif4-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/SourceSerif4-It.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body,
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  figure,
  blockquote {
    margin: 0;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  button,
  a,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    cursor: pointer;
  }
  button:disabled {
    cursor: default;
  }
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  [hidden] {
    display: none;
  }
}

@layer tokens {
  :root {
    --zim-font-ui: Inter, Arial, sans-serif;
    --zim-font-editorial: "Source Serif 4", Georgia, serif;
    --zim-weight-body: 400;
    --zim-weight-label: 500;
    --zim-weight-emphasis: 600;
    --zim-weight-display: 700;
    --zim-type-small: 1rem;
    --zim-leading-small: 1.5rem;
    --zim-type-body: 1.125rem;
    --zim-leading-body: 1.75rem;
    --zim-type-lead: 1.5rem;
    --zim-leading-lead: 2.125rem;
    --zim-type-card: 1.375rem;
    --zim-leading-card: 1.75rem;
    --zim-type-section: 1.75rem;
    --zim-leading-section: 2.25rem;
    --zim-type-title: 2.25rem;
    --zim-leading-title: 2.75rem;
    --zim-type-hero: 3rem;
    --zim-leading-hero: 3.25rem;
    --zim-type-quote: 1.75rem;
    --zim-leading-quote: 2.25rem;
    --zim-tracking-body: 0em;
    --zim-tracking-title: -0.025em;
    --zim-tracking-hero: -0.045em;
    --zim-space-1: 0.25rem;
    --zim-space-2: 0.5rem;
    --zim-space-3: 0.75rem;
    --zim-space-4: 1rem;
    --zim-space-5: 1.5rem;
    --zim-space-6: 2rem;
    --zim-space-7: 2.5rem;
    --zim-space-8: 3rem;
    --zim-space-9: 4rem;
    --zim-space-10: 6rem;
    --zim-gutter: 1.25rem;
    --zim-content: 75rem;
    --zim-flow: 38rem;
    --zim-reading: 42rem;
    --zim-control: 3.5rem;
    --zim-touch: 3rem;
    --zim-icon: 1.5rem;
    --zim-icon-stroke: 1.75;
    --zim-circle: 4rem;
    --zim-action-disc: 4rem;
    --zim-action-hit-padding: 0.75rem;
    --zim-action-gap: 1.5rem;
    --zim-radius: 0.375rem;
    --zim-radius-small: 0.25rem;
    --zim-radius-round: 999px;
    --zim-stroke: 1px;
    --zim-selection-stroke: 2px;
    --zim-focus-width: 3px;
    --zim-focus-gap: 3px;
    --zim-fast: 120ms;
    --zim-feedback: 160ms;
    --zim-transition: 280ms;
    --zim-layout-transition: 360ms;
    --zim-page-out: 100ms;
    --zim-page-in: 220ms;
    --zim-page-overlap: 40ms;
    --zim-search-columns: minmax(0, 0.382fr) minmax(0, 0.618fr);
    --zim-expand: 240ms;
    --zim-ease: cubic-bezier(0.2, 0, 0, 1);
    --zim-exit-ease: cubic-bezier(0.4, 0, 1, 1);
    /* Gently lifted right page edge, with a vertical perspective reference. */
    --zim-page-depth: 0.032;
    --zim-page-perspective: 0.012;
    --zim-page-exponent: 2.4;
    --zim-page-horizon: 0.42;
    /* Desktop entry: three adjacent surfaces with a full-bleed hero. */
    --zim-sidebar-width: clamp(9rem, 13.333vw, 12rem);
    --zim-home-inset: clamp(2rem, 3.6vw, 4.5rem);
    --zim-home-title: clamp(4rem, 6.35vw, 6.875rem);
    --zim-home-leading: 1.035;
    --zim-home-subtitle: clamp(2rem, 3.22vw, 3.5rem);
    --zim-home-subtitle-leading: 1.22;
    --zim-home-circle: 6rem;
    --zim-wizard-inset: clamp(2rem, 3.333vw, 4rem);
    --zim-wizard-title: clamp(2.25rem, 3.15vw, 3.375rem);
    --zim-magazine-title: clamp(2.75rem, 3.9vw, 4.75rem);
    --zim-ribbon-angle: 45deg;
  }
}

@layer base {
  html {
    color-scheme: light;
  }
  body {
    background: var(--zim-paper);
    color: var(--zim-ink);
    font-family: var(--zim-font-ui);
    font-size: var(--zim-type-body);
    line-height: var(--zim-leading-body);
    font-weight: var(--zim-weight-body);
    letter-spacing: var(--zim-tracking-body);
    font-optical-sizing: auto;
    font-kerning: normal;
    font-synthesis: none;
    font-feature-settings:
      "liga" 1,
      "calt" 1;
  }
  h1,
  h2,
  h3 {
    font-weight: var(--zim-weight-emphasis);
    overflow-wrap: break-word;
  }
  h1 {
    font-size: var(--zim-type-title);
    line-height: var(--zim-leading-title);
    letter-spacing: var(--zim-tracking-title);
  }
  h2 {
    font-size: var(--zim-type-section);
    line-height: var(--zim-leading-section);
    letter-spacing: var(--zim-tracking-title);
  }
  h3 {
    font-size: var(--zim-type-card);
    line-height: var(--zim-leading-card);
    letter-spacing: -0.015em;
  }
  a {
    color: inherit;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
  }
  a:hover {
    text-decoration-thickness: 2px;
  }
  :focus-visible {
    outline: var(--zim-focus-width) solid var(--zim-action);
    outline-offset: var(--zim-focus-gap);
  }
  :where(h1, h2)[tabindex="-1"]:focus {
    outline: none;
  }
  :where(button, a, input, select, textarea) {
    touch-action: manipulation;
  }
  :where(p, li, dd, a, button) {
    overflow-wrap: anywhere;
  }
  ::selection {
    background: var(--zim-ink);
    color: var(--zim-paper);
  }
}

@layer components {
  .icon {
    inline-size: var(--zim-icon);
    block-size: var(--zim-icon);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--zim-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .brand {
    display: inline-flex;
    flex-direction: column;
    font-size: 1.25rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    text-decoration: none;
    padding-block: var(--zim-space-2);
  }
  /* The visible circle is smaller than the combined interactive area.
     The hitbox extends 12px on each side; text and gap also respond. */
  .action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zim-action-gap);
    min-block-size: calc(
      var(--zim-action-disc) + 2 * var(--zim-action-hit-padding)
    );
    padding: var(--zim-action-hit-padding);
    border: 0;
    border-radius: var(--zim-radius);
    background: transparent;
    color: var(--zim-action);
    font-size: var(--zim-type-body);
    line-height: var(--zim-leading-body);
    font-weight: var(--zim-weight-label);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .action__label {
    min-inline-size: 0;
  }
  .action__disc {
    display: inline-grid;
    place-items: center;
    inline-size: var(--zim-action-disc);
    block-size: var(--zim-action-disc);
    flex: none;
    border-radius: 50%;
    background: var(--zim-action);
    color: var(--zim-on-action);
    transition: background-color var(--zim-fast) var(--zim-ease);
  }
  .action:hover {
    text-decoration: none;
  }
  .action:hover .action__disc {
    background: var(--zim-action-hover);
  }
  .action:active .action__disc {
    background: var(--zim-action-pressed);
  }
  .action:disabled {
    color: var(--zim-disabled-ink);
    cursor: default;
  }
  .action:disabled .action__disc {
    background: var(--zim-disabled);
    color: var(--zim-disabled-ink);
  }
  .action--wide {
    inline-size: 100%;
    justify-content: space-between;
  }
  .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zim-space-3);
    min-block-size: var(--zim-control);
    padding: var(--zim-space-3) var(--zim-space-5);
    border: var(--zim-stroke) solid var(--zim-border);
    border-radius: var(--zim-radius);
    background: transparent;
    color: var(--zim-ink);
    font-size: var(--zim-type-body);
    line-height: var(--zim-leading-body);
  }
  .secondary-button:hover {
    background: var(--zim-soft);
  }
  .text-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zim-space-2);
    min-block-size: var(--zim-touch);
    padding: var(--zim-space-2);
    color: var(--zim-ink);
    background: transparent;
    border: 0;
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .icon-button {
    display: inline-grid;
    place-items: center;
    inline-size: var(--zim-touch);
    min-block-size: var(--zim-touch);
    padding: var(--zim-space-3);
    border: var(--zim-stroke) solid var(--zim-border);
    border-radius: var(--zim-radius-round);
    background: var(--zim-surface);
  }
  .icon-button[aria-pressed="true"] .icon {
    fill: var(--zim-ink);
  }
  .field {
    display: grid;
    gap: var(--zim-space-2);
  }
  .field label,
  .field__label {
    font-weight: var(--zim-weight-emphasis);
  }
  .input {
    inline-size: 100%;
    min-block-size: var(--zim-control);
    padding: var(--zim-space-3) var(--zim-space-4);
    border: var(--zim-stroke) solid var(--zim-border);
    border-radius: var(--zim-radius);
    background: var(--zim-surface);
    color: var(--zim-ink);
  }
  .input::placeholder {
    color: var(--zim-muted);
    opacity: 1;
  }
  textarea.input {
    min-block-size: 9rem;
    resize: vertical;
  }
  .input[aria-invalid="true"] {
    border-color: var(--zim-error);
    border-width: var(--zim-selection-stroke);
    padding: calc(var(--zim-space-3) - 1px) calc(var(--zim-space-4) - 1px);
  }
  .hint {
    color: var(--zim-muted);
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
  }
  .error {
    color: var(--zim-error);
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
  }
  fieldset {
    min-inline-size: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }
  legend {
    padding: 0;
    margin-block-end: var(--zim-space-4);
    font-weight: var(--zim-weight-emphasis);
  }
  .choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--zim-space-4);
    padding: var(--zim-space-4);
    min-block-size: 5rem;
    border: var(--zim-stroke) solid var(--zim-border);
    border-radius: var(--zim-radius);
    background: var(--zim-surface);
    cursor: pointer;
  }
  .choice + .choice {
    margin-block-start: var(--zim-space-3);
  }
  .choice input {
    accent-color: var(--zim-action);
    inline-size: var(--zim-icon);
    block-size: var(--zim-icon);
    flex: none;
    margin: 0;
  }
  .choice:has(input:checked) {
    border-color: var(--zim-action);
    box-shadow: inset 0 0 0 1px var(--zim-action);
  }
  .choice:has(input:focus-visible) {
    outline: var(--zim-focus-width) solid var(--zim-action);
    outline-offset: var(--zim-focus-gap);
  }
  .choice input:focus-visible {
    outline: none;
  }
  .choice strong {
    display: block;
    font-weight: var(--zim-weight-emphasis);
  }
  .choice small {
    display: block;
    color: var(--zim-muted);
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
  }
  .chip {
    padding: var(--zim-space-2) var(--zim-space-4);
    min-block-size: var(--zim-touch);
    border: var(--zim-stroke) solid var(--zim-border);
    border-radius: var(--zim-radius);
    background: transparent;
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
  }
  .chip:hover {
    background: var(--zim-soft);
  }
  /* Form mantra: show small sets of choices directly. */
  .choice-group legend {
    margin-block-end: var(--zim-space-2);
    font-size: var(--zim-type-body);
    line-height: var(--zim-leading-body);
  }
  .option-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--zim-space-2);
  }
  .option-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--zim-space-2);
    min-block-size: var(--zim-touch);
    padding: var(--zim-space-2);
    border: 1px solid var(--zim-border);
    border-radius: var(--zim-radius-small);
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
    cursor: pointer;
  }
  .option-pill__check {
    display: inline-flex;
    flex: none;
    visibility: hidden;
  }
  .option-pill__check .icon {
    inline-size: 1rem;
    block-size: 1rem;
  }
  .option-pill:has(input:checked) {
    background: var(--zim-action);
    color: var(--zim-on-action);
    border-color: var(--zim-action);
  }
  .option-pill:has(input:checked) .option-pill__check {
    visibility: visible;
  }
  .option-pill:has(input:focus-visible) {
    outline: var(--zim-focus-width) solid var(--zim-action);
    outline-offset: var(--zim-focus-gap);
  }
  .choice-group--two .option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choice-group--two .option-pill {
    justify-content: flex-start;
  }
  .choice-group--auto .option-grid {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }
  .choice-group--inline .option-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zim-space-2);
  }
  .choice-group--inline legend {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--zim-muted);
    font-weight: 400;
    margin: 0;
  }
  .choice-group--inline .option-pill {
    min-block-size: 2.75rem;
    border: 0;
    padding: 4px 8px;
    background: transparent;
    color: var(--zim-muted);
    font-size: 0.875rem;
  }
  .choice-group--inline .option-pill:has(input:checked) {
    background: transparent;
    color: var(--zim-ink);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
  .status {
    display: inline-flex;
    align-items: center;
    gap: var(--zim-space-2);
    padding: var(--zim-space-1) var(--zim-space-2);
    color: var(--zim-status);
    background: var(--zim-status-bg);
    border-radius: var(--zim-radius-small);
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
  }
  .status .icon {
    inline-size: 1rem;
    block-size: 1rem;
  }
  .status--waiting {
    color: var(--zim-muted);
    background: var(--zim-soft);
  }
  .notice {
    padding: var(--zim-space-4);
    background: var(--zim-soft);
    border-inline-start: 3px solid var(--zim-border);
  }
  .notice--error {
    background: var(--zim-error-bg);
    border-color: var(--zim-error);
  }
  .notice--warning {
    background: var(--zim-warning-bg);
    border-color: var(--zim-warning);
  }
  .rule {
    border: 0;
    border-block-start: var(--zim-stroke) solid var(--zim-line);
    margin-block: var(--zim-space-6);
  }
  .quote {
    font-family: var(--zim-font-editorial);
    font-size: var(--zim-type-quote);
    line-height: var(--zim-leading-quote);
    font-style: italic;
    max-inline-size: 26ch;
  }
  .eyebrow {
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
    font-weight: var(--zim-weight-label);
    color: var(--zim-muted);
  }
  .hero-title {
    font-size: var(--zim-type-hero);
    line-height: var(--zim-leading-hero);
    font-weight: var(--zim-weight-display);
    letter-spacing: var(--zim-tracking-hero);
    padding-block: var(--zim-space-3);
  }
  .hero-title__line {
    display: block;
    transform-origin: 0 50%;
  }
  .page-word {
    display: inline-block;
    white-space: nowrap;
  }
  .page-glyph {
    display: inline-block;
    transform: var(--page-matrix, none);
    transform-origin: center;
  }
  .page-accessible {
    user-select: none;
  }
  .page-text--plain .page-word,
  .page-text--plain .page-glyph {
    display: inline;
    transform: none;
  }
  .lead {
    font-size: var(--zim-type-lead);
    line-height: var(--zim-leading-lead);
    font-weight: var(--zim-weight-body);
    letter-spacing: -0.015em;
  }
  .price {
    font-weight: var(--zim-weight-emphasis);
    font-variant-numeric: tabular-nums lining-nums;
  }
  /* Open listing rows: one shared area, without nested links. */
  .listing {
    border-block-end: var(--zim-stroke) solid var(--zim-line);
  }
  .listing__link {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr) 3rem;
    gap: var(--zim-space-5);
    align-items: center;
    padding-block: var(--zim-space-4);
    color: var(--zim-ink);
    text-decoration: none;
  }
  .listing__body {
    min-inline-size: 0;
  }
  .listing__title {
    font-size: var(--zim-type-body);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding: 0;
  }
  .listing__meta {
    font-size: var(--zim-type-small);
    line-height: 1.4;
    color: var(--zim-muted);
    margin-block: 4px 6px;
  }
  .listing .status {
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 2px 8px;
  }
  .listing .price {
    margin-block-start: 6px;
    font-size: var(--zim-type-body);
    line-height: 1.4;
    font-weight: 500;
  }
  .listing__cost-note {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--zim-muted);
  }
  .listing__disc {
    --zim-action-disc: 3rem;
    background: transparent;
    color: var(--zim-ink);
    border: 1px solid var(--zim-line);
  }
  .listing__link:hover {
    text-decoration: none;
  }
  .listing__link:hover .listing__title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .listing__link:hover .listing__disc {
    background: var(--zim-action);
    border-color: var(--zim-action);
    color: var(--zim-on-action);
  }
  .listing__photo {
    inline-size: 100%;
    aspect-ratio: 3/2;
  }
  .results-footnote {
    margin-block-start: var(--zim-space-5);
    color: var(--zim-muted);
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .wizard-back {
    display: inline-flex;
    align-items: center;
    gap: var(--zim-space-2);
    min-block-size: var(--zim-touch);
    font-size: var(--zim-type-small);
    color: var(--zim-ink);
    text-decoration: none;
  }
  .wizard-back:hover {
    text-decoration: underline;
  }
  .wizard-back .icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }
  .wizard-step {
    font-size: var(--zim-type-small);
    line-height: 1.5;
    margin-block-end: var(--zim-space-6);
  }
  .wizard-intro {
    margin-block-start: var(--zim-space-5);
    font-size: var(--zim-type-body);
    line-height: var(--zim-leading-body);
  }
  .place-input {
    position: relative;
  }
  .place-input > .icon {
    position: absolute;
    inset-inline-start: var(--zim-space-4);
    top: 50%;
    transform: translateY(-50%);
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }
  .place-input .input {
    padding-inline-start: 3.5rem;
    font-size: 1.375rem;
    min-block-size: 4rem;
  }
  .wizard-rule {
    inline-size: 100%;
    position: relative;
    border: 0;
    height: 1px;
    background: var(--zim-line);
    margin-block: var(--zim-space-8) var(--zim-space-6);
  }
  .wizard-rule::before {
    content: "";
    display: block;
    inline-size: 3rem;
    block-size: 1px;
    background: var(--zim-ink);
  }
  .city-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--zim-space-3);
    margin-block-start: var(--zim-space-4);
  }
  .city-grid .chip {
    padding-inline: var(--zim-space-2);
  }
  .housing-options {
    display: grid;
    gap: var(--zim-space-3);
  }
  .housing-option {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) 2.5rem;
    gap: var(--zim-space-5);
    align-items: center;
    min-block-size: 6rem;
    padding-inline-end: var(--zim-space-4);
    border-radius: var(--zim-radius-small);
    background: var(--zim-soft);
    cursor: pointer;
  }
  .housing-option__photo {
    inline-size: 6.5rem;
    block-size: 6rem;
    aspect-ratio: auto;
    border-radius: var(--zim-radius-small) 0 0 var(--zim-radius-small);
  }
  .housing-option .housing-option__photo {
    /* Height determines the crop, keeping neighboring sketch elements outside it. */
    background-size: auto 1329.87%;
    background-position-x: 81.53%;
    border-radius: var(--zim-radius-small) 0 0 var(--zim-radius-small);
  }
  .housing-option__text strong {
    display: block;
    font-size: var(--zim-type-body);
    line-height: 1.35;
    font-weight: 600;
  }
  .housing-option__text small {
    display: block;
    font-size: var(--zim-type-small);
    line-height: 1.4;
    margin-block-start: 4px;
  }
  .housing-option__check {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--zim-border);
  }
  .housing-option__check .icon {
    visibility: hidden;
  }
  .housing-option:has(input:checked) {
    background: var(--zim-action);
    color: var(--zim-on-action);
  }
  .housing-option:has(input:checked) .housing-option__check {
    background: var(--zim-on-action);
    border-color: var(--zim-on-action);
    color: var(--zim-action);
  }
  .housing-option:has(input:checked) .icon {
    visibility: visible;
  }
  .housing-option:has(input:focus-visible) {
    outline: var(--zim-focus-width) solid var(--zim-action);
    outline-offset: var(--zim-focus-gap);
  }
  .needs-options label,
  .filter-features label {
    display: flex;
    align-items: center;
    gap: var(--zim-space-3);
    min-block-size: 3.25rem;
  }
  .needs-options input,
  .filter-features input,
  .magazine-checklist input {
    accent-color: var(--zim-action);
    inline-size: 1.375rem;
    block-size: 1.375rem;
    flex: none;
  }
  .folio {
    display: flex;
    justify-content: space-between;
    gap: var(--zim-space-4);
    margin-block-start: auto;
    padding-block-start: var(--zim-space-5);
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .magazine-kicker {
    font-size: 0.875rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .magazine-arrow {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--zim-line);
    border-radius: 50%;
  }
  .magazine-arrow .icon {
    width: 1.125rem;
    height: 1.125rem;
  }
  .photo {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--zim-soft);
    border-radius: var(--zim-radius-small);
    aspect-ratio: 4 / 3;
  }
  /* Rough-sketch crop for the study. Product photos use .photo > img. */
  .photo > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .photo--study {
    background-image: url("../references/layout-rams-brigitte.png");
    background-repeat: no-repeat;
  }
  .photo--room {
    background-size: 495.484% auto;
    background-position: 37.03% 0%;
  }
  .photo--detail {
    background-size: 415.135% auto;
    background-position: 43.01% 68.17%;
    aspect-ratio: 16 / 9;
  }
  .photo--house {
    background-size: 919.76% auto;
    background-position: 2.338% 66.56%;
  }
  .photo--garden {
    background-size: 919.76% auto;
    background-position: 2.338% 81.04%;
  }
  .photo--courtyard {
    background-size: 919.7605% auto;
    background-position: 2.4105% 95.0712%;
  }
  .photo--shared {
    background-size: 1669.5652% auto;
    background-position: 81.7175% 15.9451%;
  }
  .photo--assisted {
    background-size: 1669.5652% auto;
    background-position: 81.7175% 25.2376%;
  }
  .photo--care {
    background-size: 1669.5652% auto;
    background-position: 81.7175% 34.5301%;
  }
  .photo--together {
    background-size: 1669.5652% auto;
    background-position: 81.7175% 43.8226%;
  }
  .photo--editorial {
    background-size: 481.5047% auto;
    background-position: 74.1988% 83.1839%;
  }
  .photo--hero {
    aspect-ratio: 4 / 5;
  }
  .facts {
    display: grid;
    gap: var(--zim-space-3);
    padding: 0;
    list-style: none;
  }
  .facts li {
    display: flex;
    align-items: flex-start;
    gap: var(--zim-space-3);
  }
  .facts .icon {
    margin-block-start: 2px;
  }
  details {
    border-block-end: var(--zim-stroke) solid var(--zim-line);
    padding-block: var(--zim-space-2);
  }
  summary {
    cursor: pointer;
    padding: var(--zim-space-3) 0;
    font-weight: var(--zim-weight-emphasis);
    min-block-size: var(--zim-control);
  }
  details > :not(summary) {
    padding-block-end: var(--zim-space-4);
  }
  .step-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zim-space-4);
    margin-block-end: var(--zim-space-6);
  }
  .steps {
    color: var(--zim-muted);
    font-size: var(--zim-type-small);
  }
  .progress {
    display: flex;
    gap: var(--zim-space-1);
    margin-block-start: var(--zim-space-2);
  }
  .progress span {
    inline-size: 1.5rem;
    block-size: 3px;
    background: var(--zim-line);
  }
  .progress span[data-done] {
    background: var(--zim-ink);
  }
  .tab-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zim-space-2);
    padding-block: var(--zim-space-4);
    border-block-end: var(--zim-stroke) solid var(--zim-line);
  }
  .tab-links a {
    min-block-size: var(--zim-touch);
    padding: var(--zim-space-3);
  }
  .checkmark {
    display: grid;
    place-items: center;
    inline-size: var(--zim-circle);
    block-size: var(--zim-circle);
    background: var(--zim-status-bg);
    color: var(--zim-status);
    border-radius: 50%;
  }
  .costs {
    inline-size: 100%;
    border-collapse: collapse;
  }
  .costs td,
  .costs th {
    text-align: start;
    padding: var(--zim-space-3) 0;
    border-block-end: var(--zim-stroke) solid var(--zim-line);
    font-weight: var(--zim-weight-body);
  }
  .costs td:last-child {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-inline-start: var(--zim-space-4);
  }
  .costs tr:last-child > * {
    font-weight: var(--zim-weight-emphasis);
  }
}

@layer layouts {
  .shell {
    max-inline-size: calc(var(--zim-content) + 2 * var(--zim-gutter));
    margin-inline: auto;
    padding-inline: var(--zim-gutter);
  }
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zim-space-4);
    padding-block: var(--zim-space-4);
    border-block-end: var(--zim-stroke) solid var(--zim-line);
  }
  .site-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--zim-space-2);
  }
  .site-nav .nav-wide {
    display: none;
  }
  .site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--zim-space-5);
    border-block-start: var(--zim-stroke) solid var(--zim-line);
    padding-block: var(--zim-space-6);
    margin-block-start: var(--zim-space-9);
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
  }
  .site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zim-space-4);
  }
  .search-spread {
    display: grid;
    min-block-size: 100svh;
    background: var(--zim-paper);
  }
  .search-filters {
    padding-block: var(--zim-space-7);
  }
  .search-filters h1 {
    margin-block-start: var(--zim-space-4);
    font-size: 2rem;
    line-height: 1.2;
  }
  .search-intro {
    margin-block-start: var(--zim-space-5);
    color: var(--zim-muted);
  }
  .search-filters form {
    margin-block-start: var(--zim-space-6);
  }
  .search-results {
    min-inline-size: 0;
    padding-block: var(--zim-space-7);
  }
  .search-results__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--zim-space-3);
    padding-block-end: var(--zim-space-4);
    border-block-end: 1px solid var(--zim-line);
  }
  .search-results__header h2 {
    font-size: var(--zim-type-body);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.015em;
  }
  .search-empty {
    padding-block: var(--zim-space-8);
  }
  .home-spread {
    background: var(--zim-home-paper);
  }
  .app-sidebar {
    display: none;
  }
  .app-content {
    background: var(--zim-paper);
    min-inline-size: 0;
  }
  .home-copy {
    padding-block: var(--zim-space-7);
  }
  .home-title {
    padding: var(--zim-space-2) 0;
  }
  .home-subtitle {
    margin-block-start: var(--zim-space-5);
    font-size: var(--zim-type-title);
    line-height: 1.22;
    font-weight: 300;
    letter-spacing: -0.03em;
  }
  .home-subtitle__line {
    display: block;
  }
  .home-description {
    margin-block-start: var(--zim-space-5);
    font-size: var(--zim-type-body);
    line-height: var(--zim-leading-body);
  }
  .home-cta {
    margin-block-start: var(--zim-space-6);
  }
  .home-copy-break {
    display: none;
  }
  .home-quote {
    margin-block-start: var(--zim-space-9);
  }
  .home-quote blockquote {
    font-family: var(--zim-font-editorial);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.35;
  }
  .home-quote figcaption {
    margin-block-start: var(--zim-space-4);
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
  }
  .home-visual {
    position: relative;
    min-block-size: 32rem;
    overflow: hidden;
  }
  .home-photo {
    position: absolute;
    inset: 0;
    background-image: url("assets/images/hero-room-v1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
  }
  .home-image-caption {
    position: absolute;
    inset-inline-end: var(--zim-space-7);
    inset-block-end: var(--zim-space-7);
    font-size: 1.5rem;
    line-height: 1.32;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--zim-surface);
    text-shadow: 0 1px 8px var(--zim-image-text-shadow);
  }
  /* Editorial imprint. The three metrics are authorized sample content. */
  .hero-imprint {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hero-ribbon {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 18rem;
    block-size: 18rem;
    overflow: hidden;
  }
  .hero-ribbon > span {
    position: absolute;
    inset-block-start: 4.75rem;
    inset-inline-end: -7.25rem;
    display: block;
    inline-size: 26rem;
    padding-block: 1rem;
    background: var(--zim-ribbon-paper);
    color: var(--zim-ribbon-ink);
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    transform: rotate(var(--zim-ribbon-angle));
    border-block: 1px solid var(--zim-ribbon-line);
  }
  .hero-ribbon strong {
    font-size: 1.875rem;
    line-height: 1;
    letter-spacing: -0.035em;
    margin-inline-end: 0.3em;
  }
  .hero-seal strong {
    display: block;
    font: 600 2.75rem/1.1 var(--zim-font-ui);
    letter-spacing: -0.04em;
    margin-block-end: 0.25rem;
  }
  .hero-facts {
    position: absolute;
    inset-inline-start: var(--zim-space-6);
    inset-block-end: var(--zim-space-9);
    display: flex;
    gap: var(--zim-space-6);
    padding: var(--zim-space-4) var(--zim-space-5);
    background: var(--zim-home-paper);
    color: var(--zim-ink);
  }
  .hero-facts > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
  }
  .hero-facts dt {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .hero-facts dd {
    margin: 0;
    font: 400 2.125rem/1 var(--zim-font-editorial);
    letter-spacing: -0.03em;
  }
  [data-cover-treatment="none"] .hero-facts {
    display: none;
  }
  .hero-seal {
    display: none;
    position: absolute;
    inset-block-start: var(--zim-space-8);
    inset-inline-end: var(--zim-space-8);
    inline-size: 10.5rem;
    block-size: 10.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--zim-ribbon-paper);
    color: var(--zim-ribbon-ink);
    outline: 1px solid var(--zim-ribbon-ink);
    outline-offset: -7px;
    transform: rotate(-10deg);
    text-align: center;
    font: 400 1.4rem/1.2 var(--zim-font-editorial);
  }
  [data-cover-treatment="seal"] .hero-ribbon,
  [data-cover-treatment="none"] .hero-ribbon {
    display: none;
  }
  [data-cover-treatment="seal"] .hero-seal {
    display: flex;
  }
  .editorial {
    display: grid;
    gap: var(--zim-space-6);
    padding-block: var(--zim-space-9);
    border-block-start: var(--zim-stroke) solid var(--zim-line);
  }
  .editorial h2 {
    font-family: var(--zim-font-editorial);
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 2.875rem;
    letter-spacing: -0.02em;
  }
  .flow {
    max-inline-size: var(--zim-flow);
    margin-inline: auto;
    padding-block: var(--zim-space-7) var(--zim-space-9);
  }
  .flow h1 + p {
    margin-block-start: var(--zim-space-4);
  }
  .flow form {
    margin-block-start: var(--zim-space-6);
  }
  .stack {
    display: grid;
    gap: var(--zim-space-5);
  }
  .stack--tight {
    gap: var(--zim-space-3);
  }
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zim-space-3);
    align-items: center;
  }
  .flow-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--zim-space-4);
    margin-block-start: var(--zim-space-8);
  }
  .flow-actions > .action:last-child {
    margin-inline-start: auto;
  }
  .results {
    max-inline-size: 60rem;
    margin-inline: auto;
    padding-block: var(--zim-space-7);
  }
  .results__tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zim-space-4);
    justify-content: space-between;
    align-items: flex-end;
    margin-block: var(--zim-space-5) var(--zim-space-4);
  }
  .results__tools .field {
    max-inline-size: 100%;
  }
  .detail {
    max-inline-size: 60rem;
    margin-inline: auto;
    padding-block: var(--zim-space-6);
  }
  .detail__title {
    margin-block: var(--zim-space-5);
  }
  .detail__intro {
    display: grid;
    gap: var(--zim-space-6);
    margin-block: var(--zim-space-6);
  }
  .detail__section {
    max-inline-size: var(--zim-reading);
    padding-block: var(--zim-space-6);
    scroll-margin-block-start: var(--zim-space-6);
  }
  .detail__section > * + * {
    margin-block-start: var(--zim-space-4);
  }
  .article {
    max-inline-size: var(--zim-reading);
    margin-inline: auto;
    padding-block: var(--zim-space-7);
  }
  .article > * + * {
    margin-block-start: var(--zim-space-5);
  }
  .article h1 {
    font-family: var(--zim-font-editorial);
    font-weight: 400;
  }
  /* Breakpoints use em: 40em / 64em = 640px / 1024px at 16px. */
  @media (min-width: 40em) {
    :root {
      --zim-gutter: 2rem;
    }
    .editorial {
      grid-template-columns: 1fr 1fr;
      gap: var(--zim-space-8);
    }
    .site-nav .nav-wide {
      display: inline-flex;
    }
  }
  @media (min-width: 64em) {
    :root {
      --zim-gutter: 3rem;
      --zim-type-hero: 4.25rem;
      --zim-leading-hero: 4.5rem;
      --zim-type-title: 2.5rem;
      --zim-leading-title: 3rem;
      --zim-circle: 4.5rem;
    }
    .app-shell {
      background: var(--zim-sidebar-paper);
      display: grid;
      grid-template-columns: var(--zim-sidebar-width) minmax(0, 1fr);
    }
    .app-content {
      container: page / inline-size;
    }
    .app-sidebar {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: sticky;
      inset-block-start: 0;
      block-size: 100svh;
      overflow-y: auto;
      padding: var(--zim-space-8) clamp(1.5rem, 2.2vw, 2rem);
      background: var(--zim-sidebar-paper);
    }
    .app-brand {
      font-size: 1.5rem;
      line-height: 1.45rem;
      padding: 0;
    }
    .app-navigation {
      display: grid;
      margin-block-start: 5rem;
    }
    .app-navigation a,
    .app-sidebar__secondary a {
      display: flex;
      align-items: center;
      gap: var(--zim-space-2);
      min-block-size: var(--zim-touch);
      font-size: var(--zim-type-small);
      line-height: var(--zim-leading-small);
      text-decoration: none;
    }
    .app-navigation a:hover,
    .app-sidebar__secondary a:hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
    .app-navigation a[aria-current="page"],
    .app-sidebar__secondary a[aria-current="page"] {
      font-weight: var(--zim-weight-emphasis);
      text-decoration: underline;
      text-underline-offset: 0.3em;
    }
    .app-sidebar__rule {
      flex: none;
      inline-size: var(--zim-space-6);
      block-size: 1px;
      background: var(--zim-ink);
      margin-block-start: var(--zim-space-6);
    }
    .app-sidebar__motto {
      margin-block-start: 7rem;
      font-size: var(--zim-type-body);
      line-height: var(--zim-leading-body);
    }
    .app-sidebar__secondary {
      display: grid;
      margin-block-start: auto;
      padding-block-start: var(--zim-space-8);
    }
    .site-header {
      display: none;
    }
    body:is([data-page="home"], [data-page="search"]) .app-content > .shell {
      max-inline-size: none;
      padding-inline: 0;
    }
    body:is([data-page="home"], [data-page="search"]) .site-footer {
      margin: 0;
      padding: var(--zim-space-6) var(--zim-home-inset);
    }
    .search-spread {
      grid-template-columns: var(--zim-search-columns);
    }
    .search-filters {
      background: var(--zim-home-paper);
      padding: var(--zim-space-8) var(--zim-space-7);
    }
    .search-results {
      padding: var(--zim-space-8) var(--zim-space-7);
    }
    .home-spread {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      min-block-size: 100svh;
    }
    .home-copy {
      display: flex;
      flex-direction: column;
      padding: var(--zim-space-8) var(--zim-home-inset);
      min-inline-size: 0;
    }
    .home-title {
      font-size: var(--zim-home-title);
      line-height: var(--zim-home-leading);
      letter-spacing: -0.035em;
    }
    .home-subtitle {
      font-size: var(--zim-home-subtitle);
      line-height: var(--zim-home-subtitle-leading);
      margin-block-start: var(--zim-space-4);
    }
    .home-description {
      margin-block-start: var(--zim-space-6);
    }
    .home-copy-break {
      display: initial;
    }
    .home-cta {
      --zim-action-disc: var(--zim-home-circle);
      --zim-action-gap: var(--zim-space-6);
      margin-inline-start: calc(-1 * var(--zim-action-hit-padding));
      margin-block-start: calc(
        var(--zim-space-6) - var(--zim-action-hit-padding)
      );
      gap: var(--zim-space-6);
      font-size: 1.25rem;
      line-height: 1.75rem;
      font-weight: 500;
    }
    .home-cta .icon {
      inline-size: 2rem;
      block-size: 2rem;
    }
    .home-quote {
      margin-block-start: auto;
      padding-block-start: var(--zim-space-9);
    }
    .home-quote blockquote {
      font-size: clamp(1.5rem, 1.9vw, 2rem);
      line-height: 1.25;
    }
    .home-visual {
      min-block-size: 100%;
    }
    .home-image-caption {
      inset-inline-end: var(--zim-home-inset);
      inset-block-end: var(--zim-space-9);
      font-size: 1.75rem;
    }
    @container page (max-width: 60rem) {
      .search-spread {
        grid-template-columns: minmax(0, 1fr);
      }
      .home-spread {
        grid-template-columns: minmax(0, 1fr);
      }
      .home-copy {
        min-block-size: 100svh;
      }
      .home-visual {
        min-block-size: 40rem;
      }
    }
    @media (max-height: 48em) {
      .home-copy {
        padding-block: var(--zim-space-6);
      }
      .home-quote {
        padding-block-start: var(--zim-space-7);
      }
    }
    .flow {
      padding-block-start: var(--zim-space-9);
    }
    .detail__intro {
      grid-template-columns: 1fr 18rem;
    }
  }
  /* Search starts with three guided steps. */
  .wizard-spread,
  .magazine-spread,
  .magazine-article {
    display: grid;
    min-block-size: 100svh;
  }
  .wizard-page {
    display: flex;
    flex-direction: column;
    padding: var(--zim-space-7) var(--zim-gutter);
    background: var(--zim-home-paper);
    min-inline-size: 0;
  }
  .wizard-page h1 {
    font-size: var(--zim-wizard-title);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 600;
  }
  .wizard-page form {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-block-start: var(--zim-space-6);
  }
  .wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zim-space-4);
    margin-block-start: auto;
    padding-block-start: var(--zim-space-8);
  }
  .wizard-actions .action {
    margin-inline-end: calc(-1 * var(--zim-action-hit-padding));
  }
  .wizard-fields {
    display: grid;
    gap: var(--zim-space-5);
  }
  .wizard-fields .needs-options label {
    min-block-size: 2.75rem;
  }
  .wizard-fields .needs-options legend {
    margin-block-end: var(--zim-space-2);
  }
  #needs-form .wizard-actions {
    padding-block-start: var(--zim-space-6);
  }
  .wizard-companion {
    min-inline-size: 0;
  }
  .wizard-companion--photo {
    position: relative;
    overflow: hidden;
    min-block-size: 32rem;
  }
  .wizard-explainer,
  .wizard-summary {
    display: flex;
    flex-direction: column;
    background: var(--zim-magazine-paper);
    padding: var(--zim-space-8) var(--zim-gutter);
  }
  .wizard-companion h2 {
    font-family: var(--zim-font-editorial);
    font-weight: 400;
    font-size: clamp(2.5rem, 3.7vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-block: var(--zim-space-8) var(--zim-space-6);
  }
  .wizard-explainer__intro {
    font-size: 1.5rem;
    line-height: 1.45;
  }
  .wizard-explainer h3 {
    font-size: var(--zim-type-body);
    margin-block-end: var(--zim-space-3);
  }
  .wizard-reading {
    margin-block-start: auto;
    padding-block-start: var(--zim-space-8);
  }
  .wizard-summary dl {
    margin-block: var(--zim-space-8);
  }
  .wizard-summary dl > div {
    border-block-start: 1px solid var(--zim-line);
    padding-block: var(--zim-space-5);
  }
  .wizard-summary dt {
    color: var(--zim-muted);
    font-size: var(--zim-type-small);
  }
  .wizard-summary dd {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--zim-space-4);
    margin: 4px 0 0;
    font-size: 1.375rem;
  }
  .wizard-summary dd a {
    font-size: var(--zim-type-small);
    min-height: 2rem;
  }
  .wizard-summary__thought {
    font: italic 2.25rem/1.2 var(--zim-font-editorial);
    margin-block-start: auto;
  }
  /* Magazine: content left, full-page image right. Distinct editorial hierarchy. */
  .magazine-cover {
    display: flex;
    flex-direction: column;
    padding: var(--zim-space-6) var(--zim-gutter) var(--zim-space-5);
    background: var(--zim-magazine-paper);
    min-inline-size: 0;
  }
  .magazine-masthead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    border-block-end: 1px solid var(--zim-ink);
    padding-block-end: var(--zim-space-3);
    font-size: 0.75rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .magazine-title {
    font-family: var(--zim-font-editorial);
    font-size: var(--zim-magazine-title);
    line-height: 0.99;
    letter-spacing: -0.045em;
    font-weight: 400;
    margin-block-start: var(--zim-space-5);
  }
  .magazine-deck {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-block-start: var(--zim-space-4);
  }
  .magazine-cover__still {
    margin-block-start: var(--zim-space-5);
    border-radius: 0;
    block-size: 7rem;
    aspect-ratio: auto;
    flex: none;
  }
  .magazine-contents {
    margin-block-start: var(--zim-space-3);
  }
  .magazine-contents a {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) 2.5rem;
    gap: var(--zim-space-3);
    align-items: center;
    padding-block: 10px;
    border-block-end: 1px solid var(--zim-line);
    color: var(--zim-ink);
    text-decoration: none;
    font-size: var(--zim-type-small);
    line-height: 1.4;
  }
  .magazine-contents a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .magazine-contents__page {
    font-family: var(--zim-font-editorial);
    font-style: italic;
    font-size: 1.125rem;
  }
  .magazine-contents small,
  .magazine-feature small {
    display: block;
    font-size: 0.75rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--zim-muted);
  }
  .magazine-visual {
    position: relative;
    overflow: hidden;
    min-block-size: 40rem;
    background: var(--zim-magazine-paper);
  }
  .magazine-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .magazine-visual::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
      to bottom,
      var(--zim-page-wash-start),
      var(--zim-page-wash-end) 32%,
      transparent 57%
    );
    pointer-events: none;
  }
  .magazine-visual figcaption {
    z-index: 2;
    position: relative;
    padding: var(--zim-space-8) var(--zim-gutter);
  }
  .magazine-coverline {
    font-family: var(--zim-font-editorial);
    font-weight: 400;
    font-size: clamp(3.5rem, 5vw, 6rem);
    line-height: 1;
    letter-spacing: -0.04em;
    margin-block-start: var(--zim-space-5);
  }
  .magazine-feature {
    z-index: 2;
    position: absolute;
    inset-inline: var(--zim-gutter);
    inset-block-end: var(--zim-space-7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zim-space-5);
    padding: var(--zim-space-4);
    background: var(--zim-magazine-paper);
    color: var(--zim-ink);
    text-decoration: none;
    font-family: var(--zim-font-editorial);
    font-size: 1.375rem;
    line-height: 1.25;
  }
  .magazine-feature small {
    font-family: var(--zim-font-ui);
    margin-block-end: 4px;
  }
  .magazine-feature:hover > span:first-child {
    text-decoration: underline;
  }
  .magazine-reading {
    min-inline-size: 0;
    background: var(--zim-magazine-paper);
    padding: var(--zim-space-7) var(--zim-gutter);
  }
  .magazine-article__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--zim-space-3);
    padding-block-end: var(--zim-space-3);
    border-block-end: 1px solid var(--zim-ink);
    margin-block-end: var(--zim-space-8);
  }
  .magazine-reading h1 {
    font: 400 clamp(2.5rem, 3.8vw, 4.5rem)/1.05 var(--zim-font-editorial);
    letter-spacing: -0.035em;
  }
  .magazine-standfirst {
    font: 400 1.375rem/1.5 var(--zim-font-editorial);
    margin-block: var(--zim-space-6) var(--zim-space-8);
  }
  .magazine-prose {
    font: 400 1.25rem/1.65 var(--zim-font-editorial);
  }
  .magazine-prose section + section {
    margin-block-start: var(--zim-space-6);
  }
  .magazine-prose h2 {
    font: 600 1.125rem/1.5 var(--zim-font-ui);
    letter-spacing: 0;
    margin-block-end: var(--zim-space-2);
  }
  .dropcap::first-letter {
    float: left;
    font-size: 4.3em;
    line-height: 0.76;
    padding-inline-end: 0.09em;
    padding-block-start: 0.08em;
  }
  .magazine-next {
    margin-block-start: var(--zim-space-8);
  }
  .magazine-notebook {
    display: flex;
    flex-direction: column;
    padding: var(--zim-space-8) var(--zim-gutter);
    background: var(--zim-magazine-note);
    min-inline-size: 0;
  }
  .magazine-notebook h2 {
    font: 400 clamp(2.25rem, 3vw, 3.5rem)/1.1 var(--zim-font-editorial);
    letter-spacing: -0.03em;
    margin-block: var(--zim-space-8) var(--zim-space-6);
  }
  .magazine-notes {
    padding: 0;
    list-style: none;
    counter-reset: notes;
  }
  .magazine-notes li {
    counter-increment: notes;
    position: relative;
    border-block-start: 1px solid var(--zim-editorial-line);
    padding: var(--zim-space-5) 0 var(--zim-space-5) 2.5rem;
  }
  .magazine-notes li::before {
    content: counter(notes, decimal-leading-zero);
    position: absolute;
    left: 0;
    font-style: italic;
    font-family: var(--zim-font-editorial);
  }
  .magazine-checklist label {
    display: flex;
    align-items: start;
    gap: var(--zim-space-4);
    border-block-start: 1px solid var(--zim-editorial-line);
    padding-block: var(--zim-space-5);
  }
  .magazine-checklist input {
    margin-block-start: 4px;
  }
  .magazine-thought {
    font: italic 2.75rem/1.12 var(--zim-font-editorial);
    letter-spacing: -0.03em;
    margin-block: auto;
    padding-block: var(--zim-space-10);
  }
  @media (min-width: 64em) {
    body:is(
        [data-page="step1"],
        [data-page="step2"],
        [data-page="step3"],
        [data-page="results"],
        [data-page^="guide"]
      )
      .app-content
      > .shell {
      max-inline-size: none;
      padding-inline: 0;
    }
    body:is(
        [data-page="step1"],
        [data-page="step2"],
        [data-page="step3"],
        [data-page="results"],
        [data-page^="guide"]
      )
      .site-footer {
      margin: 0;
      padding: var(--zim-space-6) var(--zim-home-inset);
    }
    .wizard-spread,
    .magazine-spread {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .wizard-page,
    .wizard-explainer,
    .wizard-summary,
    .magazine-cover,
    .magazine-reading,
    .magazine-notebook {
      padding-inline: var(--zim-wizard-inset);
    }
    .wizard-page {
      padding-block: var(--zim-space-8) var(--zim-space-6);
    }
    .magazine-article {
      grid-template-columns: minmax(0, 0.618fr) minmax(0, 0.382fr);
    }
    .magazine-visual figcaption {
      padding-inline: var(--zim-wizard-inset);
    }
    .magazine-feature {
      inset-inline: var(--zim-wizard-inset);
    }
    .search-results {
      padding-inline: var(--zim-space-6);
    }
    @container page (max-width:60rem) {
      .wizard-spread,
      .magazine-spread,
      .magazine-article {
        grid-template-columns: minmax(0, 1fr);
      }
      .wizard-page {
        min-block-size: 100svh;
      }
      .wizard-companion--photo {
        display: none;
      }
      .listing__link {
        grid-template-columns: 10rem minmax(0, 1fr) 3rem;
      }
    }
  }
  @media (max-width: 39.99em) {
    .listing__link {
      grid-template-columns: 6rem minmax(0, 1fr);
      gap: var(--zim-space-4);
    }
    .listing__disc {
      --zim-action-disc: 2.5rem;
    }
    .listing__link {
      grid-template-columns: 5rem minmax(0, 1fr) 2.5rem;
      gap: var(--zim-space-3);
    }
    .housing-option {
      grid-template-columns: 5rem minmax(0, 1fr) 2rem;
      gap: var(--zim-space-3);
    }
    .housing-option__photo {
      inline-size: 5rem;
    }
    .housing-option__check {
      inline-size: 2rem;
      block-size: 2rem;
    }
    .city-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

/* Navigation stays unchanged between pages. Content surfaces share
   their names so 50/50 and 38.2/61.8 can transition smoothly. */
@layer motion {
  #main {
    view-transition-name: content;
  }
  .app-sidebar {
    view-transition-name: navigation;
  }
  .home-copy,
  .search-filters,
  .wizard-page,
  .magazine-cover,
  .magazine-reading {
    view-transition-name: pane-left;
  }
  .home-visual,
  .search-results,
  .wizard-companion,
  .magazine-visual,
  .magazine-notebook {
    view-transition-name: pane-right;
  }
  ::view-transition-group(*) {
    animation-duration: var(--zim-layout-transition);
    animation-timing-function: var(--zim-ease);
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
  ::view-transition-group(navigation) {
    animation: none;
  }
  ::view-transition-old(navigation) {
    display: none;
  }
  ::view-transition-new(navigation) {
    animation: none;
  }
  ::view-transition-old(content),
  ::view-transition-old(pane-left),
  ::view-transition-old(pane-right) {
    animation: zim-fade-out var(--zim-page-out) var(--zim-exit-ease) both;
  }
  ::view-transition-new(content),
  ::view-transition-new(pane-left),
  ::view-transition-new(pane-right) {
    animation: zim-fade-in var(--zim-page-in) var(--zim-ease)
      calc(var(--zim-page-out) - var(--zim-page-overlap)) both;
  }
  ::view-transition-image-pair(pane-left),
  ::view-transition-image-pair(pane-right) {
    overflow: clip;
  }
  ::view-transition-old(pane-left),
  ::view-transition-new(pane-left),
  ::view-transition-old(pane-right),
  ::view-transition-new(pane-right) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: none;
    object-position: left top;
  }
  html[data-transition="results"]::view-transition-group(pane-left),
  html[data-transition="results"]::view-transition-new(pane-left) {
    animation: none;
  }
  html[data-transition="results"]::view-transition-old(pane-left) {
    display: none;
  }
  .view-enter {
    animation: zim-content-in var(--zim-transition) var(--zim-ease) both;
  }
  @keyframes zim-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes zim-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes zim-content-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none;
    }
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: fixed;
    inset-block-start: -10rem;
    inset-inline-start: var(--zim-space-4);
    z-index: 10;
    padding: var(--zim-space-3);
    background: var(--zim-surface);
  }
  .skip-link:focus {
    inset-block-start: var(--zim-space-4);
  }
  .full-width {
    inline-size: 100%;
  }
  .align-start {
    justify-self: start;
  }
  .muted {
    color: var(--zim-muted);
  }
  .small {
    font-size: var(--zim-type-small);
    line-height: var(--zim-leading-small);
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0s;
      transition-duration: 0s;
      scroll-behavior: auto;
    }
  }
  @media (prefers-contrast: more) {
    :root {
      --zim-muted: var(--zim-ink);
      --zim-line: var(--zim-border);
      --zim-border: var(--zim-ink);
    }
  }
  @media (forced-colors: active) {
    .action__disc,
    .secondary-button,
    .choice,
    .status,
    .chip,
    .icon-button,
    .input {
      border: 2px solid ButtonText;
    }
    .choice:has(input:checked) {
      outline: 2px solid Highlight;
    }
    .page-glyph {
      transform: none;
    }
    :focus-visible {
      outline-color: Highlight;
    }
  }
  @media print {
    .site-nav,
    .skip-link {
      display: none;
    }
    .photo {
      break-inside: avoid;
    }
    body {
      background:var(--zim-surface);
      color: black;
    }
  }
}