/* =============================================================================
organ.css – organ section of princzkel.info (design "Bold facade emblem")
Load AFTER assets/css/styles.css. Every rule is scoped under body.organ-page,
so the home page is unaffected.
DESIGN IDEA
- The hero is a facade triptych modelled on the St. Anna case: two arched
pipe fields flank a taller centre arch (the real organ photo on the hub, a
third pipe field on sub-pages). All three stand on one gilt impost; on the
hub a black-and-gold nameboard ("Opus 1614 · Rieger Ottó · Budapest")
sits under it, the way the real console plate does.
- Emblem: a round arch with five pipes whose tops follow the arch, on a gilt
sill, inside a rounded tile of the same family as the "JP" brand mark.
A one-colour 24px version (three pipes) marks "Organs" in the nav and the
footer.
- Materials: polished tin with a cyan rim light and violet shadow (the
site's own accents), gilt lines, black lacquer, ivory stop tabs and
mahogany for the console. Serif display type for headings, the site's
system sans for reading.
- The seven chapter cards form a rank of pipes: mouths on one line, bodies
rising to the middle; hovering a card makes its mouth glow.
SVG RECIPE (static; tools/Build-Site.ps1 emits it once per page as a hidden sprite,
pages draw it with )
Numbers: invariant culture, Math.Round(v,2), format '0.##'.
Gradients (objectBoundingBox; x1=0 x2=1 = horizontal):
o-g-tin horiz #2a3449 0, #56637b .07, #b7c3d3 .22, #f4f8fc .36, #dfe6ef .46,
#8996ab .66, #5d6a82 .85, #93d8f2 .93 (cyan rim), #2f3a52 1
o-g-foot horiz #1e2638 0, #6f7c93 .25, #c3cddb .40, #6b788f .62, #6fb9d6 .90, #222b3f 1
o-g-lip horiz #3a4660 0, #a3b0c3 .5, #46536d 1
o-g-gold vert #f6e2ad 0, #d5ab5f .5, #93702f 1
o-g-field vert #1a2849 0, #0f1830 .6, #0a1022 1
o-g-glow radial cx .5 cy .55 r .55: #7dd3fc @.34 0, #7c3aed @.12 .55, #7c3aed @0 1
o-g-tile diag #1c2a4d 0, #0a1124 1
o-g-ivory vert #fffdf7 0, #efe6d2 .8, #cbbd9c 1 o-g-ebony vert #3a3530 0, #14110f .25, #060505 1
Pipe(xc, w, top, mouthY, toeY):
x0=xc-w/2, x1=xc+w/2, mh=max(.9, .24w), lip=w, toe=max(.45, .15w), rx=min(1.2, .12w), fy=mouthY+mh
1 body rect x0,top w × (fy-top) rx fill o-g-tin
2 lip M x0+.1w,mouthY Q x0+.1w,mouthY-.55lip xc,mouthY-lip
Q x1-.1w,mouthY-.55lip x1-.1w,mouthY Z fill o-g-lip
3 foot M x0,fy H x1 L xc+toe,toeY H xc-toe Z fill o-g-foot
4 mouth rect x0+.12w, mouthY, .76w × mh #060a12
5 lower lip M x0+.14w,fy Q xc,fy+.55w x1-.14w,fy Z #fff @.22 (not in the emblem)
Row(cx, N, wMin, wMax, gap, springY, archR, inset, topGap, mouthY, toeY):
c=(N-1)/2; w_i = wMin + (wMax-wMin)·(1-|i-c|/c); widest in the middle
start = cx - (Σw + (N-1)·gap)/2; pipes left to right, gap apart
top_i = springY - sqrt(max(0, (archR-inset)² - (xc_i-cx)²)) + topGap (tops follow the arch)
all mouths on mouthY, all toes on toeY
Field(W, H, pad, springY, …): r=(W-2pad)/2, cx=W/2
ground M pad,H V springY A r r 0 0 1 W-pad,springY V H Z fill o-g-field
glow ellipse cx, (springY+mouthY)/2, rx .95r, ry .46(H-pad) fill o-g-glow
pipes Row(cx, …, archR=r, toeY=H)
moulding same arch inset 5 (radius r-5), stroke #e3c27e @.38, 1
arch stroke o-g-gold 2.6, no fill
keystone M cx-7,pad-3 H cx+7 L cx+4.5,pad+9 H cx-4.5 Z fill o-g-gold
capitals rect 10×5 rx1 at (pad-4, springY-3) and (W-pad-6, springY-3) fill o-g-gold
#o-field-side W160 H270 pad5 springY80 N7 w11.5–16.5 gap4.4 inset9 topGap7 mouthY204
#o-field-center W220 H360 pad5 springY110 N9 w11.5–19 gap4.6 inset10 topGap8 mouthY294
Both keep the mouth 66 units above the bottom, so mouths line up when the
triptych columns are 160fr 220fr 160fr (one shared scale).
#o-mark-tile 48×48: rect 1,1 46×46 rx13 fill o-g-tile, stroke #e3c27e @.75 1.4;
glow ellipse 24,27 rx14 ry13; Row(24, 5, 2.8, 3.8, 1.2, 21, 13, 3, 2.4, 32.6, 38.6) without lower lips;
arch M11 39V21A13 13 0 0 1 37 21V39 stroke o-g-gold 1.7; sill rect 9,38.6 30×2.4 rx1 o-g-gold
#o-mark-mono 24×24, currentColor only: closed arch M4.4 22.2V11A7.6 7.6 0 0 1 19.6 11V22.2Z stroke 1.7;
pipes (xc,w,top) = (7.85,2.6,8.4) (12,3.2,6.2) (16.15,2.6,8.4):
body M x0,top H x1 V16.2 L xc,14.7 L x0,16.2 Z (V-shaped lip), foot M x0,17.3 H x1 L xc+.5,20.6 H xc-.5 Z
#o-keys-54 manual C–f''': 32 white keys 10 wide (x=i·10+.35, w 9.3, h34, rx1.2, o-g-ivory),
22 black keys 6×21 rx.8 (o-g-ebony) centred on the white-key boundary; viewBox 320×34
============================================================================= */
body.organ-page {
--o-serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
--o-ink: #f7f2e7;
--o-text: #dce8f7;
--o-soft: #b9c7dc;
--o-gold: #e3c27e;
--o-gold-hi: #f6e2ad;
--o-gold-lo: #93702f;
--o-panel: #0e1629;
--o-panel-hi: #141f3a;
--o-line: rgba(255, 255, 255, 0.13);
--o-line-gold: rgba(227, 194, 126, 0.4);
--o-focus: #7dd3fc;
--o-tin: linear-gradient(90deg, #2a3449 0%, #56637b 7%, #b7c3d3 22%, #f4f8fc 36%, #dfe6ef 46%, #8996ab 66%, #5d6a82 85%, #93d8f2 93%, #2f3a52 100%);
--o-tin-foot: linear-gradient(90deg, #1e2638 0%, #6f7c93 25%, #c3cddb 40%, #6b788f 62%, #6fb9d6 90%, #222b3f 100%);
--o-gilt: linear-gradient(180deg, #f6e2ad 0%, #d5ab5f 45%, #93702f 100%);
}
/* ---------------------------------------------------------------- base */
body.organ-page h1,
body.organ-page h2,
body.organ-page h3 {
color: var(--o-ink);
font-family: var(--o-serif);
letter-spacing: -0.005em;
}
body.organ-page h1 {
max-width: none;
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 700;
line-height: 1.05;
}
body.organ-page h2 {
font-size: clamp(1.6rem, 3.2vw, 2.3rem);
font-weight: 700;
line-height: 1.12;
}
body.organ-page h3 {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.25;
}
body.organ-page p {
color: var(--o-text);
}
body.organ-page :where(a, button):focus-visible {
outline: 3px solid var(--o-focus);
outline-offset: 3px;
}
body.organ-page .o-sr {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
body.organ-page .o-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
body.organ-page .o-kicker {
margin: 0 0 0.55rem;
color: var(--o-gold);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.17em;
text-transform: uppercase;
}
/* --------------------------------------------------------------- header */
body.organ-page .site-nav a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
body.organ-page .o-nav-organs {
color: var(--o-ink);
background: rgba(227, 194, 126, 0.13);
box-shadow: inset 0 0 0 1px rgba(227, 194, 126, 0.36);
}
body.organ-page .o-mark-mono {
display: block;
flex: none;
width: 1.2rem;
height: 1.2rem;
color: var(--o-gold);
}
body.organ-page .o-lang .language-button {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
body.organ-page .o-lang .language-button[aria-current="page"] {
color: #07111f;
border-color: rgba(255, 255, 255, 0.44);
background: linear-gradient(135deg, #ffffff, #7dd3fc);
}
/* ----------------------------------------------------------- breadcrumb */
body.organ-page .o-breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem 0.45rem;
margin: 0.25rem 0 0;
padding: 0;
list-style: none;
color: var(--o-soft);
font-size: 0.88rem;
}
body.organ-page .o-breadcrumb li + li::before {
content: "›";
content: "›" / "";
margin-right: 0.45rem;
color: var(--o-gold);
}
body.organ-page .o-breadcrumb a {
color: var(--o-soft);
text-decoration: none;
}
body.organ-page .o-breadcrumb a:hover {
color: var(--o-ink);
text-decoration: underline;
}
body.organ-page .o-breadcrumb a[aria-current="page"] {
color: var(--o-ink);
font-weight: 650;
}
/* ----------------------------------------------------------------- hero */
body.organ-page .o-hero {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
align-items: center;
gap: clamp(1.75rem, 4vw, 3.5rem);
margin-top: 0.9rem;
padding: clamp(1.25rem, 3.4vw, 3rem);
overflow: hidden;
border: 1px solid var(--o-line);
border-radius: var(--radius-lg);
background:
radial-gradient(ellipse 50% 70% at 77% 44%, rgba(56, 189, 248, 0.16), transparent 70%),
radial-gradient(ellipse 46% 50% at 80% 100%, rgba(124, 58, 237, 0.2), transparent 70%),
linear-gradient(160deg, #121c36 0%, #0b1225 58%, #090f1e 100%);
box-shadow: var(--shadow);
}
/* faint rank of vertical "pipe" lines behind the facade */
body.organ-page .o-hero::before {
content: "";
position: absolute;
inset: 0 0 0 46%;
z-index: -1;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 16px);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 55% 45%, #000 0%, transparent 75%);
mask-image: radial-gradient(ellipse 70% 60% at 55% 45%, #000 0%, transparent 75%);
}
body.organ-page .o-eyebrow {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 1.2rem;
color: var(--o-gold);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
body.organ-page .o-mark-tile {
display: block;
flex: none;
width: 2.75rem;
height: 2.75rem;
filter: drop-shadow(0 8px 18px rgba(227, 194, 126, 0.16));
}
body.organ-page .o-h1-main,
body.organ-page .o-h1-sub {
display: block;
}
body.organ-page .o-h1-sub {
margin-top: 0.4rem;
color: var(--o-gold);
font-size: 0.6em;
font-style: italic;
font-weight: 400;
line-height: 1.15;
}
body.organ-page .o-lead {
max-width: 54ch;
margin-top: 1.3rem;
color: var(--o-text);
font-size: clamp(1.04rem, 1.5vw, 1.18rem);
line-height: 1.65;
}
body.organ-page .o-notice {
display: flex;
align-items: flex-start;
gap: 0.7rem;
max-width: 58ch;
margin-top: 1.3rem;
padding: 0.75rem 0.9rem;
border: 1px solid rgba(227, 194, 126, 0.32);
border-radius: 14px;
background: rgba(227, 194, 126, 0.07);
color: #ebe2cd;
font-size: 0.9rem;
line-height: 1.5;
}
body.organ-page .o-notice-badge {
display: grid;
flex: none;
width: 1.75rem;
height: 1.75rem;
place-items: center;
border-radius: 999px;
color: #1d1405;
background: linear-gradient(180deg, #f6e2ad, #c99d52);
font-size: 0.66rem;
font-weight: 900;
letter-spacing: 0.04em;
}
body.organ-page .o-notice a,
body.organ-page .o-download-note a,
body.organ-page .o-sources a,
body.organ-page .o-sister-link a,
body.organ-page .o-prose a {
color: var(--o-gold-hi);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
body.organ-page .o-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.6rem;
}
body.organ-page .o-button-gold {
color: #1d1405;
background: linear-gradient(180deg, #fff6df 0%, #f0d796 48%, #d4a95a 100%);
box-shadow: 0 12px 30px rgba(227, 194, 126, 0.2), inset 0 -2px 0 rgba(120, 80, 20, 0.35);
}
/* -------------------------------------------------------- facade triptych */
body.organ-page .o-facade {
position: relative;
display: grid;
grid-template-columns: 160fr 220fr 160fr;
align-items: end;
column-gap: 3%;
margin: 0;
padding-top: 0.75rem;
}
body.organ-page .o-facade::before {
content: "";
position: absolute;
z-index: -1;
inset: 4% 4% 14%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(125, 211, 252, 0.2), rgba(124, 58, 237, 0.1) 60%, transparent);
}
body.organ-page .o-field {
display: block;
width: 100%;
height: auto;
aspect-ratio: 160 / 270;
overflow: visible;
}
body.organ-page .o-field--center {
aspect-ratio: 220 / 360;
}
body.organ-page .o-facade-photo {
position: relative;
display: block;
aspect-ratio: 220 / 350;
overflow: hidden;
border-radius: 999px 999px 0 0;
background: #0a1022;
box-shadow:
0 0 0 2.5px #d9b46a,
0 0 0 7px rgba(9, 15, 30, 0.92),
0 0 0 8px rgba(227, 194, 126, 0.5),
0 26px 60px rgba(0, 0, 0, 0.5);
}
body.organ-page .o-facade-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
transition: transform 400ms ease;
}
body.organ-page .o-facade-photo:hover img {
transform: scale(1.03);
}
body.organ-page .o-facade-photo:focus-visible {
outline-offset: 10px;
}
body.organ-page .o-ledge {
position: relative;
z-index: 1;
display: block;
grid-column: 1 / -1;
height: 12px;
margin: -1px -2% 0;
border-radius: 3px;
background: var(--o-gilt);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 28px rgba(0, 0, 0, 0.55);
}
body.organ-page .o-nameboard {
grid-column: 1 / -1;
margin: 0.7rem 7% 0;
padding: 0.5rem 0.75rem;
overflow: hidden;
border-radius: 6px;
color: #ecd391;
background: linear-gradient(180deg, #19150f 0%, #050404 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 24px rgba(0, 0, 0, 0.45);
font-family: var(--o-serif);
font-size: clamp(0.9rem, 1.6vw, 1.2rem);
font-style: italic;
letter-spacing: 0.06em;
text-align: center;
white-space: nowrap;
}
/* sub-page hero: smaller, art-only facade */
body.organ-page .o-hero--sub {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
body.organ-page .o-facade--art {
width: min(100%, 26rem);
justify-self: center;
}
/* sub-page hero of an organ with its own logo (site.json "logo"): the round emblem in a gilt ring;
the image is square, so the round clip hides its corners */
body.organ-page .o-facade--logo {
display: block;
width: min(100%, 18rem);
justify-self: center;
padding-top: 0;
}
body.organ-page .o-hero-logo {
display: block;
width: 100%;
height: auto;
border-radius: 50%;
box-shadow:
0 0 0 2.5px #d9b46a,
0 0 0 7px rgba(9, 15, 30, 0.92),
0 0 0 8px rgba(227, 194, 126, 0.5),
0 26px 60px rgba(0, 0, 0, 0.5);
}
body.organ-page .o-toc {
margin-top: 1.4rem;
}
body.organ-page .o-toc-label {
margin: 0 0 0.45rem;
color: var(--o-soft);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
body.organ-page .o-toc ul {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
body.organ-page .o-toc a {
display: inline-block;
padding: 0.32rem 0.7rem;
border: 1px solid var(--o-line);
border-radius: 999px;
color: var(--o-text);
background: rgba(255, 255, 255, 0.04);
font-size: 0.86rem;
text-decoration: none;
}
body.organ-page .o-toc a:hover {
border-color: var(--o-line-gold);
color: var(--o-ink);
}
/* the map of the church (site.json "map"), at the foot of the hero */
body.organ-page .o-hero-map {
margin: 1.1rem 0 0;
}
body.organ-page .o-hero-map a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.95rem 0.42rem 0.7rem;
border: 1px solid var(--o-line-gold);
border-radius: 999px;
color: var(--o-gold-hi);
background: rgba(15, 13, 10, 0.45);
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
}
body.organ-page .o-hero-map a:hover {
background: rgba(227, 194, 126, 0.16);
}
body.organ-page .o-hero-map svg {
width: 1.05rem;
height: 1.05rem;
flex: none;
fill: currentColor;
}
/* --------------------------------------------------------------- subnav */
body.organ-page .o-subnav {
margin-top: 1.1rem;
}
body.organ-page .o-subnav ol {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin: 0;
padding: 0.4rem;
list-style: none;
border: 1px solid var(--o-line);
border-radius: 22px;
background: linear-gradient(180deg, #111a31, #0b1222);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}
body.organ-page .o-subnav a {
display: inline-flex;
align-items: center;
min-height: 2.5rem;
padding: 0.4rem 0.95rem;
border-radius: 999px;
color: var(--o-text);
font-size: 0.92rem;
font-weight: 650;
text-decoration: none;
transition: background 180ms ease, color 180ms ease;
}
body.organ-page .o-subnav a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
body.organ-page .o-subnav a[aria-current="page"] {
color: #1d1608;
background: linear-gradient(180deg, #fffbf1 0%, #f1e5c8 55%, #dbc69c 100%);
box-shadow: inset 0 -2px 0 rgba(120, 90, 40, 0.35), 0 4px 14px rgba(0, 0, 0, 0.35);
}
/* -------------------------------------------------------------- sections */
body.organ-page .o-section {
margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
body.organ-page .o-section-head {
margin-bottom: 1.25rem;
}
body.organ-page .o-panel {
padding: clamp(1.15rem, 3vw, 2rem);
border: 1px solid var(--o-line);
border-radius: var(--radius-md);
background: linear-gradient(180deg, var(--o-panel-hi), var(--o-panel));
}
body.organ-page .o-prose {
max-width: 70ch;
}
body.organ-page .o-prose p,
body.organ-page .o-prose li {
color: var(--o-text);
font-size: 1.04rem;
line-height: 1.72;
}
body.organ-page .o-prose h2 + p,
body.organ-page .o-prose p + p {
margin-top: 1em;
}
body.organ-page .o-prose ul,
body.organ-page .o-prose ol {
margin: 1em 0 0;
padding-left: 1.3em;
}
body.organ-page .o-prose li + li {
margin-top: 0.4em;
}
/* ------------------------------------------------- key facts: nameboard */
body.organ-page .o-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
margin: 0;
overflow: hidden;
border: 1px solid rgba(227, 194, 126, 0.5);
border-radius: 18px;
/* the cell colour, so an incomplete last row does not show a light block */
background: #0f0d0a;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
body.organ-page .o-facts > div {
padding: 1.05rem 1.25rem 1.15rem;
background: linear-gradient(180deg, #15130f 0%, #090807 100%);
/* the lines between cells: two neighbouring outlines meet in the 1px gap */
outline: 1px solid rgba(227, 194, 126, 0.17);
}
body.organ-page .o-facts dt {
color: #d3c7a8;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
body.organ-page .o-facts dd {
margin: 0.35rem 0 0;
color: #eed493;
font-family: var(--o-serif);
font-size: clamp(1.15rem, 2vw, 1.45rem);
line-height: 1.2;
}
/* ---------------------------------------------- overview + download card */
body.organ-page .o-overview {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
align-items: start;
gap: 1.25rem;
}
body.organ-page .o-download {
position: relative;
padding: clamp(1.15rem, 2.6vw, 1.6rem);
border: 1px solid var(--o-line-gold);
border-radius: var(--radius-md);
background:
radial-gradient(circle at 0% 0%, rgba(227, 194, 126, 0.16), transparent 16rem),
linear-gradient(180deg, #161f3b, #0d1528);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}
body.organ-page .o-download-head {
display: flex;
align-items: center;
gap: 1rem;
}
body.organ-page .o-download-head .o-kicker {
margin-bottom: 0.2rem;
}
body.organ-page .o-download h2 {
font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}
body.organ-page .o-mark-tile--lg {
width: 3.75rem;
height: 3.75rem;
}
body.organ-page .o-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 1.1rem 0 0;
padding: 0;
list-style: none;
}
body.organ-page .o-chips li {
padding: 0.28rem 0.7rem;
border: 1px solid var(--o-line-gold);
border-radius: 999px;
color: var(--o-gold-hi);
font-size: 0.8rem;
font-weight: 750;
}
body.organ-page .o-download > p {
margin-top: 0.95rem;
line-height: 1.6;
}
body.organ-page .o-download-note {
padding: 0.7rem 0.85rem;
border: 1px solid rgba(125, 211, 252, 0.28);
border-radius: 12px;
background: rgba(125, 211, 252, 0.07);
font-size: 0.93rem;
}
body.organ-page .o-download-button {
justify-content: space-between;
gap: 1rem;
width: 100%;
margin-top: 1.15rem;
}
/* SHA-256 of the archive under the button: small, and the 64 hex digits may wrap anywhere */
body.organ-page .o-download > p.o-download-hash {
margin-top: 0.75rem;
color: var(--o-soft);
font-size: 0.8rem;
line-height: 1.5;
}
body.organ-page .o-download-hash code {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
overflow-wrap: anywhere;
}
body.organ-page .o-button-meta {
font-size: 0.82rem;
font-weight: 700;
opacity: 0.8;
}
/* ------------------------------------------- chapter cards: a pipe rank */
body.organ-page .o-rank {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.85rem;
margin: 0;
padding: 0;
list-style: none;
}
body.organ-page .o-rank > li {
display: flex;
min-width: 0;
}
body.organ-page .o-rank > li:nth-child(1),
body.organ-page .o-rank > li:nth-child(7) { --h: 4.1rem; }
body.organ-page .o-rank > li:nth-child(2),
body.organ-page .o-rank > li:nth-child(6) { --h: 5.7rem; }
body.organ-page .o-rank > li:nth-child(3),
body.organ-page .o-rank > li:nth-child(5) { --h: 7rem; }
body.organ-page .o-rank > li:nth-child(4) { --h: 7.8rem; }
body.organ-page .o-rank a {
display: flex;
flex-direction: column;
width: 100%;
border-radius: 16px;
color: inherit;
text-decoration: none;
}
body.organ-page .o-rank-pipe {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 10.1rem;
}
body.organ-page .o-rank-body,
body.organ-page .o-rank-mouth,
body.organ-page .o-rank-foot {
display: block;
width: 34%;
min-width: 2.4rem;
max-width: 3.4rem;
}
body.organ-page .o-rank-body {
position: relative;
height: var(--h, 6rem);
border-radius: 0.45rem 0.45rem 0 0;
background: var(--o-tin);
box-shadow: 0 0 26px rgba(125, 211, 252, 0.1);
transition: filter 180ms ease, box-shadow 180ms ease;
}
/* pointed upper lip */
body.organ-page .o-rank-body::after {
content: "";
position: absolute;
right: 10%;
bottom: 0;
left: 10%;
aspect-ratio: 1 / 0.95;
background: linear-gradient(90deg, #3a4660, #a3b0c3 50%, #46536d);
clip-path: polygon(0 100%, 3% 66%, 12% 38%, 28% 15%, 50% 0, 72% 15%, 88% 38%, 97% 66%, 100% 100%);
}
body.organ-page .o-rank-mouth {
position: relative;
height: 0.6rem;
background: var(--o-tin);
}
body.organ-page .o-rank-mouth::before {
content: "";
position: absolute;
inset: 0 12%;
border-radius: 1px;
background: #060a12;
transition: background 180ms ease, box-shadow 180ms ease;
}
body.organ-page .o-rank-foot {
height: 1.7rem;
background: var(--o-tin-foot);
clip-path: polygon(0 0, 100% 0, 61% 100%, 39% 100%);
}
body.organ-page .o-rank-card {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.4rem;
padding: 0.95rem 0.9rem 1rem;
border: 1px solid var(--o-line);
border-top: 3px solid rgba(227, 194, 126, 0.75);
border-radius: 6px 6px 16px 16px;
background: linear-gradient(180deg, var(--o-panel-hi), var(--o-panel));
transition: transform 180ms ease, box-shadow 180ms ease;
}
body.organ-page .o-rank-num {
color: var(--o-gold);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
}
body.organ-page .o-rank-title {
margin: 0;
font-size: 1.08rem;
}
body.organ-page .o-rank-text {
color: var(--o-soft);
font-size: 0.86rem;
line-height: 1.45;
}
body.organ-page .o-rank-more {
margin-top: auto;
padding-top: 0.2rem;
color: var(--o-gold);
font-size: 1.05rem;
font-weight: 700;
}
body.organ-page .o-rank a:hover .o-rank-body,
body.organ-page .o-rank a:focus-visible .o-rank-body {
filter: brightness(1.12) saturate(1.15);
box-shadow: 0 0 34px rgba(125, 211, 252, 0.3);
}
body.organ-page .o-rank a:hover .o-rank-mouth::before,
body.organ-page .o-rank a:focus-visible .o-rank-mouth::before {
background: #7dd3fc;
box-shadow: 0 0 12px 3px rgba(56, 189, 248, 0.7);
}
body.organ-page .o-rank a:hover .o-rank-card,
body.organ-page .o-rank a:focus-visible .o-rank-card {
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(227, 194, 126, 0.35);
}
/* ----------------------------------------------------------------- pager */
body.organ-page .o-pager {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: clamp(2.75rem, 6vw, 4.5rem) 0 1.5rem;
}
body.organ-page .o-pager a {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 1rem 1.25rem;
border: 1px solid var(--o-line);
border-radius: 18px;
background: linear-gradient(180deg, var(--o-panel-hi), var(--o-panel));
text-decoration: none;
transition: border-color 180ms ease;
}
body.organ-page .o-pager a:hover {
border-color: var(--o-line-gold);
}
body.organ-page .o-pager-dir {
color: var(--o-gold);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
body.organ-page .o-pager-title {
color: var(--o-ink);
font-family: var(--o-serif);
font-size: 1.3rem;
}
body.organ-page .o-pager-next {
grid-column: 2;
align-items: flex-end;
text-align: right;
}
/* ---------------------------------------------------------------- footer */
body.organ-page .o-footer {
align-items: center;
}
body.organ-page .o-footer .footer-note {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
body.organ-page .o-footer .o-mark-mono {
width: 1.1rem;
height: 1.1rem;
}
/* ===================================================== organ page pieces */
/* console replica: mahogany, blue felt, label strips, ivory tabs */
body.organ-page .o-console {
margin: 1.5rem 0 0;
padding: clamp(0.85rem, 2.4vw, 1.75rem) clamp(0.7rem, 2.4vw, 1.75rem) clamp(0.85rem, 2vw, 1.3rem);
border: 1px solid rgba(255, 190, 170, 0.16);
border-radius: 28px 28px 16px 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 16%),
repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 9px),
linear-gradient(180deg, #6a2129 0%, #4b161b 42%, #2b0b10 100%);
box-shadow: inset 0 -18px 40px rgba(0, 0, 0, 0.45), 0 26px 60px rgba(0, 0, 0, 0.5);
}
body.organ-page .o-tabs {
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
gap: 0.45rem;
margin: 0;
padding: 0.9rem 0.7rem 1.4rem;
list-style: none;
border-top: 5px solid #30449a;
border-radius: 6px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
}
body.organ-page .o-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
body.organ-page .o-tab-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.8rem;
padding: 0.3rem 0.15rem;
border-radius: 2px;
color: #16130d;
background: #f5f2e9;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
font-size: 0.7rem;
font-weight: 800;
line-height: 1.15;
text-align: center;
overflow-wrap: anywhere;
}
body.organ-page .o-tab--other .o-tab-label {
background: #addcb7;
}
body.organ-page .o-tab--pedal .o-tab-label {
background: #94d4d3;
}
body.organ-page .o-tab-key {
display: block;
width: 74%;
height: 2.4rem;
border-radius: 4px 4px 9px 9px;
background: linear-gradient(180deg, #fffdf6 0%, #f3e9d3 42%, #d9c7a1 100%);
box-shadow: 0 5px 0 #9f8961, 0 10px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 #ffffff;
}
body.organ-page .o-console-nameboard {
margin: 1rem auto 0;
padding: 0.5rem 1rem;
border-radius: 6px;
color: #ecd391;
background: linear-gradient(180deg, #17140f, #050404);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
font-family: var(--o-serif);
font-size: clamp(0.95rem, 2.2vw, 1.4rem);
font-style: italic;
letter-spacing: 0.06em;
text-align: center;
}
body.organ-page .o-keys {
display: block;
width: 100%;
height: auto;
aspect-ratio: 320 / 34;
margin-top: 0.7rem;
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}
body.organ-page .o-console figcaption {
margin-top: 0.9rem;
color: #f0dcd6;
font-size: 0.88rem;
text-align: center;
}
body.organ-page .o-legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.4rem;
margin: 0.9rem 0 0;
padding: 0;
list-style: none;
color: var(--o-soft);
font-size: 0.86rem;
}
body.organ-page .o-legend li {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
body.organ-page .o-swatch {
width: 1.5rem;
height: 0.85rem;
border-radius: 2px;
background: #f5f2e9;
}
body.organ-page .o-swatch--pedal {
background: #94d4d3;
}
body.organ-page .o-swatch--other {
background: #addcb7;
}
/* stoplist */
body.organ-page .o-split {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
align-items: start;
gap: 1.25rem;
}
body.organ-page .o-stoplist {
width: 100%;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
border: 1px solid var(--o-line);
border-radius: 18px;
background: var(--o-panel);
}
body.organ-page .o-stoplist caption {
padding: 0 0 0.6rem;
color: var(--o-soft);
font-size: 0.86rem;
text-align: left;
}
body.organ-page .o-stoplist th,
body.organ-page .o-stoplist td {
padding: 0.75rem 1rem;
border-top: 1px solid var(--o-line);
text-align: left;
vertical-align: top;
}
body.organ-page .o-stoplist thead th {
border-top: 0;
color: #d3c7a8;
background: #0a1020;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
body.organ-page .o-stoplist .o-division th {
color: var(--o-gold);
background: linear-gradient(90deg, rgba(227, 194, 126, 0.16), rgba(227, 194, 126, 0.02));
font-family: var(--o-serif);
font-size: 1.15rem;
font-weight: 700;
}
body.organ-page .o-stoplist .o-division span {
margin-left: 0.6rem;
color: var(--o-soft);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 0.82rem;
font-weight: 600;
}
body.organ-page .o-stoplist th[scope="row"] {
color: var(--o-ink);
font-family: var(--o-serif);
font-size: 1.08rem;
font-weight: 700;
white-space: nowrap;
}
body.organ-page .o-gloss {
color: var(--o-soft);
font-weight: 400;
font-style: italic;
}
body.organ-page .o-stoplist td {
color: var(--o-text);
font-size: 0.95rem;
}
body.organ-page .o-footnote {
margin-top: 0.75rem;
color: var(--o-soft);
font-size: 0.86rem;
line-height: 1.55;
}
body.organ-page .o-specs {
margin: 0;
padding: 0.4rem 1.25rem;
border: 1px solid var(--o-line);
border-radius: 18px;
background: linear-gradient(180deg, var(--o-panel-hi), var(--o-panel));
}
body.organ-page .o-specs > div {
padding: 0.85rem 0;
}
body.organ-page .o-specs > div + div {
border-top: 1px solid var(--o-line);
}
body.organ-page .o-specs dt {
color: var(--o-gold);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
body.organ-page .o-specs dd {
margin: 0.3rem 0 0;
color: var(--o-text);
line-height: 1.55;
}
/* timeline on a gilt rail */
body.organ-page .o-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
body.organ-page .o-timeline::before {
content: "";
position: absolute;
top: 0.55rem;
right: 0;
left: 0;
height: 2px;
background: linear-gradient(90deg, rgba(227, 194, 126, 0.9), rgba(227, 194, 126, 0.15));
}
body.organ-page .o-timeline li {
position: relative;
padding-top: 1.9rem;
}
body.organ-page .o-timeline li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1.15rem;
height: 1.15rem;
border: 2px solid var(--o-gold);
border-radius: 50%;
background: #0b1224;
box-shadow: 0 0 0 4px rgba(227, 194, 126, 0.12);
}
body.organ-page .o-year {
display: block;
color: var(--o-gold);
font-family: var(--o-serif);
font-size: 1.6rem;
font-weight: 700;
line-height: 1.1;
}
body.organ-page .o-timeline p {
margin-top: 0.45rem;
line-height: 1.6;
}
body.organ-page .o-sources {
margin-top: 1.4rem;
color: var(--o-soft);
font-size: 0.88rem;
}
body.organ-page .o-sources a {
font-weight: 600;
}
/* photo gallery: masonry columns, no cropping */
body.organ-page .o-gallery {
columns: 3;
column-gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
body.organ-page .o-gallery li {
margin: 0 0 1.1rem;
break-inside: avoid;
}
body.organ-page .o-gallery figure {
margin: 0;
}
body.organ-page .o-gallery a {
position: relative;
display: block;
overflow: hidden;
border: 1px solid var(--o-line);
border-radius: 14px;
background: #0a1022;
}
body.organ-page .o-gallery a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(227, 194, 126, 0.18);
pointer-events: none;
}
body.organ-page .o-gallery img {
display: block;
width: 100%;
height: auto;
transition: transform 400ms ease;
}
body.organ-page .o-gallery a:hover img {
transform: scale(1.03);
}
body.organ-page .o-gallery figcaption {
margin-top: 0.5rem;
color: var(--o-soft);
font-size: 0.86rem;
line-height: 1.45;
}
/* picture viewer (organ.js): one picture over the page, with close, previous and next buttons;
on narrow screens the arrows sit below the picture instead of over it */
html.o-viewer-open {
overflow: hidden;
}
body.organ-page .o-viewer {
box-sizing: border-box;
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
max-height: none;
margin: 0;
padding: 4.25rem clamp(0.75rem, 6vw, 5.5rem) 1.5rem;
overflow: hidden;
border: 0;
color: #f4ecdb;
background: transparent;
touch-action: pinch-zoom;
}
body.organ-page .o-viewer[open] {
display: flex;
align-items: center;
justify-content: center;
}
body.organ-page .o-viewer::backdrop {
background: rgba(4, 7, 16, 0.93);
}
body.organ-page .o-viewer-frame {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
min-height: 0;
max-width: 100%;
margin: 0;
}
body.organ-page .o-viewer-image {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100vh - 10rem);
max-height: calc(100dvh - 10rem);
border-radius: 10px;
background: #0a1022;
box-shadow: 0 0 0 1px rgba(227, 194, 126, 0.25), 0 30px 80px rgba(0, 0, 0, 0.6);
}
body.organ-page .o-viewer-caption {
max-width: 60ch;
margin: 0;
color: #d9d2c3;
font-size: 0.95rem;
line-height: 1.5;
text-align: center;
}
body.organ-page .o-viewer-count {
position: absolute;
top: 1.35rem;
left: 1.4rem;
margin: 0;
color: #e3c27e;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
}
body.organ-page .o-viewer-button {
position: absolute;
display: grid;
place-items: center;
width: 2.9rem;
height: 2.9rem;
padding: 0;
border: 1px solid rgba(227, 194, 126, 0.5);
border-radius: 50%;
color: #f3e3bd;
background: rgba(15, 13, 10, 0.75);
cursor: pointer;
}
body.organ-page .o-viewer-button[hidden] {
display: none;
}
body.organ-page .o-viewer-button:hover {
background: rgba(227, 194, 126, 0.2);
}
body.organ-page .o-viewer-button:focus-visible {
outline: 2px solid #e3c27e;
outline-offset: 3px;
}
body.organ-page .o-viewer-button svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
body.organ-page .o-viewer-close {
top: 0.75rem;
right: 0.75rem;
}
body.organ-page :is(.o-viewer-prev, .o-viewer-next) {
top: 50%;
transform: translateY(-50%);
}
body.organ-page .o-viewer-prev {
left: clamp(0.5rem, 2vw, 1.5rem);
}
body.organ-page .o-viewer-next {
right: clamp(0.5rem, 2vw, 1.5rem);
}
@media (max-width: 640px) {
body.organ-page .o-viewer {
padding: 3.75rem 0.5rem 5rem;
}
body.organ-page :is(.o-viewer-prev, .o-viewer-next) {
top: auto;
bottom: 1rem;
transform: none;
}
body.organ-page .o-viewer-prev {
left: calc(50% - 3.6rem);
}
body.organ-page .o-viewer-next {
right: calc(50% - 3.6rem);
}
}
/* callout: what we observed */
body.organ-page .o-callout {
position: relative;
margin-top: clamp(2.75rem, 6vw, 4.5rem);
padding: clamp(1.25rem, 3vw, 2rem);
overflow: hidden;
border: 1px solid rgba(227, 194, 126, 0.42);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(227, 194, 126, 0.12), transparent 42%),
linear-gradient(180deg, #131d36, #0d1528);
}
body.organ-page .o-callout::before {
content: "";
position: absolute;
top: 1.5rem;
bottom: 1.5rem;
left: 0;
width: 4px;
border-radius: 0 4px 4px 0;
background: var(--o-gilt);
}
body.organ-page .o-callout-intro {
margin-top: 0.5rem;
color: var(--o-soft);
}
body.organ-page .o-callout ol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: 1.2rem 0 0;
padding: 0;
list-style: none;
counter-reset: obs;
}
body.organ-page .o-callout li {
padding: 1rem;
border: 1px solid var(--o-line);
border-radius: 14px;
color: var(--o-text);
background: rgba(6, 10, 20, 0.45);
line-height: 1.55;
counter-increment: obs;
}
body.organ-page .o-callout li::before {
content: counter(obs);
display: grid;
width: 1.8rem;
height: 1.8rem;
margin-bottom: 0.65rem;
place-items: center;
border: 1.5px solid var(--o-gold);
border-radius: 50%;
color: var(--o-gold);
font-family: var(--o-serif);
font-weight: 700;
}
body.organ-page .o-callout li strong {
display: block;
margin-bottom: 0.3rem;
color: var(--o-ink);
font-family: var(--o-serif);
font-size: 1.08rem;
}
/* sister organs */
body.organ-page .o-sisters {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
}
body.organ-page .o-sister {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 1rem;
padding: 1.15rem 1.2rem;
border: 1px solid var(--o-line);
border-radius: 18px;
background: linear-gradient(180deg, var(--o-panel-hi), var(--o-panel));
}
body.organ-page .o-sister p {
margin-top: 0.45rem;
font-size: 0.95rem;
line-height: 1.55;
}
body.organ-page .o-sister .o-sister-meta {
margin-top: 0.15rem;
color: var(--o-gold);
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.03em;
}
body.organ-page .o-sister--todo {
border-style: dashed;
border-color: rgba(255, 255, 255, 0.2);
background: rgba(13, 21, 40, 0.7);
}
body.organ-page .o-sister--todo .o-mark-tile {
opacity: 0.55;
filter: grayscale(0.7);
}
body.organ-page .o-badge {
padding: 0.22rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
white-space: nowrap;
text-transform: uppercase;
}
body.organ-page .o-badge--ok {
color: #082513;
background: #8fe0a9;
}
body.organ-page .o-badge--todo {
color: #f3d38a;
border: 1px dashed rgba(243, 211, 138, 0.75);
}
/* ============================================================ responsive */
@media (max-width: 1100px) {
body.organ-page .o-rank {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
body.organ-page .o-rank > li {
flex: 0 1 calc((100% - 3 * 0.85rem) / 4);
}
}
@media (max-width: 980px) {
body.organ-page .o-hero,
body.organ-page .o-hero--sub {
grid-template-columns: 1fr;
}
body.organ-page .o-facade {
order: -1;
width: min(100%, 34rem);
justify-self: center;
}
body.organ-page .o-facade--art {
width: min(100%, 24rem);
}
body.organ-page .o-facade--logo {
width: min(62%, 14rem);
}
body.organ-page .o-hero::before {
inset: 0 0 50% 0;
}
body.organ-page .o-facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.organ-page .o-overview,
body.organ-page .o-split {
grid-template-columns: 1fr;
}
body.organ-page .o-tabs {
grid-template-columns: repeat(6, minmax(0, 1fr));
row-gap: 1.2rem;
}
body.organ-page .o-timeline {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 1.75rem;
}
body.organ-page .o-timeline::before {
display: none;
}
body.organ-page .o-callout ol {
grid-template-columns: 1fr;
}
body.organ-page .o-sisters {
grid-template-columns: 1fr;
}
body.organ-page .o-gallery {
columns: 2;
}
}
@media (max-width: 640px) {
body.organ-page .o-hero {
padding: 1.1rem 1rem 1.3rem;
border-radius: var(--radius-md);
}
body.organ-page .o-nameboard {
margin-right: 0;
margin-left: 0;
}
body.organ-page .o-actions .button {
width: 100%;
}
body.organ-page .o-subnav ol {
gap: 0.25rem;
border-radius: 18px;
}
body.organ-page .o-subnav a {
min-height: 2.25rem;
padding: 0.35rem 0.75rem;
font-size: 0.88rem;
}
body.organ-page .o-facts > div {
padding: 0.85rem 0.9rem 0.95rem;
}
/* the rank becomes a list; each item keeps a small pipe at the left */
body.organ-page .o-rank {
display: grid;
grid-template-columns: 1fr;
gap: 0.6rem;
}
body.organ-page .o-rank a {
flex-direction: row;
align-items: stretch;
gap: 0.9rem;
padding: 0.85rem 1rem 0.85rem 0.85rem;
border: 1px solid var(--o-line);
border-left: 3px solid var(--o-gold);
background: linear-gradient(180deg, var(--o-panel-hi), var(--o-panel));
}
body.organ-page .o-rank-pipe {
flex: none;
width: 1.6rem;
height: auto;
}
body.organ-page .o-rank-body,
body.organ-page .o-rank-mouth,
body.organ-page .o-rank-foot {
width: 1.1rem;
min-width: 0;
}
body.organ-page .o-rank-body {
height: calc(var(--h) * 0.42);
border-radius: 0.3rem 0.3rem 0 0;
}
body.organ-page .o-rank-mouth {
height: 0.3rem;
}
body.organ-page .o-rank-foot {
height: 0.9rem;
}
body.organ-page .o-rank-card {
padding: 0;
border: 0;
background: none;
}
body.organ-page .o-rank-num {
display: none;
}
body.organ-page .o-rank-more {
display: none;
}
body.organ-page .o-pager {
grid-template-columns: 1fr;
}
body.organ-page .o-pager-next {
grid-column: auto;
}
body.organ-page .o-tabs {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 0.8rem 0.55rem 1.2rem;
}
body.organ-page .o-stoplist th,
body.organ-page .o-stoplist td {
padding: 0.65rem 0.75rem;
}
body.organ-page .o-stoplist th[scope="row"] {
white-space: normal;
}
body.organ-page .o-timeline {
grid-template-columns: 1fr;
row-gap: 1.25rem;
padding-left: 0.2rem;
}
body.organ-page .o-sister {
grid-template-columns: auto minmax(0, 1fr);
}
body.organ-page .o-sister .o-badge {
grid-column: 2;
justify-self: start;
}
body.organ-page .o-gallery {
column-gap: 0.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
body.organ-page *,
body.organ-page *::before,
body.organ-page *::after {
transition: none !important;
animation: none !important;
}
body.organ-page .o-facade-photo:hover img,
body.organ-page .o-gallery a:hover img {
transform: none;
}
}
/* ===================================== generated pages: additions to the design
The page fragments (site-src/pages//.html) are plain sections with
h2/h3, paragraphs and lists inside .o-article; the rules below give them the
long-form reading style, plus the components the generator adds. */
body.organ-page .o-article > section {
margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
body.organ-page .o-article > section > h2 {
margin-bottom: 1rem;
}
body.organ-page .o-article h3 {
margin: 1.7rem 0 0.6rem;
}
/* Only plain (unclassed) paragraphs and lists: the components style their own. */
body.organ-page .o-article section:not(.o-callout) > :is(p, ul, ol):not([class]),
body.organ-page .o-article .o-panel > :is(p, ul, ol):not([class]) {
max-width: 70ch;
}
body.organ-page .o-article :is(section, .o-panel) > p:not([class]),
body.organ-page .o-article :is(ul, ol):not([class]) > li {
font-size: 1.04rem;
line-height: 1.72;
}
body.organ-page .o-article :is(section, .o-panel) > * + :is(p, ul, ol, div, figure, dl, aside) {
margin-top: 1rem;
}
body.organ-page .o-article section:not(.o-callout) > :is(ul, ol):not([class]),
body.organ-page .o-article .o-panel > :is(ul, ol):not([class]) {
margin-bottom: 0;
padding-left: 1.3em;
}
body.organ-page .o-article :is(ul, ol):not([class]) > li + li {
margin-top: 0.4em;
}
body.organ-page .o-article strong {
color: var(--o-ink);
}
body.organ-page .o-article a:not([class]) {
color: var(--o-gold-hi);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
body.organ-page .o-article .o-footnote {
max-width: 70ch;
}
body.organ-page .o-table-wrap {
max-width: 100%;
overflow-x: auto;
}
body.organ-page .o-download h3 {
font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}
/* single photo and before/after pair */
body.organ-page .o-figure {
max-width: 46rem;
margin: 0;
}
body.organ-page .o-figure--narrow {
max-width: 30rem;
}
body.organ-page .o-compare {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
body.organ-page .o-compare figure {
margin: 0;
}
body.organ-page :is(.o-figure, .o-compare) .o-photo-link {
display: block;
overflow: hidden;
border: 1px solid var(--o-line);
border-radius: 14px;
background: #0a1022;
}
body.organ-page :is(.o-figure, .o-compare) img {
display: block;
width: 100%;
height: auto;
}
body.organ-page :is(.o-figure, .o-compare) figcaption {
margin-top: 0.55rem;
color: var(--o-soft);
font-size: 0.88rem;
line-height: 1.5;
}
/* external links with a short description */
body.organ-page .o-links {
display: grid;
gap: 0.6rem;
max-width: 52rem;
padding: 0;
list-style: none;
}
body.organ-page .o-links li {
margin: 0;
padding: 0.85rem 1rem;
border: 1px solid var(--o-line);
border-radius: 14px;
background: linear-gradient(180deg, var(--o-panel-hi), var(--o-panel));
}
body.organ-page .o-links a {
color: var(--o-gold-hi);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
body.organ-page .o-lang-note {
color: var(--o-soft);
font-size: 0.86rem;
}
body.organ-page .o-link-desc {
display: block;
margin-top: 0.2rem;
color: var(--o-soft);
font-size: 0.92rem;
line-height: 1.5;
}
/* numbered plan; each item may link back to the difficulty it solves */
body.organ-page .o-plan {
display: grid;
gap: 0.75rem;
max-width: 56rem;
padding: 0;
list-style: none;
counter-reset: plan;
}
body.organ-page .o-plan li {
position: relative;
margin: 0;
padding: 0.95rem 1rem 0.95rem 3.4rem;
border: 1px solid var(--o-line);
border-radius: 14px;
background: linear-gradient(180deg, var(--o-panel-hi), var(--o-panel));
counter-increment: plan;
}
body.organ-page .o-plan li::before {
content: counter(plan);
position: absolute;
top: 0.95rem;
left: 1rem;
display: grid;
width: 1.7rem;
height: 1.7rem;
place-items: center;
border: 1.5px solid var(--o-gold);
border-radius: 50%;
color: var(--o-gold);
font-family: var(--o-serif);
font-weight: 700;
}
body.organ-page .o-plan a {
color: var(--o-gold-hi);
font-weight: 700;
white-space: nowrap;
}
/* lessons: two columns, a small pipe as the bullet */
body.organ-page .o-lessons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem 1.75rem;
padding: 0;
list-style: none;
}
body.organ-page .o-lessons li {
position: relative;
margin: 0;
padding-left: 1.55rem;
}
body.organ-page .o-lessons li::before {
content: "";
position: absolute;
top: 0.42em;
left: 0.15rem;
width: 0.55rem;
height: 1.05rem;
border-radius: 0.22rem 0.22rem 0.05rem 0.05rem;
background: var(--o-tin);
clip-path: polygon(0 0, 100% 0, 100% 72%, 62% 100%, 38% 100%, 0 72%);
}
/* organ cards on the project page; a pipe field stands in where there is no photo */
body.organ-page .o-organs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
gap: 1rem;
padding: 0;
list-style: none;
}
body.organ-page .o-organs > li {
display: flex;
margin: 0;
}
body.organ-page .o-organ-card {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
border: 1px solid var(--o-line);
border-radius: 18px;
color: inherit;
background: linear-gradient(180deg, var(--o-panel-hi), var(--o-panel));
text-decoration: none;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
body.organ-page .o-organ-card:hover,
body.organ-page .o-organ-card:focus-visible {
border-color: var(--o-line-gold);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
body.organ-page .o-organ-media {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background:
radial-gradient(ellipse 60% 70% at 50% 60%, rgba(56, 189, 248, 0.16), transparent 70%),
linear-gradient(180deg, #121c36, #0a1022);
}
body.organ-page .o-organ-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
body.organ-page .o-organ-media svg {
display: block;
width: auto;
height: 86%;
margin: 7% auto 0;
}
body.organ-page .o-organ-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.35rem;
padding: 1rem 1.1rem 1.15rem;
}
body.organ-page .o-organ-kicker {
color: var(--o-gold);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body.organ-page .o-organ-title {
color: var(--o-ink);
font-family: var(--o-serif);
font-size: 1.28rem;
font-weight: 700;
line-height: 1.2;
}
body.organ-page .o-organ-text {
color: var(--o-soft);
font-size: 0.92rem;
line-height: 1.5;
}
body.organ-page .o-status {
align-self: flex-start;
margin-top: auto;
padding: 0.22rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.organ-page .o-organ-text + .o-status {
margin-top: 0.6rem;
}
body.organ-page .o-status--recorded {
color: #082513;
background: #8fe0a9;
}
body.organ-page .o-status--not-recorded {
color: #f3d38a;
border: 1px dashed rgba(243, 211, 138, 0.75);
}
body.organ-page .o-status--not-researched {
color: var(--o-soft);
border: 1px dashed rgba(255, 255, 255, 0.32);
}
@media (min-width: 1000px) {
body.organ-page .o-organs > li:first-child {
grid-column: span 2;
}
body.organ-page .o-organs > li:first-child .o-organ-media {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 760px) {
body.organ-page .o-compare,
body.organ-page .o-lessons {
grid-template-columns: 1fr;
}
}