@layer holyline-loader {
  .hl-loader,
  .loader-gallery-page {
    --hl-paper: #f3f2ee;
    --hl-light: #fcfbf8;
    --hl-ink: #10110f;
    --hl-muted: #5a5a54;
    --hl-line: #b9b8b0;
    --hl-soft: #e7e5df;
    --hl-mono: 'Cascadia Mono', Consolas, monospace;
    --hl-serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --hl-sans: Aptos, 'Segoe UI', sans-serif;
  }

  .hl-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: clamp(.75rem, 2.5vw, 2rem);
    overflow: auto;
    color: var(--hl-ink);
    background: rgb(16 17 15 / .88);
    font-family: var(--hl-sans);
    opacity: 0;
    transition: opacity 240ms ease;
  }

  .hl-loader--shown { opacity: 1; }
  .hl-loader--leaving { opacity: 0; pointer-events: none; }

  .hl-loader__sheet {
    width: min(100%, 64rem);
    background: var(--hl-paper);
    border: 1px solid var(--hl-ink);
    box-shadow: 7px 7px 0 var(--hl-ink);
  }

  .hl-loader__bar,
  .hl-loader__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .65rem .9rem;
    font: .72rem/1.4 var(--hl-mono);
    letter-spacing: .03em;
  }

  .hl-loader__bar {
    color: var(--hl-light);
    background: var(--hl-ink);
  }

  .hl-loader__bar span:first-child {
    font: 700 1rem/1 var(--hl-serif);
    letter-spacing: -.03em;
  }

  .hl-loader__body { padding: clamp(1rem, 3vw, 2rem); }
  .hl-loader__intro { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: .3rem 1.25rem; margin-bottom: 1rem; }
  .hl-loader__eyebrow { grid-column: 1 / -1; margin: 0; color: var(--hl-ink); font: .7rem/1.5 var(--hl-mono); letter-spacing: .08em; text-transform: uppercase; }
  .hl-loader__intro h2 { margin: 0; font: 600 clamp(1.9rem, 5vw, 3.75rem)/.95 var(--hl-serif); letter-spacing: -.045em; }
  .hl-loader__note { max-width: 24rem; margin: 0 0 .2rem; color: var(--hl-muted); font-size: .95rem; line-height: 1.5; text-align: right; }
  .hl-loader__art { overflow: hidden; border: 1px solid var(--hl-ink); background: var(--hl-light); }
  .hl-loader__ledger { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hl-ink); border-top: 0; }
  .hl-loader__ledger span { display: flex; align-items: center; gap: .55rem; padding: .65rem .75rem; font: .68rem/1.4 var(--hl-mono); }
  .hl-loader__ledger span + span { border-left: 1px solid var(--hl-ink); }
  .hl-loader__ledger i { width: .45rem; height: .45rem; flex: none; border: 1px solid var(--hl-ink); background: var(--hl-paper); }
  .hl-loader__ledger span:nth-child(1) i { animation: hl-ledger 2.7s steps(1, end) infinite; }
  .hl-loader__ledger span:nth-child(2) i { animation: hl-ledger 2.7s .9s steps(1, end) infinite; }
  .hl-loader__ledger span:nth-child(3) i { animation: hl-ledger 2.7s 1.8s steps(1, end) infinite; }
  .hl-loader__foot { border-top: 1px solid var(--hl-ink); color: var(--hl-muted); }
  .hl-loader__label { color: var(--hl-ink); }

  .hl-art { display: block; width: 100%; height: auto; color: var(--hl-ink); background: var(--hl-light); }
  .hl-art text { user-select: none; }
  .hl-paper { fill: var(--hl-paper); stroke: var(--hl-ink); stroke-width: 2; }
  .hl-panel { fill: var(--hl-soft); stroke: var(--hl-ink); stroke-width: 2; }
  .hl-plate { fill: var(--hl-light); stroke: var(--hl-ink); stroke-width: 1.5; }
  .hl-note { fill: #fffdf7; stroke: var(--hl-ink); stroke-width: 1.5; }
  .hl-ink { fill: var(--hl-ink); }
  .hl-line { fill: none; stroke: var(--hl-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .hl-heavy { fill: none; stroke: var(--hl-ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
  .hl-grid { fill: none; stroke: var(--hl-line); stroke-width: 1; opacity: .38; }
  .hl-signal { fill: none; stroke: var(--hl-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .hl-port { fill: var(--hl-light); stroke: var(--hl-ink); stroke-width: 2; }
  .hl-hole { fill: var(--hl-paper); stroke: var(--hl-ink); stroke-width: 3; }
  .hl-dot { fill: var(--hl-ink); }
  .hl-meter { fill: var(--hl-ink); }
  .hl-stamp { fill: none; stroke: var(--hl-ink); stroke-width: 4; stroke-dasharray: 3 4; }
  .hl-scopegrid { fill: none; stroke: #e3e2dc; stroke-width: 1; opacity: .5; }
  .hl-wave { fill: none; stroke: #f3f2ee; stroke-width: 3; stroke-linejoin: round; }
  .hl-sweep { fill: var(--hl-ink); opacity: .7; }
  .hl-receiver { fill: var(--hl-ink); stroke: var(--hl-ink); stroke-width: 2; stroke-linejoin: round; }
  .hl-tab { fill: var(--hl-ink); stroke: var(--hl-ink); stroke-width: 1; }
  .hl-label { fill: var(--hl-ink); font: 700 13px var(--hl-mono); letter-spacing: .07em; }
  .hl-micro { fill: var(--hl-muted); font: 11px var(--hl-mono); letter-spacing: .03em; }
  .hl-copy { fill: var(--hl-ink); font: 19px var(--hl-serif); }
  .hl-papertext { fill: var(--hl-paper); font: 12px var(--hl-mono); letter-spacing: .05em; }

  .hl-spin { transform-box: fill-box; transform-origin: center; animation: hl-spin 6s linear infinite; }
  .hl-spin--reverse { animation-direction: reverse; animation-duration: 9s; }
  .hl-pulse { animation: hl-pulse 1.7s steps(2, end) infinite; }
  .hl-draw { stroke-dasharray: 900; animation: hl-draw 3.2s ease-in-out infinite; }
  .hl-slide { animation: hl-slide 3.6s ease-in-out infinite; }
  .hl-bob { animation: hl-bob 2.8s ease-in-out infinite; }
  .hl-tick { transform-box: fill-box; transform-origin: center; animation: hl-tick 4s steps(24, end) infinite; }
  .hl-roll { transform-box: fill-box; transform-origin: center; animation: hl-roll 4.4s ease-in-out infinite; }
  .hl-sweep { animation: hl-sweep 2.5s linear infinite; }
  .hl-card { transform-box: fill-box; transform-origin: center bottom; animation: hl-card 5s ease-in-out infinite; }
  .hl-card--2 { animation-delay: .2s; }
  .hl-card--3 { animation-delay: .4s; }
  .hl-card--4 { animation-delay: .6s; }
  .hl-card--5 { animation-delay: .8s; }

  @keyframes hl-spin { to { transform: rotate(360deg); } }
  @keyframes hl-pulse { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .22; } }
  @keyframes hl-draw { 0% { stroke-dashoffset: 900; } 48%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -900; } }
  @keyframes hl-slide { 0%, 15% { transform: translateX(25px); opacity: .25; } 35%, 85% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-8px); opacity: 0; } }
  @keyframes hl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes hl-tick { to { transform: rotate(360deg); } }
  @keyframes hl-roll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(30px); } }
  @keyframes hl-sweep { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: .7; } 85% { opacity: .7; } 100% { transform: translateX(386px); opacity: 0; } }
  @keyframes hl-card { 0%, 80%, 100% { transform: rotateX(0deg); } 88% { transform: rotateX(9deg) translateY(-4px); } }
  @keyframes hl-ledger { 0%, 32% { background: var(--hl-ink); } 33%, 100% { background: var(--hl-paper); } }

  .loader-gallery-page { min-height: 100vh; background: var(--hl-paper); color: var(--hl-ink); }
  .loader-gallery-page .skip-link { z-index: 2; }
  .loader-gallery-shell { width: min(100% - 2rem, 76rem); margin-inline: auto; padding: 1rem 0 5rem; }
  .loader-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hl-ink); }
  .loader-gallery-head a { display: inline-flex; align-items: center; min-height: 3rem; font: .8rem var(--hl-mono); text-underline-offset: .25em; }
  .loader-gallery-head span { font: .75rem var(--hl-mono); }
  .loader-gallery-intro { display: grid; gap: 1rem; max-width: 54rem; padding: clamp(3rem, 8vw, 7rem) 0 3rem; }
  .loader-gallery-intro p:first-child { width: max-content; padding-bottom: .3rem; border-bottom: 1px solid var(--hl-ink); font: .75rem var(--hl-mono); text-transform: uppercase; letter-spacing: .05em; }
  .loader-gallery-intro h1 { margin: 0; font: 600 clamp(3rem, 8vw, 6.5rem)/.92 var(--hl-serif); letter-spacing: -.055em; }
  .loader-gallery-intro h1 em { color: var(--hl-ink); font-weight: 400; }
  .loader-gallery-intro p:last-child { max-width: 40rem; margin: 0; color: var(--hl-muted); }
  .loader-gallery { display: grid; gap: 1.5rem; }
  .loader-card { display: grid; align-content: start; background: var(--hl-light); border: 1px solid var(--hl-ink); box-shadow: 4px 4px 0 var(--hl-ink); overflow: hidden; }
  .loader-card__top { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .7rem; color: var(--hl-paper); background: var(--hl-ink); font: .68rem/1.4 var(--hl-mono); letter-spacing: .04em; }
  .loader-card__art { border-bottom: 1px solid var(--hl-ink); }
  .loader-card__art .hl-art { aspect-ratio: 12 / 7; object-fit: cover; }
  .loader-card__copy { display: grid; grid-template-columns: 1fr auto; gap: .7rem 1rem; align-items: end; padding: 1rem; }
  .loader-card__copy h2 { margin: 0; font: 600 clamp(1.7rem, 3vw, 2.4rem)/1 var(--hl-serif); letter-spacing: -.04em; }
  .loader-card__copy p { grid-column: 1; margin: 0; color: var(--hl-muted); font-size: .9rem; line-height: 1.5; }
  .loader-card button { grid-column: 2; grid-row: 1 / 3; align-self: stretch; min-width: 6.5rem; padding: .7rem 1rem; border: 1px solid var(--hl-ink); border-radius: 0; color: var(--hl-light); background: var(--hl-ink); box-shadow: 3px 3px 0 var(--hl-ink); cursor: pointer; font: 700 .78rem var(--hl-mono); transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease; }
  .loader-card button:hover { background: #30302d; }
  .loader-card button:active { transform: translate(3px, 3px); box-shadow: none; }
  .loader-card button:focus-visible { outline: 3px solid var(--hl-ink); outline-offset: 5px; }
  .loader-gallery-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--hl-ink); color: var(--hl-muted); font: .72rem/1.5 var(--hl-mono); }

  @media (min-width: 52rem) {
    .loader-gallery-shell { width: min(100% - 4rem, 76rem); }
    .loader-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 39.99rem) {
    .hl-loader { place-items: start center; padding: .65rem; }
    .hl-loader__sheet { margin-block: auto; box-shadow: 4px 4px 0 var(--hl-ink); }
    .hl-loader__intro { grid-template-columns: 1fr; }
    .hl-loader__note { text-align: left; }
    .hl-loader__body { padding: .8rem; }
    .hl-loader__ledger { grid-template-columns: 1fr; }
    .hl-loader__ledger span + span { border-left: 0; border-top: 1px solid var(--hl-ink); }
    .hl-loader__bar, .hl-loader__foot { align-items: flex-start; flex-direction: column; gap: .25rem; }
    .loader-card__copy { grid-template-columns: 1fr; }
    .loader-card button { grid-column: 1; grid-row: auto; min-height: 3rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hl-loader,
    .hl-loader *,
    .loader-gallery * { animation: none !important; transition: none !important; }
  }
}

