/* ==== 01_fonts_tokens.css ==== */
/* ==========================================================================
Darclight Productions — presentation layer (hand-written, no build step)
Loaded after the app stylesheet so it always wins.
Palette is locked: black #020100, panel #0a0900, gold #D6B06A,
light gold #E7C88A, muted gold, cream #F7F5F0, hairlines #1a1508 / #2A2418.
========================================================================== */
/* ---------- Self-hosted type. No CDN, no runtime font request. ---------- */
@font-face{
font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;
font-display:swap;
src:url("/assets/fonts/cormorant-garamond-400-latin-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;
font-display:swap;
src:url("/assets/fonts/cormorant-garamond-400-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:"Cormorant Garamond";font-style:italic;font-weight:300 700;
font-display:swap;
src:url("/assets/fonts/cormorant-garamond-400i-latin-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;
font-display:swap;
src:url("/assets/fonts/cormorant-garamond-400i-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:400 700;
font-display:swap;
src:url("/assets/fonts/lora-400-latin-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:"Lora";font-style:normal;font-weight:400 700;
font-display:swap;
src:url("/assets/fonts/lora-400-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("/assets/fonts/lora-400i-latin-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:"Lora";font-style:italic;font-weight:400;
font-display:swap;
src:url("/assets/fonts/lora-400i-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;
}
/* ---------- Tokens ---------- */
:root{
--dl-black:#020100;
--dl-panel:#0a0900;
--dl-panel-lift:#0d0b05;
--dl-gold:#D6B06A;
--dl-gold-lt:#E7C88A;
--dl-gold-mut:#B5A585; /* lifted from #9A8A6A: 8.1:1 on black */
--dl-cream:#F7F5F0;
--dl-line:#1a1508;
--dl-line-2:#2A2418;
--dl-maxw:1280px;
--dl-gutter:clamp(1.5rem,5vw,4rem);
--dl-rhythm:clamp(5rem,9vw,8rem);
--dl-ease:cubic-bezier(.22,.75,.2,1);
--dl-slow:900ms;
}
/* ---------- Base ---------- */
html{-webkit-text-size-adjust:100%;}
body{
background:var(--dl-black);
color:var(--dl-cream);
font-family:"Lora",Georgia,serif;
font-synthesis-weight:none;
text-rendering:optimizeLegibility;
}
body,body *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
::selection{background:var(--dl-gold);color:#000;}
/* Headings: keep the serif voice, tighten the tracking, open the leading. */
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,serif;font-synthesis:none;}
/* Visible focus ring in gold, keyboard only. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--dl-gold);
outline-offset:3px;
border-radius:2px;
}
/* Kill the leftover builder artefacts: empty dashed image slots on credits/projects. */
#app .border-dashed{border-style:none;}
/* Respect reduced motion everywhere, including the app's own transitions. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
/* ==== 02_header_hero.css ==== */
/* ---------- Header ------------------------------------------------------- */
#app header{
padding-top:env(safe-area-inset-top,0px);
transition:background-color 700ms var(--dl-ease),border-color 700ms var(--dl-ease),backdrop-filter 700ms var(--dl-ease);
}
#app header > div{max-width:var(--dl-maxw);}
/* Remove the boxed "DP" builder mark. Both marks are React-owned, so they are
hidden rather than deleted; the header keeps a deliberate wordmark instead of
an empty gap. */
#app header a[href="/"] > div:first-child{
display:none !important;
}
/* Scoped to the brand link only. A bare `header a::before` also decorated
every nav link, which printed DARCLIGHT eight times across the bar. */
#app header a[href="/"]{
position:relative;
padding-left:0;
min-height:44px;
align-items:center;
gap:0;
}
/* Compact outlined primary mark: DP badge and two-line studio name.
The generated-content alternative preserves the brand link's accessible name. */
#app header a[href="/"]::before{
content:"" / "Darclight Productions";
display:block;
width:clamp(160px,14vw,196px);
aspect-ratio:702/138;
background:url("/assets/dl-brand-header.svg") no-repeat left center;
background-size:contain;
}
/* The React wordmark beside the box duplicates the CSS one at xl+. Hide it. */
#app header a[href="/"] > span.hidden{
display:none !important;
}
#app header a[href="/"]::before{transition:color 700ms var(--dl-ease);}
#app header a[href="/"]:hover::before{color:var(--dl-gold-lt);}
#app header nav a{
color:var(--dl-gold-mut);
font-family:"Lora",Georgia,serif;
font-weight:500;
transition:color 700ms var(--dl-ease);
}
#app header nav a:hover{color:var(--dl-gold-lt);}
#app header nav a[href="/investors"]{
color:var(--dl-gold);
border-color:rgba(214,176,106,.35);
}
/* Menu button: real 44px target, no layout jump. */
/* Menu button: real 44px target, no layout jump. Scoped below lg only — an
unscoped display value here overrode Tailwind's lg:hidden and left the
hamburger sitting next to the desktop nav. */
@media (max-width:1023.98px){
#app header button[aria-label="Toggle menu"]{
min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
margin-right:-10px;
}
}
/* Mobile drawer: a full-height sheet, not a dropdown that stops halfway down
the screen with the page showing underneath. It is pinned to the bottom of
the viewport so there is no gap, and the menu ends at the last item. */
#app header .lg\:hidden.bg-\[\#020100\]\/98{
background:#020100 !important;
border-top:1px solid var(--dl-line);
box-shadow:0 24px 60px rgba(0,0,0,.7);
position:fixed !important;
top:80px;left:0;right:0;bottom:0;
height:auto !important;
max-height:none !important;
overflow-y:auto;
overscroll-behavior:contain;
}
#app header .lg\:hidden.bg-\[\#020100\]\/98 nav{padding:1.25rem 1.5rem 2rem;}
#app header .lg\:hidden.bg-\[\#020100\]\/98 nav a{
min-height:44px;display:flex;align-items:center;
border-bottom:1px solid var(--dl-line);
font-size:11px;letter-spacing:.24em;
}
/* ---------- Hero -------------------------------------------------------- */
/* Desktop: an asymmetric two-column hero. A tall portrait panel occupies the
right 45% as a solid vertical presence, and the copy sits in a left column
that ends before the portrait begins — so no type can ever cross the face.
Mobile: the same idea stacked, portrait on top, copy beneath it.
The photograph is a real ![]()
(a ::before background cannot be cropped to a
panel), so it is emitted in the markup after #app and absolutely positioned;
the React hero section is then pulled back underneath the type layer. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type{
background-color:var(--dl-black);
min-height:100svh;
align-items:flex-end !important;
justify-content:flex-start !important;
padding:0;
overflow:hidden;
}
/* Decorative React layers: the hairline beam, glow, dots and the DP lozenge all
read as template chrome. Removed so the photograph carries the drama. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.absolute.inset-0{
display:none !important;
}
/* The old DP lozenge is gone from the markup: that wrapper now carries the
client's supplied wordmark, so hiding it would hide the logo. The rule is
kept only for a wrapper that still holds the drawn badge (a DIV child),
never the ![]()
. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.justify-center.mb-10:has(> div){
display:none !important;
}
/* Copy column: left, bottom-anchored, never wider than the space left of the
portrait. At 1440 this is 52% of the viewport, which keeps the 132px wordmark
off the subject entirely. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative{
position:relative;z-index:2;
width:100%;max-width:var(--dl-maxw);
margin:0 auto;
padding:clamp(6.5rem,14vh,9rem) var(--dl-gutter) clamp(3rem,7vh,5rem);
text-align:left;
display:flex;flex-direction:column;justify-content:flex-end;
min-height:100svh;
}
@media (min-width:900px){
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative{
padding-right:calc(var(--dl-maxw) * .48);
}
}
/* Eyebrow lives above the wordmark as a gold label, not a floating chip. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative::before{
content:var(--dl-hero-eyebrow,"Independent Film \0026 Television");
display:block;
font-family:"Lora",Georgia,serif;
font-size:10.5px;font-weight:500;
letter-spacing:.34em;text-transform:uppercase;
color:var(--dl-gold);
margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
/* The wordmark: the largest thing on the page, tight, two stacked lines. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type h1{
font-family:"Cormorant Garamond",Georgia,serif !important;
font-size:clamp(3rem,9vw,8.6rem) !important; /* 48 → 138px */
font-weight:600 !important;
line-height:.86 !important;
letter-spacing:-.022em !important;
color:var(--dl-cream);
text-align:left;
margin:0 0 clamp(1.1rem,2vw,1.6rem) 0;
max-width:100%;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type h1 span{
display:block;
color:var(--dl-gold);
font-weight:500;
letter-spacing:-.022em;
line-height:.9;
}
/* Tagline: italic Cormorant, wide-tracked, restrained. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type p{
font-family:"Cormorant Garamond",Georgia,serif !important;
font-style:italic !important;
font-weight:400 !important;
font-size:clamp(1.05rem,1.55vw,1.5rem) !important;
line-height:1.35 !important;
letter-spacing:.12em !important;
text-transform:none !important;
color:var(--dl-gold-lt) !important;
max-width:30ch;
margin:0 0 clamp(2rem,4vw,3rem) 0;
}
/* One accent flourish: a short gold hairline with a diamond. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.items-center.justify-center{
display:flex !important;
justify-content:flex-start !important;
gap:.8rem !important;
margin:clamp(1.4rem,2.6vw,2rem) 0 clamp(1.6rem,3vw,2.4rem) !important;
transform:none !important;
opacity:1 !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.items-center.justify-center > div:first-child{
width:clamp(2.5rem,5vw,4rem) !important;
height:1px !important;
background:var(--dl-gold) !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.items-center.justify-center > div:last-child{
width:5px !important;height:5px !important;
background:var(--dl-gold) !important;
transform:rotate(45deg) !important;
}
/* CTAs: one solid gold, one hairline outline. 52px tall. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.flex-col{
flex-direction:row !important;
justify-content:flex-start !important;
gap:.85rem !important;
opacity:1 !important;transform:none !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#credits"],
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#projects"]{
display:inline-flex;align-items:center;justify-content:center;
min-height:52px;padding:0 2.1rem;
font-family:"Lora",Georgia,serif !important;
font-size:10.5px !important;font-weight:500 !important;
letter-spacing:.26em !important;text-transform:uppercase;
border-radius:0;
transition:background-color 700ms var(--dl-ease),color 700ms var(--dl-ease),border-color 700ms var(--dl-ease);
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#projects"]{
background:var(--dl-gold) !important;
border:1px solid var(--dl-gold) !important;
color:#020100 !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#projects"]:hover{
background:var(--dl-gold-lt) !important;border-color:var(--dl-gold-lt) !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#credits"]{
background:transparent !important;
border:1px solid rgba(214,176,106,.5) !important;
color:var(--dl-gold) !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type a[href="/#credits"]:hover{
border-color:var(--dl-gold) !important;color:var(--dl-cream) !important;
}
/* Scroll cue removed: it duplicated the CTAs and cluttered the plate. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.absolute.bottom-10{
display:none !important;
}
/* The legacy `landing-hero-v1` block painted hero.jpg as a ::before background
on this same React section. The v3 plate is a real ![]()
in the same place,
so both were painting the same photograph at different crops — the top of the
head from the ![]()
, then the torso again from the background. That is the
doubling. One photograph, once: the background copy goes. */
body.dl-home #app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type::before{
display:none !important;
background-image:none !important;
}
/* The React section carried its own background copy of the photograph, set to
cover, under four stacked scrims. That copy is cropped by definition and it
sat behind the real plate, so the page showed two different versions of the
same frame. The photograph now appears once, whole, in the plate. */
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type::before{
background-image:none !important;
background-color:var(--dl-black);
}
/* ---- The portrait plate ------------------------------------------------ */
/* Emitted in the markup after #app as a real ![]()
, pinned to the top of the
document (the home hero is the first thing on the page), behind the copy
layer, and inert to pointer events. The photograph is never cropped: its own
1198x1933 proportions decide the plate's shape at every width. */
:root{--dl-plate:48%;--dl-plate-h:calc(100vw * 1.61352);--dl-plate-inset:80px;}
.dl-hero{
position:absolute;
top:0;left:0;
width:100%;
height:100svh;
z-index:0;
pointer-events:none;
overflow:hidden;
}
/* The plate is sized FROM the photograph, not the other way round: its height
is the space between the header and the bottom of the viewport, and its width
is whatever that height implies for a 1198x1933 frame. So the whole portrait
is always on screen at its true proportions. Nothing is cropped, top or
bottom. 1198/1933 = 0.61976. */
.dl-hero__plate{
position:absolute;
top:var(--dl-plate-inset);right:0;bottom:auto;
height:calc(100svh - var(--dl-plate-inset));
aspect-ratio:1198/1933;
width:auto;
margin:0;
}
.dl-hero__plate img{
position:relative;z-index:0;
display:block;
/* The photograph renders at its true aspect and is anchored to the top of the
plate, which clips the excess below. object-fit:cover was cropping the top
of the frame — exactly where his crown sits — so it is gone: the top edge of
the photograph is always the top edge of the plate. */
width:100%;height:auto;max-width:none;
filter:saturate(1.02) contrast(1.03);
}
/* The source photograph was shot with the crown of his head on the very top
row — there is no wall above it to show. Rather than invent pixels, the
photograph's own top edge dissolves into the plate: the crop stops reading
as a cut and the crown sits in black, which is what "headroom" looks like
here. Same trick at the bottom, so the plate has no hard edge anywhere. */
/* No top fade any more: the photograph carries its own wall above the crown,
so a clean top edge against the black header is correct. */
/* One soft left edge so the photograph dissolves into the black plate rather
than ending on a hard seam. No glow, no vignette. */
/* No wash over the photograph. A gradient across the left of the frame was
still wiping out more than half of the picture, which reads as a crop even
when the geometry is honest. The frame is shown whole, and a hairline rule
marks its edge the way a framed print would. */
.dl-hero__plate::after{
content:"";position:absolute;inset:0;
box-shadow:inset 0 0 0 1px rgba(214,176,106,.20);
pointer-events:none;
}
@media (max-width:899px){
/* Stacked: portrait band on top, copy beneath it, face clear of all type. */
/* Full width, and as tall as the photograph actually is. A phone gets the
entire portrait — head, suit, hands — with no crop at all. The copy sits
underneath it, so nothing is ever cut to make room for a button.
100vw * (1933/1198) is exactly the height that width implies. */
/* The band height is whatever the full-width photograph implies, but it is
never allowed to run past the bottom of the viewport: on a tablet, where a
full-width portrait would be far taller than the screen, the plate stops at
the fold and centres itself instead of spilling off the page. */
:root{--dl-plate-h:min(calc(100vw * 1.61352), calc(100svh - var(--dl-plate-inset)));--dl-plate-inset:80px;}
.dl-hero{
height:auto;
overflow:visible;
}
.dl-hero__plate{
top:var(--dl-plate-inset);
left:0;right:0;
width:100%;
height:auto;
aspect-ratio:auto;
margin-inline:auto;
}
/* No fade at all on a phone. The photograph runs to its own bottom edge and
stops dead there. A gradient read as the picture dissolving into the page,
which is exactly what "cut off" looked like. */
.dl-hero__plate::after{
background:none;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type{
min-height:0;
align-items:stretch !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative{
min-height:0;
padding-top:calc(var(--dl-plate-inset) + var(--dl-plate-h) + clamp(1.5rem,4vw,2.25rem)) !important;
padding-bottom:clamp(2.75rem,7vw,3.5rem) !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type h1{
font-size:clamp(2.6rem,13vw,4rem) !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type p{
font-size:clamp(.95rem,3.6vw,1.1rem) !important;
letter-spacing:.1em !important;
max-width:26ch;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.flex-col a{
flex:1 1 auto;
padding:0 1.1rem !important;
font-size:9.5px !important;
letter-spacing:.2em !important;
}
}
/* Tablets sit between the two cases: a full-width photograph would be taller
than the screen and push every word below it. The picture is narrowed instead
of cropped, so it is still whole and the headline stays above the fold. */
@media (min-width:600px) and (max-width:899px){
:root{--dl-plate-h:calc(min(100vw * 1.61352, 62svh));}
.dl-hero__plate{
width:calc(var(--dl-plate-h) * 0.61976);
}
}
/* Landscape phones are the awkward case: only ~320px of usable height, so a
full-width portrait would run far past the screen and a centred one shrinks
to a stamp. Here the portrait goes back to the right-hand column, full
height, and the copy sits beside it — the same shape as desktop. */
@media (max-width:899px) and (max-height:540px){
:root{--dl-plate-inset:64px;}
.dl-hero{
height:100svh;
overflow:hidden;
}
.dl-hero__plate{
left:auto;right:0;margin:0;
width:auto;
height:calc(100svh - var(--dl-plate-inset));
aspect-ratio:1198/1933;
}
.dl-hero__plate::after{background:none;}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type{
min-height:100svh;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative{
padding-top:calc(var(--dl-plate-inset) + 1.5rem) !important;
padding-bottom:2rem !important;
max-width:62% !important;
text-align:left !important;
margin-right:auto !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type h1{
font-size:clamp(1.9rem,5.2vw,2.8rem) !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type p{
font-size:.82rem !important;
margin-bottom:1.5rem !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative > div.flex.flex-col{
flex-direction:row !important;
justify-content:flex-start !important;
}
}
/* ---------- Cookie banner ----------------------------------------------- */
/* The GoDaddy consent bar ships white with a grey paragraph and a blue "Learn
more" link — the single brightest element on the site. Re-skinned to the
palette so it reads as part of the studio, not as a third-party widget. */
div.fixed.bottom-0[role="alertdialog"]{
background:var(--dl-panel) !important;
border-top:1px solid rgba(214,176,106,.35) !important;
border-bottom:0 !important;
box-shadow:none !important;
color:var(--dl-gold-mut) !important;
}
div.fixed.bottom-0[role="alertdialog"] *{font-family:"Lora",Georgia,serif !important;}
div.fixed.bottom-0[role="alertdialog"] h2,
div.fixed.bottom-0[role="alertdialog"] h3{
font-family:"Cormorant Garamond",Georgia,serif !important;
color:var(--dl-cream) !important;
font-weight:600 !important;
font-size:1.05rem !important;
letter-spacing:.02em;
}
div.fixed.bottom-0[role="alertdialog"] p{color:var(--dl-gold-mut) !important;font-size:11.5px !important;line-height:1.6 !important;}
div.fixed.bottom-0[role="alertdialog"] a{
color:var(--dl-gold) !important;
text-decoration:underline;text-underline-offset:3px;
background:none !important;
}
div.fixed.bottom-0[role="alertdialog"] a:hover{color:var(--dl-gold-lt) !important;}
div.fixed.bottom-0[role="alertdialog"] button{
border-radius:0 !important;
min-height:44px;
padding:0 1.6rem !important;
font-family:"Lora",Georgia,serif !important;
font-size:10px !important;font-weight:500 !important;
letter-spacing:.22em !important;text-transform:uppercase;
transition:background-color 700ms var(--dl-ease),color 700ms var(--dl-ease),border-color 700ms var(--dl-ease) !important;
}
div.fixed.bottom-0[role="alertdialog"] button:first-of-type{
background:var(--dl-gold) !important;
border:1px solid var(--dl-gold) !important;
color:#020100 !important;
}
div.fixed.bottom-0[role="alertdialog"] button:first-of-type:hover{background:var(--dl-gold-lt) !important;}
div.fixed.bottom-0[role="alertdialog"] button:last-of-type{
background:transparent !important;
border:1px solid rgba(214,176,106,.45) !important;
color:var(--dl-gold) !important;
}
div.fixed.bottom-0[role="alertdialog"] button:last-of-type:hover{border-color:var(--dl-gold) !important;color:var(--dl-cream) !important;}
/* On phones the consent bar is 208px tall — a quarter of the screen — and it
covers the hero CTAs. Tighten it, and reserve room above it in the hero. */
@media (max-width:600px){
div.fixed.bottom-0[role="alertdialog"] > div{padding:.85rem 1.1rem .9rem !important;}
div.fixed.bottom-0[role="alertdialog"] h3{font-size:.95rem !important;margin-bottom:.3rem !important;}
/* The consent paragraph is boilerplate; two lines is enough on a phone and
keeps the bar from eating a quarter of the viewport. */
div.fixed.bottom-0[role="alertdialog"] p{
font-size:10.5px !important;line-height:1.5 !important;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
div.fixed.bottom-0[role="alertdialog"] button{
flex:1 1 0;min-height:44px;padding:0 .5rem !important;font-size:9px !important;letter-spacing:.16em !important;
}
#app > div.min-h-screen > section.relative.min-h-screen.bg-black.flex.items-center.justify-center.overflow-hidden:first-of-type > div.relative{
/* Let the hero be content-height on phones instead of a forced full
viewport: that keeps the CTAs clear of the consent bar on short screens
(360x800) as well as tall ones. */
padding-bottom:clamp(2.5rem,6vw,3.25rem) !important;
min-height:0 !important;
}
}
/* ==== 03_pages.css ==== */
/* ---------- Interior page rhythm --------------------------------------- */
/* Every route shares the same two React sections: a PageHero and a body.
These rules give them a consistent measure, vertical rhythm and type scale. */
#app section.relative.pt-40{
padding-top:clamp(8rem,15vh,11rem) !important;
padding-bottom:clamp(3.5rem,7vw,5.5rem) !important;
}
#app section.relative.pt-40 > div{max-width:var(--dl-maxw);}
#app section.relative.pt-40 h1{
font-family:"Cormorant Garamond",Georgia,serif !important;
font-size:clamp(2.6rem,6.6vw,5rem) !important;
font-weight:600 !important;
line-height:1.02 !important;
letter-spacing:.005em !important;
color:var(--dl-cream);
}
#app section.relative.pt-40 p:first-child,
#app section.relative.pt-40 > div > div > p:first-child{
font-family:"Lora",Georgia,serif;
font-size:10.5px !important;
letter-spacing:.34em !important;
color:var(--dl-gold) !important;
}
/* The little rule-and-diamond under each page title. */
#app section.relative.pt-40 div.h-px.w-16{width:3.5rem;}
#app section.relative.pt-40 p.text-\[\#9A8A6A\]{
font-family:"Cormorant Garamond",Georgia,serif;
font-style:italic;
font-size:1.05rem !important;
letter-spacing:.02em !important;
color:var(--dl-gold-mut) !important;
}
/* Body sections: consistent gutters and vertical air. */
#app section.bg-\[\#020100\]{
padding-left:var(--dl-gutter) !important;
padding-right:var(--dl-gutter) !important;
padding-top:clamp(3rem,6vw,5rem) !important;
padding-bottom:clamp(4.5rem,8vw,7rem) !important;
}
#app section.bg-\[\#020100\] > div{max-width:var(--dl-maxw);}
/* Eyebrows used across routes ("Our Philosophy", "Darclight Originals"...). */
#app p.text-\[\#D6B06A\].text-xs.tracking-\[0\.4em\]{
font-family:"Lora",Georgia,serif;font-size:10.5px;letter-spacing:.34em;
}
/* Body copy: readable measure, softer than pure cream, but still AA. */
#app .text-\[\#9A8A6A\]{color:var(--dl-gold-mut) !important;}
#app p.text-\[\#9A8A6A\].leading-relaxed,
#app div.flex.flex-col.gap-5 p,
#app div.flex.flex-col.gap-6 p{
max-width:66ch;
line-height:1.85;
font-size:.95rem;
}
/* Section openers get the serif headline scale from the brief. */
#app h2.text-3xl{
font-size:clamp(1.9rem,3.4vw,2.75rem) !important;
letter-spacing:.01em;
line-height:1.1;
}
/* ---------- About: pull-quote, portrait, philosophy -------------------- */
body.dl-about #app section.bg-\[\#020100\] > div > div:first-child{
position:relative;
max-width:52ch;
padding-left:clamp(1.5rem,3vw,2.75rem);
border-left:1px solid rgba(214,176,106,.35);
}
body.dl-about #app blockquote{font-style:italic;}
/* ---------- Darcas Macopson: the name is the hero --------------------- */
body.dl-darcas #app section.relative.pt-40{
padding-top:clamp(9rem,17vh,12rem) !important;
padding-bottom:clamp(2.5rem,5vw,4rem) !important;
}
body.dl-darcas #app section.relative.pt-40 h1{
font-size:clamp(3rem,11.4vw,9rem) !important;
line-height:.9 !important;
letter-spacing:-.015em !important;
font-weight:500 !important;
/* The name set as a two-line graphic, not a line of text. Narrow measure
forces the break; the size carries the page. */
max-width:9ch !important;
color:var(--dl-cream) !important;
}
body.dl-darcas #app section.relative.pt-40 p.text-\[\#9A8A6A\]{
font-size:clamp(1rem,2vw,1.35rem) !important;
letter-spacing:.06em !important;
}
/* Portrait plate: generous margin, thin frame, no clutter. */
body.dl-darcas #app .aspect-\[3\/4\]{
border:1px solid rgba(214,176,106,.28) !important;
}
body.dl-darcas #app .aspect-\[3\/4\] .absolute.-inset-3{
border-color:rgba(214,176,106,.10) !important;
inset:-12px !important;
}
body.dl-darcas #app img{filter:saturate(.96) contrast(1.03);}
/* Pull-quote on the founder page. */
body.dl-darcas #app .border-\[\#D6B06A\]\/20{background:#080701 !important;}
body.dl-darcas #app .border-\[\#D6B06A\]\/20 p.text-2xl{
font-size:clamp(1.4rem,2.6vw,2rem) !important;
line-height:1.35 !important;
letter-spacing:.005em;
}
/* "At a Glance" plate: quieter, tighter. */
body.dl-darcas #app .border-\[\#1a1508\].p-8{background:var(--dl-panel) !important;}
body.dl-darcas #app .border-\[\#1a1508\].p-8 p.text-\[10px\]{color:var(--dl-gold);opacity:.85;}
/* ---------- Credits / Projects / Press / Contact: rebuilt bodies ------- */
/* The React bodies on these four routes carried fabricated or broken content,
so they are hidden and replaced with markup appended after #app. */
body.dl-credits #app section.bg-\[\#020100\],
body.dl-projects #app section.bg-\[\#020100\],
body.dl-press #app section.bg-\[\#020100\],
body.dl-contact #app section.bg-\[\#020100\],
body.dl-investors #app div.min-h-screen.bg-black{
display:none !important;
}
/* ---------- Small-screen overflow guards ------------------------------ */
@media (max-width:420px){
#app section.bg-\[\#020100\]{padding-left:1.25rem !important;padding-right:1.25rem !important;}
#app .grid-cols-3{gap:1rem !important;}
/* The React three-up stat grid keeps a min-content floor on its columns and
pushed the /about document 10px wider than the viewport. minmax(0,1fr)
lets the tracks shrink; the clip is the belt-and-braces. */
body.dl-about #app .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
html{overflow-x:clip;}
body{overflow-x:clip;}
}
/* ---------- Single footer / no orphan wrapper height ------------------- */
/* The React footer duplicates the rebuilt footer on every route, and on the
four rebuilt routes the hidden body left the flex wrapper holding a
full-viewport min-height, which read as a large blank band. */
#app footer.bg-black.border-t{border-top:0 !important;}
body.dl-home #app footer.bg-black.border-t,
body.dl-about #app footer.bg-black.border-t,
body.dl-credits #app footer.bg-black.border-t,
body.dl-projects #app footer.bg-black.border-t,
body.dl-press #app footer.bg-black.border-t,
body.dl-contact #app footer.bg-black.border-t,
body.dl-investors #app footer.bg-black.border-t,
body.dl-darcas #app footer.bg-black.border-t{
display:none !important;
}
body.dl-credits #app > div.min-h-screen,
body.dl-projects #app > div.min-h-screen,
body.dl-press #app > div.min-h-screen,
body.dl-contact #app > div.min-h-screen,
body.dl-investors #app > div.min-h-screen{
min-height:0 !important;
}
/* Home: the React "Explore" index and its closing band are replaced by the
editorial sections appended after #app. */
body.dl-home #app > div.min-h-screen > section.bg-\[\#020100\]{
display:none !important;
}
/* Keep the rebuilt markup sitting directly under the React hero. */
body.dl-home #app > div.min-h-screen{min-height:0 !important;}
/* ---------- Mastheads on the rebuilt routes ---------------------------- */
/* These routes have no React hero (their bodies are replaced wholesale), so the
page needs its own masthead: eyebrow, oversized serif h1, one line of copy. */
.dl-mast{
background:var(--dl-black);
padding-top:clamp(8.5rem,16vh,11.5rem);
padding-bottom:clamp(1.75rem,3.5vw,2.75rem);
border-bottom:1px solid var(--dl-line);
}
.dl-mast .dl-rule{margin-bottom:clamp(1.75rem,3.5vw,2.5rem);}
.dl-mast__title{
font-family:"Cormorant Garamond",Georgia,serif;
font-weight:600;
font-size:clamp(3.4rem,10.5vw,8rem);
line-height:.9;
letter-spacing:-.018em;
color:var(--dl-cream);
margin:1rem 0 0;
max-width:18ch;
}
.dl-mast__sub{
margin:clamp(1.25rem,2.5vw,1.9rem) 0 0;
max-width:52ch;
font-family:"Lora",Georgia,serif;
font-size:clamp(.95rem,1.2vw,1.06rem);
line-height:1.75;
color:var(--dl-gold-mut);
}
@media (max-width:600px){
.dl-mast__title{font-size:clamp(2.9rem,13.5vw,4.2rem);}
}
/* ==== 04_components.css ==== */
/* ==========================================================================
Editorial components. Everything below builds the sections that live
outside #app, so React never reconciles them.
========================================================================== */
.dl-wrap{width:100%;max-width:var(--dl-maxw);margin:0 auto;padding:0 var(--dl-gutter);}
.dl-sec{position:relative;padding:clamp(4.5rem,9vw,8rem) 0;background:var(--dl-black);}
.dl-sec--tight{padding:clamp(3rem,6vw,5rem) 0;}
.dl-sec--panel{background:var(--dl-panel);}
.dl-sec > .dl-wrap{position:relative;}
/* One accent flourish per section: a hairline with a small diamond. */
.dl-rule{display:flex;align-items:center;gap:.9rem;margin:0 0 clamp(2rem,4vw,3rem);}
.dl-rule::before{content:"";display:block;width:clamp(2.5rem,6vw,4.5rem);height:1px;background:var(--dl-gold);}
.dl-rule::after{content:"";display:block;width:5px;height:5px;background:var(--dl-gold);transform:rotate(45deg);flex:none;}
.dl-rule--center{justify-content:center;}
.dl-rule--center::before{background:linear-gradient(to right,rgba(214,176,106,0),var(--dl-gold));}
.dl-rule--center::after{order:2;}
.dl-rule--center > span{display:block;width:clamp(2.5rem,6vw,4.5rem);height:1px;background:linear-gradient(to left,rgba(214,176,106,0),var(--dl-gold));order:3;}
.dl-eyebrow{
margin:0 0 .9rem;color:var(--dl-gold);
font-family:"Lora",Georgia,serif;font-size:10.5px;font-weight:500;
letter-spacing:.34em;text-transform:uppercase;line-height:1.5;
}
.dl-h2{
margin:0 0 1.25rem;color:var(--dl-cream);
font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.02;letter-spacing:.005em;
text-wrap:balance;
}
.dl-h2 em{font-style:italic;color:var(--dl-gold-lt);font-weight:500;}
.dl-h3{
margin:0 0 .6rem;color:var(--dl-cream);
font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15;
}
.dl-lede{
margin:0;color:var(--dl-gold-mut);
font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.6;max-width:46ch;
}
.dl-body{
margin:0;color:var(--dl-gold-mut);font-size:.95rem;line-height:1.85;max-width:64ch;
}
.dl-body + .dl-body{margin-top:1.05rem;}
/* ---------- Statement --------------------------------------------------- */
.dl-statement{padding:clamp(5rem,10vw,9rem) 0;background:var(--dl-black);border-top:1px solid var(--dl-line);}
.dl-statement__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.dl-statement__line{
margin:0;color:var(--dl-cream);
font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.16;letter-spacing:.002em;
max-width:30ch;text-wrap:balance;
}
.dl-statement__line em{font-style:italic;color:var(--dl-gold-lt);}
.dl-statement__side{border-left:1px solid rgba(214,176,106,.28);padding-left:clamp(1.25rem,2.5vw,2rem);}
.dl-statement__side p{margin:0;color:var(--dl-gold-mut);font-size:.92rem;line-height:1.9;max-width:34ch;}
.dl-statement__sig{
margin-top:1.5rem;display:flex;align-items:center;gap:.75rem;
color:var(--dl-gold);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
font-family:"Lora",Georgia,serif;
}
.dl-statement__sig::before{content:"";width:26px;height:1px;background:var(--dl-gold);display:block;}
@media (min-width:900px){
.dl-statement__grid{grid-template-columns:1.45fr .55fr;}
}
/* ---------- Stats strip ------------------------------------------------- */
.dl-stats{
display:grid;grid-template-columns:repeat(2,1fr);
border-top:1px solid var(--dl-line);border-bottom:1px solid var(--dl-line);
}
.dl-stats__item{
padding:clamp(1.5rem,3vw,2.4rem) clamp(.5rem,2vw,1.5rem);
border-right:1px solid var(--dl-line);
}
.dl-stats__item:last-child{border-right:0;}
.dl-stats__n{
display:block;color:var(--dl-gold);
font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.01em;
}
.dl-stats__n sup{font-size:.45em;vertical-align:super;font-weight:400;letter-spacing:0;color:var(--dl-gold);}
.dl-stats__l{
display:block;margin-top:.7rem;color:var(--dl-gold-mut);
font-family:"Lora",Georgia,serif;font-size:9.5px;font-weight:500;
letter-spacing:.24em;text-transform:uppercase;line-height:1.7;
}
@media (min-width:760px){
.dl-stats{grid-template-columns:repeat(4,1fr);}
.dl-stats--3{grid-template-columns:repeat(3,1fr);}
}
/* ---------- Founder plate ---------------------------------------------- */
.dl-founder{border-top:1px solid var(--dl-line);background:var(--dl-black);}
.dl-founder__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
.dl-founder__plate{position:relative;}
.dl-founder__plate img{
display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;
border:1px solid rgba(214,176,106,.26);filter:saturate(.97) contrast(1.02);
}
.dl-founder__plate::after{
content:"";position:absolute;inset:10px;border:1px solid rgba(214,176,106,.10);pointer-events:none;
}
.dl-founder__name{
margin:0 0 .85rem;color:var(--dl-cream);
font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
font-size:clamp(2.6rem,6.4vw,4.75rem);line-height:.94;letter-spacing:-.01em;
}
.dl-founder__role{
margin:0 0 1.5rem;color:var(--dl-gold);
font-family:"Lora",Georgia,serif;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
}
.dl-founder__quote{
margin:0 0 1.6rem;color:var(--dl-cream);
font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;
font-size:clamp(1.25rem,2.5vw,1.7rem);line-height:1.45;max-width:30ch;
}
.dl-founder__quote::before{content:"\201C";color:var(--dl-gold);}
.dl-founder__quote::after{content:"\201D";color:var(--dl-gold);}
.dl-link{
display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
color:var(--dl-gold);font-family:"Lora",Georgia,serif;
font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
text-decoration:none;border-bottom:1px solid rgba(214,176,106,.45);
padding-bottom:.35rem;
transition:color 700ms var(--dl-ease),border-color 700ms var(--dl-ease);
}
.dl-link::after{content:"\2192";font-size:1em;transition:transform 700ms var(--dl-ease);}
.dl-link:hover{color:var(--dl-gold-lt);border-bottom-color:var(--dl-gold-lt);}
.dl-link:hover::after{transform:translateX(4px);}
@media (min-width:900px){
.dl-founder__grid{grid-template-columns:.9fr 1.1fr;}
.dl-founder__plate{margin-left:clamp(0rem,1vw,1rem);}
}
/* ---------- Gallery ----------------------------------------------------- */
.dl-gallery{padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,6vw,5rem);background:var(--dl-black);border-top:1px solid var(--dl-line);}
.dl-gallery__head{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:end;margin-bottom:clamp(2rem,4vw,3rem);}
@media (min-width:820px){.dl-gallery__head{grid-template-columns:1fr auto;}}
.dl-gallery__count{
color:var(--dl-gold-mut);font-family:"Lora",Georgia,serif;
font-size:10px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;padding-bottom:.4rem;
}
.dl-grid{
display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(.5rem,1.1vw,.9rem);
grid-auto-flow:row dense;
}
.dl-grid__item{
position:relative;display:block;overflow:hidden;background:#070601;
border:1px solid transparent;
transition:border-color 700ms var(--dl-ease);
aspect-ratio:3/4;
}
.dl-grid__item img{
display:block;width:100%;height:100%;object-fit:cover;
transition:transform 900ms var(--dl-ease),opacity 700ms var(--dl-ease);
will-change:transform;
}
.dl-grid__item::after{
content:"";position:absolute;inset:0;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(214,176,106,0);
transition:box-shadow 700ms var(--dl-ease);
}
.dl-grid__item:hover,.dl-grid__item:focus-visible{border-color:rgba(214,176,106,.55);}
.dl-grid__item:hover img,.dl-grid__item:focus-visible img{transform:scale(1.035);}
.dl-grid__item:focus-visible{outline:2px solid var(--dl-gold);outline-offset:3px;}
/* The one feature frame: occupies two columns by two rows on wide screens,
full width on phones, and carries a quiet corner caption. */
.dl-grid__item--feature{grid-column:span 2;grid-row:span 1;aspect-ratio:3/4;}
.dl-grid__item--feature .dl-grid__cap{
position:absolute;left:0;bottom:0;right:0;
padding:1.5rem 1.25rem 1.1rem;
background:linear-gradient(to top,rgba(2,1,0,.92),rgba(2,1,0,0));
color:var(--dl-gold);font-family:"Lora",Georgia,serif;
font-size:9.5px;letter-spacing:.30em;text-transform:uppercase;text-align:left;
opacity:0;transform:translateY(6px);
transition:opacity 700ms var(--dl-ease),transform 700ms var(--dl-ease);
}
.dl-grid__item--feature:hover .dl-grid__cap,
.dl-grid__item--feature:focus-visible .dl-grid__cap{opacity:1;transform:none;}
/* Seven-frame set: two tall frames (two rows) beside the feature keeps every
breakpoint a full rectangle -- 2, 3 and 4 columns all close with no hole. */
.dl-grid__item--tall{grid-row:span 2;aspect-ratio:auto;}
.dl-grid__item--tall img{position:absolute;inset:0;}
@media (min-width:600px){.dl-grid__item--feature img{position:absolute;inset:0;}}
.dl-grid__item--bw img{filter:grayscale(1) contrast(1.04);}
.dl-grid__item--bw:hover img{filter:grayscale(1) contrast(1.06);}
@media (min-width:600px){
.dl-grid{grid-template-columns:repeat(3,1fr);}
.dl-grid__item--feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
}
@media (min-width:1080px){
.dl-grid{grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1vw,1rem);}
}
/* ---------- Slate / credits / press / contact blocks ------------------- */
.dl-filmo{border-top:1px solid var(--dl-line);}
.dl-filmo__row{
display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.25rem;
align-items:baseline;
padding:clamp(1.1rem,2.2vw,1.6rem) 0;
border-bottom:1px solid var(--dl-line);
transition:background-color 700ms var(--dl-ease);
}
.dl-filmo__yr{
color:var(--dl-gold);font-family:"Cormorant Garamond",Georgia,serif;
font-size:.95rem;letter-spacing:.12em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dl-filmo__title{
color:var(--dl-cream);font-family:"Cormorant Garamond",Georgia,serif;
font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;line-height:1.2;margin:0;
}
.dl-filmo__meta{
grid-column:2;color:var(--dl-gold-mut);font-size:.82rem;line-height:1.7;margin:.15rem 0 0;
}
.dl-filmo__row:hover{background:rgba(214,176,106,.035);}
@media (min-width:760px){
.dl-filmo__row{grid-template-columns:5.5rem 1fr 9rem;align-items:baseline;}
.dl-filmo__meta{grid-column:3;text-align:right;margin:0;}
}
.dl-slate{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.5rem);}
@media (min-width:840px){.dl-slate{grid-template-columns:repeat(2,1fr);}}
.dl-card{
position:relative;display:flex;flex-direction:column;
border:1px solid var(--dl-line);background:var(--dl-panel);
padding:clamp(1.75rem,3.5vw,2.75rem);
transition:border-color 700ms var(--dl-ease),background-color 700ms var(--dl-ease);
min-height:100%;
}
.dl-card:hover{border-color:rgba(214,176,106,.45);background:var(--dl-panel-lift);}
.dl-card--wide{grid-column:1 / -1;}
.dl-card__status{
align-self:flex-start;margin:0 0 1.4rem;
color:var(--dl-gold);font-family:"Lora",Georgia,serif;
font-size:9px;letter-spacing:.26em;text-transform:uppercase;
border:1px solid rgba(214,176,106,.35);padding:.45rem .8rem;
}
.dl-card__kind{
margin:0 0 .6rem;color:var(--dl-gold-mut);
font-family:"Lora",Georgia,serif;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
}
.dl-card__title{
margin:0 0 1rem;color:var(--dl-cream);
font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
font-size:clamp(1.9rem,4vw,3rem);line-height:.98;letter-spacing:-.005em;
text-transform:uppercase;
}
.dl-card__log{
margin:0 0 1.1rem;color:var(--dl-cream);
font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.5;max-width:40ch;
}
.dl-card__body{margin:0;color:var(--dl-gold-mut);font-size:.88rem;line-height:1.8;max-width:52ch;}
.dl-card__foot{
margin-top:auto;padding-top:1.5rem;display:flex;align-items:center;gap:.75rem;
color:var(--dl-gold-mut);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
}
.dl-card__foot::before{content:"";width:22px;height:1px;background:rgba(214,176,106,.5);}
.dl-two{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);}
@media (min-width:900px){.dl-two{grid-template-columns:1fr 1fr;}}
.dl-note{
border-left:1px solid rgba(214,176,106,.35);
padding:.15rem 0 .15rem clamp(1.1rem,2.2vw,1.75rem);
}
.dl-note p{margin:0;color:var(--dl-gold-mut);font-size:.9rem;line-height:1.85;max-width:52ch;}
.dl-note p + p{margin-top:.8rem;}
/* Press page: honest "no coverage yet" state, plus a real mailto EPK request. */
.dl-empty{
border:1px solid var(--dl-line);background:var(--dl-panel);
padding:clamp(1.75rem,3.5vw,2.75rem);
}
.dl-empty__t{margin:0 0 .75rem;color:var(--dl-cream);font-family:"Cormorant Garamond",Georgia,serif;font-size:1.35rem;font-weight:600;}
.dl-empty__p{margin:0 0 1.4rem;color:var(--dl-gold-mut);font-size:.9rem;line-height:1.85;max-width:52ch;}
/* Contact page: email as the primary action, no fake form. */
.dl-mail{
display:inline-block;margin:.4rem 0 0;
color:var(--dl-cream);text-decoration:none;
font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
font-size:clamp(1.5rem,4vw,2.6rem);line-height:1.15;letter-spacing:-.005em;
border-bottom:1px solid rgba(214,176,106,.4);
transition:color 700ms var(--dl-ease),border-color 700ms var(--dl-ease);
word-break:break-word;
}
.dl-mail:hover{color:var(--dl-gold-lt);border-bottom-color:var(--dl-gold-lt);}
.dl-facts{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--dl-line);}
.dl-facts__row{
display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline;
padding:1.1rem 0;border-bottom:1px solid var(--dl-line);
}
.dl-facts__k{color:var(--dl-gold);font-family:"Lora",Georgia,serif;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;}
.dl-facts__v{color:var(--dl-cream);font-size:.95rem;line-height:1.7;word-break:break-word;}
/* ---------- Closing band + footer -------------------------------------- */
.dl-close{
padding:clamp(4.5rem,9vw,7.5rem) 0;background:var(--dl-black);
border-top:1px solid var(--dl-line);text-align:center;
}
.dl-close__line{
margin:0 auto 1.1rem;max-width:24ch;color:var(--dl-cream);
font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;
font-size:clamp(1.9rem,4.6vw,3.25rem);line-height:1.15;text-wrap:balance;
}
.dl-close__sub{margin:0 auto clamp(1.75rem,3.5vw,2.5rem);max-width:44ch;color:var(--dl-gold-mut);font-size:.92rem;line-height:1.8;}
.dl-btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;}
.dl-btn{
display:inline-flex;align-items:center;justify-content:center;
min-height:52px;padding:0 clamp(1.5rem,3vw,2.4rem);
font-family:"Lora",Georgia,serif;font-size:10.5px;font-weight:500;
letter-spacing:.26em;text-transform:uppercase;text-decoration:none;
transition:background-color 700ms var(--dl-ease),color 700ms var(--dl-ease),border-color 700ms var(--dl-ease);
}
.dl-btn--solid{background:var(--dl-gold);border:1px solid var(--dl-gold);color:#0b0800;}
.dl-btn--solid:hover{background:var(--dl-gold-lt);border-color:var(--dl-gold-lt);}
.dl-btn--ghost{background:transparent;border:1px solid rgba(214,176,106,.45);color:var(--dl-gold);}
.dl-btn--ghost:hover{border-color:var(--dl-gold);background:rgba(214,176,106,.08);}
.dl-footer{background:#000;border-top:1px solid rgba(214,176,106,.35);}
.dl-footer__inner{padding:clamp(2.75rem,5vw,4rem) 0 1.5rem;}
.dl-footer__top{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);}
@media (min-width:820px){.dl-footer__top{grid-template-columns:1.4fr .6fr .6fr .8fr;}}
.dl-footer__mark{
margin:0 0 .8rem;color:var(--dl-cream);
font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
font-size:clamp(1.3rem,2.4vw,1.65rem);letter-spacing:.2em;text-transform:uppercase;
}
.dl-footer__pos{margin:0;color:var(--dl-gold-mut);font-size:.88rem;line-height:1.8;max-width:34ch;}
.dl-footer__h{
margin:0 0 1rem;color:var(--dl-gold);
font-family:"Lora",Georgia,serif;font-size:9.5px;font-weight:500;
letter-spacing:.28em;text-transform:uppercase;
}
.dl-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.dl-footer__list a{
color:var(--dl-gold-mut);text-decoration:none;font-size:.85rem;line-height:1.6;
display:inline-flex;align-items:center;min-height:44px;
transition:color 700ms var(--dl-ease);
}
.dl-footer__list{gap:.1rem;}
.dl-footer__list a:hover{color:var(--dl-gold-lt);}
.dl-footer__bottom{
margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;
border-top:1px solid var(--dl-line);
display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center;
}
.dl-footer__bottom p{margin:0;color:var(--dl-gold-mut);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;}
/* ---------- Lightbox ---------------------------------------------------- */
.dl-lb{
position:fixed;inset:0;z-index:9999;display:none;
background:rgba(2,1,0,.965);
padding:clamp(1rem,3vw,2.5rem);
}
.dl-lb[open],.dl-lb.is-open{display:flex;align-items:center;justify-content:center;}
.dl-lb__stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.dl-lb__img{
max-width:min(96vw,1100px);max-height:calc(100vh - 8rem);
width:auto;height:auto;display:block;
border:1px solid rgba(214,176,106,.45);
background:#070601;
}
.dl-lb__bar{
position:absolute;left:0;right:0;bottom:calc(1rem + env(safe-area-inset-bottom,0px));
display:flex;align-items:center;justify-content:center;gap:1.25rem;
pointer-events:none;
}
.dl-lb__count{
color:var(--dl-gold);font-family:"Lora",Georgia,serif;
font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
}
.dl-lb__btn{
pointer-events:auto;appearance:none;cursor:pointer;
width:52px;height:52px;min-width:52px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(10,9,0,.86);border:1px solid rgba(214,176,106,.4);
color:var(--dl-gold);font-size:17px;line-height:1;border-radius:0;
transition:background-color 700ms var(--dl-ease),color 700ms var(--dl-ease),border-color 700ms var(--dl-ease);
}
.dl-lb__btn:hover{background:rgba(214,176,106,.14);border-color:var(--dl-gold);color:var(--dl-gold-lt);}
.dl-lb__btn:focus-visible{outline:2px solid var(--dl-gold);outline-offset:3px;}
.dl-lb__close{position:absolute;top:0;right:0;}
.dl-lb__prev{position:absolute;left:0;top:50%;transform:translateY(-50%);}
.dl-lb__next{position:absolute;right:0;top:50%;transform:translateY(-50%);}
body.dl-lb-lock{overflow:hidden;}
@media (max-width:600px){
.dl-lb__img{max-height:calc(100vh - 10rem);}
.dl-lb__prev,.dl-lb__next{top:auto;bottom:0;transform:none;}
.dl-lb__bar{bottom:0;justify-content:space-between;}
}
/* ---------- Teasers (home, "The Company") ------------------------------ */
.dl-teasers{display:grid;grid-template-columns:1fr;border-top:1px solid var(--dl-line);}
@media (min-width:760px){.dl-teasers{grid-template-columns:repeat(2,1fr);}}
.dl-teaser{
position:relative;display:grid;grid-template-columns:1fr auto;
gap:.4rem 1.25rem;align-items:baseline;
padding:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2vw,1.75rem) clamp(1.5rem,3vw,2.25rem) 0;
border-bottom:1px solid var(--dl-line);
text-decoration:none;
transition:background-color 700ms var(--dl-ease);
}
@media (min-width:760px){
.dl-teaser:nth-child(odd){padding-right:clamp(1.5rem,3vw,2.5rem);border-right:1px solid var(--dl-line);}
.dl-teaser:nth-child(even){padding-left:clamp(1.5rem,3vw,2.5rem);}
}
.dl-teaser:hover{background:rgba(214,176,106,.035);}
.dl-teaser__t{
grid-column:1;color:var(--dl-cream);
font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.1;
transition:color 700ms var(--dl-ease);
}
.dl-teaser:hover .dl-teaser__t{color:var(--dl-gold-lt);}
.dl-teaser__b{
grid-column:1;color:var(--dl-gold-mut);font-size:.87rem;line-height:1.75;max-width:44ch;
}
.dl-teaser__go{
grid-column:2;grid-row:1 / span 2;align-self:center;
color:var(--dl-gold);font-size:1rem;
transition:transform 700ms var(--dl-ease);
}
.dl-teaser:hover .dl-teaser__go{transform:translateX(5px);}
/* ==== 05_motion.css ==== */
/* ---------- Entrance motion -------------------------------------------- */
/* One gesture: a 14px rise with a fade, 900ms, ease-out. Staggered by --i,
set inline per block. Nothing bounces; nothing runs on scroll. */
@keyframes dl-rise{from{opacity:0;transform:translate3d(0,14px,0);}to{opacity:1;transform:none;}}
.dl-anim{
opacity:0;transform:translate3d(0,14px,0);
animation:dl-rise 900ms var(--dl-ease) forwards;
animation-delay:calc(var(--i,0) * 90ms);
}
@media (prefers-reduced-motion:reduce){
.dl-anim{opacity:1;transform:none;animation:none;}
}
/* Gallery hover zoom is the only transform on the page; keep it slow. */
@media (prefers-reduced-motion:reduce){
.dl-grid__item:hover img,.dl-grid__item:focus-visible img{transform:none;}
}
/* ---------- Content loader hook ------------------------------------------ */
/* dl-content.js is optional: it fails soft and leaves the static markup in
place when the API is absent. It is loaded on every route so a saved
override reaches the page the owner edited. */
/* ---------- Legacy scroll-reveal: force the copy visible ----------------
The React export marked large blocks `style="opacity:0; transform:translateY(30px)"`
and relied on a scroll listener to fade them in. On this build that listener
never fires on a direct visit, so whole paragraphs — even the home headline
and the About masthead — sat at zero opacity, and the page read as a black
void. The reveal is cosmetic; the words are not. Every such wrapper carries a
translate() in the same inline style, which is what these two selectors key
on, so nothing else in the document is touched. Left alone: the CSS-driven
`.dl-anim` entrance, which does run. */
#app [style*="opacity: 0; transform: translate"],
#app [style*="opacity:0;transform:translate"]{
opacity:1 !important;
transform:none !important;
}
/* ---------- Cookie consent: quiet it down, and stop it eating the fold --
This banner ships fixed to the bottom of the viewport from the original
GoDaddy export. On a phone its paragraph is six lines tall, so it covered
the hero CTAs outright — the two buttons a visitor is meant to press first.
It is a legal notice, not the message of the page: shrink the type, cut the
paragraph to the sentence that matters, and keep it tight enough that the
hero still reads. The "Learn more" link pointed at GoDaddy's privacy policy
on the owner's own site; that address is not the studio's and does not
belong in its footer, so it goes. */
.dl-cookie,
[role="alertdialog"][aria-label="Cookie consent banner"]{
background:#0A0900 !important;
border-top:1px solid var(--dl-line2) !important;
box-shadow:none !important;
padding:0 !important;
}
[role="alertdialog"][aria-label="Cookie consent banner"] > div{padding:.9rem 1.25rem !important;}
[role="alertdialog"][aria-label="Cookie consent banner"] h3{
color:var(--dl-gold) !important;
font-size:9.5px !important;letter-spacing:.28em !important;text-transform:uppercase !important;
font-family:"Lora",Georgia,serif !important;font-weight:400 !important;
margin-bottom:.35rem !important;
}
[role="alertdialog"][aria-label="Cookie consent banner"] p{
color:var(--dl-mute) !important;
font-size:11px !important;line-height:1.5 !important;
font-family:"Lora",Georgia,serif !important;
}
/* The address belongs to the site builder, not the studio. */
[role="alertdialog"][aria-label="Cookie consent banner"] a[href*="godaddy.com"]{display:none !important;}
@media (max-width:640px){
[role="alertdialog"][aria-label="Cookie consent banner"] p{
font-size:10px !important;line-height:1.45 !important;
display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
[role="alertdialog"][aria-label="Cookie consent banner"] > div{padding:.7rem 1rem !important;}
[role="alertdialog"][aria-label="Cookie consent banner"] button{
padding:.4rem .9rem !important;font-size:10px !important;letter-spacing:.18em !important;
}
}
/* ---------- Contact form ------------------------------------------------
The rebuilt contact page carries a real