/* Töpferstube Lumdatal — public stylesheet.
 *
 * Part 1 is the CSS of the supplied reference page, moved over unchanged
 * (SPEC 7.1): same class names, same order, same values. Part 2 holds the
 * self-hosted @font-face rules and the few additions listed in the spec.
 *
 * Type: Lora for display and small caps, Source Sans 3 for text and UI.
 * Concept: a printed booklet from the workshop. Two-colour printing (brown
 * text, terracotta rubrics), ornaments only at openings and thresholds, modern
 * order kept for schedule and prices. */

/* ---------------------------------------------------------------- part 1 --
   verbatim from reference.html */

/* Reset from the reference <head> (moved here unchanged). */
html{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

:root{
  --bg:#FBF5EA; --paper-2:#F3E8D7;
  --ink:#4A3A2E; --ink-muted:#76644F; --rule:#DCCBB2;
  --rubric:#A3503F; --rubric-soft:#C4665A; --rubric-hover:#8E4233; --on-rubric:#FBF5EA;
  --ochre:#E3B15C; --sage:#8BAF9B; --ochre-tint:#F6E6C6; --ochre-ink:#6E4E12;
  --ph:#EADFCC; --ph-ink:#76644F;
  --band-bg:#4A3A2E; --band-ink:#F3EAD9; --band-muted:#CDBBA3; --band-rubric:#E3B15C; --band-rule:#65513F; --band-ph:#5A4838;
  --font-display:'Lora', Georgia, 'Times New Roman', serif;
  --font-text:'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-ui:'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-sc:'Lora', Georgia, serif;
  --sc-variant:small-caps;
  --text-size:1.0625rem;
  --gutter:clamp(18px, 5vw, 48px);
}
/* The dark palette is the reference's, but it answers to the system alone: the
   manual switch and its `data-theme` override are gone (SPEC 6.4), so this is a
   plain `prefers-color-scheme` query. The browser applies the scheme of the day
   before the first paint — no script, no stored choice, nothing to flash. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#2A211B; --paper-2:#352A22;
    --ink:#F3EAD9; --ink-muted:#BFAE98; --rule:#4E4034;
    --rubric:#E08F7F; --rubric-soft:#D98272; --rubric-hover:#EBA597; --on-rubric:#2A211B;
    --ochre:#E3B15C; --sage:#8BAF9B; --ochre-tint:#47381C; --ochre-ink:#F0CF8E;
    --ph:#3A2E25; --ph-ink:#BFAE98;
    --band-bg:#1E1712; --band-ink:#F3EAD9; --band-muted:#BFAE98; --band-rubric:#E3B15C; --band-rule:#3A2E25; --band-ph:#2E241D;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:var(--text-size);line-height:1.55;-webkit-font-smoothing:antialiased}
.site{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
h1,h2,h3{hyphens:none;-webkit-hyphens:none;font-family:var(--font-display);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-0.005em}
h1{font-size:clamp(2.6rem, 5.6vw, 4.6rem);line-height:1.04}
h2{font-size:clamp(2rem, 4vw, 3rem);line-height:1.08}
h3{font-size:1.5rem;line-height:1.2}
p{margin:0}
a{color:var(--rubric);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--rubric-hover)}
:focus-visible{outline:2px solid var(--rubric);outline-offset:3px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.sc{font-family:var(--font-sc);font-variant-caps:var(--sc-variant);font-weight:500;letter-spacing:.04em;color:var(--rubric);font-size:1.05rem;hyphens:none}
.muted{color:var(--ink-muted)}
.ui{font-family:var(--font-ui)}
.num{font-variant-numeric:lining-nums tabular-nums}
.initial::first-letter{float:left;font-family:var(--font-display);font-weight:500;font-size:3.5em;line-height:.82;padding:.06em .08em 0 0;color:var(--rubric-soft)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:3px;font-family:var(--font-ui);font-weight:500;font-size:1.05rem;text-decoration:none;background:var(--rubric);color:var(--on-rubric);hyphens:none;transition:background .15s}
.btn:hover{background:var(--rubric-hover);color:var(--on-rubric)}
.more{font-family:var(--font-ui);font-weight:500;font-size:1.05rem;hyphens:none}
.ph{background:var(--ph);color:var(--ph-ink);display:flex;align-items:flex-end;padding:14px;font-family:var(--font-ui);font-size:.85rem;line-height:1.35}
.frame{padding:8px;border:1px solid var(--rule)}
.orn{display:flex;justify-content:center;color:var(--rubric-soft);padding-block:clamp(40px,6vw,72px)}
.orn svg{width:72px;height:26px}

/* header */
.top{border-bottom:3px double var(--rule);position:relative}
.top .wrap{display:flex;align-items:center;gap:28px;padding-block:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand svg{width:44px;height:23px;flex-shrink:0}
.brand-name{font-family:var(--font-display);font-size:1.45rem;font-weight:700;line-height:1}
.brand-place{display:block;font-family:var(--font-ui);font-size:.62rem;letter-spacing:.32em;font-weight:700;color:var(--rubric-soft);margin-top:5px}
.nav{display:flex;gap:22px}
.nav a{font-family:var(--font-sc);font-variant-caps:var(--sc-variant);font-weight:500;letter-spacing:.04em;color:var(--ink);text-decoration:none;font-size:1.05rem}
.nav a:hover{color:var(--rubric)}
.tools{display:flex;gap:8px;align-items:center}
.tool{height:36px;padding:0 12px;border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:3px;font-family:var(--font-ui);font-size:.88rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tool:hover{border-color:var(--ink-muted)}
/* The menu button only exists on narrow screens, where the reference's nav row
   hyphenates its labels and cuts the last one off (SPEC 15 finding 9). Above the
   breakpoint it is display:none and `.tools` stays empty — the header row is
   then the reference's without its colour switch, which shifts the nav 42 px to
   the right (SPEC 6.4). */
.nav-toggle{display:none}
.nav-toggle .bar{transition:transform .18s ease;transform-box:fill-box;transform-origin:center}

/* Narrow screens: the links move into a panel under the header band, opened by
   the menu button (SPEC 6.2). The panel is absolutely positioned, so it hangs
   over the page instead of pushing it down while it is open. */
@media (max-width:860px){
  .top .wrap{gap:12px}
  .nav-toggle{display:inline-flex;width:40px;height:40px;padding:0;justify-content:center}
  .top.nav-open .nav-toggle .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .top.nav-open .nav-toggle .bar:nth-child(2){transform:scaleX(0)}
  .top.nav-open .nav-toggle .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav{position:absolute;left:0;right:0;top:100%;z-index:5;display:none;padding:4px var(--gutter) 16px;background:var(--bg);border-bottom:3px double var(--rule);box-shadow:0 20px 28px -24px rgba(0,0,0,.55)}
  .top.nav-open .nav{display:grid;animation:nav-panel-in .18s ease-out}
  .nav a{padding:13px 0;border-bottom:1px solid var(--rule);font-size:1.15rem}
  .nav a:last-child{border-bottom:0}
}
@keyframes nav-panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,80px) 0}
.hero-text{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero-lead{font-size:1.25em;max-width:32ch;color:var(--ink-muted)}
.hero-ctas{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.arch-frame{border:1px solid var(--rubric-soft);border-radius:999px 999px 2px 2px;padding:10px;max-width:440px;width:100%;justify-self:end;position:relative}
.arch-frame .ph{aspect-ratio:4/5;max-width:100%;border-radius:999px 999px 0 0;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;padding:28px}
.vid-ctrl{position:absolute;right:24px;bottom:24px;width:42px;height:42px;border-radius:50%;border:1px solid var(--rule);background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer}
@media (max-width:860px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.arch-frame{justify-self:start;max-width:380px}}

/* section heads */
.head{display:flex;flex-direction:column;gap:12px;max-width:680px;margin-bottom:clamp(32px,5vw,52px)}
.head .lead{color:var(--ink-muted);max-width:54ch}

/* weekly */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,48px)}
.offer{display:flex;flex-direction:column;gap:10px;min-width:0}
.offer .frame{margin-bottom:10px}
.offer .ph{aspect-ratio:4/5;max-width:100%}
.offer .when{font-family:var(--font-ui);font-weight:500;font-size:1rem}
.offer .desc{color:var(--ink-muted)}
.offer .price{font-family:var(--font-ui);font-size:1rem;padding-top:10px;border-top:1px solid var(--rule)}
.offer .price b{font-weight:700}
.book{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:3px double var(--rule)}
.book p{max-width:52ch}
.book .closed{font-style:italic;color:var(--ink-muted);margin-top:4px}
@media (max-width:860px){.offers{grid-template-columns:minmax(0,1fr)}.offer{max-width:460px}}

/* notice */
.notice{max-width:820px;margin-inline:auto;border:3px double var(--rubric-soft);padding:clamp(28px,5vw,56px) clamp(20px,5vw,64px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.notice .orn{padding:0}
.notice h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.notice .dates{font-family:var(--font-display);font-size:1.35rem}
.notice .dates span{color:var(--rubric-soft);padding-inline:10px}
.notice ul{list-style:none;margin:16px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;width:100%}
.notice li b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.2rem}
.notice li span{color:var(--ink-muted);font-size:.95em}
.notice .foot{font-style:italic;margin-top:8px}
@media (max-width:560px){.notice ul{grid-template-columns:minmax(0,1fr)}}

/* christmas */
.xmas{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:start}
.xmas-text{display:flex;flex-direction:column;gap:18px}
.xmas-text .cost{font-family:var(--font-ui);padding-top:14px;border-top:1px solid var(--rule)}
.xmas-text .cost b{font-family:var(--font-display);font-weight:500;font-size:1.9rem;margin-right:6px}
.groups{display:flex;flex-direction:column;gap:clamp(28px,4vw,40px)}
.group h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.group h3 small{font-family:var(--font-ui);font-size:.92rem;font-weight:500;color:var(--ink-muted)}
.sched{margin:0;font-family:var(--font-ui);font-size:1rem}
.sched div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.sched dt{font-family:var(--font-sc);font-variant-caps:var(--sc-variant);font-weight:500;letter-spacing:.04em;color:var(--rubric);font-size:1.05rem}
.sched dd{margin:0}
.sched dd small{color:var(--ink-muted);font-size:.92rem}
.group .more{display:inline-block;margin-top:14px}
@media (max-width:860px){.xmas{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.sched div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* people + film */
.people{background:var(--band-bg);color:var(--band-ink)}
.people .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(64px,9vw,112px)}
.film{border:1px solid var(--band-rule);padding:8px}
.film .ph{aspect-ratio:16/10;max-width:100%;background:var(--band-ph);color:var(--band-muted);flex-direction:column;justify-content:center;align-items:center;gap:14px;position:relative}
.big-play{width:72px;height:72px;border-radius:50%;background:var(--band-ink);color:#4A3A2E;border:0;display:grid;place-items:center;cursor:pointer}
.film .cap{display:flex;justify-content:space-between;gap:12px;padding:10px 4px 2px;font-family:var(--font-ui);font-size:.92rem;color:var(--band-muted)}
.people-text{display:flex;flex-direction:column;gap:18px}
.people-text .sc{color:var(--band-rubric)}
.people-text h2{color:var(--band-ink)}
.people-text blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-size:1.4em;line-height:1.35;color:var(--band-ink)}
.people-text p{color:var(--band-muted);max-width:44ch}
.people-text .initial::first-letter{color:var(--band-rubric)}
.people-text .sig{font-family:var(--font-display);font-style:italic;color:var(--band-ink);font-size:1.15em}
@media (max-width:860px){.people .wrap{grid-template-columns:minmax(0,1fr)}.film{order:2}}

/* celebrations */
.party{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:center}
.party-text{display:flex;flex-direction:column;gap:16px}
.party-list{hyphens:none;font-family:var(--font-sc);font-variant-caps:var(--sc-variant);font-size:1.2rem;letter-spacing:.03em;line-height:1.7}
.party-list span{color:var(--rubric-soft);padding-inline:8px}
.party .ph{aspect-ratio:3/2;max-width:100%}
@media (max-width:860px){.party{grid-template-columns:minmax(0,1fr)}}

/* price list */
.pricelist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,80px)}
.pricelist h3{font-size:1.35rem;padding-bottom:8px;border-bottom:1px solid var(--ink);margin-bottom:6px}
.pl{list-style:none;margin:0;padding:0;font-family:var(--font-ui);font-size:1.02rem}
.pl li{padding:9px 0}
.pl .row{display:flex;align-items:baseline;gap:8px}
.pl .lead-dots{flex:1;border-bottom:2px dotted var(--rule);transform:translateY(-4px);min-width:16px}
.pl .p{white-space:nowrap;font-weight:500}
.pl .sub{display:block;font-family:var(--font-text);font-style:italic;color:var(--ink-muted);font-size:.95rem}
.pl-note{margin-top:14px;color:var(--ink-muted);font-size:.95em}
.pl-note b{color:var(--ink);font-weight:500}
@media (max-width:760px){.pricelist{grid-template-columns:minmax(0,1fr)}}

/* visit */
.visit{background:var(--band-bg);color:var(--band-ink);position:relative;margin-top:clamp(64px,9vw,112px)}
.endpaper{display:block;width:100%;height:84px}
.visit .wrap{padding-block:clamp(40px,6vw,72px) 28px}
.visit-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px)}
.visit h2{color:var(--band-ink)}
.addr{font-family:var(--font-display);font-size:1.45rem;line-height:1.4;margin-top:18px}
.visit .hint{color:var(--band-muted);margin-top:14px;max-width:40ch}
.visit a{color:var(--band-rubric)}
.contacts{margin:0;font-family:var(--font-ui)}
.contacts div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--band-rule);align-items:baseline}
.contacts div:first-child{border-top:1px solid var(--band-rule)}
.contacts dt{font-family:var(--font-sc);font-variant-caps:var(--sc-variant);font-weight:500;letter-spacing:.04em;color:var(--band-rubric)}
.contacts dd{margin:0;font-size:1.1rem;overflow-wrap:anywhere;hyphens:none}
.contacts dd span{user-select:all}
.contacts dd a{font-size:.95rem;margin-left:10px}
.visit .btn{background:var(--band-ink);color:#4A3A2E;margin-top:24px}
.visit .btn:hover{background:var(--band-rubric);color:#2A211B}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(48px,6vw,72px);padding-top:18px;border-top:3px double var(--band-rule);font-family:var(--font-ui);font-size:.9rem;color:var(--band-muted)}
.legal nav{display:flex;gap:20px}
.legal a{color:var(--band-ink)}
@media (max-width:860px){.visit-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.contacts div{grid-template-columns:minmax(0,1fr);gap:2px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------------------------------------------------------------- part 2 --
   additions; each one is listed in SPEC 7.1 or required by a block type */

/* Self-hosted fonts (SPEC 7.2). No Google Fonts CDN, no GDPR problem.
   The weights share one variable file per subset, declared separately to match
   exactly what the Google-hosted stylesheet would have delivered. */
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/lora-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/lora-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/lora-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/lora-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/lora-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/lora-italic-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-sans-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-sans-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* U+2767 (❧) is in neither Lora nor Source Sans 3, so it is subset from
   Noto Sans Symbols 2 and referenced only for that one span: the fleuron then
   looks identical on every device instead of coming from a system fallback. */
@font-face{font-family:'Fleuron';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fleuron.woff2) format('woff2');unicode-range:U+2767}
.notice .dates span{font-family:'Fleuron',var(--font-display),serif}

/* Real images and videos inside .ph-sized slots (SPEC 7.1). */
.media{position:relative;overflow:hidden;max-width:100%;width:100%}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.arch-frame .media{border-radius:999px 999px 0 0}

/* Film: with a real video the play button sits on the poster; the placeholder
   keeps the reference's in-flow button. */
.film .media{position:relative}
.film .media .big-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}
.film video{background:var(--band-ph)}
.film video::-webkit-media-controls-enclosure{border-radius:2px}

/* split: dark band + image, and text-only dark variants (SPEC 5.5). */
.people .frame{border-color:var(--band-rule)}
.people-text:only-child{grid-column:1/-1}

/* mediaSide flip: only the visual order changes, the columns stay 6fr/5fr,
   and below 861px the reference rules (text first, media second) still win. */
@media (min-width:861px){
  .people.flip .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .people.flip .people-text{order:-1}
  .party.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .party.flip .frame{order:-1}
}

/* Legal pages: readable measure with the existing typography (SPEC 5.8). */
.text-page{max-width:70ch;padding-block:clamp(40px,6vw,80px) clamp(48px,7vw,96px)}
.text-page h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.text-body{display:flex;flex-direction:column;gap:1em;margin-top:clamp(20px,3vw,32px)}
.text-body h2{font-size:1.6rem;margin-top:.8em}
.text-body h3{font-size:1.2rem;margin-top:.6em}
.text-body ul,.text-body ol{margin:0;padding-left:1.3em}
.text-body li{margin-bottom:.35em}
.text-body a{color:var(--rubric)}

/* The distance above the dark footer band comes from .visit{margin-top} in
   part 1, so the layout emits no extra spacer there (SPEC 6.1). */

/* The place name under the wordmark is 10 px wide-set capitals in --rubric-soft,
   which only reaches 3.6:1 on the cream background (WCAG AA wants 4.5:1). The
   rubric colour reaches 5.1:1 and is already in the palette, so only this one
   line moves; the fleurons and other rubric-soft uses stay untouched, so the
   wordmark looks like the reference's (SPEC 6.5). */
.brand-place{color:var(--rubric)}

/* Printing the price list should not carry the interface along. */
@media print{
  .top,.tools,.vid-ctrl,.big-play,.orn{display:none}
  body{background:#fff;color:#000}
  .people,.visit{background:#fff;color:#000}
}