/* ---- 1. PAGE HEADER ---- */
.eb-work-head .wk-kicker p {
font-family: 'Work Sans', sans-serif !important;
font-size: 11px !important;
letter-spacing: 0.24em !important;
text-transform: uppercase !important;
color: var(--tan) !important;
}
.eb-work-head h1 {
font-size: 52px !important;
line-height: 1 !important;
letter-spacing: -0.015em !important;
}
/* the small "Four projects" line, set as a
paragraph with class eb-work-count */
.eb-work-count p {
font-family: 'EB Garamond', serif !important;
font-size: 17px !important;
color: var(--ink2) !important;
}
/* ---- 2. FILM STILLS — shared frame ---- */
/* Add class "eb-still" to any Image block
used as a film still. Kills Squarespace's
default rounding + gives a hairline. */
.eb-still img {
border-radius: 2px !important;
/* warm cinematic grade to match your stills */
filter: saturate(1.04) contrast(1.03) brightness(0.99) !important;
}
/* ---- 3. FEATURED FILM BANNER ---- */
/* The full-width lead film. Wrap its image in
a section with class "eb-featured". */
.eb-featured img {
border-radius: 2px !important;
}
/* the title + tag overlaid on the banner live
in a Code Block — see the HTML file */
/* ---- 4. CAPTION ROWS ---- */
/* Each film caption = one row, with a hairline
under it. Add class "eb-filmcap" to a row /
text block holding the caption. */
.eb-filmcap {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
margin-top: 14px !important;
padding-bottom: 10px !important;
border-bottom: 0.5px solid rgba(26,24,21,0.18) !important;
}
/* the number, e.g. 01 — class eb-filmnum */
.eb-filmnum {
font-family: 'EB Garamond', serif !important;
font-size: 13px !important;
color: var(--tan) !important;
letter-spacing: 0.05em !important;
margin-right: 14px !important;
}
/* the film title — class eb-filmname */
.eb-filmname {
font-family: 'EB Garamond', serif !important;
font-style: italic !important;
font-size: 25px !important;
color: var(--ink) !important;
}
/* the metadata line — class eb-filminfo */
.eb-filminfo {
font-family: 'Work Sans', sans-serif !important;
font-size: 11px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--ink2) !important;
}
/* ---- 5. THE OFFSET TWO-UP ---- */
/* This is what kills the "boring grid" feel.
In a two-column section, the right column
drops down so the films don't line up.
Add class "eb-offset-right" to the RIGHT
column's content. */
.eb-offset-right {
margin-top: 56px !important;
}
/* On mobile, remove the offset — stacked
columns shouldn't have a random gap. */
@media (max-width: 767px) {
.eb-offset-right {
margin-top: 0 !important;
}
.eb-work-head h1 {
font-size: 34px !important;
}
.eb-filmname {
font-size: 21px !important;
}
/* stack caption rows on narrow screens */
.eb-filmcap {
flex-direction: column !important;
gap: 4px !important;
}
}
/* ---- 6. ANGELS PLACEHOLDER ---- */
/* TEMPORARY — until you have a real still.
Add class "eb-placeholder" to the Angels
image block. Frames the logo card on a dark
field so it reads as an intentional title
plate, not a broken crop.
DELETE this block once the real still is in. */
.eb-placeholder {
background: #14110d !important;
border-radius: 2px !important;
position: relative !important;
}
.eb-placeholder img {
/* shrink + center the logo inside the frame */
width: 62% !important;
margin: 0 auto !important;
display: block !important;
filter: none !important;
padding: 14% 0 !important;
}