@font-face { font-family: "Barlow Condensed"; src: url("../fonts/loft/barlowc-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/loft/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/loft/jbmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* LOFT (theme key "loft"): an industrial loft. Intro: a dark brick wall, a string of unlit Edison bulbs and a brass
   toggle switch; tap and the switch flips, the bulbs warm up one by one and the wall glows. Cover: warm-lit brick, the
   bulbs across the top, the photo in a riveted black-steel frame, the names in tall condensed capitals and the details
   as stencilled labels. Sections on plaster with numbered mono labels and steel-edged cards; the close is the brick
   again with the lights on. Our own drawings (core/themes/loft/_parts.php).
   Palette: --brick/--mortar the wall, --steel the frames, --bulb the light. Warm Brick, Whitewashed, Blackened Steel.
   Type: Barlow Condensed · Barlow · JetBrains Mono. */
:root {
  --bg: #f1ece6; --paper: #fbf9f6; --ink: #1d1b1a; --muted: #67605a; --line: rgba(29, 27, 26, .16);
  --brick: #8b4a36; --mortar: #c9b8a6; --wall-shade: rgba(0, 0, 0, .45); --steel: #1d1d1f; --bulb: #ffcf7a; --wall-ink: #fbf1e2;
  --accent: #b4532a; --accent-ink: #fff; --name: #fbf1e2;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif; --text: "Barlow", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --caps: var(--mono);
  --radius: 0; --maxw: 560px;
}
body { font-family: var(--text); font-size: 1.04rem; color: var(--ink); background: var(--bg); counter-reset: lf; }

/* the brick wall: bricks (two tones, offset rows), mortar lines from a mask */
.lf-brick { position: relative; isolation: isolate; color: var(--wall-ink); background:
  linear-gradient(90deg, rgba(0, 0, 0, .1) 0 50%, transparent 0) 0 0 / 120px 26px,
  linear-gradient(90deg, rgba(255, 255, 255, .06) 0 33%, transparent 0) 30px 26px / 180px 52px,
  radial-gradient(60% 40% at 30% 20%, rgba(255, 255, 255, .06), transparent), var(--brick); }
.lf-brick::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--mortar); opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52' width='60' height='52'%3E%3Cpath fill='%23fff' d='M0 0h60v3H0zM0 26h60v3H0zM0 0h3v26H0zM30 26h3v26h-3z'/%3E%3C/svg%3E") 0 0 / 60px 52px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52' width='60' height='52'%3E%3Cpath fill='%23fff' d='M0 0h60v3H0zM0 26h60v3H0zM0 0h3v26H0zM30 26h3v26h-3z'/%3E%3C/svg%3E") 0 0 / 60px 52px; }
.lf-brick::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 55% at 50% 12%, color-mix(in srgb, var(--bulb) 26%, transparent), var(--wall-shade) 85%); }

