<<<<<<< SEARCH
:root{
--bg-1: #0f0b1a; /* deep night */
--bg-2: #2b0f37; /* richer magenta */
--spray1: rgba(255,92,92,0.14);
--spray2: rgba(0,222,150,0.12);
--spray3: rgba(255,222,50,0.12);
--card:#0f0f12;
--muted:#000; /* text color forced to black */
--accent:#ff3d81;
--gap:14px;
--neon: #00ffd5;
--glow: rgba(0,255,213,0.06);
--elite-font: "Cinzel", "Trajan Pro", "Garamond", Georgia, serif;
}
/* Page title placed as an overlay inside the photo header so it sits on the images */
.page-title{
position:absolute; /* positioned relative to #photoHeader (which is position:relative) */
top:18px;
left:50%;
transform:translateX(-50%);
z-index:6; /* above images but below global overlays */
color:#d92b2b; /* vivid red */
font-family: var(--elite-font);
font-weight:900;
font-size:clamp(36px, 8vw, 110px); /* scalable very large */
letter-spacing:0.06em;
text-transform:uppercase;
padding:6px 14px;
border-radius:8px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
box-shadow: 0 8px 30px rgba(217,43,43,0.18), 0 2px 0 rgba(255,255,255,0.02) inset;
text-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.02);
pointer-events:none;
}
/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{height:100%}
/* Base sizing: larger typographic scale for "big letters" */
html{font-size:18px}
body{
font-family: var(--elite-font);
background: radial-gradient(1200px 420px at 8% 18%, rgba(255,255,255,0.02), transparent 12%),
radial-gradient(900px 340px at 92% 78%, rgba(255,255,255,0.01), transparent 10%),
linear-gradient(140deg, var(--bg-1), var(--bg-2));
color:var(--muted); /* black */
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
height:100%;
padding:26px;
background-repeat:no-repeat;
/* allow the page to scroll so all notebook questions can be shown */
overflow:auto;
font-weight:600;
letter-spacing:0.06em; /* give all text a more distinctive tracked look */
text-rendering:optimizeLegibility;
-webkit-font-feature-settings: "liga" 1, "kern" 1;
}
/* Spray paint texture overlays */
body::before,
body::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
mix-blend-mode:screen;
}
body::before{
background:
radial-gradient(380px 200px at 8% 16%, var(--spray1), transparent 30%),
radial-gradient(260px 140px at 82% 76%, var(--spray2), transparent 30%),
radial-gradient(170px 90px at 50% 38%, var(--spray3), transparent 30%);
opacity:0.95;
filter:blur(16px) saturate(1.15);
}
body::after{
background-image: url('data:image/svg+xml;utf8,');
opacity:0.85;
mix-blend-mode:overlay;
filter:blur(6px);
}
/* Layout: graffiti-friendly header */
#photoHeader{
width:100%;
/* slightly reduced header height so the notebook below has more vertical space for all prompts */
height:48vh;
min-height:280px;
overflow:visible;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:2;
border-radius:14px;
padding:12px 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
box-shadow: 0 30px 110px rgba(0,0,0,0.75), inset 0 2px 0 rgba(255,255,255,0.02);
transform:skewY(-0.8deg);
}
/* Row container for two images */
.photo-row{
width:100%;
height:100%;
display:flex;
gap:20px;
align-items:center;
justify-content:center;
padding:8px;
box-sizing:border-box;
}
/* Left image (primary) */
#topPhoto{
flex:1 1 62%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
border-radius:12px;
transform: rotate(-3deg) translateY(0);
transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, filter .3s;
box-shadow:
0 30px 80px rgba(0,0,0,0.78),
0 0 60px rgba(0,0,0,0.45);
background-color:#000;
border:10px solid rgba(255,255,255,0.035);
position:relative;
z-index:3;
filter: saturate(1.06) contrast(1.02);
}
/* Hover/tap lift for primary image */
#topPhoto:hover,
#topPhoto:focus{
transform: translateY(-8px) rotate(-1.2deg) scale(1.02);
box-shadow:
0 40px 110px rgba(0,0,0,0.85),
0 0 90px rgba(255,61,129,0.06);
cursor:pointer;
}
/* Right image (secondary) */
#secondPhoto{
flex:1 1 36%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
border-radius:12px;
transform: rotate(2.5deg) translateY(0);
transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, filter .3s;
box-shadow:
0 20px 56px rgba(0,0,0,0.68),
0 0 36px rgba(0,0,0,0.36);
background-color:#000;
border:8px solid rgba(255,255,255,0.03);
position:relative;
z-index:3;
filter: saturate(1.02);
}
/* Hover/tap lift for secondary image */
#secondPhoto:hover,
#secondPhoto:focus{
transform: translateY(-6px) rotate(1deg) scale(1.01);
box-shadow:
0 30px 72px rgba(0,0,0,0.8),
0 0 40px rgba(0,255,213,0.04);
cursor:pointer;
}
/* Neon outline using pseudo-element approach (via header) */
#photoHeader::after{
content:"";
position:absolute;
inset:6% 4%;
z-index:2;
border-radius:14px;
pointer-events:none;
box-shadow:
0 0 120px rgba(255,61,129,0.12),
0 0 180px rgba(0,255,213,0.06);
mix-blend-mode:screen;
transform:rotate(-1.2deg);
}
/* A sticker/bubble pop on the corner */
#photoHeader::before{
content:"BAM";
font-weight:900;
letter-spacing:1px;
position:absolute;
top:6%;
left:5%;
z-index:5;
background:linear-gradient(90deg,#ffef5b,#ff6a6a);
color:#111; /* badge text slightly darker */
padding:8px 12px;
border-radius:12px;
transform:rotate(-12deg);
box-shadow: 0 12px 22px rgba(0,0,0,0.5);
font-family: var(--elite-font);
font-size:15px;
}
/* If cover fit is applied, make image straighter and crop slightly with neon glow */
#topPhoto.cover-fit{
object-fit:cover;
height:100%;
transform: rotate(0deg) scale(1.02);
border-color: rgba(255,61,129,0.12);
box-shadow:
0 28px 68px rgba(0,0,0,0.8),
0 0 48px rgba(255,61,129,0.12);
}
/* Main content occupies remaining viewport height */
#mainContent{
height:36vh; /* tuned to balance header and content */
padding:18px;
display:flex;
align-items:flex-start;
justify-content:center;
gap:16px;
flex-direction:column;
z-index:3;
position:relative;
}
/* Debate container: two separate cards, not overlapping the header */
.debate-container{
width:100%;
max-width:1400px;
display:flex;
gap:22px;
align-items:flex-start;
justify-content:center;
margin-top:8px;
z-index:4;
position:relative;
padding:0 6px;
box-sizing:border-box;
}
/* New section wrapper to ensure debate prompts are visually and semantically
separated from the main content and positioned below the header images */
#debateSection{
width:100%;
display:flex;
justify-content:center;
margin-top:10px; /* clear space beneath header */
z-index:4;
position:relative;
pointer-events:auto;
}
/* Debate questions: individual card (left and right share styling) */
.debate-questions{
flex:1 1 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border-radius:14px;
padding:28px 36px;
box-shadow: 0 22px 36px rgba(0,0,0,0.58);
color:var(--muted); /* black */
border: 2px dashed rgba(255,255,255,0.03);
font-size:1.22rem;
min-width:300px;
transition: transform .18s ease, box-shadow .18s ease;
}
/* Card lift on hover (desktop) */
.debate-questions:hover{
transform: translateY(-6px);
box-shadow: 0 30px 60px rgba(0,0,0,0.62);
}
/* Left box gets a small tilt for style but no overlap */
.debate-questions.left{
transform: rotate(-0.6deg);
}
/* Right box opposite tilt */
.debate-questions.right{
transform: rotate(0.6deg);
}
/* Keep headings visible and simple */
.debate-questions h2{
font-family: var(--elite-font);
font-size:2.0rem;
margin-bottom:10px;
color:#000;
letter-spacing:0.08em;
display:block;
padding:6px 10px;
border-radius:6px;
background:transparent;
text-transform:uppercase;
font-variant:small-caps;
text-shadow: 0 2px 0 rgba(255,255,255,0.02);
}
/* Questions styled as "elite" large lettering */
.debate-questions ol{
margin-left:12px;
color:var(--muted); /* black */
font-size:1.6rem; /* much larger for emphasis */
line-height:1.5;
list-style-type:decimal;
padding-left:22px;
font-family: var(--elite-font);
font-weight:600;
letter-spacing:0.08em;
-webkit-font-smoothing:antialiased;
}
.debate-questions .question{
padding:18px 14px;
background:transparent;
border-left:10px solid rgba(255,61,129,0.06);
transition:all .16s ease;
color:#000;
border-radius:10px;
margin-bottom:12px;
font-size:1.34rem;
font-variant:small-caps;
text-transform:capitalize;
text-shadow: 0 1px 0 rgba(255,255,255,0.02);
}
.debate-questions .question:hover{
border-left-color: rgba(0,255,213,0.95);
transform: translateX(8px);
background: linear-gradient(90deg, rgba(0,255,213,0.03), rgba(255,61,129,0.02));
}
/* Small caption style for images (non-invasive) */
.photo-caption{
position:absolute;
bottom:6%;
left:6%;
z-index:6;
background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.28));
color:#fff;
padding:8px 12px;
border-radius:8px;
font-size:13px;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
transform: rotate(-6deg);
pointer-events:none;
}
/* Responsive: stack vertically on small screens so nothing is covered */
@media (max-width:900px){
.debate-container{
flex-direction:column;
gap:12px;
align-items:stretch;
padding:0 12px;
}
.debate-questions{transform:none;padding:20px}
#photoHeader{height:54vh;padding:12px}
#topPhoto, #secondPhoto{transform:none;border-radius:10px}
#photoHeader::before{display:none}
/* scale down type for tighter mobile fit */
.debate-questions h2{font-size:1.4rem}
.debate-questions ol{font-size:1.0rem; line-height:1.5}
.debate-questions .question{font-size:1.02rem;padding:12px}
}
/* Small responsive tweaks */
@media (min-width:700px){
#photoHeader{height:58vh; padding:20px} /* keep large on wider screens but slightly tempered */
#mainContent{height:42vh}
#topPhoto{height:100%; transform: rotate(-3deg) scale(1.01)}
/* On larger screens make the debate card even more prominent */
.debate-questions{
max-width:1400px;
padding:44px 54px;
font-size:1.28rem;
}
.debate-questions h2{font-size:2.4rem}
.debate-questions ol{font-size:1.8rem; line-height:1.6}
.debate-questions .question{padding:20px 14px; font-size:1.44rem}
}
/* Slogans mural section styles */
#slogansSection{
width:100%;
display:flex;
justify-content:center;
margin:18px auto 34px;
z-index:4;
position:relative;
padding:0 12px;
box-sizing:border-box;
}
.slogans-card{
width:100%;
max-width:1400px;
border-radius:14px;
overflow:visible;
padding:18px;
box-sizing:border-box;
background:transparent;
position:relative;
}
/* big mural wall using the same mural image as background but toned down and layered
so text cards remain highly legible while the mural still shows through */
.mural-wall{
position:relative;
border-radius:12px;
min-height:220px;
padding:36px 32px 22px 32px;
box-sizing:border-box;
background-image:url('/mural-lamine-nico.jpeg');
background-size:cover;
background-position:center;
/* reduce saturation and darken slightly, but use an overlay for consistent contrast */
filter: saturate(0.8) contrast(0.92) brightness(0.78);
box-shadow: 0 20px 46px rgba(0,0,0,0.56);
overflow:hidden;
}
/* soft vignette to focus center content and improve legibility on edges */
.mural-wall::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background: radial-gradient(1200px 600px at 50% 48%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0.46) 100%);
pointer-events:none;
mix-blend-mode:multiply;
}
/* Title placed inside the slogans card so it visually sits over the mural but does not cover any slogan.
Added a subtle pulsing zoom animation and larger responsive size for stronger emphasis. */
@keyframes muralZoomPulse {
0% { transform: translateX(-50%) scale(1); }
40% { transform: translateX(-50%) scale(1.08); }
60% { transform: translateX(-50%) scale(0.98); }
100% { transform: translateX(-50%) scale(1); }
}
.mural-title-inline{
position:absolute;
top:-72px; /* nudged up for larger size */
left:50%;
transform:translateX(-50%) scale(1);
transform-origin:center center;
color:#ff1a1a; /* brilliant red */
font-family: var(--elite-font);
font-weight:900;
/* significantly larger and responsive (caps at a high max) */
font-size: clamp(36px, 7.8vw, 110px);
letter-spacing:0.06em;
text-transform:uppercase;
padding:10px 18px;
border-radius:10px;
background: rgba(255,26,26,0.06); /* subtle tint so text remains crisply red */
text-shadow: 0 2px 0 rgba(0,0,0,0.45), 0 10px 40px rgba(255,26,26,0.16);
z-index:6;
pointer-events:none;
border:1px solid rgba(255,255,255,0.04);
white-space:nowrap; /* force single line */
overflow:visible;
/* gentle pulsing zoom effect */
animation: muralZoomPulse 4.2s ease-in-out infinite;
}
/* slogan list appears on top of mural with a semi-opaque card that has more breathing room,
larger type, and clearer contrast for scanning on mobile and desktop */
.slogan-list{
position:relative;
z-index:3;
margin:0 auto;
/* widened top padding to make room for the inline title so it doesn't cover any slogans */
padding:90px 34px 26px;
max-width:1320px; /* widened for broader displays */
background: rgba(255,255,255,0.96);
border-radius:12px;
list-style:decimal;
color:#0b0b0b;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, var(--elite-font);
/* larger, more readable type for the slogans box (tuned to balance with pulsing title) */
font-size:1.9rem;
line-height:1.45;
box-shadow: 0 10px 30px rgba(0,0,0,0.14);
}
.slogan-list li{
margin:14px 0;
padding:10px 12px;
border-left:6px solid rgba(0,0,0,0.06);
}
/* make the brand name bold and easier to scan; allocate more room for brand label */
.slogan-list li strong{display:inline-block;width:220px; font-weight:900; color:#111; font-size:1.05em;}
/* small descriptive note under the mural */
.slogans-note{
margin-top:12px;
font-size:0.98rem;
color:rgba(255,255,255,0.92);
text-align:center;
z-index:3;
position:relative;
}
/* Make sure mobile layout fits without vertical clipping */
@media (max-width:900px){
.mural-title{font-size:clamp(20px, 10vw, 42px); top:12px; padding:6px 10px}
.mural-wall{padding:18px 14px}
.slogan-list{
font-size:1.0rem;
padding:12px 14px;
margin:0 6px;
}
.slogan-list li{margin:10px 0; padding:8px}
.slogans-card{padding:10px}
}
=======
:root{
--bg-1: #0f0b1a; /* deep night */
--bg-2: #2b0f37; /* richer magenta */
--spray1: rgba(255,92,92,0.14);
--spray2: rgba(0,222,150,0.12);
--spray3: rgba(255,222,50,0.12);
--card:#0f0f12;
--muted:#000; /* text color forced to black */
--accent:#ff3d81;
--gap:14px;
--neon: #00ffd5;
--glow: rgba(0,255,213,0.06);
--elite-font: "Cinzel", "Trajan Pro", "Garamond", Georgia, serif;
}
/* Page title placed as an overlay inside the photo header so it sits on the images */
.page-title{
position:absolute; /* positioned relative to #photoHeader (which is position:relative) */
top:18px;
left:50%;
transform:translateX(-50%);
z-index:6; /* above images but below global overlays */
color:#d92b2b; /* vivid red */
font-family: var(--elite-font);
font-weight:900;
font-size:clamp(36px, 8vw, 110px); /* scalable very large */
letter-spacing:0.06em;
text-transform:uppercase;
padding:6px 14px;
border-radius:8px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
box-shadow: 0 8px 30px rgba(217,43,43,0.18), 0 2px 0 rgba(255,255,255,0.02) inset;
text-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.02);
pointer-events:none;
}
/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{height:100%}
/* Base sizing: larger typographic scale for "big letters" */
html{font-size:18px}
body{
font-family: var(--elite-font);
background: radial-gradient(1200px 420px at 8% 18%, rgba(255,255,255,0.02), transparent 12%),
radial-gradient(900px 340px at 92% 78%, rgba(255,255,255,0.01), transparent 10%),
linear-gradient(140deg, var(--bg-1), var(--bg-2));
color:var(--muted); /* black */
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
height:100%;
padding:26px;
background-repeat:no-repeat;
/* allow the page to scroll so all notebook questions can be shown */
overflow:auto;
font-weight:600;
letter-spacing:0.06em; /* give all text a more distinctive tracked look */
text-rendering:optimizeLegibility;
-webkit-font-feature-settings: "liga" 1, "kern" 1;
}
/* Spray paint texture overlays */
body::before,
body::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
mix-blend-mode:screen;
}
body::before{
background:
radial-gradient(380px 200px at 8% 16%, var(--spray1), transparent 30%),
radial-gradient(260px 140px at 82% 76%, var(--spray2), transparent 30%),
radial-gradient(170px 90px at 50% 38%, var(--spray3), transparent 30%);
opacity:0.95;
filter:blur(16px) saturate(1.15);
}
body::after{
background-image: url('data:image/svg+xml;utf8,');
opacity:0.85;
mix-blend-mode:overlay;
filter:blur(6px);
}
/* Layout: graffiti-friendly header */
#photoHeader{
width:100%;
/* slightly reduced header height so the notebook below has more vertical space for all prompts */
height:48vh;
min-height:280px;
overflow:visible;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:2;
border-radius:14px;
padding:12px 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
box-shadow: 0 30px 110px rgba(0,0,0,0.75), inset 0 2px 0 rgba(255,255,255,0.02);
transform:skewY(-0.8deg);
}
/* Row container for two images */
.photo-row{
width:100%;
height:100%;
display:flex;
gap:20px;
align-items:center;
justify-content:center;
padding:8px;
box-sizing:border-box;
}
/* Left image (primary) */
#topPhoto{
flex:1 1 62%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
border-radius:12px;
transform: rotate(-3deg) translateY(0);
transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, filter .3s;
box-shadow:
0 30px 80px rgba(0,0,0,0.78),
0 0 60px rgba(0,0,0,0.45);
background-color:#000;
border:10px solid rgba(255,255,255,0.035);
position:relative;
z-index:3;
filter: saturate(1.06) contrast(1.02);
}
/* Hover/tap lift for primary image */
#topPhoto:hover,
#topPhoto:focus{
transform: translateY(-8px) rotate(-1.2deg) scale(1.02);
box-shadow:
0 40px 110px rgba(0,0,0,0.85),
0 0 90px rgba(255,61,129,0.06);
cursor:pointer;
}
/* Right image (secondary) */
#secondPhoto{
flex:1 1 36%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
border-radius:12px;
transform: rotate(2.5deg) translateY(0);
transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, filter .3s;
box-shadow:
0 20px 56px rgba(0,0,0,0.68),
0 0 36px rgba(0,0,0,0.36);
background-color:#000;
border:8px solid rgba(255,255,255,0.03);
position:relative;
z-index:3;
filter: saturate(1.02);
}
/* Hover/tap lift for secondary image */
#secondPhoto:hover,
#secondPhoto:focus{
transform: translateY(-6px) rotate(1deg) scale(1.01);
box-shadow:
0 30px 72px rgba(0,0,0,0.8),
0 0 40px rgba(0,255,213,0.04);
cursor:pointer;
}
/* Neon outline using pseudo-element approach (via header) */
#photoHeader::after{
content:"";
position:absolute;
inset:6% 4%;
z-index:2;
border-radius:14px;
pointer-events:none;
box-shadow:
0 0 120px rgba(255,61,129,0.12),
0 0 180px rgba(0,255,213,0.06);
mix-blend-mode:screen;
transform:rotate(-1.2deg);
}
/* A sticker/bubble pop on the corner */
#photoHeader::before{
content:"BAM";
font-weight:900;
letter-spacing:1px;
position:absolute;
top:6%;
left:5%;
z-index:5;
background:linear-gradient(90deg,#ffef5b,#ff6a6a);
color:#111; /* badge text slightly darker */
padding:8px 12px;
border-radius:12px;
transform:rotate(-12deg);
box-shadow: 0 12px 22px rgba(0,0,0,0.5);
font-family: var(--elite-font);
font-size:15px;
}
/* If cover fit is applied, make image straighter and crop slightly with neon glow */
#topPhoto.cover-fit{
object-fit:cover;
height:100%;
transform: rotate(0deg) scale(1.02);
border-color: rgba(255,61,129,0.12);
box-shadow:
0 28px 68px rgba(0,0,0,0.8),
0 0 48px rgba(255,61,129,0.12);
}
/* Main content occupies remaining viewport height */
#mainContent{
height:36vh; /* tuned to balance header and content */
padding:18px;
display:flex;
align-items:flex-start;
justify-content:center;
gap:16px;
flex-direction:column;
z-index:3;
position:relative;
}
/* Debate container: two separate cards, not overlapping the header */
.debate-container{
width:100%;
max-width:1400px;
display:flex;
gap:22px;
align-items:flex-start;
justify-content:center;
margin-top:8px;
z-index:4;
position:relative;
padding:0 6px;
box-sizing:border-box;
}
/* New section wrapper to ensure debate prompts are visually and semantically
separated from the main content and positioned below the header images */
#debateSection{
width:100%;
display:flex;
justify-content:center;
margin-top:10px; /* clear space beneath header */
z-index:4;
position:relative;
pointer-events:auto;
}
/* Debate questions: individual card (left and right share styling) */
.debate-questions{
flex:1 1 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border-radius:14px;
padding:28px 36px;
box-shadow: 0 22px 36px rgba(0,0,0,0.58);
color:var(--muted); /* black */
border: 2px dashed rgba(255,255,255,0.03);
font-size:1.22rem;
min-width:300px;
transition: transform .18s ease, box-shadow .18s ease;
}
/* Card lift on hover (desktop) */
.debate-questions:hover{
transform: translateY(-6px);
box-shadow: 0 30px 60px rgba(0,0,0,0.62);
}
/* Left box gets a small tilt for style but no overlap */
.debate-questions.left{
transform: rotate(-0.6deg);
}
/* Right box opposite tilt */
.debate-questions.right{
transform: rotate(0.6deg);
}
/* Keep headings visible and simple */
.debate-questions h2{
font-family: var(--elite-font);
font-size:2.0rem;
margin-bottom:10px;
color:#000;
letter-spacing:0.08em;
display:block;
padding:6px 10px;
border-radius:6px;
background:transparent;
text-transform:uppercase;
font-variant:small-caps;
text-shadow: 0 2px 0 rgba(255,255,255,0.02);
}
/* Questions styled as "elite" large lettering */
.debate-questions ol{
margin-left:12px;
color:var(--muted); /* black */
font-size:1.6rem; /* much larger for emphasis */
line-height:1.5;
list-style-type:decimal;
padding-left:22px;
font-family: var(--elite-font);
font-weight:600;
letter-spacing:0.08em;
-webkit-font-smoothing:antialiased;
}
.debate-questions .question{
padding:18px 14px;
background:transparent;
border-left:10px solid rgba(255,61,129,0.06);
transition:all .16s ease;
color:#000;
border-radius:10px;
margin-bottom:12px;
font-size:1.34rem;
font-variant:small-caps;
text-transform:capitalize;
text-shadow: 0 1px 0 rgba(255,255,255,0.02);
}
.debate-questions .question:hover{
border-left-color: rgba(0,255,213,0.95);
transform: translateX(8px);
background: linear-gradient(90deg, rgba(0,255,213,0.03), rgba(255,61,129,0.02));
}
/* Small caption style for images (non-invasive) */
.photo-caption{
position:absolute;
bottom:6%;
left:6%;
z-index:6;
background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.28));
color:#fff;
padding:8px 12px;
border-radius:8px;
font-size:13px;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
transform: rotate(-6deg);
pointer-events:none;
}
/* Responsive: stack vertically on small screens so nothing is covered */
@media (max-width:900px){
.debate-container{
flex-direction:column;
gap:12px;
align-items:stretch;
padding:0 12px;
}
.debate-questions{transform:none;padding:20px}
#photoHeader{height:54vh;padding:12px}
#topPhoto, #secondPhoto{transform:none;border-radius:10px}
#photoHeader::before{display:none}
/* scale down type for tighter mobile fit */
.debate-questions h2{font-size:1.4rem}
.debate-questions ol{font-size:1.0rem; line-height:1.5}
.debate-questions .question{font-size:1.02rem;padding:12px}
}
/* Small responsive tweaks */
@media (min-width:700px){
#photoHeader{height:58vh; padding:20px} /* keep large on wider screens but slightly tempered */
#mainContent{height:42vh}
#topPhoto{height:100%; transform: rotate(-3deg) scale(1.01)}
/* On larger screens make the debate card even more prominent */
.debate-questions{
max-width:1400px;
padding:44px 54px;
font-size:1.28rem;
}
.debate-questions h2{font-size:2.4rem}
.debate-questions ol{font-size:1.8rem; line-height:1.6}
.debate-questions .question{padding:20px 14px; font-size:1.44rem}
}