/* Sic Presentation System — shared base
Structural behaviour only. Presentation-specific visual choices belong
in a second stylesheet loaded by the parent presentation page. */
:root {
--sic-bg: #fff;
--sic-fg: #151515;
--sic-muted: rgba(21, 21, 21, 0.48);
--sic-line: rgba(21, 21, 21, 0.22);
--sic-panel: rgba(255, 255, 255, 0.78);
--sic-accent: #5e5ce6;
--sic-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--sic-font-display: var(--sic-font-body);
--sic-menu-height: 4.6rem;
--sic-motion: 220ms;
}
* { box-sizing: border-box; }
html.sic-presentation-html,
html.sic-presentation-html body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--sic-bg); }
body.sic-presentation-mode { width: 100vw; height: 100vh; overflow: hidden; font-family: var(--sic-font-body); color: var(--sic-fg); }
button, input, select { font: inherit; }
.sic-deck { position: fixed; inset: 0; overflow: hidden; background: var(--sic-bg); }
.sic-slide {
position: fixed;
inset: 0;
display: grid;
place-items: center;
opacity: 0;
pointer-events: none;
transform: translateX(1.35%);
filter: blur(9px);
transition: opacity var(--sic-motion) ease, transform var(--sic-motion) ease, filter var(--sic-motion) ease;
}
.sic-slide.is-before { transform: translateX(-1.35%); }
.sic-slide.is-after { transform: translateX(1.35%); }
.sic-slide.is-active { opacity: 1; pointer-events: auto; transform: translateX(0); filter: blur(0); }
.sic-slide-frame {
position: relative;
width: 100vw;
height: 56.25vw;
max-width: 177.777778vh;
max-height: 100vh;
aspect-ratio: 16 / 9;
overflow: hidden;
padding: clamp(2rem, 5vmin, 5.5rem);
background: var(--sic-bg);
color: var(--sic-fg);
display: flex;
align-items: center;
justify-content: center;
}
.sic-slide-content { width: min(100%, 78rem); }
.sic-slide-content h1 { margin: 0 0 0.5em; font-family: var(--sic-font-display); font-size: clamp(3rem, 7vmin, 8rem); line-height: 0.95; font-weight: 600; letter-spacing: -0.04em; }
.sic-slide-content h2 { margin: 0 0 0.65em; font-size: clamp(1.8rem, 3vmin, 3.8rem); font-weight: 450; }
.sic-slide-content p, .sic-slide-content li { font-size: clamp(1.15rem, 2vmin, 2.15rem); line-height: 1.45; }
.sic-slide-logo { position: absolute; top: 1.4rem; right: 1.4rem; width: 3.25rem; opacity: 0.6; z-index: 4; }
.sic-slide-logo img { width: 100%; height: auto; display: block; }
.no-logo .sic-slide-logo { display: none; }
.sic-slide-audio { display: none; }
.sic-audio-indicator { position: absolute; top: 1.6rem; right: 1.6rem; width: 1rem; height: 1rem; opacity: 0; }
.sic-audio-indicator span { display: block; width: 100%; height: 100%; border: 1px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: sic-spin 1s linear infinite; }
.sic-slide.is-audio-playing .sic-audio-indicator { opacity: 0.45; }
@keyframes sic-spin { to { transform: rotate(360deg); } }
/* Placeholder slide types — deliberately restrained until each type is designed. */
.sic-slide-type-label, .sic-resource-kicker { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem !important; color: var(--sic-muted); }
.sic-placeholder-note { margin-top: 2rem; max-width: 42rem; color: var(--sic-muted); font-size: 0.95rem !important; }
.sic-slide-placeholder-frame { align-items: center; }
/* Central question */
.sic-question-slide-content { width: min(82%, 90rem); text-align: center; }
.sic-question-slide-content h1, .sic-question-slide-content p { font-size: clamp(2.8rem, 6vmin, 7rem); line-height: 1.08; }
/* Poem foundation */
.sic-slide-poem-frame {
width: 100%;
height: 100%;
min-height: 0;
display: block;
overflow: hidden;
}
/* ==================================================
Poem internal stage
================================================== */
.sic-poem-stage {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
}
/* Both internal states occupy exactly the same canvas. */
.sic-poem-intro,
.sic-poem-reading {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
transition:
opacity 180ms ease,
transform 180ms ease;
}
/* ==================================================
STATE 1 — BOOK INTRODUCTION
================================================== */
.sic-poem-intro {
display: grid;
grid-template-columns:
minmax(15rem, 0.42fr)
minmax(0, 0.58fr);
gap: clamp(
2.5rem,
6vw,
8rem
);
align-items: center;
opacity: 1;
transform: none;
pointer-events: auto;
}
.sic-poem-intro-cover {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.sic-poem-intro-cover-image,
.sic-poem-intro-cover-placeholder {
display: block;
/*
Large enough for an audience to recognise
the actual book.
*/
width: auto;
height: min(
68vh,
82%
);
max-width: 100%;
aspect-ratio: 2 / 3;
}
.sic-poem-intro-cover-image {
object-fit: contain;
}
.sic-poem-intro-cover-placeholder {
border: 1px solid var(--sic-line);
display: grid;
place-items: center;
color: var(--sic-muted);
font-size: clamp(
.7rem,
1vw,
1rem
);
letter-spacing: .14em;
}
.sic-poem-intro-copy {
min-width: 0;
align-self: center;
}
.sic-poem-intro-book {
margin:
0
0
clamp(.8rem, 1.7vmin, 1.5rem);
color: var(--sic-muted);
font-size: clamp(
1rem,
1.5vw,
1.8rem
);
line-height: 1.1;
letter-spacing: .025em;
}
.sic-poem-intro-title {
margin: 0;
max-width: 13ch;
font-family: var(--sic-font-display);
font-size: clamp(
3rem,
7vw,
8rem
);
font-weight: 550;
line-height: .94;
letter-spacing: -.045em;
}
/* ==================================================
STATE 2 — BILINGUAL POEM
================================================== */
.sic-poem-reading {
opacity: 0;
transform: translateY(.3rem);
pointer-events: none;
overflow: hidden;
}
.sic-poem-languages {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
/*
ALWAYS 50 / 50.
columns: 1 or columns: 2 only controls the
text inside each of these two halves.
*/
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap: clamp(
2rem,
4vw,
5rem
);
overflow: hidden;
}
.sic-poem-language {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows:
auto
minmax(0, 1fr);
overflow: hidden;
}
.sic-poem-language-no {
direction: ltr;
text-align: left;
}
.sic-poem-language-fa {
direction: rtl;
text-align: right;
unicode-bidi: plaintext;
}
/* ---------- Language labels ---------- */
.sic-poem-language-label {
margin:
0
0
clamp(.45rem, 1vmin, .8rem);
color: var(--sic-muted);
font-size: clamp(
.65rem,
.72vw,
.88rem
);
font-weight: 500;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
}
/* ---------- Fixed text containers ---------- */
.sic-poem-text {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.sic-poem-text-source {
/*
This fills the WHOLE language half.
One column therefore means:
one full-width Norwegian column
+
one full-width Farsi column
It does NOT become a centred narrow column.
*/
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
margin: 0;
column-count:
var(--sic-poem-columns, 1);
column-gap: clamp(
1.4rem,
2.3vw,
3.2rem
);
column-fill: auto;
font-size: clamp(
.82rem,
var(--sic-poem-size, 1.45vw),
2.3rem
);
line-height: 1.48;
text-align: inherit;
overflow: hidden;
}
.sic-poem-language-fa
.sic-poem-text-source {
line-height: 1.68;
}
/*
Markdown Norwegian fallback.
*/
.sic-poem-text-source p {
width: 100%;
margin:
0
0
.65em;
padding: 0;
max-width: none;
font-size: inherit;
line-height: inherit;
text-align: inherit;
white-space: pre-line;
break-inside: avoid;
}
.sic-poem-text-source br {
line-height: inherit;
}
/* ==================================================
Internal state switch
================================================== */
.sic-poem-stage.is-reading
.sic-poem-intro {
opacity: 0;
transform: translateY(-.3rem);
pointer-events: none;
}
.sic-poem-stage.is-reading
.sic-poem-reading {
opacity: 1;
transform: none;
pointer-events: auto;
}
/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
.sic-poem-intro {
grid-template-columns:
minmax(10rem, .4fr)
minmax(0, .6fr);
gap: 2rem;
}
.sic-poem-languages {
gap: 1.4rem;
}
}
/* Gallery placeholder */
.sic-gallery-placeholder { width: min(60vw, 56rem); height: 35vh; margin-top: 2rem; display: grid; grid-template-columns: 1.15fr 0.85fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.4rem; }
.sic-gallery-placeholder span { border: 1px solid var(--sic-line); background: rgba(127,127,127,0.05); }
.sic-gallery-placeholder span:first-child { grid-row: 1 / span 2; }
.sic-gallery-placeholder span:last-child { grid-column: 3; grid-row: 1 / span 2; }
/* Map placeholder */
.sic-slide-map-frame { padding: 0; background: #e9e9e7; }
.sic-map-placeholder { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 4rem; background: radial-gradient(circle at 48% 44%, rgba(255,255,255,.65), rgba(0,0,0,.03)); }
/* Browser shell */
.sic-slide-browser-frame { padding: clamp(1.5rem, 3vmin, 3rem); }
.sic-browser-shell { width: 100%; height: 100%; border: 1px solid var(--sic-line); display: grid; grid-template-rows: 2.6rem 1fr; background: #fff; color: #161616; }
.sic-browser-bar { display: flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid rgba(0,0,0,.12); padding: 0 .8rem; }
.sic-browser-bar > span { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(0,0,0,.16); }
.sic-browser-bar > div { margin-left: .8rem; font-size: .75rem; color: rgba(0,0,0,.5); }
.sic-browser-placeholder { display: grid; place-items: center; padding: 3rem; overflow: auto; }
/* Full media */
.sic-slide-full-media-frame { padding: 0; background: #000; }
.sic-slide-full-image, .sic-slide-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.sic-slide-layout-image-full .sic-slide-full-image { object-fit: cover; }
.sic-slide-layout-image-contain .sic-slide-full-image { object-fit: contain; background: var(--sic-bg); }
/* Two-column compatibility */
.sic-slide-two-column-frame { align-items: stretch; }
.sic-slide-two-column { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 8rem); align-items: center; }
.sic-slide-two-column-panel { opacity: 0; transform: translateY(.35rem); transition: opacity 300ms ease, transform 300ms ease; }
.sic-slide-two-column-panel.is-revealed { opacity: 1; transform: none; }
.sic-slide-two-column-right { text-align: right; }
.sic-poem-page { position: absolute; inset: 4rem; opacity: 0; pointer-events: none; transition: opacity 250ms ease; }
.sic-poem-page.is-active { opacity: 1; pointer-events: auto; }
/* Topic navigation */
.sic-topic-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; color: var(--sic-fg); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.sic-topic-nav-row { min-height: var(--sic-menu-height); display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; background: var(--sic-panel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(127,127,127,.14); pointer-events: auto; }
.sic-topic-state-toggle { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border: 0; background: transparent; color: var(--sic-muted); cursor: pointer; }
.sic-topic-list { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: space-evenly; gap: .45rem; min-width: 0; }
.sic-topic-item { appearance: none; border: 0; background: transparent; color: var(--sic-muted); padding: .42rem .8rem .36rem; min-width: 0; cursor: pointer; position: relative; display: grid; grid-template-rows: auto .35rem; gap: .35rem; align-items: center; }
.sic-topic-item::before, .sic-topic-item::after { content: ""; position: absolute; top: 0; bottom: 0; width: .55rem; border-top: 3px solid currentColor; border-bottom: 3px solid currentColor; }
.sic-topic-item::before { left: 0; border-left: 3px solid currentColor; }
.sic-topic-item::after { right: 0; border-right: 3px solid currentColor; }
.sic-topic-item.is-current { color: var(--sic-accent); }
.sic-topic-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: clamp(.62rem, .78vw, .86rem);
letter-spacing: .355em;
text-transform: uppercase;
font-family: "Cal Sans", Inter, sans-serif;
}
.sic-topic-dots { display: flex; justify-content: center; gap: .18rem; }
.sic-topic-dot { width: .22rem; height: .22rem; border-radius: 50%; border: 1px solid currentColor; opacity: .42; }
.sic-topic-dot.is-reached { background: currentColor; opacity: .72; }
.sic-topic-item.is-current .sic-topic-dot { opacity: .62; }
.sic-resource-tray { display: flex; justify-content: center; gap: .8rem; padding: .85rem 1rem .55rem; transform: translateY(.5rem); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.sic-resource-launch { border: 1px solid var(--sic-line); background: var(--sic-panel); color: var(--sic-fg); padding: .55rem .85rem; cursor: pointer; backdrop-filter: blur(12px); }
.sic-topic-nav[data-state="expanded"] .sic-resource-tray { opacity: 1; transform: none; pointer-events: auto; }
.sic-topic-nav[data-state="minimised"] .sic-topic-item:not(.is-current) { display: none; }
.sic-topic-nav[data-state="minimised"] .sic-topic-list { justify-content: center; }
.sic-topic-nav[data-state="minimised"] .sic-topic-item.is-current { flex: 0 0 auto; }
body.sic-topic-menu-hidden-by-slide .sic-topic-nav,
body.sic-resource-open .sic-topic-nav,
body.sic-media-overlay-open .sic-topic-nav { opacity: 0; transform: translateY(100%); pointer-events: none; }
/* Resource layer */
.sic-resource-layer { position: fixed; inset: 0; z-index: 80; background: var(--sic-bg); color: var(--sic-fg); opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.sic-resource-layer.is-open { opacity: 1; pointer-events: auto; }
.sic-resource-close, .sic-media-overlay-close { position: absolute; z-index: 3; top: 1rem; right: 1rem; border: 0; background: rgba(255,255,255,.68); color: #111; width: 2.5rem; height: 2.5rem; font-size: 1.7rem; cursor: pointer; backdrop-filter: blur(10px); }
.sic-resource-panel { position: absolute; inset: 0; overflow: auto; }
.sic-resource-placeholder { min-height: 100%; display: grid; align-content: center; justify-items: center; padding: 5rem; text-align: center; }
.sic-resource-placeholder h1 { margin: 0; font-size: clamp(3rem, 8vw, 9rem); font-weight: 550; letter-spacing: -.045em; }
.sic-resource-placeholder > p:last-child { color: var(--sic-muted); max-width: 42rem; }
/* Media overlay shell for gallery/full-media development later */
.sic-media-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.96); opacity: 0; pointer-events: none; transition: opacity 140ms ease; }
.sic-media-overlay.is-open { opacity: 1; pointer-events: auto; }
.sic-media-overlay-stage { width: 100%; height: 100%; display: grid; place-items: center; }
.sic-media-overlay-stage img, .sic-media-overlay-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Questions — retained as a presentation-side shell; new question site comes later. */
.sic-question-toggle { position: fixed; top: .85rem; left: .85rem; z-index: 70; border: 1px solid var(--sic-line); background: var(--sic-panel); color: var(--sic-muted); width: 2rem; height: 2rem; cursor: pointer; backdrop-filter: blur(10px); }
.sic-question-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 75; width: min(42rem, 42vw); background: var(--sic-panel); backdrop-filter: blur(18px); transform: translateX(102%); transition: transform 220ms ease; pointer-events: none; }
.sic-question-drawer.is-open { transform: none; pointer-events: auto; }
.sic-question-drawer-inner { height: 100%; overflow-y: auto; padding: 2rem; }
.sic-question-drawer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sic-question-close { border: 0; background: transparent; font-size: 2rem; cursor: pointer; }
.sic-question-list { list-style: none; padding: 0; }
.sic-question-item { padding: 1rem 0; border-top: 1px solid var(--sic-line); }
.sic-question-name { font-size: .78rem; color: var(--sic-muted); margin-bottom: .25rem; }
.sic-question-text { font-size: 1.2rem; line-height: 1.35; }
.sic-question-status, .sic-question-prompt-line { color: var(--sic-muted); }
body.sic-presentation-dark { --sic-bg: #0b0b0b; --sic-fg: #f2f2f0; --sic-muted: rgba(242,242,240,.48); --sic-line: rgba(242,242,240,.2); --sic-panel: rgba(12,12,12,.78); }
body.sic-presentation-dark .sic-browser-shell { filter: brightness(.88); }
@media (max-width: 900px) {
.sic-topic-list { overflow-x: auto; justify-content: flex-start; }
.sic-topic-item { flex: 0 0 auto; }
.sic-slide-poem-frame { grid-template-columns: 1fr; }
.sic-poem-meta { display: none; }
.sic-question-drawer { width: min(100vw, 34rem); }
}
/* Text-size compatibility */
.sic-text-small .sic-slide-content p, .sic-text-small .sic-slide-content li { font-size: clamp(.9rem, 1.25vmin, 1.35rem); }
.sic-text-medium .sic-slide-content p, .sic-text-medium .sic-slide-content li { font-size: clamp(1.15rem, 2vmin, 2.15rem); }
.sic-text-large .sic-slide-content p, .sic-text-large .sic-slide-content li { font-size: clamp(1.45rem, 2.6vmin, 2.8rem); }
.sic-text-xl .sic-slide-content p, .sic-text-xl .sic-slide-content li { font-size: clamp(1.8rem, 3.2vmin, 3.5rem); }
.sic-question-prompt { position: fixed; top: .85rem; left: .85rem; z-index: 70; display: flex; align-items: center; gap: .6rem; }
.sic-question-prompt .sic-question-toggle { position: static; }
.sic-question-public { padding: .45rem .65rem; background: var(--sic-panel); color: var(--sic-muted); font-size: .78rem; backdrop-filter: blur(10px); }
/* === SIC CANVAS MODES: START === */
/*
Shared presentation geometry.
STANDARD
Readable central content with generous margins.
WIDE
Uses most of the projector canvas while retaining a safe area
above the topic navigation.
IMMERSIVE
Owns the complete 16:9 presentation canvas. Intended for maps,
full-screen images and video.
*/
:root {
--sic-slide-pad-standard: clamp(2rem, 5vmin, 5.5rem);
--sic-slide-pad-wide: clamp(1.4rem, 3.1vmin, 3.5rem);
/*
Topic navigation is fixed over the presentation.
Ordinary slides reserve this amount so important material
cannot disappear underneath it.
*/
--sic-topic-safe-gap: clamp(0.75rem, 1.5vmin, 1.4rem);
--sic-topic-safe-area: calc(
var(--sic-menu-height) + var(--sic-topic-safe-gap)
);
}
/* ---------- Standard canvas ---------- */
.sic-slide[data-canvas="standard"] .sic-slide-frame {
padding:
var(--sic-slide-pad-standard)
var(--sic-slide-pad-standard)
calc(var(--sic-slide-pad-standard) + var(--sic-topic-safe-area));
}
/* ---------- Wide canvas ---------- */
.sic-slide[data-canvas="wide"] .sic-slide-frame {
padding:
var(--sic-slide-pad-wide)
var(--sic-slide-pad-wide)
calc(var(--sic-slide-pad-wide) + var(--sic-topic-safe-area));
}
.sic-slide[data-canvas="wide"] .sic-slide-content {
width: 100%;
max-width: none;
}
/*
Gallery is still only a placeholder, but it should already
demonstrate the intended projector scale.
*/
.sic-slide[data-canvas="wide"].sic-slide-layout-gallery
.sic-gallery-placeholder {
width: 100%;
max-width: none;
height: clamp(20rem, 48vh, 36rem);
}
/* ---------- Immersive canvas ---------- */
.sic-slide[data-canvas="immersive"] .sic-slide-frame {
padding: 0;
}
/*
If a slide explicitly hides the topic navigation, reclaim the
reserved safe area even if its canvas has been manually set to
standard or wide.
*/
body.sic-topic-menu-hidden-by-slide
.sic-slide.is-active[data-canvas="standard"]
.sic-slide-frame {
padding-bottom: var(--sic-slide-pad-standard);
}
body.sic-topic-menu-hidden-by-slide
.sic-slide.is-active[data-canvas="wide"]
.sic-slide-frame {
padding-bottom: var(--sic-slide-pad-wide);
}
/*
Poem and browser layouts use the available vertical space
instead of drifting into the navigation area.
*/
.sic-slide[data-canvas="wide"].sic-slide-layout-poem
.sic-slide-poem-frame {
align-items: stretch;
}
.sic-slide[data-canvas="wide"].sic-slide-layout-browser
.sic-slide-browser-frame {
align-items: stretch;
justify-content: stretch;
}
/* === SIC CANVAS MODES: END === */
/* === SIC QUIZ COMPONENT: START === */
.sic-slide-quiz-frame {
align-items: stretch;
justify-content: stretch;
}
.sic-quiz {
width: 100%;
height: 100%;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
--sic-quiz-correct: #287a4b;
--sic-quiz-wrong: #a63e3e;
}
.sic-quiz-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 2rem;
padding-bottom: clamp(0.8rem, 1.5vmin, 1.4rem);
}
.sic-quiz-kicker {
margin: 0;
font-size: clamp(0.85rem, 1.25vmin, 1.25rem);
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--sic-muted);
}
.sic-quiz-meta {
display: flex;
align-items: baseline;
gap: clamp(1.2rem, 2.4vw, 3rem);
white-space: nowrap;
font-size: clamp(0.8rem, 1.15vmin, 1.15rem);
color: var(--sic-muted);
}
.sic-quiz-score strong {
color: var(--sic-fg);
font-weight: 600;
}
.sic-quiz-stage {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
}
.sic-quiz-question {
display: none;
width: 100%;
height: 100%;
min-height: 0;
}
.sic-quiz-question.is-active {
display: grid;
animation: sic-quiz-question-in 150ms ease-out;
}
.sic-quiz-question[data-question-type="map"] {
grid-template-rows:
auto
minmax(0, 1fr)
auto
auto;
gap: clamp(0.65rem, 1.25vmin, 1.2rem);
}
.sic-quiz-question[data-question-type="text"] {
grid-template-rows:
auto
minmax(0, 1fr)
auto;
gap: clamp(1.2rem, 2.2vmin, 2.2rem);
}
@keyframes sic-quiz-question-in {
from {
opacity: 0;
filter: blur(3px);
transform: translateX(0.35rem);
}
to {
opacity: 1;
filter: none;
transform: none;
}
}
.sic-quiz-question-title {
margin: 0;
font-size: clamp(2.4rem, 5.3vmin, 6.2rem);
line-height: 0.98;
font-weight: 550;
letter-spacing: -0.035em;
}
.sic-quiz-visual {
position: relative;
min-height: 0;
overflow: hidden;
}
.sic-quiz-map {
width: 100%;
height: 100%;
}
.sic-quiz-map img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.sic-quiz-map-missing {
height: 100%;
display: grid;
place-items: center;
border: 1px solid var(--sic-line);
color: var(--sic-muted);
}
.sic-quiz-visual::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
}
.sic-quiz-visual.is-flash-wrong::after {
animation: sic-quiz-flash-wrong 260ms ease-out;
}
.sic-quiz-visual.is-flash-correct::after {
animation: sic-quiz-flash-correct 260ms ease-out;
}
@keyframes sic-quiz-flash-wrong {
0% {
opacity: 0;
}
35% {
opacity: 1;
background: rgba(166, 62, 62, 0.30);
}
100% {
opacity: 0;
}
}
@keyframes sic-quiz-flash-correct {
0% {
opacity: 0;
}
35% {
opacity: 1;
background: rgba(40, 122, 75, 0.28);
}
100% {
opacity: 0;
}
}
.sic-quiz-choices {
width: min(100%, 78rem);
margin: auto;
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: clamp(0.65rem, 1.4vmin, 1.2rem);
align-self: center;
}
.sic-quiz-choices-map {
width: min(100%, 58rem);
grid-template-columns:
repeat(5, minmax(0, 1fr));
}
.sic-quiz-choice {
appearance: none;
min-height: clamp(4.5rem, 8.2vmin, 7.5rem);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(0.7rem, 1.3vw, 1.4rem);
padding:
clamp(0.7rem, 1.4vmin, 1.2rem)
clamp(1rem, 1.8vw, 1.8rem);
border: 1px solid var(--sic-line);
border-radius: 0;
background: transparent;
color: var(--sic-fg);
font: inherit;
text-align: left;
cursor: pointer;
transition:
border-color 100ms ease,
background 100ms ease,
color 100ms ease;
}
.sic-quiz-choice:hover:not(:disabled) {
border-color: var(--sic-accent);
}
.sic-quiz-choice:disabled {
cursor: default;
opacity: 1;
}
.sic-quiz-choice-key {
font-size: clamp(1.35rem, 2.8vmin, 2.8rem);
line-height: 1;
font-weight: 650;
}
.sic-quiz-choice-text {
font-size: clamp(1.2rem, 2.5vmin, 2.5rem);
line-height: 1.05;
}
.sic-quiz-choice-mark {
min-width: 1.5em;
font-size: clamp(1.2rem, 2.2vmin, 2.2rem);
line-height: 1;
text-align: right;
}
.sic-quiz-choice.is-wrong {
border-color: var(--sic-quiz-wrong);
background: color-mix(
in srgb,
var(--sic-quiz-wrong) 13%,
transparent
);
color: var(--sic-quiz-wrong);
}
.sic-quiz-choice.is-correct {
border-color: var(--sic-quiz-correct);
background: color-mix(
in srgb,
var(--sic-quiz-correct) 13%,
transparent
);
color: var(--sic-quiz-correct);
}
.sic-quiz-choices-map .sic-quiz-choice {
min-height: clamp(3.6rem, 6.5vmin, 5.6rem);
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
text-align: center;
}
.sic-quiz-choices-map .sic-quiz-choice-key {
font-size: clamp(1.8rem, 3.8vmin, 3.7rem);
}
.sic-quiz-choices-map .sic-quiz-choice-mark {
position: absolute;
pointer-events: none;
}
.sic-quiz-reveal {
min-height: 1.1em;
margin: 0;
font-size: clamp(1rem, 1.8vmin, 1.8rem);
line-height: 1;
font-weight: 550;
text-align: center;
color: var(--sic-quiz-correct);
opacity: 0;
transform: translateY(0.2rem);
transition:
opacity 120ms ease,
transform 120ms ease;
}
.sic-quiz-reveal.is-visible {
opacity: 1;
transform: none;
}
body.sic-presentation-dark .sic-quiz-map img {
filter:
brightness(0.66)
contrast(1.08);
}
body.sic-presentation-dark .sic-quiz-choice.is-wrong {
color: #e47a7a;
}
body.sic-presentation-dark .sic-quiz-choice.is-correct {
color: #71c895;
}
@media (max-width: 900px) {
.sic-quiz-choices:not(.sic-quiz-choices-map) {
grid-template-columns: 1fr;
}
.sic-quiz-header {
gap: 1rem;
}
}
/* === SIC QUIZ COMPONENT: END === */
/* === SIC MISSING WORD: START === */
.sic-missing-word-frame {
align-items: stretch;
justify-content: stretch;
}
.sic-missing-word {
width: 100%;
height: 100%;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
.sic-missing-word-header {
padding-bottom: clamp(1rem, 2.2vmin, 2rem);
}
.sic-missing-word-header h1 {
margin: 0;
font-size: clamp(2.1rem, 4.3vmin, 5rem);
line-height: 0.95;
font-weight: 560;
letter-spacing: -0.04em;
}
.sic-missing-word-body {
min-height: 0;
display: grid;
grid-template-columns:
minmax(0, 3fr)
minmax(13rem, 1fr);
gap: clamp(2rem, 5vw, 6rem);
}
.sic-missing-word-poem {
min-width: 0;
min-height: 0;
display: flex;
align-items: center;
}
.sic-missing-word-lines {
width: 100%;
max-height: 100%;
column-count: var(--sic-missing-columns, 2);
column-gap: clamp(2rem, 4vw, 5rem);
column-fill: balance;
}
.sic-missing-line {
break-inside: avoid;
margin: 0 0 0.24em;
font-size: clamp(1.15rem, 2.15vmin, 2.35rem);
line-height: 1.36;
font-weight: 400;
}
.sic-missing-stanza-break {
height: 0.8em;
}
.sic-missing-gap {
display: inline-flex;
align-items: baseline;
justify-content: center;
min-width: var(--sic-gap-width, 7ch);
height: 1.05em;
margin: 0 0.10em;
border-bottom:
0.085em solid
color-mix(
in srgb,
currentColor 55%,
transparent
);
vertical-align: baseline;
}
.sic-missing-gap-answer {
opacity: 0;
white-space: nowrap;
transition:
opacity 130ms ease,
color 300ms ease;
}
.sic-missing-gap.is-revealed
.sic-missing-gap-answer {
opacity: 1;
}
.sic-missing-gap.is-fresh
.sic-missing-gap-answer {
color: var(--sic-accent);
}
.sic-missing-word-cloud {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: clamp(1rem, 2.5vw, 3rem);
border-left: 1px solid var(--sic-line);
}
.sic-missing-word-cloud h2 {
margin: 0 0 clamp(1.2rem, 2.5vmin, 2.5rem);
font-size: clamp(0.8rem, 1.25vmin, 1.2rem);
line-height: 1;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.11em;
color: var(--sic-muted);
}
.sic-missing-word-cloud-list {
display: flex;
flex-wrap: wrap;
gap:
clamp(0.8rem, 1.8vmin, 1.5rem)
clamp(1rem, 1.8vw, 2rem);
align-content: center;
}
.sic-missing-word-cloud-item {
font-size: clamp(1.15rem, 2.2vmin, 2.25rem);
line-height: 1;
font-weight: 470;
transition:
opacity 180ms ease,
color 180ms ease;
user-select: none;
}
.sic-missing-word-cloud-item.is-used {
opacity: 0.20;
}
body.sic-presentation-dark
.sic-missing-word-cloud {
border-left-color: var(--sic-line);
}
@media (max-width: 900px) {
.sic-missing-word-body {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
gap: 1.5rem;
}
.sic-missing-word-cloud {
padding-left: 0;
padding-top: 1rem;
border-left: 0;
border-top: 1px solid var(--sic-line);
}
}
/* === SIC MISSING WORD: END === */
/* === SIC POEM METADATA + READING TITLE: START === */
/* --------------------------------------------------
Book introduction metadata
-------------------------------------------------- */
.sic-poem-intro-book-title {
margin:
0
0
clamp(1rem, 2vmin, 1.8rem);
max-width: 13ch;
font-family: var(--sic-font-display);
font-size: clamp(
3rem,
6.5vw,
7.5rem
);
font-weight: 550;
line-height: .94;
letter-spacing: -.045em;
}
.sic-poem-intro-author {
margin:
0
0
clamp(.6rem, 1.2vmin, 1rem);
font-size: clamp(
1.35rem,
2.2vw,
2.7rem
);
line-height: 1.12;
font-weight: 450;
}
.sic-poem-intro-publication {
margin: 0;
color: var(--sic-muted);
font-size: clamp(
.9rem,
1.25vw,
1.45rem
);
line-height: 1.3;
}
/*
Old intro-title/book styles are no longer used,
but neutralise them if cached markup appears.
*/
.sic-poem-intro-title,
.sic-poem-intro-book {
margin: 0;
}
/* --------------------------------------------------
Poem reading state
-------------------------------------------------- */
.sic-poem-reading {
display: grid;
grid-template-rows:
auto
minmax(0, 1fr);
gap: clamp(
.8rem,
1.6vmin,
1.5rem
);
}
.sic-poem-reading-header {
min-width: 0;
}
.sic-poem-reading-title {
margin: 0;
font-family: var(--sic-font-display);
font-size: clamp(
1.8rem,
3.1vw,
4rem
);
font-weight: 550;
line-height: .96;
letter-spacing: -.035em;
}
/*
Languages fill all remaining vertical space
beneath the poem title.
*/
.sic-poem-reading
.sic-poem-languages {
min-height: 0;
}
/* === SIC POEM METADATA + READING TITLE: END === */
/* === SIC POEM STANZA SPACING: START === */
/*
Tight line spacing within a stanza.
*/
.sic-poem-language-no
.sic-poem-text-source {
line-height: 1.14;
}
.sic-poem-language-fa
.sic-poem-text-source {
line-height: 1.26;
}
/*
Markdown stanza breaks in the Norwegian text
become separate paragraphs.
*/
.sic-poem-text-source > p {
margin:
0
0
1.35em;
font-size: inherit;
line-height: inherit;
}
.sic-poem-text-source > p:last-child {
margin-bottom: 0;
}
/*
Farsi entered through text: | currently uses
elements. Two consecutive breaks represent the blank
line between stanzas.
Give the second break substantial extra space while
leaving ordinary line breaks tight.
*/
.sic-poem-text-source br + br {
display: block;
content: "";
margin-top: 0.9em;
}
/* === SIC POEM STANZA SPACING: END === */
/* === SIC POEM LINE BREAK FIX === */
/*
Markdown has already converted each poetic line break
into a
. Do not also render the source newline,
otherwise every line appears double-spaced.
*/
.sic-poem-text-source > p {
white-space: normal;
}
/* === END SIC POEM LINE BREAK FIX === */
/* === SIC BROWSER EMBED: START === */
.sic-browser-shell {
overflow: hidden;
}
.sic-browser-viewport {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
background: #fff;
}
.sic-browser-iframe {
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
border: 0;
background: #fff;
}
.sic-browser-address {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* === SIC BROWSER EMBED: END === */
/* === SIC INACTIVE SLIDE INTERACTION SAFETY: START === */
/*
Slides remain stacked in the DOM for presentation transitions.
No descendant of an inactive slide may receive mouse/touch events,
even if an individual component such as a poem state explicitly
sets pointer-events:auto.
*/
.sic-slide:not(.is-active),
.sic-slide:not(.is-active) * {
pointer-events: none !important;
}
/*
Interactive content on the current slide remains available.
*/
.sic-slide.is-active .sic-browser-iframe,
.sic-slide.is-active .sic-browser-viewport {
pointer-events: auto;
}
/* === SIC INACTIVE SLIDE INTERACTION SAFETY: END === */
/* === SIC REAL GALLERY: START === */
.sic-slide-gallery-frame {
align-items: stretch;
justify-content: stretch;
overflow: hidden;
}
.sic-gallery-layout {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows:
auto
minmax(0, 1fr);
gap: clamp(
1rem,
2vmin,
2rem
);
}
.sic-gallery-header {
min-width: 0;
}
.sic-gallery-header > * {
margin-top: 0;
}
.sic-gallery-header > *:last-child {
margin-bottom: 0;
}
.sic-gallery-header h1 {
margin:
0
0
.25em;
font-size: clamp(
2rem,
4vw,
5rem
);
line-height: .95;
}
.sic-gallery-header p {
margin: 0;
color: var(--sic-muted);
font-size: clamp(
.85rem,
1.15vw,
1.35rem
);
line-height: 1.3;
}
/* --------------------------------------------------
Image grid
-------------------------------------------------- */
.sic-gallery-grid {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns:
repeat(
var(--sic-gallery-columns, 3),
minmax(0, 1fr)
);
grid-auto-rows:
minmax(0, 1fr);
gap: clamp(
.35rem,
.7vmin,
.75rem
);
overflow: hidden;
}
.sic-gallery-item {
position: relative;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
background: rgba(
127,
127,
127,
.08
);
cursor: pointer;
}
.sic-gallery-item img {
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
object-fit: cover;
transform: scale(1);
transition:
transform 180ms ease,
opacity 180ms ease;
}
.sic-gallery-item:hover img {
transform: scale(1.015);
}
/*
Optional alternative:
gallery_fit: contain
*/
.sic-gallery-fit-contain
.sic-gallery-item img {
object-fit: contain;
}
/* --------------------------------------------------
Empty gallery
-------------------------------------------------- */
.sic-gallery-empty {
width: 100%;
height: 100%;
display: grid;
place-items: center;
border: 1px solid var(--sic-line);
color: var(--sic-muted);
}
/* --------------------------------------------------
Full-screen gallery image
-------------------------------------------------- */
.sic-media-overlay-stage
.sic-gallery-overlay-image {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background: #050505;
}
/* === SIC REAL GALLERY: END === */
/* === SIC GALLERY LIGHTBOX: START === */
.sic-media-overlay {
background: #050505;
overflow: hidden;
}
.sic-media-overlay-stage {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: grid;
place-items: center;
}
/* --------------------------------------------------
Blurred background copy
-------------------------------------------------- */
.sic-gallery-overlay-backdrop {
position: absolute;
inset: -4rem;
overflow: hidden;
z-index: 0;
background: #050505;
}
.sic-gallery-overlay-backdrop img {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
filter:
blur(42px)
brightness(.38)
saturate(.75);
transform: scale(1.12);
opacity: .9;
}
/*
Dark veil keeps the actual image dominant.
*/
.sic-gallery-overlay-backdrop::after {
content: "";
position: absolute;
inset: 0;
background:
rgba(0, 0, 0, .28);
}
/* --------------------------------------------------
Foreground lightbox
-------------------------------------------------- */
.sic-gallery-lightbox {
position: relative;
z-index: 1;
max-width: 80vw;
max-height: 80vh;
padding: clamp(
.4rem,
.8vmin,
.8rem
);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background:
rgba(15, 15, 15, .72);
border:
1px solid
rgba(255, 255, 255, .14);
border-radius:
clamp(.35rem, .6vmin, .7rem);
box-shadow:
0 2rem 6rem
rgba(0, 0, 0, .55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Always show the COMPLETE image. */
.sic-gallery-lightbox
.sic-gallery-overlay-image {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 78vh;
object-fit: contain;
background: transparent;
}
/*
The existing generic overlay rule previously allows
an image to occupy 100% of the stage. Override it
specifically for gallery lightboxes.
*/
.sic-media-overlay-stage
.sic-gallery-lightbox
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 78vh;
object-fit: contain;
}
/* Close button remains above everything. */
.sic-media-overlay-close {
z-index: 5;
}
/* === SIC GALLERY LIGHTBOX: END === */
/* === SIC GALLERY LIGHT BACKDROP OVERRIDE === */
.sic-gallery-overlay-backdrop img {
filter:
blur(34px)
brightness(.92)
saturate(.9);
opacity: .82;
}
.sic-gallery-overlay-backdrop::after {
background:
rgba(255, 255, 255, .08);
}
/* === END SIC GALLERY LIGHT BACKDROP OVERRIDE === */
/* ==================================================
SIC CONTENT LABEL SYSTEM
One restrained accent-colour identifier per slide
================================================== */
.sic-content-label,
.sic-slide-type-label {
margin:
0
0
clamp(.7rem, 1.2vmin, 1.15rem);
color:
var(--sic-accent) !important;
font-size:
clamp(
.72rem,
.82vw,
1rem
) !important;
font-weight: 600;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;
}
/*
The existing quiz introductory line uses the same
visual treatment without changing answer colours.
*/
.sic-slide-layout-quiz
.sic-slide-type-label {
color:
var(--sic-accent) !important;
}
/* Poem label spacing */
.sic-poem-content-label {
margin-bottom:
clamp(.8rem, 1.3vmin, 1.2rem);
}
/* Gallery label */
.sic-gallery-content-label {
margin-bottom:
clamp(.65rem, 1vmin, 1rem);
}
/* === END SIC CONTENT LABEL SYSTEM === */
/* === SIC QUIZ CONTENT LABEL === */
.sic-quiz-kicker {
margin:
0
0
clamp(.7rem, 1.2vmin, 1.15rem);
color:
var(--sic-accent) !important;
font-size:
clamp(
.72rem,
.82vw,
1rem
) !important;
font-weight: 600;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;
}
/* === END SIC QUIZ CONTENT LABEL === */
/* ==========================================================
SIC FACTSHEET SYSTEM
========================================================== */
.sic-slide-factsheet-frame {
align-items: stretch;
justify-content: stretch;
overflow: hidden;
}
.sic-factsheet {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows:
auto
minmax(0, 1fr);
gap:
clamp(
1rem,
2.2vmin,
2rem
);
}
/* ----------------------------------------------------------
Header
---------------------------------------------------------- */
.sic-factsheet-header {
min-width: 0;
}
.sic-factsheet-label {
margin-bottom:
clamp(
.65rem,
1vmin,
1rem
);
}
.sic-factsheet-header h1 {
margin: 0;
font-size:
clamp(
2rem,
3.5vw,
4.5rem
);
line-height: .95;
font-weight: 650;
letter-spacing: -.035em;
}
/* ----------------------------------------------------------
Two adaptive columns
---------------------------------------------------------- */
.sic-factsheet-columns {
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap:
clamp(
2.5rem,
5vw,
6rem
);
align-items: start;
}
.sic-factsheet-column {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
gap:
clamp(
1rem,
2vmin,
2rem
);
}
/* ----------------------------------------------------------
Individual item
---------------------------------------------------------- */
.sic-factsheet-item {
min-width: 0;
display: grid;
grid-template-columns:
clamp(
3.25rem,
5.2vw,
6rem
)
minmax(0, 1fr);
gap:
clamp(
.9rem,
1.6vw,
1.7rem
);
align-items: start;
}
.sic-factsheet-copy {
min-width: 0;
}
.sic-factsheet-copy h2 {
margin:
0
0
.55em;
color:
var(--sic-fg);
font-size:
clamp(
1rem,
1.45vw,
1.7rem
);
line-height: 1.05;
font-weight: 700;
letter-spacing: -.015em;
}
.sic-factsheet-copy p {
margin:
0
0
.62em;
color:
var(--sic-fg);
font-size:
clamp(
.74rem,
.95vw,
1.08rem
);
line-height: 1.28;
}
.sic-factsheet-copy p:last-child {
margin-bottom: 0;
}
/* ----------------------------------------------------------
Icon gutter
---------------------------------------------------------- */
.sic-factsheet-icon {
width: 100%;
aspect-ratio: 1;
display: grid;
place-items: center;
align-self: start;
}
.sic-factsheet-icon img {
display: block;
width: 82%;
height: 82%;
object-fit: contain;
}
/*
Temporary icon tile used until a real SVG/PNG is uploaded.
*/
.sic-factsheet-icon span {
width:
clamp(
2.6rem,
4.3vw,
4.8rem
);
height:
clamp(
2.6rem,
4.3vw,
4.8rem
);
display: grid;
place-items: center;
border:
1px solid
var(--sic-accent);
border-radius: 50%;
color:
var(--sic-accent);
font-size:
clamp(
.72rem,
1vw,
1.05rem
);
font-weight: 700;
letter-spacing: .08em;
line-height: 1;
}
/*
Monochrome black icons uploaded from the original
artwork become white in dark presentation mode.
*/
body.sic-presentation-dark
.sic-factsheet-icon img {
filter:
brightness(0)
invert(1);
}
/* ----------------------------------------------------------
Compact variant
Intended for information-heavy sheets such as
"Laws affecting Iranian women".
---------------------------------------------------------- */
.sic-factsheet-density-compact
.sic-factsheet-column {
gap:
clamp(
.75rem,
1.35vmin,
1.25rem
);
}
.sic-factsheet-density-compact
.sic-factsheet-item {
grid-template-columns:
clamp(
2.8rem,
4.5vw,
5rem
)
minmax(0, 1fr);
gap:
clamp(
.75rem,
1.25vw,
1.35rem
);
}
.sic-factsheet-density-compact
.sic-factsheet-copy h2 {
margin-bottom: .4em;
font-size:
clamp(
.92rem,
1.25vw,
1.45rem
);
}
.sic-factsheet-density-compact
.sic-factsheet-copy p {
margin-bottom: .48em;
font-size:
clamp(
.68rem,
.82vw,
.94rem
);
line-height: 1.22;
}
/* ----------------------------------------------------------
Responsive fallback
---------------------------------------------------------- */
@media (max-width: 900px) {
.sic-factsheet-columns {
grid-template-columns: 1fr;
overflow-y: auto;
}
}
/* === END SIC FACTSHEET SYSTEM === */
/* ==========================================================
SIC FACTSHEET FRONTMATTER CONTROLS
========================================================== */
/* Header-to-content spacing */
.sic-factsheet {
gap:
calc(
clamp(
1rem,
2.2vmin,
2rem
)
*
var(--sic-fs-header-gap-scale, 1)
);
}
/* ----------------------------------------------------------
Page title
---------------------------------------------------------- */
.sic-factsheet-header h1 {
font-size:
calc(
clamp(
2rem,
3.5vw,
4.5rem
)
*
var(--sic-fs-title-scale, 1)
);
}
/* ----------------------------------------------------------
Column proportions and spacing
---------------------------------------------------------- */
.sic-factsheet-columns {
grid-template-columns:
minmax(
0,
var(--sic-fs-left-weight, 1fr)
)
minmax(
0,
var(--sic-fs-right-weight, 1fr)
);
column-gap:
calc(
clamp(
2.5rem,
5vw,
6rem
)
*
var(--sic-fs-column-gap-scale, 1)
);
}
/*
CSS custom properties cannot automatically append "fr",
so the template passes numeric weights and these child
selectors convert them into proportional flex widths.
*/
.sic-factsheet-columns {
display: flex;
}
.sic-factsheet-column:first-child {
flex:
var(--sic-fs-left-weight, 1)
1
0;
}
.sic-factsheet-column:last-child {
flex:
var(--sic-fs-right-weight, 1)
1
0;
}
/* ----------------------------------------------------------
Vertical spacing between entries
---------------------------------------------------------- */
.sic-factsheet-column {
gap:
calc(
clamp(
1rem,
2vmin,
2rem
)
*
var(--sic-fs-item-gap-scale, 1)
);
}
/* ----------------------------------------------------------
Icons
---------------------------------------------------------- */
.sic-factsheet-item {
grid-template-columns:
calc(
clamp(
3.25rem,
5.2vw,
6rem
)
*
var(--sic-fs-icon-scale, 1)
)
minmax(0, 1fr);
}
.sic-factsheet-icon span {
width:
calc(
clamp(
2.6rem,
4.3vw,
4.8rem
)
*
var(--sic-fs-icon-scale, 1)
);
height:
calc(
clamp(
2.6rem,
4.3vw,
4.8rem
)
*
var(--sic-fs-icon-scale, 1)
);
}
/* ----------------------------------------------------------
Item headings
---------------------------------------------------------- */
.sic-factsheet-copy h2 {
font-size:
calc(
clamp(
1rem,
1.45vw,
1.7rem
)
*
var(--sic-fs-heading-scale, 1)
);
}
/* ----------------------------------------------------------
Body copy
---------------------------------------------------------- */
.sic-factsheet-copy p {
font-size:
calc(
clamp(
.74rem,
.95vw,
1.08rem
)
*
var(--sic-fs-body-scale, 1)
);
line-height:
var(--sic-fs-line-height, 1.28);
}
/* Compact mode retains its smaller baseline,
then applies the frontmatter multiplier. */
.sic-factsheet-density-compact
.sic-factsheet-copy h2 {
font-size:
calc(
clamp(
.92rem,
1.25vw,
1.45rem
)
*
var(--sic-fs-heading-scale, 1)
);
}
.sic-factsheet-density-compact
.sic-factsheet-copy p {
font-size:
calc(
clamp(
.68rem,
.82vw,
.94rem
)
*
var(--sic-fs-body-scale, 1)
);
line-height:
var(--sic-fs-line-height, 1.22);
}
/* Compact item spacing also responds to control. */
.sic-factsheet-density-compact
.sic-factsheet-column {
gap:
calc(
clamp(
.75rem,
1.35vmin,
1.25rem
)
*
var(--sic-fs-item-gap-scale, 1)
);
}
/* Mobile fallback remains stacked. */
@media (max-width: 900px) {
.sic-factsheet-columns {
display: grid;
grid-template-columns: 1fr;
}
}
/* === END SIC FACTSHEET FRONTMATTER CONTROLS === */
/* === SIC SOCIAL SLIDE: START === */
/* ==========================================================
Social / Instagram presentation slide
========================================================== */
.sic-slide-social-frame {
padding:
1.75%
2.5%
calc(
1.75% +
var(--sic-topic-safe-area)
);
align-items: stretch;
justify-content: stretch;
}
.sic-social-slide {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows:
auto
minmax(0, 1fr);
gap: clamp(
.75rem,
1.3cqw,
1.5rem
);
}
/* ----------------------------------------------------------
Header
---------------------------------------------------------- */
.sic-social-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 2rem;
}
.sic-social-header
.sic-content-label {
margin: 0;
}
.sic-social-kind {
margin: 0;
color: var(--sic-muted);
font-size: clamp(
.7rem,
.72cqw,
1rem
);
line-height: 1;
text-transform: uppercase;
letter-spacing: .12em;
}
/* ----------------------------------------------------------
Stage
---------------------------------------------------------- */
.sic-social-stage {
position: relative;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
/*
Instagram's embed starts with a roughly 540px-wide
document.
We retain that as its natural rendering size and then
scale the complete embed relative to the presentation
canvas with JavaScript.
This keeps post and Reel proportions intact.
*/
.sic-instagram-embed-shell {
--sic-social-fit: 1;
position: absolute;
left: 50%;
top: 50%;
width: 540px;
transform:
translate(-50%, -50%)
scale(var(--sic-social-fit));
transform-origin: center center;
transition:
opacity 180ms ease;
z-index: 2;
}
.sic-instagram-placeholder {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
}
.sic-instagram-placeholder > a {
display: block;
padding: 3rem 2rem;
text-align: center;
color: var(--sic-muted);
text-decoration: none;
}
/* ----------------------------------------------------------
Loading state
---------------------------------------------------------- */
.sic-social-loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
color: var(--sic-muted);
font-size: .85rem;
white-space: nowrap;
}
.sic-instagram-embed-shell.is-loaded
.sic-social-loading {
display: none;
}
/* ----------------------------------------------------------
Failure / screenshot fallback
---------------------------------------------------------- */
.sic-social-fallback {
position: absolute;
inset: 0;
margin: 0;
display: grid;
place-items: center;
}
.sic-social-fallback[hidden] {
display: none;
}
.sic-social-fallback img {
display: block;
max-width: 92%;
max-height: 96%;
width: auto;
height: auto;
object-fit: contain;
}
.sic-social-failure {
position: absolute;
inset: 0;
display: grid;
place-content: center;
gap: 1rem;
text-align: center;
}
.sic-social-failure[hidden] {
display: none;
}
.sic-social-failure p {
margin: 0;
color: var(--sic-muted);
}
.sic-social-failure a {
color: var(--sic-fg);
text-underline-offset: .2em;
}
/*
Once a fallback is required, remove the failed
Instagram shell from the stage.
*/
.sic-social-slide.is-failed
.sic-instagram-embed-shell {
display: none;
}
/* ==========================================================
Dark theme
========================================================== */
body.sic-presentation-dark
.sic-social-kind,
body.sic-presentation-dark
.sic-social-loading {
color: var(--sic-muted);
}
/* === SIC SOCIAL SLIDE: END === */
/* ==========================================================
SIC SOCIAL LAYOUT — TWO COLUMN + CROPPED INITIAL VIEW
========================================================== */
/*
Override the earlier grid behaviour.
One post:
centred single column.
Two posts:
genuine 50/50 side-by-side columns.
:has() means we no longer depend on the generated
data-social-count value.
*/
.sic-social-grid {
display: grid !important;
grid-template-columns:
minmax(0, 1fr) !important;
align-items: start !important;
width: 100%;
height: auto;
min-height: 0;
overflow: visible;
}
.sic-social-grid:has(
.sic-social-column +
.sic-social-column
) {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
) !important;
column-gap: 2.4cqw;
}
/*
Single post should not become unnecessarily wide.
*/
.sic-social-grid:not(
:has(
.sic-social-column +
.sic-social-column
)
)
.sic-social-column {
width: min(
100%,
34cqw
);
justify-self: center;
}
/*
Two-column posts use the full half-width,
but keep Instagram itself at a sensible reading size.
*/
.sic-social-grid:has(
.sic-social-column +
.sic-social-column
)
.sic-social-column {
width: 100%;
min-width: 0;
}
/* ----------------------------------------------------------
Column structure
---------------------------------------------------------- */
.sic-social-column {
display: grid;
grid-template-rows:
auto
auto;
align-content: start;
min-width: 0;
min-height: 0;
gap: .55cqw;
}
/* ----------------------------------------------------------
Initial viewing window
This deliberately crops the long Instagram card.
The media and first part of the caption remain visible;
the rest stays below the fold and can be reached by
scrolling inside this area.
---------------------------------------------------------- */
.sic-social-viewport {
height: 40.5cqw !important;
max-height: 40.5cqw !important;
min-height: 0;
overflow-x: hidden !important;
overflow-y: auto !important;
display: block;
box-sizing: border-box;
overscroll-behavior:
contain;
scrollbar-width:
thin;
scrollbar-gutter:
stable;
}
/*
Keep the actual Instagram object top-aligned.
*/
.sic-instagram-embed-shell {
position: relative;
top: auto;
left: auto;
transform: none !important;
transform-origin:
top center;
margin:
0
auto;
width: min(
100%,
500px
);
min-height: 0;
}
/*
Slightly narrower embeds when two posts are shown.
This helps keep vertical Reels within a useful
presentation-sized viewing area.
*/
.sic-social-grid:has(
.sic-social-column +
.sic-social-column
)
.sic-instagram-embed-shell {
width: min(
100%,
440px
);
}
/*
Instagram iframe remains its natural full height.
Crucially we do NOT shrink its height to the viewport.
The viewport clips it and provides the scrolling.
*/
.sic-instagram-embed-shell iframe {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin:
0
auto !important;
}
/* Labels belong above their own post */
.sic-social-column-label {
width: 100%;
margin: 0;
text-align: center;
}
/* ==========================================================
SIC SOCIAL — LARGE PROJECTOR VIEW
Media is prioritised over long Instagram captions.
========================================================== */
/*
Use more of each half of the presentation.
Instagram naturally builds an embed at about 540px wide.
We scale that complete live embed up rather than allowing
a small card to sit in the middle of a large column.
*/
.sic-social-grid:has(
.sic-social-column +
.sic-social-column
)
.sic-instagram-embed-shell {
width: 540px !important;
max-width: none !important;
zoom: 1.22;
}
/*
A single post can be larger still.
*/
.sic-social-grid:not(
:has(
.sic-social-column +
.sic-social-column
)
)
.sic-instagram-embed-shell {
width: 540px !important;
max-width: none !important;
zoom: 1.35;
}
/*
Keep the enlarged post centred inside its column.
*/
.sic-instagram-embed-shell {
margin:
0
auto !important;
}
/*
Give the media almost all available presentation height.
The caption now begins close to the bottom of the visible
window. Everything below that remains available by scrolling.
*/
.sic-social-viewport {
height: 43cqw !important;
max-height: 43cqw !important;
padding:
0
.4cqw
1cqw !important;
}
/*
The little "Instagram Post" headings are useful but should
consume almost no presentation space.
*/
.sic-social-column {
gap: .25cqw !important;
}
.sic-social-column-label {
font-size: .52cqw !important;
opacity: .6;
}
/*
With two posts, reduce the gap between columns slightly
so more width belongs to the actual media.
*/
.sic-social-grid:has(
.sic-social-column +
.sic-social-column
) {
column-gap: 1.2cqw !important;
}
/*
Allow the enlarged embed to use the column cleanly.
*/
.sic-social-column {
overflow: hidden;
}
.sic-social-viewport {
scrollbar-gutter: auto;
}
/* === SIC SLIDE OVERVIEW: START === */
.sic-overview-layer {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
background: var(--sic-bg, #fff);
color: var(--sic-fg, #111);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 140ms ease,
visibility 140ms ease;
}
.sic-overview-layer.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.sic-overview-frame {
position: relative;
width: 100vw;
height: 56.25vw;
max-width: 177.777778vh;
max-height: 100vh;
box-sizing: border-box;
display: grid;
grid-template-rows:
auto
minmax(0, 1fr);
gap: 1.2%;
padding:
2%
2.35%
2.35%;
overflow: hidden;
container-type: inline-size;
}
.sic-overview-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 2rem;
}
.sic-overview-kicker {
margin: 0;
color: var(--sic-accent);
font-family:
"Cal Sans",
Inter,
sans-serif;
font-size: .72cqw;
font-weight: 600;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;
}
.sic-overview-help {
margin: 0;
padding-right: 2.5cqw;
color: var(--sic-muted);
font-size: .58cqw;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}
.sic-overview-close {
position: absolute;
top: 1%;
right: 1%;
width: 2.2rem;
height: 2.2rem;
border: 0;
background: transparent;
color: var(--sic-muted);
font-size: 1.7rem;
line-height: 1;
cursor: pointer;
z-index: 5;
}
/* Grid */
.sic-overview-grid {
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns:
repeat(
5,
minmax(0, 1fr)
);
align-content: start;
gap:
.9cqw
1.05cqw;
overflow-x: hidden;
overflow-y: auto;
padding:
.2cqw
.3cqw
.8cqw;
scrollbar-width: thin;
}
/* Card */
.sic-overview-card {
position: relative;
aspect-ratio: 16 / 9;
min-width: 0;
overflow: hidden;
padding: 0;
appearance: none;
border:
1px solid
var(--sic-line);
background:
var(--sic-panel);
color:
var(--sic-fg);
cursor: pointer;
text-align: left;
transition:
transform 110ms ease,
border-color 110ms ease,
box-shadow 110ms ease;
}
.sic-overview-card:hover,
.sic-overview-card:focus-visible {
transform: translateY(-.1cqw);
border-color: var(--sic-fg);
outline: none;
}
.sic-overview-card.is-current {
border:
2px solid
var(--sic-accent);
box-shadow:
0 0 0 1px
var(--sic-accent);
}
/* Number */
.sic-overview-number {
position: absolute;
top: .42cqw;
left: .48cqw;
z-index: 5;
display: grid;
place-items: center;
min-width: 1.42cqw;
height: 1.42cqw;
padding:
0
.25cqw;
box-sizing: border-box;
background:
rgba(0,0,0,.72);
color: #fff;
font-size: .54cqw;
line-height: 1;
}
/* Text-only card */
.sic-overview-title-only {
position: absolute;
inset: 0;
display: grid;
place-items: center;
box-sizing: border-box;
padding:
1.5cqw
1.15cqw;
text-align: center;
font-family:
"Cal Sans",
Inter,
sans-serif;
font-size: .98cqw;
font-weight: 550;
line-height: 1.05;
}
/* Thumbnail */
.sic-overview-thumbnail {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.sic-overview-card.has-thumbnail::after {
content: "";
position: absolute;
inset:
50%
0
0;
z-index: 2;
background:
linear-gradient(
to bottom,
transparent,
rgba(0,0,0,.78)
);
pointer-events: none;
}
.sic-overview-thumb-title {
position: absolute;
left: .62cqw;
right: .62cqw;
bottom: .55cqw;
z-index: 4;
color: #fff;
font-family:
"Cal Sans",
Inter,
sans-serif;
font-size: .68cqw;
font-weight: 550;
line-height: 1.05;
text-shadow:
0 1px 3px
rgba(0,0,0,.8);
}
/* Section marker */
.sic-overview-section {
position: absolute;
top: .45cqw;
right: .48cqw;
z-index: 5;
max-width: 60%;
padding:
.19cqw
.31cqw;
color:
rgba(255,255,255,.9);
background:
rgba(0,0,0,.58);
font-size: .43cqw;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sic-overview-card:not(.has-thumbnail)
.sic-overview-section {
color: var(--sic-muted);
background: transparent;
}
/* === SIC SLIDE OVERVIEW: END === */
/* === SIC INTRODUCTION SLIDE: START === */
.sic-introduction-frame {
padding: 5.2cqw 6.5cqw 7cqw;
align-items: stretch;
justify-content: stretch;
}
.sic-introduction {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: auto 1fr;
gap: 4.5cqw;
}
.sic-introduction-people {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6cqw;
}
.sic-introduction-person h2 {
margin: 0 0 .45cqw;
font-family: "Cal Sans", Inter, sans-serif;
font-size: 2.05cqw;
line-height: 1;
letter-spacing: -.025em;
font-weight: 600;
}
.sic-introduction-person p {
margin: 0;
font-size: .92cqw;
line-height: 1.3;
color: rgba(20, 20, 20, .58);
}
.sic-introduction-statement {
height: auto;
max-width: 82cqw;
align-self: center;
}
.sic-introduction-statement p {
margin: 0;
font-family: "Cal Sans", Inter, sans-serif;
font-size: 3.05cqw;
line-height: 1.14;
letter-spacing: -.032em;
font-weight: 450;
}
.sic-introduction-statement strong {
display: inline-block;
color: var(--sic-accent);
font-weight: 650;
}
body.sic-presentation-dark .sic-introduction-person p {
color: rgba(255, 255, 255, .58);
}
.sic-introduction.is-mapped
.sic-introduction-statement strong {
animation: sic-intro-term-focus 650ms ease both;
animation-delay:
calc(var(--sic-intro-order, 0) * 180ms);
}
.sic-topic-item.is-intro-link {
animation: sic-intro-nav-focus 650ms ease both;
animation-delay:
calc(var(--sic-intro-order, 0) * 180ms);
}
@keyframes sic-intro-term-focus {
0%, 100% {
transform: translateY(0) scale(1);
}
45% {
transform: translateY(-.08em) scale(1.07);
}
}
@keyframes sic-intro-nav-focus {
0%, 100% {
opacity: 1;
}
45% {
color: var(--sic-accent);
opacity: 1;
}
}
/* === SIC INTRODUCTION SLIDE: END === */
/* === SIC INTRODUCTION STAGED REVEAL === */
.sic-introduction-first-name {
color: var(--sic-accent);
}
.sic-introduction-statement {
max-width: 87cqw;
opacity: 0;
transform: translateY(.7cqw);
transition:
opacity 700ms ease,
transform 700ms ease;
pointer-events: none;
}
.sic-introduction-statement p {
font-size: 3.55cqw;
line-height: 1.1;
letter-spacing: -.035em;
}
.sic-introduction.is-statement-visible
.sic-introduction-statement,
.sic-introduction.is-mapped
.sic-introduction-statement {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* === END SIC INTRODUCTION STAGED REVEAL === */
/* === SIC INTRODUCTION IMPACT LAYOUT === */
.sic-introduction-frame {
padding: 0 6.5cqw 5.5cqw;
}
.sic-introduction {
position: relative;
display: block;
width: 100%;
height: 100%;
}
/* Stage 1: names and roles */
.sic-introduction-people {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-content: center;
align-items: start;
gap: 8cqw;
transition:
opacity 650ms ease,
transform 650ms ease;
opacity: 1;
transform: translateY(0);
}
.sic-introduction-person {
text-align: center;
min-width: 20cqw;
}
.sic-introduction-person h2 {
margin: 0 0 .65cqw;
font-family: "Cal Sans", Inter, sans-serif;
font-size: 2.3cqw;
line-height: 1;
letter-spacing: -.035em;
font-weight: 600;
}
.sic-introduction-person p {
margin: 0;
font-size: 1cqw;
line-height: 1.35;
}
/* Stage 2: statement */
.sic-introduction-statement {
position: absolute;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(.6cqw);
transition:
opacity 750ms ease,
transform 750ms ease;
pointer-events: none;
}
.sic-introduction-statement > * {
width: min(100%, 81cqw);
}
.sic-introduction-statement p {
margin: 0;
text-align: left;
font-family: "Cal Sans", Inter, sans-serif;
font-size: 4.6cqw;
line-height: 1.06;
letter-spacing: -.045em;
font-weight: 450;
}
/* Fade from people to statement */
.sic-introduction.is-statement-visible
.sic-introduction-people,
.sic-introduction.is-mapped
.sic-introduction-people {
opacity: 0;
transform: translateY(-.5cqw);
pointer-events: none;
}
.sic-introduction.is-statement-visible
.sic-introduction-statement,
.sic-introduction.is-mapped
.sic-introduction-statement {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* === END SIC INTRODUCTION IMPACT LAYOUT === */
/* === SIC INTRODUCTION CLASSROOM SIZE FIX === */
.sic-slide-layout-introduction
.sic-introduction-statement {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: none;
height: 100%;
}
.sic-slide-layout-introduction
.sic-introduction-statement > p {
width: 72cqw;
max-width: 72cqw;
margin: 0;
text-align: left;
font-family: "Cal Sans", Inter, sans-serif;
font-size: 4.7cqw !important;
line-height: 1.06 !important;
letter-spacing: -.045em;
font-weight: 450;
}
.sic-slide-layout-introduction
.sic-introduction-statement > p + p {
margin-top: 2.2cqw;
}
.sic-slide-layout-introduction
.sic-introduction-statement strong {
color: var(--sic-accent);
font-weight: 650;
}
/* === END SIC INTRODUCTION CLASSROOM SIZE FIX === */
/* === SIC INTRODUCTION FRONTMATTER SIZES === */
.sic-slide-layout-introduction
.sic-introduction-person h2 {
font-size: var(--sic-intro-name-size, 2.4cqw);
}
.sic-slide-layout-introduction
.sic-introduction-person p {
font-size: var(--sic-intro-role-size, 1.05cqw);
}
.sic-slide-layout-introduction
.sic-introduction-statement > p {
font-size: var(--sic-intro-statement-size, 3.6cqw) !important;
}
/* === END SIC INTRODUCTION FRONTMATTER SIZES === */
/* === SIC PROFILE SLIDE: START === */
.sic-profile-frame {
padding: 0;
align-items: stretch;
justify-content: stretch;
}
.sic-profile {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
}
.sic-profile-image-panel {
position: absolute;
inset: 0 auto 0 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #161616;
transition:
width 850ms cubic-bezier(.22,.8,.28,1);
}
.sic-profile-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(
--sic-profile-image-position,
50% 50%
);
}
.sic-profile-image-shade {
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0,0,0,.65) 0%,
rgba(0,0,0,.12) 42%,
rgba(0,0,0,0) 68%
);
pointer-events: none;
}
.sic-profile-identity {
position: absolute;
left: 5.5cqw;
bottom: 6.2cqw;
max-width: 42cqw;
color: #fff;
transition:
opacity 700ms ease,
transform 850ms cubic-bezier(.22,.8,.28,1);
}
.sic-profile-identity h1 {
margin: 0;
font-family: "Cal Sans", Inter, sans-serif;
font-size:
var(--sic-profile-name-size, 4.2cqw);
line-height: .96;
letter-spacing: -.045em;
font-weight: 600;
}
.sic-profile-identity p {
margin: .8cqw 0 0;
font-size:
var(--sic-profile-date-size, 1.15cqw);
line-height: 1.2;
letter-spacing: .08em;
}
.sic-profile-detail {
position: absolute;
top: 0;
right: 0;
width: 45%;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
padding:
5.5cqw
5cqw
7cqw
4.2cqw;
opacity: 0;
transform: translateX(1.5cqw);
pointer-events: none;
transition:
opacity 650ms ease 180ms,
transform 750ms ease 180ms;
}
.sic-profile-detail-inner {
width: 100%;
}
.sic-profile-detail-inner p {
margin: 0 0 1.4cqw;
font-family: Inter, sans-serif;
font-size:
var(--sic-profile-detail-size, 1.7cqw) !important;
line-height: 1.35 !important;
}
.sic-profile-detail-inner strong {
color: var(--sic-accent);
}
/* Second state */
.sic-profile.is-detail
.sic-profile-image-panel {
width: 55%;
}
.sic-profile.is-detail
.sic-profile-identity {
max-width: 38cqw;
}
.sic-profile.is-detail
.sic-profile-detail {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
body.sic-presentation-dark
.sic-profile {
background: #101010;
color: #f5f5f5;
}
/* === SIC PROFILE SLIDE: END === */
/* === SIC PROFILE DETAIL IMAGE === */
.sic-profile-detail-inner {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.5cqw;
}
.sic-profile-detail-image {
display: block;
width: 100%;
height: 25cqw;
object-fit: cover;
}
.sic-profile-detail-text {
width: 100%;
}
.sic-profile-detail-text p {
margin: 0 0 .8cqw;
}
/* === END SIC PROFILE DETAIL IMAGE === */
/* === SIC SOCIAL + SIDE IMAGE === */
/*
Without a side image this wrapper disappears from layout,
preserving the existing social-slide behaviour.
*/
.sic-social-body {
display: contents;
}
/* Image + Instagram mode */
.sic-social-slide.has-side-image
.sic-social-body {
display: grid;
grid-template-columns:
minmax(0, var(--sic-social-image-width, 46%))
minmax(0, 1fr);
gap: 3cqw;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
}
/* Composite image */
.sic-social-side-image {
margin: 0;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sic-social-side-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Instagram occupies the remaining space */
.sic-social-slide.has-side-image
.sic-social-grid {
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
}
/*
One Instagram item is deliberately given the whole
social half rather than retaining the old wide layout.
*/
.sic-social-slide.has-side-image
.sic-social-grid[data-social-count="1"] {
grid-template-columns: minmax(0, 1fr);
}
/* dark mode */
body.sic-presentation-dark
.sic-social-side-image {
background: transparent;
}
/* === END SIC SOCIAL + SIDE IMAGE === */