/* the bulbs */
.lf-str { display: block; width: 100%; height: auto; overflow: visible; }
.lf-str .lf-cable, .lf-str .lf-wire { fill: none; stroke: #111; stroke-width: 2; }
.lf-str .lf-cap { fill: #8a6a3a; }
.lf-str .lf-glass { fill: rgba(255, 245, 225, .18); stroke: rgba(255, 245, 225, .5); stroke-width: 1; }
.lf-str .lf-fil { fill: none; stroke: #5a4632; stroke-width: 1.2; }
.lf-str.is-lit .lf-glass { fill: color-mix(in srgb, var(--bulb) 75%, #fff); stroke: none; }
.lf-str.is-lit .lf-fil { stroke: #fff6dd; }
.lf-str.is-lit .lf-b { filter: drop-shadow(0 0 6px var(--bulb)) drop-shadow(0 0 16px color-mix(in srgb, var(--bulb) 60%, transparent)); animation: lf-flicker 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
@keyframes lf-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .82; } 49% { opacity: 1; } }

/* ---------- intro: flip the switch ---------- */
.lf-intro { --intro-ms: 2200; overflow: hidden; transition: opacity .7s ease 1.5s, visibility 0s linear 2.2s; }
.lf-intro.lf-brick::after { background: radial-gradient(70% 50% at 50% 40%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .85)); transition: background .8s; }
.lf-start { position: relative; z-index: 2; display: grid; justify-items: center; align-content: start; gap: 18px; width: 100%; height: 100%; padding: 0 0 8vh; border: 0; background: none; color: var(--wall-ink); cursor: pointer; }
.lf-intro .lf-str { margin-bottom: 9vh; }
.lf-mono { font: 600 clamp(3.4rem, 18vw, 5rem)/1 var(--display); letter-spacing: .04em; color: color-mix(in srgb, var(--wall-ink) 35%, transparent); transition: color .8s ease .6s, text-shadow .8s ease .6s; }
.lf-mono i { font-style: normal; font-size: .6em; margin: 0 .1em; }
.lf-swb { display: block; width: 74px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.lf-sw { display: block; width: 100%; height: auto; }
.lf-sw .lf-plate { fill: #b8925a; stroke: #7d5f33; stroke-width: 2; } .lf-sw .lf-screw { fill: #7d5f33; } .lf-sw .lf-base { fill: #2a2622; }
.lf-sw .lf-lever { fill: #e8e2d6; stroke: #2a2622; stroke-width: 1.5; transform-origin: 40px 65px; transform: rotate(180deg); transition: transform .25s cubic-bezier(.5, 1.8, .5, 1); }
.lf-for { font: 400 1rem var(--mono); } .lf-for b { font-weight: 400; color: var(--bulb); }
.lf-tap { font: 400 .7rem var(--mono); letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--wall-ink) 80%, transparent); animation: lf-pulse 2.4s ease-in-out infinite; }
@keyframes lf-pulse { 50% { opacity: .4; } }
.is-opening .lf-sw .lf-lever { transform: rotate(0deg); }
.is-opening .lf-intro.lf-brick::after { background: radial-gradient(90% 55% at 50% 12%, color-mix(in srgb, var(--bulb) 30%, transparent), rgba(0, 0, 0, .35) 85%); transition-delay: .5s; }
.is-opening .lf-str.is-intro .lf-glass { fill: color-mix(in srgb, var(--bulb) 75%, #fff); stroke: none; transition: fill .2s; transition-delay: calc(.25s + var(--i) * 110ms); }
.is-opening .lf-str.is-intro .lf-fil { stroke: #fff6dd; transition: stroke .2s; transition-delay: calc(.25s + var(--i) * 110ms); }
.is-opening .lf-str.is-intro .lf-b { filter: drop-shadow(0 0 6px var(--bulb)) drop-shadow(0 0 16px color-mix(in srgb, var(--bulb) 60%, transparent)); transition: filter .3s; transition-delay: calc(.25s + var(--i) * 110ms); }
.is-opening .lf-mono { color: var(--wall-ink); text-shadow: 0 0 24px color-mix(in srgb, var(--bulb) 60%, transparent); }
.is-opening .lf-tap, .is-opening .lf-for { opacity: 0; transition: opacity .3s; animation: none; }
@media (prefers-reduced-motion: reduce) { .lf-tap, .lf-str.is-lit .lf-b { animation: none; } }

/* ---------- cover ---------- */
.t-loft .lf-hero { display: block; min-height: 100svh; padding: 0 var(--gutter) 64px; text-align: center; }
.t-loft .lf-hero > * { position: relative; max-width: 470px; }
.lf-hero .lf-str { max-width: none !important; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)) 18px; }
.lf-frame { position: relative; width: min(76vw, 300px); aspect-ratio: 4 / 5; margin: 0 auto 24px; padding: 10px; background: var(--steel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 40px -16px rgba(0, 0, 0, .8);
  background-image: radial-gradient(circle, #555 0 2px, transparent 2.5px), radial-gradient(circle, #555 0 2px, transparent 2.5px), radial-gradient(circle, #555 0 2px, transparent 2.5px), radial-gradient(circle, #555 0 2px, transparent 2.5px);
  background-size: 10px 10px; background-repeat: no-repeat; background-position: 0 0, 100% 0, 0 100%, 100% 100%; }
.lf-ph { position: relative; width: 100%; height: 100%; overflow: hidden; background: #2a2622; }
.lf-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-hero .hero-media-tag { bottom: 8px; font-size: .55rem; }
.lf-hero .hero-guest { margin: 0 0 6px; font: 400 .9rem var(--mono); } .lf-hero .hero-guest b { font-weight: 400; color: var(--bulb); }
.lf-hero .hero-k { display: inline-block; margin: 0; padding: 5px 10px; background: rgba(0, 0, 0, .55); font: 400 .66rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bulb); text-wrap: balance; }
.t-loft .hero-t { margin: 12px 0 0; font: 600 clamp(3.4rem, 18vw, 5rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--name); text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 30px color-mix(in srgb, var(--bulb) 40%, transparent); }
.t-loft .hero-t span { display: block; }
.t-loft .hero-t i { display: block; font: 400 .3em/1.6 var(--mono); font-style: normal; letter-spacing: .3em; color: var(--bulb); }
.lf-hero .hero-line { margin: 14px auto 0; max-width: 21em; color: color-mix(in srgb, var(--wall-ink) 88%, transparent); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.lf-when { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 20px auto 0; }
.lf-when span { padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--wall-ink) 50%, transparent); background: rgba(0, 0, 0, .4); font: 400 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.t-loft .hero-cta, .t-loft .rs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 24px; padding: 12px 34px; border: 0; border-radius: 0;
  background: var(--steel); color: var(--bulb); font: 600 1.1rem var(--display); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 22px -10px rgba(0, 0, 0, .7); }
.t-loft .rs-btn { width: 100%; }

/* ---------- sections: plaster, numbered labels, steel-edged cards ---------- */
.t-loft main > .s:not(.s-hero):not(.s-closing) { counter-increment: lf; }
.t-loft .sh-k { font: 400 .68rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.t-loft .sh-k::before { content: counter(lf, decimal-leading-zero) " / "; color: var(--muted); }
.t-loft .sh-t { font: 600 clamp(2.4rem, 11vw, 3.1rem)/.95 var(--display); text-transform: uppercase; color: var(--ink); }
.t-loft .sh::after { content: ""; display: block; width: 46px; height: 3px; margin: 14px auto 0; background: var(--accent); }
.t-loft .cd-u b { font: 600 clamp(2.5rem, 12vw, 3.2rem)/1 var(--display); color: var(--ink); }
.t-loft .cd-u span { font: 400 .6rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.t-loft .btn-line { min-height: 46px; border: 2px solid var(--ink); color: var(--ink); border-radius: 0; font: 600 .95rem var(--display); letter-spacing: .12em; text-transform: uppercase; }
.t-loft .btn-line:hover { background: var(--ink); color: var(--bg); }
.t-loft .tl-time { color: var(--accent); font: 400 .78rem var(--mono); padding-top: 4px; }
.t-loft .tl-title { font-weight: 400; }
.t-loft .vn-c, .t-loft .dr-roles > div, .t-loft .rs, .t-loft .rs-done, .t-loft .gl-c, .t-loft .gl-it { border: 2px solid var(--steel); border-radius: 0; background: var(--paper); box-shadow: 6px 6px 0 color-mix(in srgb, var(--steel) 14%, transparent); }
.t-loft .vn-l, .t-loft .dr-roles dt, .t-loft .bio-r, .t-loft .tml-d { font: 400 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.t-loft .vn-n, .t-loft .pp-h, .t-loft .tml-t, .t-loft .bio-n { font: 600 1.4rem/1.05 var(--display); text-transform: uppercase; color: var(--ink); }
.t-loft .f-in, .t-loft .ch span { border-radius: 0; background: var(--paper); }
.t-loft .faq summary { font: 600 1.15rem var(--display); text-transform: uppercase; letter-spacing: .02em; }
.t-loft .gl-btn { background: var(--steel); color: var(--bulb); border-radius: 0; }
.t-loft .gal-i img, .t-loft .gal-ph { border-radius: 0; border: 6px solid var(--steel); }
.t-loft .tml::before { background: var(--steel); width: 2px; }
.t-loft .tml-dot { border-radius: 0; background: var(--accent); }
.t-loft .sw-dot { border-radius: 0; box-shadow: 0 0 0 2px var(--steel); }

/* ---------- closing ---------- */
.t-loft .lf-end { margin-top: 40px; padding: 0 var(--gutter) 90px; text-align: center; }
.t-loft .lf-end > * { position: relative; margin-left: auto; margin-right: auto; }
.lf-end .lf-str { max-width: none !important; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)) 30px; }
.t-loft .lf-end .cl-line { font: 400 1.2rem/1.5 var(--text); text-wrap: balance; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.t-loft .lf-end .cl-sign { font: 600 2.6rem/1 var(--display); text-transform: uppercase; color: var(--name); text-shadow: 0 0 24px color-mix(in srgb, var(--bulb) 45%, transparent); }
.t-loft .lf-end .cl-tag { font: 400 .72rem var(--mono); letter-spacing: .1em; color: var(--bulb); }
.t-loft .lf-end .btn-line { border-color: var(--bulb); color: var(--bulb); background: rgba(0, 0, 0, .35); }
.t-loft .lf-end .btn-line:hover { background: var(--bulb); color: var(--steel); }
.t-loft body.is-demo .lf-end { padding-bottom: 130px; }