@layer holyline-loader {
  .hl-loader__sheet { width: min(100%, 58rem, max(16rem, calc((100svh - 15rem) * 1.5))); }
  .hl-loader__intro h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
  .hl-loader__eyebrow { display: none; }
  .hl-loader__body { padding: .85rem; }
  .hl-photo.hl-art { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #151513; isolation: isolate; }
  .hl-photo__camera { position: absolute; inset: 0; animation: photo-camera 8s ease-in-out infinite alternate; }
  .hl-photo img, .hl-photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
  .hl-photo__dial { clip-path: ellipse(11.8% 14.3% at 54.5% 53.5%); transform-origin: 54.5% 53.5%; animation: photo-dial 3.1s cubic-bezier(.45,0,.25,1) infinite; }
  .hl-photo__receiver { clip-path: polygon(28% 44%, 32% 34%, 44% 27%, 63% 26%, 75% 30%, 81% 45%, 80% 52%, 70% 52%, 65% 47%, 65% 36%, 47% 35%, 43% 46%, 32% 53%, 28% 51%); transform-origin: 54% 38%; animation: photo-ring 3.1s ease-in-out infinite; }
  .hl-photo__light, .hl-photo__grain { position: absolute; inset: 0; pointer-events: none; }
  .hl-photo__light { background: linear-gradient(110deg, transparent 25%, rgb(255 253 244 / .15) 48%, transparent 70%); mix-blend-mode: screen; animation: photo-light 5s ease-in-out infinite; }
  .hl-photo__grain { inset: -10%; opacity: .14; background-image: repeating-linear-gradient(0deg, transparent 0 2px, #121210 2px 3px), repeating-linear-gradient(90deg, transparent 0 3px, #f3f2ee 3px 4px); background-size: 5px 5px, 7px 7px; mix-blend-mode: soft-light; animation: photo-grain .22s steps(2) infinite; }
  .hl-photo--02 .hl-photo__receiver, .hl-photo--04 .hl-photo__receiver, .hl-photo--07 .hl-photo__receiver, .hl-photo--10 .hl-photo__receiver { animation: none; }
  .hl-photo--03 .hl-photo__camera { animation: photo-push 5s ease-out infinite alternate; }
  .hl-photo--03 .hl-photo__dial, .hl-photo--04 .hl-photo__dial, .hl-photo--06 .hl-photo__dial, .hl-photo--07 .hl-photo__dial, .hl-photo--08 .hl-photo__dial, .hl-photo--09 .hl-photo__dial, .hl-photo--10 .hl-photo__dial { animation: none; }
  .hl-photo--04 .hl-photo__light { opacity: .9; animation-duration: 2.8s; }
  .hl-photo--05 .hl-photo__receiver { animation-duration: 1.8s; }
  .hl-photo--06 .hl-photo__camera { animation: photo-focus 4s ease-in-out infinite alternate; }
  .hl-photo--07 .hl-photo__camera { animation: photo-drift 6s ease-in-out infinite alternate; }
  .hl-photo--08 .hl-photo__camera { animation: photo-exposure 4s ease-in-out infinite alternate; }
  .hl-photo--09 .hl-photo__grain { opacity: .35; }
  .hl-photo--10 .hl-photo__camera { animation-duration: 14s; }
  @keyframes photo-camera { from { transform: scale(1.015); } to { transform: scale(1.055); } }
  @keyframes photo-push { from { transform: scale(1); } to { transform: scale(1.14); } }
  @keyframes photo-dial { 0%, 12%, 85%, 100% { transform: rotate(0); } 48%, 57% { transform: rotate(-26deg); } }
  @keyframes photo-ring { 0%, 24%, 55%, 100% { transform: rotate(0); } 29%, 39%, 49% { transform: rotate(.5deg) translateY(-.3%); } 34%, 44% { transform: rotate(-.5deg); } }
  @keyframes photo-light { from { transform: translateX(-80%); opacity: 0; } 40%, 60% { opacity: 1; } to { transform: translateX(80%); opacity: 0; } }
  @keyframes photo-grain { to { transform: translate(2%, -2%); } }
  @keyframes photo-focus { from { filter: blur(1.5px); transform: scale(1.035); } to { filter: blur(0); transform: scale(1.015); } }
  @keyframes photo-drift { from { transform: scale(1.08) translateX(-2%); } to { transform: scale(1.08) translateX(2%); } }
  @keyframes photo-exposure { from { filter: brightness(.6) contrast(1.15); } to { filter: brightness(1.06) contrast(1); } }
}

@layer holyline-loader {
  .hl-loader--reveal { display: block; padding: 0; overflow: hidden; background: transparent; opacity: 1; }
  .hl-loader--reveal.hl-loader--leaving { opacity: 0; }
  .hl-loader--reveal .hl-loader__mosaic { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; }
  .hl-loader--reveal .hl-loader__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .hl-loader--reveal.hl-loader--still { background: var(--hl-paper); }
}

@layer holyline-loader {
  .hl-photo__raster { opacity: 0; image-rendering: pixelated; }
  .hl-photo[data-dithered] .hl-photo__raster { opacity: 1; }
  .hl-photo[data-dithered] .hl-photo__source { opacity: 0; }
}

/* First-paint cover exists before deferred page behavior starts. */
html::before { content: ""; position: fixed; inset: 0; z-index: 10001; background: #f3f2ee; opacity: 0; pointer-events: none; }
html.hl-booting::before { opacity: 1; pointer-events: auto; }
html.hl-navigating::before { opacity: 1; pointer-events: auto; transition: opacity 220ms ease; }
@media (prefers-reduced-motion: reduce) { html.hl-navigating::before { transition: none; } }