/* Teateret — The Wine Club. Ported from the approved demo (D:\work\Teateret\demo): dark, gold, ivory. */

@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url(fonts/cormorant-300.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/cormorant-400.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/cormorant-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/cormorant-600.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 300; font-style: normal; font-display: swap; src: url(fonts/inter-300.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/inter-600.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --t-black: #0A0A0A;
  --t-charcoal: #111111;
  --t-gold: #B89A5E;
  --t-gold-light: #CDB380;
  --t-gold-dark: #9F7E41;
  --t-ivory: #F3EEE5;
  --t-muted: rgba(243, 238, 229, .66);
  --t-line: rgba(243, 238, 229, .14);
  --t-line-gold: rgba(184, 154, 94, .34);
  --t-serif: "Cormorant Garamond", Georgia, serif;
  --t-sans: "Inter", "Segoe UI", Arial, sans-serif;
  /* Basic editor blocks (CocioDark :where defaults) follow the design. */
  --cocio-accent: var(--t-gold);
  --cocio-on-accent: #0A0A0A;
  --cocio-surface: var(--t-charcoal);
  --cocio-line: var(--t-line-gold);
}

* { box-sizing: border-box; }
html { background: var(--t-black); font-size: 110%; }
body.t-site { margin: 0; background: var(--t-black); color: var(--t-ivory); font: 300 1rem/1.75 var(--t-sans); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
::selection { background: rgba(184, 154, 94, .35); color: var(--t-ivory); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--t-black); }
::-webkit-scrollbar-thumb { background: var(--t-gold-dark); border-radius: 3px; }
img { max-width: 100%; height: auto; }
a { color: var(--t-gold-light); }
a:focus-visible, button:focus-visible, summary:focus-visible, label:focus-visible { outline: 1px solid var(--t-gold); outline-offset: 3px; }
.t-container { width: min(80rem, 100% - 3rem); margin-inline: auto; }
.t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.t-muted { color: var(--t-muted); font-size: .8rem; line-height: 1.9; max-width: 22rem; }
.t-eyebrow { margin: 0 0 1.2rem; color: var(--t-gold); font: 600 .68rem/1 var(--t-sans); letter-spacing: .42em; text-transform: uppercase; }

/* Header and menu ------------------------------------------------------------------------------------------ */
.t-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--t-line); background: rgba(10, 10, 10, .9); backdrop-filter: blur(12px); }
/* Logo left, menu centred, the member (name, level, sign-out) right — as in the demo. */
.t-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; min-height: 5rem; }
.t-header .t-nav { justify-self: center; }
.t-member { justify-self: end; }
.t-logo img { display: block; height: 2.75rem; width: auto; }
/* CocioDark's menu markup, restyled. Selectors outrank the menu's own inline defaults. */
.t-header .t-nav .cocio-menu { display: flex; gap: 2.2rem; list-style: none; margin: 0; padding: 0; }
.t-header .t-nav .cocio-menu a, .t-header .t-nav .cocio-menu summary { display: block; padding: .5rem 0; border-bottom: 2px solid transparent; color: rgba(243, 238, 229, .6); font: 500 .75rem/1.4 var(--t-sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: color .2s, border-color .2s; }
.t-header .t-nav .cocio-menu a:hover, .t-header .t-nav .cocio-menu summary:hover,
.t-header .t-nav .cocio-menu > li.cocio-active > a, .t-header .t-nav .cocio-menu > li.cocio-active > details > summary { color: var(--t-ivory); border-color: var(--t-gold); }
.t-header .t-nav .cocio-menu summary { list-style: none; cursor: pointer; }
.t-header .t-nav .cocio-menu summary::-webkit-details-marker { display: none; }
.t-header .t-nav .cocio-menu summary::after { content: " ▾"; color: var(--t-gold); }
.t-header .t-nav .cocio-menu ul { list-style: none; margin: 0; padding: .8rem 1.2rem; min-width: 14rem; background: #0E0E0E; border: 1px solid var(--t-line-gold); border-radius: 0; color: var(--t-ivory); }
.t-header .t-nav .cocio-menu ul a { border: 0; padding: .45rem 0; }
.t-menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.t-menu-button { display: none; width: 2.5rem; height: 2.5rem; cursor: pointer; position: relative; }
.t-menu-button span:first-child, .t-menu-button span:first-child::before, .t-menu-button span:first-child::after { position: absolute; left: .4rem; right: .4rem; height: 1px; background: var(--t-ivory); content: ""; }
.t-menu-button span:first-child { top: 50%; }
.t-menu-button span:first-child::before { left: 0; right: 0; top: -.45rem; }
.t-menu-button span:first-child::after { left: 0; right: 0; top: .45rem; }
/* Member status (CocioDark late-bound element) */
.cocio-member-status { display: flex; align-items: center; gap: 1.25rem; }
.cocio-member-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(184, 154, 94, .3); border-radius: 50%; background: rgba(184, 154, 94, .05); color: var(--t-gold); font: 500 .65rem/1 var(--t-sans); letter-spacing: .05em; }
.cocio-member-photo { width: 2.2rem; height: 2.2rem; padding: 0; object-fit: cover; border-color: rgba(184, 154, 94, .55); }
.cocio-member-who { display: flex; flex-direction: column; padding-right: 1.25rem; border-right: 1px solid rgba(243, 238, 229, .2); line-height: 1.3; }
a.cocio-member-who { color: inherit; text-decoration: none; }
a.cocio-member-who:hover .cocio-member-name { color: var(--t-gold); }
.cocio-member-name { color: var(--t-ivory); font: 500 .78rem/1.3 var(--t-sans); }
.cocio-member-level { color: var(--t-gold); font: 300 .65rem/1.3 var(--t-sans); letter-spacing: .08em; }
.cocio-member-status form { margin: 0; }
.cocio-member-signout { padding: .4rem 0; border: 0; background: none; color: rgba(243, 238, 229, .6); font: 500 .68rem/1 var(--t-sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.cocio-member-signout:hover, .cocio-member-signin:hover { color: var(--t-gold); }
.cocio-member-signin { color: rgba(243, 238, 229, .6); font: 500 .72rem/1 var(--t-sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }

@media (max-width: 860px) {
  .t-menu-button { display: block; }
  .t-header-inner { grid-template-columns: 1fr auto auto; gap: 1rem; }
  .t-member .cocio-member-who, .t-member .cocio-member-avatar { display: none; }
  .t-nav { display: none; grid-column: 1 / -1; order: 3; width: 100%; padding: 0 0 1.4rem; }
  .t-menu-toggle:checked ~ .t-nav { display: block; }
  .t-header .t-nav .cocio-menu { flex-direction: column; gap: .2rem; }
  .t-header .t-nav .cocio-menu > li > details > ul { position: static; border: 0; padding: 0 0 0 1rem; background: none; }
}

/* Cinematic hero (Forside) ------------------------------------------------------------------------------ */
.t-hero { position: relative; display: flex; min-height: calc(100vh - 5rem); align-items: center; justify-content: center; overflow: hidden; background: var(--t-black); text-align: center; }
.t-hero-overlay { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(10,10,10,.86), transparent 18%, transparent 82%, rgba(10,10,10,.86)),
  linear-gradient(180deg, rgba(10,10,10,.30), transparent 34%, rgba(10,10,10,.78)),
  radial-gradient(circle at 50% 40%, rgba(10,10,10,.04) 0, rgba(10,10,10,.18) 50%, rgba(10,10,10,.76) 100%); }
.t-hero-strip { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; justify-content: space-between; padding: 1.5rem clamp(1.5rem, 4vw, 3rem); color: rgba(243, 238, 229, .5); font: 500 .62rem/1 var(--t-sans); letter-spacing: .28em; text-transform: uppercase; }
.t-hero-content { position: relative; z-index: 1; padding: 0 1.25rem; animation: t-rise 1.2s cubic-bezier(.16, 1, .3, 1) both; }
.t-hero-title { margin: 0; color: var(--t-ivory); font: 300 clamp(3.8rem, 12vw, 10rem)/.8 var(--t-serif); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 12px 36px rgba(0, 0, 0, .6); }
.t-scroll { position: absolute; bottom: 2rem; left: 50%; z-index: 2; width: 1px; height: 3.5rem; overflow: hidden; background: rgba(184, 154, 94, .2); }
.t-scroll span { position: absolute; inset: 0; background: var(--t-gold); animation: t-scroll 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes t-scroll { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }
@keyframes t-rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .t-hide-mobile { display: none; } }
@media (prefers-reduced-motion: reduce) { .t-hero-content, .t-scroll span { animation: none; } }

/* Content ----------------------------------------------------------------------------------------------- */
.t-content { width: min(80rem, 100% - 3rem); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) 0; }
.t-content h1, .t-content h2, .t-content h3 { color: var(--t-ivory); font-family: var(--t-serif); font-weight: 300; letter-spacing: .02em; line-height: 1.1; }
.t-content h1 { margin: 0 0 1.5rem; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.t-content h2 { margin: 2.5rem 0 1rem; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.t-content h3 { margin: 2rem 0 .8rem; font-size: 1.5rem; }
.t-content p, .t-content li { color: rgba(243, 238, 229, .82); max-width: 46rem; }
.t-content .t-eyebrow { color: var(--t-gold); }
.t-content hr { border: 0; border-top: 1px solid var(--t-line-gold); margin: 3rem 0; }
.t-content blockquote { margin: 2rem 0; padding-left: 1.5rem; border-left: 1px solid var(--t-gold); font: italic 400 1.5rem/1.5 var(--t-serif); }
.t-content figure { margin: 0; }
.t-content .cocio-section { border: 1px solid var(--t-line); }
.t-content .cocio-columns article { padding: 1.75rem; border: 1px solid var(--t-line); background: var(--t-charcoal); transition: border-color .3s; }
.t-content .cocio-columns article:hover { border-color: var(--t-line-gold); }
.t-content .cocio-columns h2 { margin-top: 0; color: var(--t-gold); font: 600 1.1rem/1.3 var(--t-serif); letter-spacing: .1em; text-transform: uppercase; }
.t-content .cocio-button { color: var(--t-black); text-decoration: none; padding: 1rem 2rem; font: 600 .7rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; transition: background .2s; }
.t-content .cocio-button:hover { background: var(--t-gold-light); }

/* Club news (guided News block) */
.t-news { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.t-news .news-intro { font: 400 1.35rem/1.6 var(--t-serif); color: var(--t-ivory); }
.t-news figure { border: 1px solid var(--t-line-gold); overflow: hidden; }
.t-news figure img { display: block; width: 100%; transition: transform .7s; }
.t-news figure:hover img { transform: scale(1.05); }
@media (max-width: 760px) { .t-news { grid-template-columns: 1fr; } }

/* Child pages block (gallery and list) */
.t-content .cocio-page-list ul { gap: 2rem; }
.t-content .cocio-page-list a { border: 1px solid var(--t-line); border-radius: 0; background: var(--t-charcoal); color: var(--t-ivory); padding: 0 0 1.25rem; overflow: hidden; transition: border-color .3s; }
.t-content .cocio-page-list a:hover { border-color: var(--t-line-gold); }
.t-content .cocio-page-list strong { display: block; padding: 1rem 1.25rem 0; font: 600 1.05rem/1.3 var(--t-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--t-gold); }
.t-content .cocio-page-list img { transition: transform .7s; }
.t-content .cocio-page-list a:hover img { transform: scale(1.05); }

/* Gallery module (CD-031): group cards like the demo's gallery overview, gold count badge, grid and lightbox. */
.t-content .cocio-gallery-group ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 2rem; margin-top: 2.5rem; }
.t-content .cocio-gallery-group li { max-width: none; }
.t-content .cocio-gallery-group a, .t-content .cocio-gallery-group li > div { height: 100%; display: flex; flex-direction: column; border: 1px solid var(--t-line); background: var(--t-charcoal); transition: border-color .5s, transform .5s; }
.t-content .cocio-gallery-group a:hover { border-color: var(--t-line-gold); transform: scale(1.005); }
.t-content .cocio-gallery-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.2) 50%, transparent); }
.t-content .cocio-gallery-cover img { aspect-ratio: auto; height: 16rem; transition: transform .7s; }
.t-content .cocio-gallery-group a:hover .cocio-gallery-cover img { transform: scale(1.05); }
.t-content .cocio-gallery-count { z-index: 1; top: 1rem; right: 1rem; padding: .35rem .75rem; border: 1px solid rgba(184,154,94,.3); background: rgba(0,0,0,.8); color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .12em; text-transform: uppercase; }
.t-content .cocio-gallery-group strong { display: block; padding: 1.5rem 1.5rem 0; font: 300 1.6rem/1.2 var(--t-serif); letter-spacing: .02em; color: var(--t-ivory); transition: color .3s; }
.t-content .cocio-gallery-group a:hover strong { color: var(--t-gold); }
.t-content .cocio-gallery-group p { flex: 1; margin: .75rem 1.5rem 0; color: rgba(243,238,229,.7); font-size: .8rem; line-height: 1.7; }
.t-content .cocio-gallery-more { display: block; margin: 1.25rem 1.5rem 1.5rem; padding-top: 1rem; border-top: 1px solid var(--t-line); color: var(--t-gold); font: 600 .65rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; }
.t-content .cocio-gallery-back a { color: var(--t-gold); font: 500 .7rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.t-content .cocio-gallery-page { margin-bottom: 3rem; }
.t-content .cocio-gallery-grid > ul { gap: 1rem; }
.t-content .cocio-gallery-grid > ul img { transition: opacity .3s, transform .7s; }
.t-content .cocio-gallery-grid > ul a { display: block; overflow: hidden; border: 1px solid var(--t-line); }
.t-content .cocio-gallery-grid > ul a:hover img { transform: scale(1.04); opacity: .9; }
.cocio-lightbox { background: rgba(10,10,10,.97); color: var(--t-ivory); font-family: var(--t-sans); }
.cocio-lightbox figcaption strong { display: block; font: 300 1.5rem/1.2 var(--t-serif); letter-spacing: .02em; }
.cocio-lightbox figcaption span, .cocio-lightbox figcaption p { color: var(--t-muted); font-size: .8rem; }
.cocio-lightbox button { color: var(--t-gold-light); background: none; transition: color .2s; }
.cocio-lightbox button:hover { color: var(--t-ivory); }
.cocio-lightbox-counter { color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .2em; }

/* Events module (WP5 E1): cards like the demo's events page, gold dates, serif titles, badges on the image. */
.t-content .cocio-events-cards ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; }
.t-content .cocio-events-cards .cocio-event a, .t-content .cocio-events-cards .cocio-event > div { gap: 0; border: 1px solid var(--t-line); background: rgba(17,17,17,.6); transition: border-color .5s; overflow: hidden; }
.t-content .cocio-events-cards .cocio-event a:hover { border-color: var(--t-line-gold); }
.t-content .cocio-event-image { display: block; overflow: hidden; background: var(--t-charcoal); }
.t-content .cocio-event-image img { aspect-ratio: auto; height: 11rem; transition: transform .7s; }
.t-content .cocio-event a:hover .cocio-event-image img { transform: scale(1.05); }
.t-content .cocio-events-cards .cocio-event-badge { position: absolute; top: 1rem; left: 1rem; }
.t-content .cocio-event-badge { padding: .3rem .6rem; border: 1px solid var(--t-line-gold); background: rgba(0,0,0,.8); color: var(--t-gold); font: 700 .6rem/1 var(--t-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-content .cocio-event-badge.is-registered { border-color: rgba(16,185,129,.35); color: #6ee7b7; background: rgba(2,44,34,.85); }
.t-content .cocio-event-badge.is-restricted, .t-content .cocio-event-badge.is-cancelled { border-color: rgba(239,68,68,.3); color: #fca5a5; background: rgba(69,10,10,.85); }
.t-content .cocio-event-badge.is-soldout, .t-content .cocio-event-badge.is-closed { color: var(--t-muted); border-color: var(--t-line); }
.t-content .cocio-events-cards .cocio-event-date { margin: 1.4rem 1.5rem 0; }
.t-content .cocio-event-date { display: block; color: var(--t-gold); font: 600 .62rem/1.4 var(--t-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-content .cocio-event-title { display: block; color: var(--t-ivory); font: 400 1.35rem/1.25 var(--t-serif); letter-spacing: .02em; }
.t-content .cocio-events-cards .cocio-event-title { margin: .5rem 1.5rem 0; }
.t-content .cocio-event-summary { display: block; color: rgba(243,238,229,.7); font-size: .78rem; line-height: 1.7; }
.t-content .cocio-events-cards .cocio-event-summary { margin: .6rem 1.5rem 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.t-content .cocio-event-meta { align-items: center; padding: 1rem 1.5rem 1.4rem; margin-top: auto; border-top: 1px solid var(--t-line); }
.t-content .cocio-events-cards .cocio-event-meta { margin: 1.25rem 0 0; }
.t-content .cocio-event-price { color: var(--t-gold); font: 600 1rem/1 var(--t-serif); }
.t-content .cocio-event-more { color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; }
.t-content .cocio-event.is-restricted a, .t-content .cocio-event.is-cancelled a { opacity: .75; }
.t-content .cocio-events-list li { padding: 1.1rem 0; border-color: var(--t-line); }
.t-content .cocio-events-list .cocio-event-meta { padding: .5rem 0 0; border: 0; }
.t-content .cocio-events.is-empty p, .t-content .cocio-my-events.is-empty p { color: var(--t-muted); }

/* Calendar: months side by side on wide screens, gold days with events (red when restricted). */
.t-content .cocio-events-calendar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.t-content .cocio-calendar-month { padding: 1.25rem; border: 1px solid var(--t-line); background: rgba(17,17,17,.6); }
.t-content .cocio-calendar-month h3 { margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--t-line-gold); color: var(--t-gold); font: 600 .78rem/1 var(--t-serif); letter-spacing: .14em; text-transform: uppercase; }
.t-content .cocio-calendar-days { font-size: .72rem; color: rgba(243,238,229,.5); }
.t-content .cocio-calendar-weekday { color: rgba(243,238,229,.4); font-weight: 700; font-size: .55rem; }
.t-content .cocio-calendar-days .cocio-calendar-day { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--t-gold); color: var(--t-black); box-shadow: 0 0 8px rgba(205,179,128,.4); cursor: default; }
.t-content .cocio-calendar-days .has-event.is-restricted .cocio-calendar-day { background: #450a0a; color: #fca5a5; box-shadow: none; }
.t-content .cocio-calendar-days .has-event.is-cancelled .cocio-calendar-day { background: transparent; color: var(--t-muted); text-decoration: line-through; box-shadow: none; }
.t-content .cocio-calendar-more { top: -.1rem; right: 0; min-width: .95rem; height: .95rem; border-radius: 50%; display: grid; place-items: center; background: var(--t-ivory); color: var(--t-black); font: 700 .5rem/1 var(--t-sans); }
.t-content .cocio-calendar-list { margin-top: .75rem; font-size: .72rem; }
.t-content .cocio-calendar-list li { max-width: none; padding: .25rem 0; color: rgba(243,238,229,.75); }
.t-content .cocio-calendar-list a { color: inherit; text-decoration: none; }
.t-content .cocio-calendar-list a:hover { color: var(--t-gold); }
.t-content .cocio-calendar-list .cocio-event-date { display: inline; font-size: .58rem; margin-right: .4rem; }

/* The events page: the programme in a wide column, the months in a narrow column on the right (demo layout). */
.t-content .t-events-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(15rem, 1fr); gap: 2.5rem; align-items: start; margin-top: 1rem; }
.t-content .t-events-layout > * { min-width: 0; }
.t-content .t-events-side h2 { margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--t-line); color: var(--t-gold); font: 600 .75rem/1 var(--t-sans); letter-spacing: .16em; text-transform: uppercase; }
.t-content .t-events-main h2 { margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--t-line); color: var(--t-gold); font: 600 .75rem/1 var(--t-sans); letter-spacing: .16em; text-transform: uppercase; }
.t-content .t-events-side .cocio-events-calendar { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 0; }
.t-content .t-events-main .cocio-events-cards ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
@media (max-width: 1000px) {
  .t-content .t-events-layout { grid-template-columns: 1fr; }
  .t-content .t-events-side .cocio-events-calendar { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
}

/* The front page's member area (demo dashboard): card and own registrations on the left, the next event on the right.
   A panel whose block shows nothing (a visitor who is not signed in) hides with its heading. */
.t-content .t-member-dashboard { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: start; margin-top: 3rem; }
.t-content .t-member-panel { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.t-content .t-member-dashboard:not(:has(.cocio-member-card, .cocio-my-events)) { grid-template-columns: 1fr; }
/* The next-event teaser carries its own label. */
.t-content .t-member-panel:has(.cocio-events-next) > h2 { display: none; }
.t-content .t-member-panel:not(:has(.cocio-member-card, .cocio-my-events, .cocio-events-next)) { display: none; }
.t-content .t-member-panel h2 { margin: 0; padding-bottom: .75rem; border-bottom: 1px solid var(--t-line); color: var(--t-gold); font: 600 .75rem/1 var(--t-sans); letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 900px) { .t-content .t-member-dashboard { grid-template-columns: 1fr; } }

/* Next event teaser and the member's own registrations. */
.t-content .cocio-events-next { position: relative; display: grid; min-height: 22rem; overflow: hidden; border: 1px solid var(--t-line-gold); }
.t-content .cocio-events-next .cocio-event-image { position: absolute; inset: 0; }
.t-content .cocio-events-next .cocio-event-image img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.t-content .cocio-events-next-body { position: relative; align-self: end; padding: 2rem; background: linear-gradient(to top, rgba(0,0,0,.9), transparent); }
.t-content .cocio-events-next-label { margin: 0 0 .75rem; color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .3em; text-transform: uppercase; }
.t-content .cocio-events-next h2.cocio-event-title { margin: .5rem 0; color: var(--t-ivory); font: 300 clamp(1.6rem, 3vw, 2.2rem)/1.15 var(--t-serif); letter-spacing: .02em; text-transform: none; }
.t-content .cocio-my-events li { max-width: none; display: grid; gap: .25rem; padding: .9rem 0; border-bottom: 1px solid var(--t-line); }
.t-content .cocio-my-events a { color: var(--t-ivory); text-decoration: none; }
.t-content .cocio-my-events a:hover { color: var(--t-gold); }
.t-content .cocio-my-events .cocio-event-meta { padding: 0; border: 0; color: var(--t-muted); font-size: .72rem; }

/* An event's own page and its registration form. */
.t-content .cocio-event-page { max-width: 52rem; }
.t-content .cocio-event-back a { color: var(--t-gold); font: 500 .7rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.t-content .cocio-event-hero { margin: 1.5rem 0 2rem; }
.t-content .cocio-event-hero img { width: 100%; max-height: 26rem; object-fit: cover; border: 1px solid var(--t-line); }
.t-content .cocio-event-page h1 { margin-top: .5rem; }
.t-content .cocio-event-lead { font: italic 400 1.3rem/1.5 var(--t-serif); color: var(--t-ivory); }
.t-content .cocio-event-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 2rem 0; }
.t-content .cocio-event-facts div { padding: .9rem; border: 1px solid var(--t-line); background: rgba(0,0,0,.25); text-align: center; }
.t-content .cocio-event-facts dt { color: rgba(243,238,229,.45); font: 600 .55rem/1 var(--t-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-content .cocio-event-facts dd { margin: .5rem 0 0; color: var(--t-gold); font: 400 1rem/1.2 var(--t-serif); }
.t-content .cocio-event-registration { padding: 1.75rem; border: 1px solid var(--t-line-gold); background: rgba(184,154,94,.05); }
.t-content .cocio-event-form { display: grid; gap: 1rem; max-width: 30rem; }
.t-content .cocio-event-form label { display: grid; gap: .5rem; color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-content .cocio-event-form select { padding: .75rem; border: 1px solid var(--t-line); background: #111; color: var(--t-ivory); font: 300 .8rem/1 var(--t-sans); }
.t-content .cocio-event-form button, .t-content .cocio-event-button { justify-self: start; display: inline-block; padding: 1rem 2rem; border: 0; background: var(--t-gold); color: var(--t-black); font: 600 .7rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.t-content .cocio-event-form button:hover, .t-content .cocio-event-button:hover { background: var(--t-gold-light); }
.t-content .cocio-event-cancel button { padding: .7rem 1.4rem; border: 1px solid var(--t-line); background: none; color: var(--t-muted); font: 600 .62rem/1 var(--t-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.t-content .cocio-event-cancel button:hover { border-color: var(--t-gold); color: var(--t-ivory); }
.t-content .cocio-event-billed, .t-content .cocio-event-estimate { margin: 0; color: rgba(184,154,94,.8); font-size: .72rem; }
.t-content .cocio-event-notice { padding: .75rem 1rem; border: 1px solid var(--t-line); font-size: .78rem; }
.t-content .cocio-event-notice.is-error, .t-content .cocio-event-notice.is-cancelled { border-color: rgba(239,68,68,.25); background: rgba(69,10,10,.3); color: #fca5a5; }
.t-content .cocio-event-notice.is-done { border-color: rgba(184,154,94,.4); color: var(--t-gold-light); }
.t-content .cocio-event-registered { color: var(--t-ivory); }

/* Room booking (Events E2): date, slot and room, tables on the photo, catering, options and the request. */
.t-content .cocio-booking { --cocio-spot-chosen-fill: rgba(184,154,94,.28); --cocio-spot-chosen-line: var(--t-gold); display: grid; gap: 2rem; }
.t-content .cocio-booking label, .t-content .cocio-booking legend { color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-content .cocio-booking input:not([type=checkbox]):not([type=radio]), .t-content .cocio-booking select, .t-content .cocio-booking textarea { width: 100%; padding: .75rem; border: 1px solid var(--t-line); border-radius: 0; background: #111; color: var(--t-ivory); font: 300 .85rem/1.4 var(--t-sans); letter-spacing: 0; text-transform: none; color-scheme: dark; }
.t-content .cocio-booking :is(input, select, textarea):focus { outline: none; border-color: var(--t-gold); }
.t-content .cocio-booking-when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: end; padding: 1.75rem 2rem; border: 1px solid var(--t-line-gold); background: rgba(17,17,17,.72); }
.t-content .cocio-booking-when label, .t-content .cocio-booking-room-choice { display: grid; gap: .6rem; }
.t-content .cocio-booking-label { color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-content .cocio-booking-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border: 1px solid var(--t-line-gold); }
.t-content .cocio-booking-rooms button { padding: .95rem 1rem; border: 0; background: none; color: var(--t-muted); font: 600 .65rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.t-content .cocio-booking-rooms button:hover { color: var(--t-ivory); }
.t-content .cocio-booking-rooms .is-active { background: var(--t-gold); color: var(--t-black); }
.t-content .cocio-booking-room { padding: 2rem 2rem 1.5rem; border: 1px solid var(--t-line-gold); background: rgba(17,17,17,.72); }
.t-content .cocio-booking-room h3 { margin: 0; font: 300 2rem/1.1 var(--t-serif); }
.t-content .cocio-booking-room-text, .t-content .cocio-booking-hint { color: var(--t-muted); font-size: .8rem; max-width: 46rem; }
.t-content .cocio-room-photo { width: min(100%, 64rem); margin: 1.75rem auto; border: 1px solid var(--t-line-gold); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.t-content .cocio-spot.is-box { border-radius: 1.25rem; }
.t-content .cocio-spot:hover { background: rgba(184,154,94,.12); }
.t-content .cocio-spot-name { padding: .35em .7em; border: 1px solid rgba(184,154,94,.4); background: rgba(10,10,10,.82); color: var(--t-ivory); font: 500 .6rem/1.2 var(--t-sans); letter-spacing: .12em; text-transform: uppercase; }
.t-content .cocio-spot-name.is-taken { color: rgba(243,238,229,.45); border-color: var(--t-line); }
.t-content .cocio-booking-whole { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; color: var(--t-ivory) !important; }
.t-content .cocio-booking-form { display: grid; gap: 2rem; }
.t-content .cocio-booking-columns { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 2rem; align-items: start; }
.t-content .cocio-booking-panel { display: grid; gap: 1.5rem; padding: 2rem; border: 1px solid var(--t-line-gold); background: rgba(17,17,17,.72); }
.t-content .cocio-booking-panel h3 { margin: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--t-line); color: var(--t-gold); font: 400 1.35rem/1.2 var(--t-serif); letter-spacing: .08em; text-transform: uppercase; }
.t-content .cocio-booking-panel .cocio-booking-hint { margin: 0; }
.t-content .cocio-booking-panel fieldset { padding: 0; border: 0; }
.t-content .cocio-booking-panel legend { padding: 0; margin-bottom: .9rem; }
.t-content .cocio-booking-note-field { display: grid; gap: .5rem; }
@media (max-width: 960px) { .t-content .cocio-booking-columns { grid-template-columns: 1fr; } }
.t-content .cocio-booking fieldset { margin: 0; padding: 1.5rem; border: 1px solid var(--t-line); }
.t-content .cocio-booking legend { padding: 0 .5rem; }
.t-content .cocio-booking-details, .t-content .cocio-booking-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.t-content .cocio-booking-details label, .t-content .cocio-booking-notes label { display: grid; gap: .5rem; align-content: start; }   /* the fields line up, whatever the help text under one of them */
.t-content .cocio-booking-details small { color: var(--t-muted); font: 300 .7rem/1.3 var(--t-sans); letter-spacing: 0; text-transform: none; }
.t-content .cocio-booking-catering { display: grid; gap: .75rem; }
.t-content .cocio-package { border: 1px solid var(--t-line); background: rgba(0,0,0,.25); transition: border-color .2s, background .2s; }
.t-content .cocio-package:has(input:checked) { border-color: var(--t-gold); background: rgba(184,154,94,.08); }
.t-content .cocio-package label { display: grid; gap: .45rem; padding: 1.1rem; cursor: pointer; letter-spacing: 0; text-transform: none; }
.t-content .cocio-package input { position: absolute; opacity: 0; }
.t-content .cocio-package-name { color: var(--t-ivory); font: 400 1.2rem/1.2 var(--t-serif); }
.t-content .cocio-package-price { color: var(--t-gold); font: 600 .65rem/1 var(--t-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-content .cocio-package-text { color: var(--t-muted); font: 300 .78rem/1.5 var(--t-sans); }
.t-content .cocio-package-menu-button { margin: 0 1.1rem 1rem; padding: 0; border: 0; background: none; color: var(--t-gold); font: 600 .6rem/1 var(--t-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.t-content .cocio-package-menu-button:hover { color: var(--t-gold-light); }
/* The package menu as a modal (popover), as in the demo: heading, the menu in two columns, close and choose.
   The choose button is a label, so its rules start at .cocio-menu-modal to win over the form's label rules. */
.t-content .cocio-menu-modal { width: min(46rem, calc(100% - 2rem)); max-height: 90vh; padding: 0; overflow: auto; border: 1px solid rgba(184,154,94,.3); background: #0d0b09; color: var(--t-ivory); box-shadow: 0 0 40px rgba(184,154,94,.15); }
.t-content .cocio-menu-modal::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(4px); }
.t-content .cocio-menu-modal header { position: relative; display: grid; gap: .45rem; padding: 1.75rem 4.5rem 1.25rem 2rem; border-bottom: 1px solid rgba(184,154,94,.25); }
.t-content .cocio-menu-eyebrow { color: rgba(184,154,94,.7); font: 600 .6rem/1 var(--t-sans); letter-spacing: .28em; text-transform: uppercase; }
.t-content .cocio-menu-modal h3 { margin: 0; color: var(--t-ivory); font: 300 1.9rem/1.15 var(--t-serif); letter-spacing: .06em; text-transform: uppercase; }
.t-content .cocio-menu-price { color: var(--t-gold); font: 400 1rem/1.2 var(--t-serif); }
.t-content .cocio-menu-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(243,238,229,.2); background: none; color: rgba(243,238,229,.6); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.t-content .cocio-menu-close:hover { border-color: rgba(184,154,94,.5); color: var(--t-gold); }
.t-content .cocio-menu-text { columns: 2 16rem; column-gap: 2.5rem; padding: 1.5rem 2rem; font-size: .78rem; line-height: 1.6; color: rgba(243,238,229,.8); }
.t-content .cocio-menu-text section { break-inside: avoid; margin-bottom: 1.25rem; }
.t-content .cocio-menu-text h4 { margin: 0 0 .35rem; color: var(--t-gold); font: 600 .85rem/1.2 var(--t-serif); letter-spacing: .08em; text-transform: uppercase; }
.t-content .cocio-menu-text ul { margin: 0; padding-left: 1rem; }
.t-content .cocio-menu-text p { margin: 0 0 .5rem; color: rgba(243,238,229,.55); font-style: italic; font-size: .72rem; }
.t-content .cocio-menu-modal footer { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: 1.1rem 2rem; border-top: 1px solid rgba(184,154,94,.25); }
.t-content .cocio-menu-back { padding: .75rem 1.25rem; border: 0; background: none; color: rgba(243,238,229,.6); font: 600 .65rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.t-content .cocio-menu-back:hover { color: var(--t-ivory); }
.t-content .cocio-menu-modal .cocio-menu-choose { display: inline-block; padding: .8rem 1.5rem; border: 1px solid var(--t-gold); background: var(--t-gold); color: var(--t-black); font: 700 .65rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.t-content .cocio-menu-modal .cocio-menu-choose:hover { background: var(--t-gold-light); }
/* The package already chosen: the button says so quietly. */
.t-content .cocio-package:has(input:checked) .cocio-menu-modal .cocio-menu-choose { background: none; color: var(--t-gold); border-color: rgba(184,154,94,.4); }
/* Inside the two panels the groups have no frame of their own; their names stand above them, as in the demo. */
.t-content .cocio-booking .cocio-booking-panel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.t-content .cocio-booking .cocio-booking-panel legend { margin-bottom: .75rem; padding: 0; }
/* Equipment and add-ons as boxes in two columns, as in the demo: a gold frame when chosen. */
.t-content .cocio-booking-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.t-content .cocio-booking-options legend { grid-column: 1 / -1; }
.t-content .cocio-booking-options label { display: flex; gap: .85rem; align-items: center; padding: .95rem 1.1rem; border: 1px solid rgba(243,238,229,.2); color: rgba(243,238,229,.8); font: 400 .85rem/1.3 var(--t-sans); letter-spacing: 0; text-transform: none; cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.t-content .cocio-booking-options label:hover { border-color: rgba(184,154,94,.4); color: var(--t-ivory); }
.t-content .cocio-booking-options label:has(input:checked) { border-color: var(--t-gold); background: rgba(184,154,94,.05); color: var(--t-ivory); }
.t-content .cocio-booking-options input[type=checkbox] { appearance: none; flex: none; display: grid; place-content: center; width: 1.1rem; height: 1.1rem; margin: 0; border: 1px solid rgba(184,154,94,.4); background: rgba(0,0,0,.3); cursor: pointer; }
.t-content .cocio-booking-options input[type=checkbox]::after { content: "✓"; color: var(--t-gold); font: 600 .7rem/1 var(--t-sans); opacity: 0; transition: opacity .2s; }
.t-content .cocio-booking-options input[type=checkbox]:checked::after { opacity: 1; }
.t-content .cocio-booking-options input[type=checkbox]:focus-visible { outline: 1px solid var(--t-gold); outline-offset: 2px; }
.t-content .cocio-booking-options .cocio-booking-hint { grid-column: 1 / -1; margin: .25rem 0 0; color: rgba(243,238,229,.6); font-style: italic; font-size: .72rem; line-height: 1.6; }
@media (max-width: 560px) { .t-content .cocio-booking-options { grid-template-columns: 1fr; } }
.t-content .cocio-booking input[type=checkbox], .t-content .cocio-booking input[type=radio] { accent-color: var(--t-gold); }
.t-content .cocio-booking-estimate { display: grid; gap: .75rem; padding: 1.25rem; border: 1px solid var(--t-line-gold); background: rgba(184,154,94,.05); }
.t-content .cocio-booking-estimate dl { display: grid; gap: .55rem; margin: 0; }
.t-content .cocio-booking-estimate dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.t-content .cocio-booking-estimate dt { color: var(--t-muted); font-size: .8rem; }
.t-content .cocio-booking-estimate dd { margin: 0; color: var(--t-ivory); font-size: .85rem; }
.t-content .cocio-booking-estimate .is-total { padding-top: .75rem; border-top: 1px solid var(--t-line); }
.t-content .cocio-booking-estimate .is-total dt { color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-content .cocio-booking-estimate strong { color: var(--t-ivory); font: 300 1.9rem/1.1 var(--t-serif); }
.t-content .cocio-booking-estimate small { color: var(--t-muted); font-size: .72rem; }
.t-content .cocio-booking-panel > button { justify-self: stretch; padding: 1rem 2rem; border: 0; background: var(--t-gold); color: var(--t-black); font: 600 .7rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.t-content .cocio-booking-panel > button:hover { background: var(--t-gold-light); }
.t-content .cocio-booking-panel > button:disabled { opacity: .4; cursor: not-allowed; }
.t-content .cocio-booking-notice { margin: 0; padding: .75rem 1rem; border: 1px solid var(--t-line); font-size: .78rem; }
.t-content .cocio-booking-notice.is-error { border-color: rgba(239,68,68,.25); background: rgba(69,10,10,.3); color: #fca5a5; }
.t-content .cocio-booking-notice.is-done { border-color: rgba(184,154,94,.4); color: var(--t-gold-light); }
.t-content .cocio-my-bookings ul { list-style: none; margin: 0; padding: 0; }
.t-content .cocio-my-bookings li { max-width: none; display: grid; gap: .3rem; padding: 1rem 0; border-bottom: 1px solid var(--t-line); }
.t-content .cocio-my-bookings .cocio-event-date { color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-content .cocio-my-bookings .cocio-booking-title { color: var(--t-ivory); font: 400 1.15rem/1.3 var(--t-serif); }
.t-content .cocio-my-bookings .cocio-event-meta { color: var(--t-muted); font-size: .75rem; }
.t-content .cocio-booking-status { justify-self: start; padding: .3rem .6rem; border: 1px solid var(--t-line); font: 600 .55rem/1 var(--t-sans); letter-spacing: .16em; text-transform: uppercase; }
.t-content .cocio-booking-status.is-pending { color: #e0c27a; border-color: rgba(224,194,122,.35); }
.t-content .cocio-booking-status.is-approved { color: #9fd3a8; border-color: rgba(159,211,168,.35); }
.t-content .cocio-booking-status.is-rejected, .t-content .cocio-booking-status.is-cancelled { color: rgba(243,238,229,.45); }
.t-content .cocio-booking-note { color: var(--t-ivory); font: italic 400 .95rem/1.4 var(--t-serif); }
.t-content .cocio-my-bookings .cocio-event-cancel { margin-top: .4rem; }
@media (max-width: 760px) { .t-content .cocio-booking-when { grid-template-columns: 1fr; padding: 1.25rem; } .t-content :is(.cocio-booking-room, .cocio-booking-panel) { padding: 1.25rem; } .t-content .cocio-spot-name { font-size: .5rem; } }

/* Membership card: velvet and gold, as on the demo's member dashboard. */
.t-content .cocio-member-card { position: relative; max-width: 30rem; min-height: 15rem; padding: 1.75rem; display: flex; flex-direction: column; border: 1px solid rgba(184,154,94,.35); background: linear-gradient(135deg, #2c050a, #110204 55%, #0a0a0a); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.t-content .cocio-member-card::before { content: ""; position: absolute; inset: .5rem; border: 1px solid rgba(184,154,94,.2); pointer-events: none; }
.t-content .cocio-member-card p { margin: 0; max-width: none; }
.t-content .cocio-member-card-photo { position: absolute; top: 1.5rem; right: 1.5rem; width: 5.5rem; height: 5.5rem; border-radius: 2px; object-fit: cover; border: 1px solid rgba(184,154,94,.6); box-shadow: 0 0 0 4px rgba(10,10,10,.6); }
.t-content .cocio-member-card-site { color: var(--t-ivory); font: 300 .75rem/1 var(--t-serif); letter-spacing: .3em; text-transform: uppercase; }
.t-content .cocio-member-card-label { margin-top: auto !important; color: var(--t-gold); font: 500 .6rem/1 var(--t-sans); letter-spacing: .3em; text-transform: uppercase; }
.t-content .cocio-member-card-name { margin-top: .4rem !important; color: var(--t-ivory); font: 400 1.35rem/1.1 var(--t-serif); letter-spacing: .1em; text-transform: uppercase; }
.t-content .cocio-member-card-level { margin-top: .5rem !important; color: var(--t-gold); font: 600 .7rem/1 var(--t-sans); letter-spacing: .28em; text-transform: uppercase; }
.t-content .cocio-member-card-facts { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid rgba(184,154,94,.2); }
.t-content .cocio-member-card-facts dt { color: rgba(243,238,229,.5); font: 500 .55rem/1 var(--t-sans); letter-spacing: .16em; text-transform: uppercase; }
.t-content .cocio-member-card-facts dd { margin: .35rem 0 0; color: var(--t-ivory); font-size: .78rem; letter-spacing: .1em; }

/* Member pages and forms (sign-in, sign-up) */
/* The velvet curtain (approved demo, CSS only). Closed behind the sign-in pages, where header and footer give way to
   the portal; on the page after sign-in (#cocio-signed-in, set by CocioDark) it opens once and is gone. */
.t-curtain { display: none; position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
.t-curtain-panel { position: absolute; top: 0; bottom: 0; width: 50.5%; background-color: #3b060d; box-shadow: inset 0 0 100px rgba(0,0,0,.95);
  background-image: linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(255,255,255,.03) 10%, rgba(0,0,0,.45) 20%, rgba(255,255,255,.04) 30%, rgba(0,0,0,.55) 40%,
    rgba(255,255,255,.03) 50%, rgba(0,0,0,.62) 60%, rgba(255,255,255,.04) 70%, rgba(0,0,0,.5) 80%, rgba(255,255,255,.03) 90%, rgba(0,0,0,.7) 100%); }
.t-curtain-panel.is-left { left: 0; transform-origin: left center; }
.t-curtain-panel.is-right { right: 0; transform-origin: right center; }
.t-curtain-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; z-index: 1; box-shadow: 0 -6px 15px rgba(184,154,94,.5);
  background: linear-gradient(0deg, var(--t-gold) 0%, var(--t-gold-dark) 45%, var(--t-gold) 100%), repeating-linear-gradient(90deg, var(--t-gold) 0 6px, var(--t-gold-dark) 6px 12px); }
.t-curtain-panel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; }
.t-curtain-panel.is-left::after { right: 0; background: linear-gradient(90deg, var(--t-gold-dark), var(--t-gold)); box-shadow: -2px 0 12px rgba(184,154,94,.4); }
.t-curtain-panel.is-right::after { left: 0; background: linear-gradient(90deg, var(--t-gold), var(--t-gold-dark)); box-shadow: 2px 0 12px rgba(184,154,94,.4); }

.t-site:has(.cocio-member:not(.cocio-member-profile) .cocio-member-form, .cocio-member.is-completing) .t-curtain { display: block; z-index: 0; }
.t-site:has(.cocio-member:not(.cocio-member-profile) .cocio-member-form, .cocio-member.is-completing) :is(.t-header, .t-footer) { display: none; }
.t-site:has(.cocio-member:not(.cocio-member-profile) .cocio-member-form, .cocio-member.is-completing) .t-content { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 1.5rem 0; }
.t-site:has(.cocio-member:not(.cocio-member-profile) .cocio-member-form, .cocio-member.is-completing) .cocio-member { margin: 0 auto 2.5rem; text-align: center; backdrop-filter: blur(12px); box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: t-rise 1s cubic-bezier(.16,1,.3,1) both; }
.t-site:has(.cocio-member:not(.cocio-member-profile) .cocio-member-form, .cocio-member.is-completing) .cocio-member::before { content: ""; display: block; height: 7.5rem; margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(184,154,94,.15); background: url("images/logo-small.svg") center top / auto 7.5rem no-repeat content-box; }
.t-site:has(.cocio-member:not(.cocio-member-profile) .cocio-member-form, .cocio-member.is-completing) .cocio-member h1 { font-size: 1.9rem; }
/* The sign-in portal has no heading, as in the demo: the logo and the intro say it. The forgot and new-password pages keep theirs. */
.t-site .cocio-member:has(.cocio-member-form[action$="/members/login"]) > h1 { display: none; }
/* The form fills the panel; the help text under it, small and gold, as in the demo. */
.t-site .cocio-member .cocio-member-form { max-width: none; }
.t-site .cocio-member .cocio-member-help { margin: .75rem 0 0; color: rgba(184,154,94,.65); font-size: .7rem; line-height: 1.7; text-align: center; }
.t-site:has(.cocio-member:not(.cocio-member-profile) .cocio-member-form, .cocio-member.is-completing) .cocio-member > p { font-size: .8rem; line-height: 1.6; }
.t-site:has(.cocio-member:not(.cocio-member-profile) .cocio-member-form, .cocio-member.is-completing) .cocio-member-form { text-align: left; }

#cocio-signed-in:target { display: block; animation: t-curtain-gone 0s linear 2.5s forwards; }
#cocio-signed-in:target .is-left { animation: t-curtain-left 2s cubic-bezier(.77,0,.175,1) .3s forwards; }
#cocio-signed-in:target .is-right { animation: t-curtain-right 2s cubic-bezier(.77,0,.175,1) .3s forwards; }
@keyframes t-curtain-left { to { transform: translateX(-100%) skewX(3deg); } }
@keyframes t-curtain-right { to { transform: translateX(100%) skewX(-3deg); } }
@keyframes t-curtain-gone { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { #cocio-signed-in:target { display: none; } }

/* Cookie settings link (CD-032), next to the policy links in the footer. */
.cocio-consent-settings { margin-left: 1.2rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.cocio-consent-settings:hover { color: var(--t-ivory); }
/* The cookie banner in Teateret's colours (CookieConsent v3 variables). */
#cc-main { --cc-font-family: var(--t-sans); --cc-bg: #111; --cc-primary-color: var(--t-ivory); --cc-secondary-color: rgba(243,238,229,.7);
  --cc-btn-primary-bg: var(--t-gold); --cc-btn-primary-color: #0a0a0a; --cc-btn-primary-border-color: var(--t-gold); --cc-btn-primary-hover-bg: var(--t-gold-light); --cc-btn-primary-hover-border-color: var(--t-gold-light); --cc-btn-primary-hover-color: #0a0a0a;
  --cc-btn-secondary-bg: #1b1b1b; --cc-btn-secondary-color: var(--t-ivory); --cc-btn-secondary-border-color: var(--t-line-gold); --cc-btn-secondary-hover-bg: #262626; --cc-btn-secondary-hover-border-color: var(--t-gold); --cc-btn-secondary-hover-color: var(--t-ivory);
  --cc-separator-border-color: var(--t-line); --cc-toggle-on-bg: var(--t-gold); --cc-toggle-off-bg: #3a3a3a; --cc-toggle-readonly-bg: #2a2a2a; --cc-cookie-category-block-bg: #161616; --cc-cookie-category-block-border: var(--t-line); --cc-link-color: var(--t-gold); --cc-modal-border-radius: 0; --cc-btn-border-radius: 0; }

/* Sign-in and password pages. CocioDark adds its own neutral form styles inside @scope, so these rules start at .t-site to win. */
.t-site .cocio-member { width: min(32rem, 100% - 3rem); margin: clamp(3rem, 8vw, 6rem) auto; padding: 2.5rem; border: 1px solid var(--t-line-gold); background: rgba(17, 17, 17, .72); box-shadow: 0 0 60px rgba(184, 154, 94, .16); }
.t-site .cocio-member h1 { margin: 0 0 .75rem; font: 300 2.4rem/1.1 var(--t-serif); }
.t-site .cocio-member > p { color: var(--t-muted); }
.t-site .cocio-member-form label { color: var(--t-gold); font: 400 .72rem/1.4 var(--t-sans); letter-spacing: .06em; text-transform: uppercase; }
.t-site .cocio-member-form input { width: 100%; padding: .85rem 1rem; border: 1px solid rgba(184, 154, 94, .2); border-radius: 0; background: rgba(17, 17, 17, .8); color: var(--t-ivory); font: 400 1rem var(--t-sans); letter-spacing: 0; text-transform: none; }
.t-site .cocio-member-form input:focus { outline: none; border-color: var(--t-gold); }
.t-site .cocio-member-form button { width: 100%; padding: 1rem; border: 0; border-radius: 0; background: var(--t-gold); color: var(--t-black); font: 600 .72rem/1 var(--t-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.t-site .cocio-member-form button:hover { background: var(--t-gold-light); }
.t-site .cocio-member-error { color: #e8a2a2; }
/* The member's profile (/members/profile): points, photo, details and password as panels. While required fields
   are being filled in it is the portal behind the curtain (above); otherwise an ordinary page. */
.t-site .cocio-member-profile:not(.is-completing) { width: min(76rem, 100% - 3rem); padding: 0; border: 0; background: none; box-shadow: none; }
.t-site .cocio-member-profile:not(.is-completing) > h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.cocio-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.75rem; align-items: start; margin-top: 2rem; }
.cocio-profile-part { padding: 2rem; border: 1px solid var(--t-line-gold); background: rgba(17,17,17,.72); }
.cocio-profile-part h2 { margin: 0 0 1.25rem; padding-bottom: .9rem; border-bottom: 1px solid var(--t-line); color: var(--t-gold); font: 400 1.3rem/1.2 var(--t-serif); letter-spacing: .08em; text-transform: uppercase; }
.cocio-profile-part h3 { margin: 1.5rem 0 .6rem; color: var(--t-ivory); font: 400 1.1rem/1.2 var(--t-serif); }
.cocio-profile-balance { display: grid; gap: .3rem; margin: 0; }
.cocio-profile-balance span { color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .16em; text-transform: uppercase; }
.cocio-profile-balance strong { color: var(--t-ivory); font: 300 3rem/1 var(--t-serif); }
.cocio-profile-pending { margin: .9rem 0 0; padding: .6rem .8rem; border: 1px solid rgba(224,194,122,.35); color: #e0c27a !important; }
.cocio-profile-history { width: 100%; border-collapse: collapse; font-size: .78rem; }
.cocio-profile-history td { padding: .45rem 0; border-bottom: 1px solid var(--t-line); color: var(--t-muted); }
.cocio-profile-history td:last-child { text-align: right; color: var(--t-ivory); }
.cocio-profile-history .is-minus { color: #e08a7a !important; }
.cocio-profile-photo-image { display: grid; place-items: center; width: 7rem; height: 7rem; margin: 0 0 1.25rem; border: 1px solid rgba(184,154,94,.55); border-radius: 50%; object-fit: cover; color: var(--t-gold); font: 300 2rem/1 var(--t-serif); }
.cocio-profile-readonly { margin: 0; color: var(--t-ivory); line-height: 1.6; }
.cocio-profile-pair { display: grid; grid-template-columns: 1fr 2fr; gap: .9rem; }
.t-site .cocio-member-profile .cocio-member-form { max-width: none; margin: 0; }
.t-site .cocio-member-profile .cocio-member-form fieldset { display: grid; gap: .9rem; margin: 0 0 1.5rem; padding: 0; border: 0; }
.t-site .cocio-member-profile .cocio-member-form legend { margin-bottom: .9rem; padding: 0; color: var(--t-gold); font: 600 .62rem/1 var(--t-sans); letter-spacing: .16em; text-transform: uppercase; }
.t-site .cocio-member-profile .cocio-member-form label { display: grid; gap: .45rem; }
.t-site .cocio-member-profile .cocio-member-form abbr { color: var(--t-gold); text-decoration: none; }
.t-site .cocio-member-profile .cocio-member-form input[type=file] { padding: .6rem; font-size: .8rem; }
.t-site .cocio-member-profile .cocio-profile-remove button { margin-top: .75rem; border: 1px solid var(--t-line); background: none; color: var(--t-muted); }
.t-site .cocio-member-profile .cocio-profile-remove button:hover { border-color: var(--t-gold); color: var(--t-ivory); background: none; }
.t-site .cocio-member-profile .cocio-member-note { color: var(--t-muted); font-size: .78rem; }
.t-site .cocio-member-profile > .cocio-member-note[role=status] { padding: .75rem 1rem; border: 1px solid rgba(184,154,94,.4); color: var(--t-gold-light); }
.t-site .cocio-member-profile.is-completing { width: min(36rem, 100% - 3rem); }
/* Legal pages (Husregler, Privatlivspolitik): long text in a readable column. */
.t-content .t-legal { max-width: 52rem; }
.t-content .t-legal h2 { margin: 2.25rem 0 .75rem; color: var(--t-gold); font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.t-content .t-legal p, .t-content .t-legal li { line-height: 1.75; }
.t-content .t-legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.t-content .t-legal li::marker { color: var(--t-gold); }
.t-content .t-legal-lead { font: italic 400 1.25rem/1.55 var(--t-serif); color: var(--t-ivory) !important; }
.t-content .t-legal-updated { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--t-line); color: var(--t-muted) !important; font-size: .8rem; }
.cocio-not-found { text-align: center; padding: 6rem 1.5rem; }
.cocio-not-found h1 { font: 300 3rem/1.1 var(--t-serif); }

/* Footer */
.t-footer { margin-top: 4rem; border-top: 1px solid var(--t-line); background: #070606; padding: 3.5rem 0 0; }
.t-footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; }
.t-footer-logo { height: 2.4rem; width: auto; margin-bottom: 1rem; }
.t-footer-heading { margin: 0 0 1.2rem; color: var(--t-gold); font: 600 .9rem/1 var(--t-serif); letter-spacing: .2em; text-transform: uppercase; }
.t-footer-links .cocio-menu { display: grid !important; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.t-footer-links .cocio-menu a, .t-footer-links .cocio-menu summary { padding: 0; color: var(--t-muted); font-size: .8rem; text-decoration: none; }
.t-footer-links .cocio-menu a:hover { color: var(--t-ivory); }
.t-footer-links .cocio-menu ul { position: static !important; background: none !important; border: 0 !important; padding: .2rem 0 0 .8rem !important; min-width: 0 !important; }
.t-contact { margin: 0; font-size: .8rem; color: var(--t-muted); }
.t-contact dt { color: rgba(243, 238, 229, .4); font: 500 .62rem/1 var(--t-sans); letter-spacing: .18em; text-transform: uppercase; margin-top: .9rem; }
.t-contact dd { margin: .3rem 0 0; }
.t-contact a { color: inherit; }
.t-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.4rem 0 2rem; border-top: 1px solid var(--t-line); color: rgba(243, 238, 229, .4); font-size: .7rem; }
.t-footer-bottom a { color: inherit; margin-left: 1.2rem; }
@media (max-width: 860px) { .t-footer-grid { grid-template-columns: 1fr; } }

/* Scroll reveal (teateret.js adds .t-js; without scripts everything is simply visible). */
.t-js .t-reveal { opacity: 0; transform: translateY(42px); }