/* ══════════════════════════════════════════════════════════════════════
QUOTE BAND — the triptych family.
Single source for all 25 quote bands. Do NOT copy these rules into a
page; edit here. Six variants, one markup shape:
The variant class alone decides the layout, so switching variant in
Sanity never rewrites markup. Single picture variants always use
figA; figB is hidden by the variant, not removed from the DOM.
Variants
qbt-v39 equal wings 2 pictures 1 : 1.35 : 1
qbt-v39f left third 1 picture 1 : 2
qbt-v39g right sliver 1 picture 1fr : 150px
qbt-v39h unequal pair 2 pictures 1.5 : 2.1 : 0.62
qbt-v39i stepped wings 2 pictures 1 : 1.5 : 1, offset
qbt-v39k lapped wing 1 picture overlap
THE WING TREATMENT (see quote-bar-options-5.html for the measurement).
The first build of this laid a flat rgba(21,8,4,.34) scrim over every
wing on an apse ground. On a mid dark, low contrast icon that sinks the
picture into the background: the Vladimir Theotokos measures 93 mean
luminance at 32 standard deviation, and a third of the way to black
leaves nothing to see. There is no flat scrim here. Instead a small
brightness and contrast lift, and a gradient ONLY along the hinge edge,
which gives the fold depth without touching the middle of the picture
where the subject is. Do not reintroduce a full panel scrim.
══════════════════════════════════════════════════════════════════════ */
/* Housed in a strip, not run to the edges. A triptych is an object with a
frame and a place; bleeding it off both sides takes the edges off and
undercuts the whole idea. Being contained also means the pane inherits the
page's own margin, so no variant has to hand-feed itself the site gutter to
line up with the nav and footer. */
.qbt-band{
position:relative;
background:var(--apse,#3B0F18);
display:grid;
align-items:stretch;
max-width:1120px;
margin:4.5rem auto;
box-shadow:0 6px 26px rgba(44,31,22,.16);
}
/* ── the picture ─────────────────────────────────────────────────────── */
.qbt-fig{position:relative;overflow:hidden;background:var(--apse,#3B0F18);min-width:0}
.qbt-fig img{
width:100%;height:100%;display:block;object-fit:cover;
filter:brightness(1.07) contrast(1.05) saturate(.97);
}
/* Hinge-edge shading only. .in shades the right edge (picture sits left of
the text), .rev shades the left edge (picture sits right of it). */
.qbt-fig::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(21,8,4,0) 62%,rgba(21,8,4,.42) 100%);
}
.qbt-fig.rev::after{background:linear-gradient(270deg,rgba(21,8,4,0) 62%,rgba(21,8,4,.42) 100%)}
/* ── the words ───────────────────────────────────────────────────────── */
.qbt-hinge{background:linear-gradient(180deg,rgba(232,201,122,.85),rgba(184,131,40,.34))}
.qbt-pane{
background:var(--apse,#3B0F18);
display:flex;flex-direction:column;justify-content:center;
padding:3rem 2.8rem;position:relative;min-width:0;
}
.qbt-pane.mid{align-items:center;text-align:center}
.qbt-text{
font-family:var(--f-display,'Cormorant Garamond',Georgia,serif);
font-style:italic;font-weight:300;line-height:1.46;
font-size:clamp(1.24rem,2.2vw,1.72rem);
color:rgba(246,241,232,.96);margin:0 0 1.15rem;
/* 39g leaves the pane nearly the whole strip. Without a measure cap a long
quote runs the full width and stops being readable. */
max-width:46ch;
}
.qbt-pane.mid .qbt-text{margin-left:auto;margin-right:auto}
.qbt-rule{width:42px;height:1px;background:rgba(232,201,122,.78);margin:0 0 .95rem}
.qbt-pane.mid .qbt-rule{margin-left:auto;margin-right:auto}
.qbt-attr{
font-family:var(--f-ui,'Cinzel',Georgia,serif);
font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--gold-lt,#E8C97A);display:block;
}
.qbt-src{
font-family:var(--f-body,'EB Garamond',Georgia,serif);
font-style:italic;font-size:.88rem;
color:rgba(246,241,232,.6);display:block;margin-top:.45rem;
}
.qbt-src:empty{display:none}
/* ══ 39 · equal wings · 2 pictures ══════════════════════════════════ */
.qbt-v39{grid-template-columns:1fr 2px 1.35fr 2px 1fr;min-height:420px}
/* ══ 39f · left third · 1 picture ═══════════════════════════════════ */
.qbt-v39f{grid-template-columns:1fr 2px 2fr;min-height:430px}
.qbt-v39f .qbt-figB,.qbt-v39f .qbt-hinge2{display:none}
.qbt-v39f .qbt-text{font-size:clamp(1.3rem,2.3vw,1.8rem)}
/* ══ 39g · right sliver · 1 picture ═════════════════════════════════
The picture is reordered to the right rather than moved in markup, so
the single picture is always figA. */
.qbt-v39g{grid-template-columns:minmax(0,1fr) 2px 150px;min-height:340px}
.qbt-v39g .qbt-figB,.qbt-v39g .qbt-hinge2{display:none}
.qbt-v39g .qbt-pane{order:1;padding:3rem 3.4rem}
.qbt-v39g .qbt-hinge1{order:2}
.qbt-v39g .qbt-figA{order:3}
.qbt-v39g .qbt-text{font-size:clamp(1.32rem,2.4vw,1.86rem)}
/* ══ 39h · unequal pair · 2 pictures ════════════════════════════════ */
.qbt-v39h{grid-template-columns:1.5fr 2px 2.1fr 2px .62fr;min-height:420px}
.qbt-v39h .qbt-text{font-size:clamp(1.22rem,2.1vw,1.62rem)}
/* ══ 39i · stepped wings · 2 pictures ═══════════════════════════════
The step is 3.2rem. Under 2rem it reads as a markup mistake; over 4rem
the wings stop feeling hinged to the same object. */
.qbt-v39i{grid-template-columns:1fr 1.5fr 1fr;min-height:430px}
.qbt-v39i .qbt-hinge{display:none}
.qbt-v39i .qbt-figA{margin-bottom:3.2rem}
.qbt-v39i .qbt-figB{margin-top:3.2rem}
.qbt-v39i .qbt-pane{
border-left:2px solid rgba(184,131,40,.72);
border-right:2px solid rgba(184,131,40,.72);
}
.qbt-v39i .qbt-text{font-size:clamp(1.24rem,2.1vw,1.66rem)}
/* ══ 39k · lapped wing · 1 picture ══════════════════════════════════
Not a grid. The pane laps over the picture's inner edge, so the pane's
left padding (22%) must clear the picture (44% wide, pane starts 32%)
or the first words vanish underneath it. */
.qbt-v39k{
display:flex;align-items:center;min-height:470px;
background:var(--vellum-mid,#EDE7DC);
padding:4rem 3.5rem;
}
.qbt-v39k .qbt-figB,.qbt-v39k .qbt-hinge{display:none}
.qbt-v39k .qbt-figA{
width:44%;aspect-ratio:3/4;position:relative;z-index:2;flex:0 0 44%;
box-shadow:0 12px 34px rgba(44,31,22,.32);
}
.qbt-v39k .qbt-pane{
position:absolute;right:3.5rem;
top:10%;bottom:10%;width:min(62%,657px);
padding:3rem 3rem 3rem 22%;
box-shadow:0 6px 24px rgba(44,31,22,.20);
}
.qbt-v39k .qbt-text{font-size:clamp(1.2rem,2vw,1.55rem)}
/* ══ GROUND · vellum instead of apse red ════════════════════════════
Chosen per page in Sanity; red is the default and needs no class. Only
the text pane and the band's own ground change: the pictures and their
hinge-edge shading are untouched, because that shading is what gives
the fold depth regardless of what colour the pane is.
The type has to invert properly, not just darken. Pale gold (--gold-lt)
is legible on apse and disappears on cream, so the attribution moves to
maroon and the rule to full gold. */
/* Most pages ARE vellum, so a cream band on a cream page loses its edges and
the housing disappears. The site's gold hairline gives it back. */
.qbt-band.qbt-ground-vellum,
.qbt-band.qbt-ground-vellum .qbt-pane{background:var(--vellum,#F6F1E8)}
.qbt-band.qbt-ground-vellum{border:1px solid rgba(184,131,40,.42)}
.qbt-ground-vellum .qbt-text{color:var(--ink,#2C1F16)}
.qbt-ground-vellum .qbt-attr{color:var(--maroon,#7B1D2A)}
.qbt-ground-vellum .qbt-src{color:var(--stone,#7A6648)}
.qbt-ground-vellum .qbt-rule{background:var(--gold,#B88328)}
/* 39k lays its pane over the picture on an already light ground, so on
vellum it would be light on light. A hairline keeps it a separate card. */
.qbt-ground-vellum.qbt-v39k{background:var(--vellum-deep,#E3DACB)}
.qbt-ground-vellum.qbt-v39k .qbt-pane{border:1px solid rgba(184,131,40,.45)}
/* ── missing picture guard ───────────────────────────────────────────
onerror hides a broken ![]()
, which would leave a flat apse panel and
look exactly like the scrim bug this file exists to fix. If a figure
ends up with no rendered image, collapse it instead of showing a void. */
.qbt-fig.is-empty{display:none}
.qbt-band.no-pic{grid-template-columns:1fr!important}
.qbt-band.no-pic .qbt-hinge{display:none}
.qbt-band.no-pic .qbt-pane{padding:3.4rem 3rem;align-items:center;text-align:center}
.qbt-band.no-pic .qbt-rule{margin-left:auto;margin-right:auto}
/* ══ plain / watermark · the bio pull quote, with attribution ═══════
The .bio-quote treatment from the bio pages promoted to a pair of
variants: a centred maroon italic between two gold hairlines, run as
a full-bleed section rather than a housed strip. "plain" shows no
picture at all, even when one is set. "plainwm" prints Picture A
through the whole vellum block as a faint watermark. Sits after the
guard and ground blocks on purpose: these selectors must outrank
.no-pic and .qbt-ground-vellum, both of which can fire here. */
.qbt-band.qbt-vplain,
.qbt-band.qbt-vplainwm{
display:block;
background:transparent;
box-shadow:none;
border:none;
border-top:1px solid rgba(184,131,40,.35);
border-bottom:1px solid rgba(184,131,40,.35);
max-width:none;
margin:0;
padding:5rem 2rem;
position:relative;overflow:hidden;
}
.qbt-band.qbt-vplain .qbt-figB,.qbt-band.qbt-vplain .qbt-hinge,
.qbt-band.qbt-vplainwm .qbt-figB,.qbt-band.qbt-vplainwm .qbt-hinge{display:none}
/* The watermark: flattened to vellum tones, multiplied in so it prints
into the ground rather than sitting on it, edge to edge. */
.qbt-band.qbt-vplainwm .qbt-figA{
display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
background:transparent;opacity:.08;mix-blend-mode:multiply;
}
.qbt-band.qbt-vplainwm .qbt-figA img{filter:grayscale(1) sepia(.4) brightness(1.12) contrast(.92)}
.qbt-band.qbt-vplainwm .qbt-figA::after{display:none}
.qbt-band.qbt-vplainwm .qbt-figA.is-empty{display:none}
.qbt-band.qbt-vplain .qbt-figA{display:none}
.qbt-band.qbt-vplain .qbt-pane,
.qbt-band.qbt-vplainwm .qbt-pane{background:transparent;padding:0;align-items:center;text-align:center;position:relative;z-index:1}
.qbt-band.qbt-vplain .qbt-text,
.qbt-band.qbt-vplainwm .qbt-text{
color:var(--maroon,#7B1D2A);font-weight:400;line-height:1.5;
font-size:clamp(1.3rem,2.2vw,1.5rem);
max-width:60ch;margin:0 auto .85rem;
}
.qbt-band.qbt-vplain .qbt-rule,
.qbt-band.qbt-vplainwm .qbt-rule{display:none}
.qbt-band.qbt-vplain .qbt-attr,
.qbt-band.qbt-vplainwm .qbt-attr{color:var(--stone,#7A6648);margin:0 auto}
.qbt-band.qbt-vplain .qbt-src,
.qbt-band.qbt-vplainwm .qbt-src{color:var(--stone,#7A6648)}
.qbt-band.qbt-vplain .qbt-attr:empty,
.qbt-band.qbt-vplainwm .qbt-attr:empty{display:none}
/* ── RESPONSIVE ──────────────────────────────────────────────────────
All variants collapse to one column. 39g and 39i put the picture
above the text so the reader meets the image first. 39i loses its
step, which is correct: a vertical offset means nothing in a stack. */
@media(max-width:900px){
/* Edge to edge below 900: a housed strip only wastes width on a phone. */
.qbt-band{grid-template-columns:1fr!important;max-width:none;margin:2.5rem 0;box-shadow:none}
.qbt-fig{min-height:250px}
.qbt-fig::after{background:linear-gradient(0deg,rgba(21,8,4,0) 70%,rgba(21,8,4,.34) 100%)!important}
.qbt-hinge{height:2px}
.qbt-v39g .qbt-figA{order:-1;min-height:160px}
.qbt-v39g .qbt-hinge1{order:0}
.qbt-v39g .qbt-pane{order:1}
.qbt-v39i .qbt-figA{margin-bottom:0}
.qbt-v39i .qbt-figB{margin-top:0}
.qbt-v39i .qbt-pane{
border-left:none;border-right:none;
border-top:2px solid rgba(184,131,40,.72);
border-bottom:2px solid rgba(184,131,40,.72);
}
.qbt-v39k{display:block;padding:0}
.qbt-v39k .qbt-figA{width:100%;aspect-ratio:4/3;flex:none}
.qbt-v39k .qbt-pane{position:static;width:100%;padding:2.6rem 2rem}
.qbt-v39,.qbt-v39f,.qbt-v39g,.qbt-v39h,.qbt-v39i{min-height:0}
}
@media(max-width:768px){
.qbt-pane,.qbt-v39g .qbt-pane{padding:2.4rem 1.7rem}
.qbt-v39k .qbt-pane{padding:2.4rem 1.7rem}
.qbt-fig{min-height:210px}
}