*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #f5f5f7;
--surface: #ffffff;
--surface-soft: #fbfbfd;
--ink: #1d1d1f;
--muted: rgba(29, 29, 31, 0.66);
--faint: rgba(29, 29, 31, 0.12);
--dark: #050505;
--dark-soft: #111113;
--dark-card: #1c1c1e;
--line: rgba(29, 29, 31, 0.12);
--accent: #1f5f8b;
--accent-strong: #377fba;
--hot: #6d5c3d;
--glow: rgba(31, 95, 139, 0.24);
--radius: 24px;
--nav-height: 64px;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
--shadow-soft: 0 10px 34px rgba(0, 0, 0, 0.08);
}
html { scroll-behavior: smooth; }
section[id], article[id] { scroll-margin-top: calc(var(--nav-height) + 28px); }
body {
background: var(--bg);
color: var(--ink);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 17px;
line-height: 1.47;
letter-spacing: -0.022em;
text-rendering: optimizeLegibility;
position: relative;
}
/* High-end Editorial Noise Texture */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 9999;
opacity: 0.28;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
body.dark::before {
opacity: 0.18;
}
body.dark {
--bg: #050505;
--surface: #111113;
--surface-soft: #18181a;
--ink: #f5f5f7;
--muted: rgba(245, 245, 247, 0.68);
--faint: rgba(245, 245, 247, 0.14);
--line: rgba(245, 245, 247, 0.14);
--shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
--shadow-soft: 0 10px 34px rgba(0, 0, 0, 0.34);
}
body.dark .scene-light, body.dark .scene-white { background: var(--bg); color: var(--ink); }
body.dark .content-card, body.dark .feature-card, body.dark .academic-field-card, body.dark .project-hero-card, body.dark .writing-modern article, body.dark .essay-feature-card, body.dark .media-context-card, body.dark .essay-sheet { background: var(--surface); }
/* Language Toggle Logic */
body.swedish .en { display: none !important; }
body:not(.swedish) .sv { display: none !important; }
body:not(.swedish) .sv { display: none !important; }
body:not(.swedish) .en { display: inline !important; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(0, 113, 227, 0.32); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 999; transform: translateY(-160%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 999px; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.wide-container { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.narrow-container { max-width: 860px; margin: 0 auto; padding: 0 28px; }
.site-header { position: sticky; top: 0; z-index: 100; min-height: var(--nav-height); background: rgba(255, 255, 255, 0.76); border-bottom: 1px solid var(--line); backdrop-filter: saturate(180%) blur(20px); }
body.dark .site-header { background: rgba(5, 5, 5, 0.78); }
.site-nav { min-height: var(--nav-height); display: flex; justify-content: space-between; gap: 22px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 13px; }
.nav-controls { display: flex; gap: 8px; align-items: center; }
.nav-icon-button { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,0.68); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, color 0.4s ease, border-color 0.4s ease; }
.nav-icon-button svg { width: 19px; height: 19px; fill: currentColor; }
.nav-icon-button:hover { transform: translateY(-1px); background: var(--ink); color: var(--bg); border-color: var(--ink); }
body.dark .nav-icon-button { background: rgba(255,255,255,0.08); color: var(--ink); }
body.dark .nav-icon-button:hover { background: #f5f5f7; color: #050505; border-color: #f5f5f7; }
.theme-button .sun-icon { display: none; }
body.dark .theme-button .moon-icon { display: none; }
body.dark .theme-button .sun-icon { display: block; }
.scene-light { background: var(--bg); }
.scene-white { background: var(--surface); }
.scene-dark { background: #000; color: #fff; }
.hero { min-height: calc(100vh - var(--nav-height)); display: grid; align-items: stretch; overflow: hidden; }
.hero-home { background: radial-gradient(circle at 78% 18%, rgba(31, 95, 139, 0.14), transparent 32rem), radial-gradient(circle at 12% 82%, rgba(109, 92, 61, 0.09), transparent 28rem), linear-gradient(135deg, #fbfcfa 0%, #f1f4f2 48%, #f7f5f0 100%); color: var(--ink); }
body.dark .hero-home { background: radial-gradient(circle at 78% 18%, rgba(31, 95, 139, 0.28), transparent 32rem), radial-gradient(circle at 14% 86%, rgba(109, 92, 61, 0.16), transparent 28rem), linear-gradient(135deg, #050505 0%, #0b0d0d 52%, #121410 100%); color: #fff; }
.hero-home .hero-sub { color: rgba(29, 29, 31, 0.72); }
body.dark .hero-home .hero-sub { color: rgba(245,245,247,0.72); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 70px; align-items: center; padding-top: 54px; }
.hero-copy { min-width: 0; padding-bottom: 0; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }
h1 { font-size: clamp(3rem, 7vw, 5.8rem); font-weight: 650; line-height: 0.98; letter-spacing: -0.07em; max-width: 920px; overflow-wrap: break-word; }
.no-break { white-space: nowrap; }
h2 { font-size: clamp(2.1rem, 4vw, 4.1rem); font-weight: 650; line-height: 1.02; letter-spacing: -0.06em; overflow-wrap: break-word; }
h3 { font-size: 1.45rem; line-height: 1.14; letter-spacing: -0.035em; overflow-wrap: break-word; }
.hero-sub { color: var(--muted); font-size: clamp(1.12rem, 2vw, 1.45rem); line-height: 1.5; max-width: 680px; margin-top: 24px; }
.hero-sub.compact { max-width: 620px; font-size: clamp(1.02rem, 1.55vw, 1.22rem); }
.scene-dark .hero-sub, .scene-dark .split-head p { color: rgba(255, 255, 255, 0.68); }
.card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: 999px; padding: 0 20px; font-size: 15px; font-weight: 650; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, color 0.4s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--accent); color: #fff; box-shadow: 0 14px 36px rgba(0, 113, 227, 0.28); }
.button-secondary { background: rgba(255,255,255,0.45); border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(18px); }
.button-invert { background: #fff; color: #000; }
.hero-visual { position: relative; min-height: 620px; display: grid; place-items: end center; }
.hero-portrait-clean { place-items: center; }
.hero-portrait-clean .portrait-panel { width: min(390px, 94%); }
.orb { position: absolute; border-radius: 50%; opacity: 0.88; animation: drift 9s ease-in-out infinite alternate; }
.orb-one { width: 260px; height: 260px; right: 18px; top: 28px; background: radial-gradient(circle, rgba(31,95,139,0.78), rgba(31,95,139,0.05) 66%, transparent); }
.orb-two { width: 190px; height: 190px; left: 0; bottom: 120px; background: radial-gradient(circle, rgba(109,92,61,0.58), rgba(109,92,61,0.05) 68%, transparent); animation-delay: -2s; }
.orb-three { width: 130px; height: 130px; right: 40px; bottom: 36px; background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(31,95,139,0.10) 60%, transparent); animation-delay: -4s; }
.portrait-panel { position: relative; align-self: end; width: min(360px, 92%); z-index: 2; }
.portrait-panel img, .page-portrait { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 34px; box-shadow: var(--shadow); }
.portrait-panel img { aspect-ratio: 4 / 5; object-position: center top; }
.portrait-panel::before { content: ""; position: absolute; inset: -1px; border-radius: 34px; padding: 1px; background: linear-gradient(145deg, rgba(0,153,255,0.8), rgba(255,255,255,0.6), rgba(124,60,255,0.75)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.thread-section { padding: 70px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.thread-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr); gap: 48px; align-items: end; }
.thread-grid h2 { max-width: 780px; }
.thread-copy p { max-width: 640px; color: rgba(255,255,255,0.68); font-size: 1.08rem; line-height: 1.5; }
.thread-links { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-top: 24px; }
.thread-links a { color: var(--accent-strong); font-size: 0.96rem; font-weight: 850; }
.thread-links a::after { content: "→"; margin-left: 7px; }
.press-strip, .content-section, .media-hub { padding: 100px 0; }
.section-head { margin-bottom: 42px; }
.split-head { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: end; }
.split-head p { color: var(--muted); font-size: 1.05rem; }
.center-head { text-align: center; max-width: 860px; margin-left: auto; margin-right: auto; }
.content-card, .feature-card, .project-hero-card, .writing-modern article { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; min-height: 260px; box-shadow: var(--shadow-soft); opacity: 1; transform: none; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.content-card.visible, .feature-card.visible, .media-panel.visible { opacity: 1; transform: none; }
.media-panel:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.content-card p, .feature-card p, .project-hero-card p, .writing-modern p { color: var(--muted); margin-top: 14px; }
.logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 46px; }
.logo-wall.featured-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.logo-tile { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 28px; background: linear-gradient(145deg, #161618, #09090a); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: clamp(1.8rem, 4vw, 3.5rem); font-weight: 850; letter-spacing: -0.09em; transition: transform 0.18s, background 0.18s, border-color 0.18s; box-shadow: inset 0 0 0 1px rgba(0,153,255,0.05), 0 18px 48px rgba(0,0,0,0.28); }
.source-logo { grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: 22px; background: rgba(255,255,255,0.96); color: #000; }
.source-logo img { max-width: 92%; max-height: 92px; object-fit: contain; filter: none; }
.source-logo img[alt="Ship of a New Story"] { max-width: 108%; max-height: 110px; }
.source-logo .logo-label { align-self: end; font-size: 12px; line-height: 1.1; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0,0,0,0.58); text-align: center; }
.logo-tile:hover { transform: translateY(-4px) scale(1.015); border-color: rgba(41,151,255,0.45); }
.source-note { max-width: 760px; margin: 26px auto 0; color: rgba(255,255,255,0.48); text-align: center; font-size: 13px; line-height: 1.45; }
.source-note.light-note { color: var(--muted); margin-top: 34px; text-align: left; }
.invitation-card { position: relative; overflow: hidden; border-radius: 36px; padding: clamp(32px, 7vw, 72px); background: #000; color: #fff; box-shadow: var(--shadow); }
.invitation-card::after { content: ""; position: absolute; width: 360px; height: 360px; right: -80px; top: -120px; background: radial-gradient(circle, rgba(0,153,255,0.48), transparent 64%); }
.invitation-card h2, .invitation-card p, .invitation-card a, .invitation-card .eyebrow { position: relative; z-index: 1; }
.invitation-card p { color: rgba(255,255,255,0.68); max-width: 640px; margin-top: 18px; font-size: 1.12rem; }
.page-hero { padding: 110px 0 92px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: end; }
.page-hero-grid.single { grid-template-columns: 1fr; }
.page-portrait { aspect-ratio: 4 / 5; border-radius: 32px; object-position: center; }
.prose-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.about-section { padding-top: clamp(72px, 9vw, 116px); }
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.about-card {
position: relative;
grid-column: span 6;
min-height: 285px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 32px;
padding: clamp(26px, 4vw, 42px);
background:
linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.78)),
radial-gradient(circle at 90% 0%, rgba(31,95,139,0.14), transparent 18rem);
box-shadow: var(--shadow-soft);
}
.about-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(31,95,139,0.42), transparent);
}
.about-card-main {
grid-column: 1 / -1;
min-height: 360px;
justify-content: flex-end;
background:
radial-gradient(circle at 86% 8%, rgba(31,95,139,0.18), transparent 24rem),
radial-gradient(circle at 10% 86%, rgba(109,92,61,0.12), transparent 22rem),
linear-gradient(145deg, #ffffff, #f6f7f4);
}
.about-card-main h2 { max-width: 900px; }
.about-card p { color: var(--muted); max-width: 68ch; }
.about-card p + p { margin-top: 0; }
.about-card-kicker {
width: fit-content;
max-width: 100%;
border-radius: 999px;
padding: 7px 11px;
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent);
font-size: 12px;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.about-card h3 { max-width: 14ch; font-size: clamp(1.55rem, 2.5vw, 2.28rem); }
.about-card-method { background: radial-gradient(circle at 84% 12%, rgba(31,95,139,0.16), transparent 18rem), linear-gradient(180deg, #ffffff, #f6f8fa); }
.about-card-experience { background: radial-gradient(circle at 12% 88%, rgba(109,92,61,0.16), transparent 18rem), linear-gradient(180deg, #ffffff, #f8f6ef); }
.about-card-direction { background: radial-gradient(circle at 86% 16%, rgba(31,95,139,0.12), transparent 18rem), linear-gradient(180deg, #ffffff, #f7f8f4); }
body.dark .about-card {
background:
linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.026)),
radial-gradient(circle at 90% 0%, rgba(31,95,139,0.18), transparent 18rem);
border-color: rgba(255,255,255,0.12);
}
body.dark .about-card-main {
background:
radial-gradient(circle at 86% 8%, rgba(31,95,139,0.22), transparent 24rem),
radial-gradient(circle at 10% 86%, rgba(109,92,61,0.14), transparent 22rem),
linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
}
.academic-field-grid { display: grid; grid-template-columns: 1.15fr 0.9fr 0.9fr; gap: 18px; align-items: stretch; }
.academic-field-card { position: relative; min-height: 520px; overflow: hidden; border-radius: 34px; background: #000; color: #fff; box-shadow: var(--shadow-soft); isolation: isolate; }
.academic-field-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86) contrast(1.05); transform: scale(1.02); }
.academic-png-card { background: radial-gradient(circle at 60% 18%, rgba(41,151,255,0.18), transparent 32rem), #08080a; }
.academic-png-card img { inset: 24px 18px auto 18px; width: calc(100% - 36px); height: 56%; object-fit: contain; object-position: center; filter: saturate(0.98) contrast(1.02); transform: none; }
.academic-png-card.sociology-card img { height: 52%; object-fit: contain; object-position: center; background: transparent; }
.academic-png-card.political-card { background: radial-gradient(circle at 78% 12%, rgba(255,59,48,0.24), transparent 18rem), radial-gradient(circle at 28% 18%, rgba(41,151,255,0.22), transparent 18rem), #08080a; }
.academic-png-card.political-card img { inset: 14px 10px auto 10px; width: calc(100% - 20px); height: 64%; padding: 0; box-sizing: border-box; object-fit: contain; border-radius: 0; background: transparent; border: 0; filter: saturate(1.08) contrast(1.04) drop-shadow(0 18px 28px rgba(0,0,0,0.30)); }
.academic-png-card.philosophy-card img { height: 56%; }
.academic-field-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.34) 44%, rgba(0,0,0,0.86)); }
.academic-field-card.sociology-card { min-height: 620px; background: #111; }
.field-card-copy { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 2; }
.field-bubble-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.field-bubble-row > span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 39px;
max-width: 100%;
border-radius: 999px;
background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,255,255,0.66));
color: rgba(0,0,0,0.78);
border: 1px solid rgba(255,255,255,0.64);
box-shadow: 0 13px 32px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.52);
font-size: 12px;
font-weight: 900;
letter-spacing: -0.025em;
padding: 0 13px;
backdrop-filter: blur(16px);
}
.field-bubble-row > span::before {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
opacity: 0.62;
box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}
.sociology-card .field-bubble-row > span:nth-child(1) { background: linear-gradient(135deg, #b8d8ff, #f5fbff); color: #092f4f; }
.sociology-card .field-bubble-row > span:nth-child(2) { background: linear-gradient(135deg, #ffe8b7, #fffaf0); color: #55370b; }
.sociology-card .field-bubble-row > span:nth-child(3) { background: linear-gradient(135deg, #c7ead8, #f3fff8); color: #143b27; }
.political-card .field-bubble-row > span:nth-child(1) { background: linear-gradient(135deg, #ffd2d2, #fff4f4); color: #621a1a; }
.political-card .field-bubble-row > span:nth-child(2) { background: linear-gradient(135deg, #c6ddff, #f4f8ff); color: #123461; }
.political-card .field-bubble-row > span:nth-child(3) { background: linear-gradient(135deg, #ffe39a, #fff8dc); color: #5b3c00; }
.philosophy-card .field-bubble-row > span:nth-child(1) { background: linear-gradient(135deg, #d9ccff, #f8f5ff); color: #2d1f66; }
.philosophy-card .field-bubble-row > span:nth-child(2) { background: linear-gradient(135deg, #d9e8ff, #f5f9ff); color: #173764; }
.philosophy-card .field-bubble-row > span:nth-child(3) { background: linear-gradient(135deg, #f6dbb8, #fff7ee); color: #573111; }
.field-card-copy h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.field-card-copy p { color: rgba(255,255,255,0.76); margin-top: 12px; }
.field-card-copy small { display: block; color: rgba(255,255,255,0.56); margin-top: 18px; font-weight: 800; }
.wide-card { grid-column: 1 / -1; }
.content-card h2 { font-size: 2.4rem; }
.content-card p + p { margin-top: 16px; }
.feature-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.feature-card.primary { background: #000; color: #fff; }
.feature-card.primary p { color: rgba(255,255,255,0.68); }
.project-showcase { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.project-hero-card { background: #000; color: #fff; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
.project-hero-card p { color: rgba(255,255,255,0.7); }
.status-pill { align-self: flex-start; background: #34c759; color: #061d0b; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 800; margin-bottom: auto; }
.card-actions a { color: var(--accent-strong); font-weight: 750; }
.project-case-card { gap: 20px; }
.project-meta { display: grid; gap: 10px; margin-top: 8px; }
.project-meta div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.14); }
.project-meta dt { color: var(--accent-strong); font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.project-meta dd { color: rgba(255,255,255,0.72); font-size: 0.96rem; line-height: 1.42; }
.project-list-modern { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.project-list-modern a { display: grid; gap: 10px; min-height: 148px; border-radius: 22px; background: var(--surface-soft); border: 1px solid var(--line); padding: 22px 24px; box-shadow: var(--shadow-soft); }
.project-list-modern span { color: var(--muted); }
.project-list-modern p { color: var(--muted); font-size: 0.96rem; line-height: 1.42; margin: 0; }
.project-type { color: var(--accent) !important; font-size: 12px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.writing-modern { display: grid; gap: 16px; }
.writing-modern article { min-height: 180px; }
.writing-modern article > span { color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.writing-feature-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 18px; align-items: stretch; }
.writing-feature-grid-single { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.writing-stack { display: grid; gap: 18px; max-width: 980px; }
.text-index article { min-height: 0; }
.text-index a { display: inline-flex; margin-top: 18px; color: var(--accent); font-weight: 850; }
.media-source-note, .writing-source-note { width: min(calc(100% - 36px), 1120px); max-width: 1120px; }
.essay-feature-card { position: relative; overflow: hidden; min-height: 520px; display: grid; align-items: end; border-radius: 36px; background: #000; color: #fff; border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--shadow); padding: clamp(28px, 5vw, 58px); isolation: isolate; }
.essay-feature-card::before { content: ""; position: absolute; inset: -18% -12% auto auto; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(0,153,255,0.36), transparent 66%); z-index: -1; }
.essay-feature-card::after { content: ""; position: absolute; inset: auto auto -28% -16%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(124,60,255,0.22), transparent 68%); z-index: -1; }
.essay-label { display: inline-flex; align-items: center; min-height: 34px; width: max-content; max-width: 100%; padding: 0 13px; border-radius: 999px; background: rgba(255,255,255,0.12); color: var(--accent-strong); font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.essay-feature-card h2 { margin-top: 24px; max-width: 780px; }
.essay-feature-card p { max-width: 620px; color: rgba(255,255,255,0.7); margin-top: 18px; font-size: 1.08rem; }
.essay-feature-note { position: absolute; right: 28px; top: 28px; max-width: 260px; padding: 18px; border-radius: 24px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(18px); color: rgba(255,255,255,0.78); }
.essay-hero { background: radial-gradient(circle at 82% 12%, rgba(0,153,255,0.26), transparent 34rem), radial-gradient(circle at 18% 72%, rgba(124,60,255,0.18), transparent 28rem), #000; }
.essay-reader { padding: 82px 0 110px; }
.essay-shell { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 28px; align-items: start; justify-content: center; }
.essay-sidebar { position: sticky; top: calc(var(--nav-height) + 28px); display: grid; gap: 14px; }
.essay-back { display: inline-flex; align-items: center; min-height: 42px; width: max-content; max-width: 100%; padding: 0 15px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 850; }
.essay-sheet { border-radius: 34px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(30px, 6vw, 72px); }
.essay-title-block { padding-bottom: 34px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.essay-title-block p { color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.essay-title-block h2 { margin-top: 14px; font-size: clamp(2.35rem, 5vw, 4.7rem); }
.essay-body { max-width: 68ch; margin: 0 auto; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.08rem, 1.45vw, 1.25rem); line-height: 1.72; letter-spacing: -0.01em; }
.essay-body p + p { margin-top: 1.12em; }
.essay-body p:nth-child(8), .essay-body p:nth-child(16), .essay-body p:nth-child(23), .essay-body p:nth-child(29), .essay-body p:nth-child(34) { margin-top: 2.2em; }
.media-hero { background: radial-gradient(circle at 82% 10%, rgba(0,153,255,0.26), transparent 34rem), #000; }
.media-hero h1 { max-width: 1040px; }
.media-impact { padding: 28px 0; }
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.impact-number { display: flex; min-height: 210px; flex-direction: column; justify-content: space-between; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); padding: 28px; box-shadow: var(--shadow-soft); overflow: hidden; }
.impact-number small { display: block; color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.impact-number small span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.impact-number > span { display: block; margin-top: 22px; font-size: clamp(2.2rem, 4.8vw, 4rem); font-weight: 760; line-height: 0.96; letter-spacing: -0.075em; }
.impact-number.impact-source > span { max-width: 10ch; font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 0.98; letter-spacing: -0.06em; }
.impact-number p { color: var(--muted); font-size: 0.98rem; font-weight: 680; line-height: 1.35; margin-top: 22px; }
.impact-number p span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.media-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.media-context-card { min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); padding: 28px; box-shadow: var(--shadow-soft); }
.media-context-card > span { color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.media-context-card strong { display: block; margin-top: 28px; font-size: clamp(1.55rem, 2.6vw, 2.3rem); line-height: 1; letter-spacing: -0.06em; }
.media-context-card p { color: var(--muted); font-size: 0.98rem; font-weight: 680; line-height: 1.35; margin-top: 18px; }
.media-group { padding: 42px 0 60px; border-top: 1px solid var(--line); }
.media-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.media-panel-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-panel { display: grid; grid-template-columns: 120px 1fr; gap: 24px; min-height: 310px; padding: 26px; border-radius: 30px; background: var(--surface-soft); border: 1px solid var(--line); box-shadow: var(--shadow-soft); opacity: 1; transform: none; transition: opacity 0.6s, transform 0.6s, box-shadow 0.18s; }
.media-panel.major { grid-column: span 2; background: #000; color: #fff; }
.media-panel.major p { color: rgba(255,255,255,0.68); }
.media-panel.muted { opacity: 0.78; border-style: dashed; }
.press-logo { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 28px; background: var(--ink); color: var(--bg); font-size: 2.15rem; font-weight: 900; letter-spacing: -0.12em; box-shadow: inset 0 -16px 32px rgba(0,153,255,0.12); overflow: hidden; }
.press-logo { padding: 16px; background: #fff; }
.press-logo.dark-plate { background: #050505; }
.press-logo.small-mark { padding: 0; background: #0b83d8; }
.press-logo.ship-logo { padding: 10px; background: #ff5f00; }
.press-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.press-logo.ship-logo img { width: 100%; height: 100%; object-fit: contain; }
.major .press-logo { background: #fff; }
.panel-meta { color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.media-panel p { color: var(--muted); margin-top: 12px; }
.media-panel a { display: inline-flex; margin-top: 24px; color: var(--accent); font-weight: 800; }
.panel-link-row { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 24px; }
.panel-link-row a { margin-top: 0; }
.major a { color: var(--accent-strong); }
.contact-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 18px; align-items: stretch; }
.contact-card { border-radius: 32px; background: var(--surface-soft); border: 1px solid var(--line); box-shadow: var(--shadow-soft); padding: clamp(26px, 4vw, 42px); }
.contact-copy-card { background: #000; color: #fff; }
.contact-copy-card p { color: rgba(255,255,255,0.68); margin-top: 18px; }
.contact-form { display: grid; gap: 16px; }
.contact-form label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); font: inherit; padding: 14px 16px; }
.contact-form textarea { resize: vertical; }
.form-note { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.form-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { border-radius: 18px; background: rgba(52,199,89,0.12); border: 1px solid rgba(52,199,89,0.26); color: #0b6b24; padding: 14px 16px; font-weight: 800; }
body.dark .form-success { color: #7dff9f; background: rgba(52,199,89,0.12); border-color: rgba(52,199,89,0.28); }
.site-footer { border-top: 1px solid var(--line); padding: 34px 0; color: var(--muted); background: var(--surface); font-size: 14px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-icon-link { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); transition: transform 0.16s, background 0.16s, border-color 0.16s, color 0.16s; }
.footer-icon-link svg { width: 19px; height: 19px; fill: currentColor; }
.footer-icon-link:hover { transform: translateY(-1px); background: var(--ink); color: var(--bg); border-color: var(--ink); }
.back-top { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 44px; height: 44px; display: inline-grid; place-items: center; border: none; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s, background 0.16s; box-shadow: 0 12px 30px rgba(0,113,227,0.35); padding: 0; }
.back-top img { width: 19px; height: 19px; display: block; object-fit: contain; filter: invert(1); transform: translateY(-1px); }
.back-top.visible { opacity: 1; transform: none; }
.back-top.visible:hover { transform: translateY(-2px); background: var(--accent-strong); }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(18px,-22px,0) scale(1.04); } }
@media (max-width: 940px) {
.site-nav { gap: 10px 12px; padding-top: 8px; padding-bottom: 8px; }
.site-header { min-height: var(--nav-height); }
.hero-grid, .page-hero-grid, .project-showcase, .feature-grid, .academic-field-grid, .contact-grid, .writing-feature-grid, .essay-shell { grid-template-columns: 1fr; }
.about-card { grid-column: 1 / -1; }
.essay-sidebar { position: static; }
.academic-field-card, .academic-field-card.sociology-card { min-height: 460px; }
.hero-visual { min-height: 520px; place-items: center; }
.portrait-panel { max-width: 430px; }
.logo-wall, .logo-wall.featured-logos { grid-template-columns: repeat(2, 1fr); }
.impact-grid, .media-context-grid { grid-template-columns: repeat(2, 1fr); }
.split-head, .thread-grid { grid-template-columns: 1fr; }
.media-panel, .media-panel.major { grid-column: span 1; }
.project-meta div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 640px) {
body { font-size: 16px; }
.wide-container, .narrow-container, .site-nav { padding-left: 18px; padding-right: 18px; }
.brand { font-size: 13px; }
.nav-controls { justify-content: flex-end; }
.nav-icon-button { width: 40px; height: 40px; }
.hero-grid { width: 100%; grid-template-columns: minmax(0, 1fr); padding-top: 56px; gap: 28px; }
.hero-copy, .hero-visual { min-width: 0; }
.hero { min-height: auto; }
.hero-visual { min-height: auto; grid-template-columns: 1fr; gap: 8px; padding-bottom: 12px; }
.hero-portrait-clean .portrait-panel { width: min(360px, 92%); justify-self: center; margin-bottom: 8px; }
h1 { font-size: clamp(2.65rem, 13vw, 4.2rem); line-height: 0.98; overflow-wrap: anywhere; }
h2 { font-size: 2.35rem; }
.hero-sub { font-size: 1.08rem; }
.press-strip, .content-section, .media-hub, .page-hero { padding: 72px 0; }
.impact-number { min-height: 180px; }
.impact-number span { font-size: clamp(2rem, 12vw, 3.4rem); }
.impact-number.impact-source span { font-size: clamp(1.6rem, 8vw, 2.4rem); }
.prose-grid, .about-grid, .media-panel-grid, .media-panel-grid.two, .impact-grid, .media-context-grid { grid-template-columns: 1fr; }
.academic-field-card, .academic-field-card.sociology-card { min-height: 410px; }
.academic-png-card.political-card img { height: 58%; }
.field-card-copy { left: 22px; right: 22px; bottom: 22px; }
.content-card, .feature-card { min-height: 220px; padding: 24px; }
.logo-wall, .logo-wall.featured-logos { grid-template-columns: repeat(2, 1fr); }
.media-panel { grid-template-columns: 1fr; padding: 22px; }
.essay-feature-card { min-height: 460px; }
.essay-feature-note { position: relative; top: auto; right: auto; margin-top: 24px; max-width: none; }
.essay-reader { padding: 58px 0 82px; }
.essay-sheet { border-radius: 26px; }
.essay-body { font-size: 1.04rem; line-height: 1.68; }
.press-logo { width: 96px; height: 96px; border-radius: 24px; font-size: 1.8rem; }
.footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.content-card, .feature-card, .media-panel { opacity: 1; transform: none; }
}
.hero-line-note { margin-top: 26px; color: rgba(29,29,31,0.58); font-size: 0.98rem; font-weight: 750; letter-spacing: -0.01em; }
body.dark .hero-line-note { color: rgba(245,245,247,0.56); }
.portrait-note { position: absolute; z-index: 4; right: -8px; top: 64px; max-width: 230px; padding: 16px 18px; border-radius: 24px; background: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.72); box-shadow: 0 20px 55px rgba(0,0,0,0.12); backdrop-filter: blur(18px); color: #1d1d1f; font-weight: 850; line-height: 1.2; }
body.dark .portrait-note { background: rgba(22,22,24,0.72); border-color: rgba(255,255,255,0.12); color: #f5f5f7; }
@media (max-width: 900px) {
.portrait-note { position: static; margin: 16px auto 0; max-width: 100%; text-align: center; }
}
/* Manuur visual refresh: archive/document signal, not a generic SaaS system. */
:root {
--bg: #f6f7fb;
--surface-glass: rgba(255, 255, 255, 0.74);
--violet: #6d5c3d;
--radius-lg: 38px;
--shadow: 0 28px 80px rgba(15, 23, 42, 0.14);
--shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.08);
}
body {
background:
radial-gradient(circle at 82% -10%, rgba(31,95,139,0.11), transparent 34rem),
radial-gradient(circle at 8% 18%, rgba(109,92,61,0.08), transparent 30rem),
var(--bg);
}
body.dark {
--surface-glass: rgba(12, 12, 14, 0.72);
}
.site-header {
background: transparent;
border-bottom: 0;
padding: 10px 0;
pointer-events: none;
}
.site-nav {
min-height: 56px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-glass);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
backdrop-filter: saturate(180%) blur(22px);
pointer-events: auto;
}
body.dark .site-header { background: transparent; }
body.dark .site-nav { background: var(--surface-glass); border-color: rgba(255,255,255,0.12); box-shadow: 0 18px 58px rgba(0,0,0,0.46); }
.brand-mark { background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--accent) 32%, var(--ink))); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
.hero-home {
background:
radial-gradient(circle at 72% 18%, rgba(31,95,139,0.14), transparent 32rem),
radial-gradient(circle at 18% 78%, rgba(109,92,61,0.1), transparent 30rem),
linear-gradient(135deg, #fbfcfa 0%, #f2f4f1 48%, #f8f6ef 100%);
}
body.dark .hero-home {
background:
radial-gradient(circle at 76% 12%, rgba(31,95,139,0.28), transparent 34rem),
radial-gradient(circle at 14% 86%, rgba(109,92,61,0.17), transparent 30rem),
linear-gradient(135deg, #050506 0%, #0a0d0d 52%, #11140f 100%);
}
.portrait-panel img, .page-portrait {
border-radius: var(--radius-lg);
box-shadow: 0 34px 90px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.4);
}
body.dark .portrait-panel img, body.dark .page-portrait { box-shadow: 0 34px 100px rgba(0,0,0,0.56); }
.portrait-note {
border-radius: 999px;
padding: 12px 16px;
font-size: 0.9rem;
letter-spacing: -0.02em;
}
.page-hero { padding: 92px 0 74px; }
.page-hero-grid {
position: relative;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
align-items: center;
border-radius: var(--radius-lg);
padding: clamp(34px, 6vw, 68px);
background:
linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255,0.58)),
radial-gradient(circle at 88% 12%, rgba(31,95,139,0.14), transparent 22rem);
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.scene-dark .page-hero-grid,
body.dark .page-hero-grid {
background:
radial-gradient(circle at 82% 8%, rgba(31,95,139,0.34), transparent 28rem),
radial-gradient(circle at 18% 80%, rgba(109,92,61,0.22), transparent 26rem),
#050507;
border-color: rgba(255,255,255,0.12);
box-shadow: 0 28px 90px rgba(0,0,0,0.42);
}
.page-hero-grid.single { grid-template-columns: minmax(0, 1fr); }
.page-hero-grid > div:first-child { position: relative; z-index: 2; }
.page-hero-art {
position: relative;
z-index: 1;
display: grid;
place-items: center;
min-height: 280px;
border-radius: 30px;
background:
linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.22)),
radial-gradient(circle at 50% 0%, rgba(31,95,139,0.18), transparent 18rem);
border: 1px solid rgba(255,255,255,0.48);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.56), 0 18px 48px rgba(15,23,42,0.08);
overflow: hidden;
}
.scene-dark .page-hero-art, body.dark .page-hero-art {
background:
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
radial-gradient(circle at 50% 0%, rgba(41,151,255,0.2), transparent 18rem);
border-color: rgba(255,255,255,0.12);
}
.contact-hero .page-hero-art,
body.dark .contact-hero .page-hero-art {
background-color: #fff;
background-image:
linear-gradient(180deg, #ffffff, #f6f8fb),
radial-gradient(circle at 50% 0%, rgba(31,95,139,0.10), transparent 18rem);
border-color: rgba(255,255,255,0.72);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 20px 58px rgba(0,0,0,0.22);
}
.contact-hero .page-hero-art::before {
border-color: rgba(29,29,31,0.10);
}
.contact-hero .page-hero-art img {
filter: drop-shadow(0 22px 34px rgba(15,23,42,0.18));
}
.page-hero-art::before {
content: "";
position: absolute;
inset: 12px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.26);
pointer-events: none;
}
.page-hero-art img {
width: min(92%, 330px);
max-height: 330px;
object-fit: contain;
filter: drop-shadow(0 26px 38px rgba(15,23,42,0.16));
}
.page-hero-photo { padding: 12px; min-height: 0; }
.page-hero-photo::before { display: none; }
.page-hero-photo .page-portrait { aspect-ratio: 4 / 5; border-radius: 28px; }
.content-card,
.feature-card,
.project-hero-card,
.writing-modern article,
.media-context-card,
.media-panel,
.contact-card,
.essay-sheet {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.8));
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
}
body.dark .content-card,
body.dark .feature-card,
body.dark .project-hero-card,
body.dark .writing-modern article,
body.dark .media-context-card,
body.dark .media-panel,
body.dark .contact-card,
body.dark .essay-sheet {
background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
border-color: rgba(255,255,255,0.12);
}
.contact-card.contact-copy-card,
body.dark .contact-card.contact-copy-card {
background-color: #05080c;
background-image:
radial-gradient(circle at 88% 0%, rgba(31,95,139,0.34), transparent 18rem),
linear-gradient(180deg, #05080c, #070707);
color: #fff;
border-color: rgba(255,255,255,0.14);
}
.contact-card.contact-copy-card p { color: rgba(255,255,255,0.68); }
.contact-card.contact-copy-card .eyebrow { color: #7fb8df; }
.content-card::before,
.media-panel::before,
.media-context-card::before,
.project-list-modern a::before,
.writing-modern article::before,
.contact-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(31,95,139,0.34), transparent);
opacity: 0.72;
pointer-events: none;
}
.press-strip.scene-dark,
.media-hero,
.contact-hero,
.essay-hero,
body.dark .academic-hero {
background:
radial-gradient(circle at 82% 10%, rgba(31,95,139,0.26), transparent 34rem),
radial-gradient(circle at 15% 75%, rgba(109,92,61,0.16), transparent 28rem),
#030304;
}
.logo-tile,
.project-list-modern a,
.media-panel,
.footer-icon-link,
.nav-icon-button {
will-change: transform;
}
.project-list-modern a,
.media-panel,
.logo-tile,
.contact-form input,
.contact-form select,
.contact-form textarea {
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.project-list-modern a:hover,
.media-panel:hover,
.logo-tile:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}
.project-hero-card {
background:
radial-gradient(circle at 82% 12%, rgba(31,95,139,0.24), transparent 22rem),
radial-gradient(circle at 10% 88%, rgba(109,92,61,0.18), transparent 18rem),
#030304;
justify-content: flex-start;
}
.project-case-card {
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
grid-template-areas:
"preview label"
"preview title"
"preview summary"
"preview meta"
"preview actions";
align-items: center;
gap: 16px clamp(28px, 4vw, 52px);
padding: clamp(28px, 4vw, 44px);
}
.project-case-card .status-pill { grid-area: label; justify-self: start; margin-bottom: 0; }
.project-case-card .project-browser-featured { grid-area: preview; align-self: center; margin: 0; }
.project-case-card h2 { grid-area: title; margin: 0; font-size: clamp(2.8rem, 5vw, 4.8rem); }
.project-case-card > p { grid-area: summary; max-width: 58ch; }
.project-case-card .project-meta { grid-area: meta; }
.project-case-card .card-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.project-browser-preview, .project-preview {
position: relative;
display: block;
overflow: hidden;
border-radius: 22px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.06);
box-shadow: 0 20px 54px rgba(0,0,0,0.22);
}
.project-browser-preview::before, .project-preview::before {
content: "";
display: block;
height: 18px;
background:
radial-gradient(circle at 14px 50%, #ff5f57 0 3px, transparent 3.5px),
radial-gradient(circle at 29px 50%, #ffbd2e 0 3px, transparent 3.5px),
radial-gradient(circle at 44px 50%, #28c840 0 3px, transparent 3.5px),
linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.project-browser-preview img,
.project-preview img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top center;
}
.project-browser-featured { margin: 4px 0 6px; }
.project-list-modern a { gap: 12px; min-height: 0; padding: 16px; }
.project-list-modern a strong { font-size: 1.08rem; }
.project-preview { border-color: var(--line); box-shadow: none; background: var(--surface); }
.project-preview::before { height: 16px; border-bottom-color: var(--line); }
body.dark .project-preview { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
box-shadow: 0 0 0 4px rgba(31,95,139,0.12);
outline: none;
}
.button-primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--violet))); }
@media (max-width: 940px) {
.page-hero-grid { grid-template-columns: 1fr; }
.page-hero-art { min-height: 240px; }
.project-showcase { grid-template-columns: 1fr; }
.project-case-card {
grid-template-columns: 1fr;
grid-template-areas:
"label"
"preview"
"title"
"summary"
"meta"
"actions";
align-items: start;
}
}
@media (max-width: 640px) {
.site-header { padding: 8px 0; }
.site-nav { border-radius: 28px; padding-left: 12px; padding-right: 12px; }
.page-hero { padding: 60px 0 56px; }
.page-hero-grid { padding: 24px; border-radius: 30px; gap: 24px; }
.page-hero-art { min-height: 210px; border-radius: 24px; }
.page-hero-art img { width: min(88%, 260px); max-height: 260px; }
.project-case-card { padding: 24px; gap: 14px; }
.project-case-card h2 { font-size: clamp(2.35rem, 12vw, 3.5rem); }
.project-list-modern { grid-template-columns: 1fr; gap: 16px; }
.project-list-modern a { padding: 14px; }
.project-browser-preview, .project-preview { border-radius: 18px; }
}
/* Homepage narrative pass: calmer first impression, no hero media routing. */
:root {
--ring: rgba(31, 95, 139, 0.18);
--panel-radius: 28px;
}
.soft-reveal {
opacity: 1;
transform: translateY(0);
animation: settle-in 520ms ease both;
}
.hero-home .hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
gap: clamp(38px, 7vw, 84px);
}
.home-portrait-simple {
min-height: clamp(400px, 48vw, 540px);
place-items: center;
isolation: isolate;
}
.home-portrait-simple::before {
content: "";
position: absolute;
width: min(440px, 92%);
aspect-ratio: 1;
border-radius: 48px;
background:
radial-gradient(circle at 72% 14%, rgba(31,95,139,0.18), transparent 17rem),
linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.32));
border: 1px solid rgba(255,255,255,0.68);
box-shadow: 0 28px 80px rgba(15,23,42,0.10);
transform: rotate(-2deg);
z-index: 1;
}
.home-portrait-simple .portrait-panel {
width: min(350px, 92%);
align-self: center;
z-index: 2;
}
.home-portrait-simple .portrait-panel img {
box-shadow: 0 28px 76px rgba(15,23,42,0.16);
}
.portrait-bubbles {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.portrait-bubble {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
max-width: calc(100% - 22px);
border-radius: 999px;
padding: 0 15px;
background: rgba(255,255,255,0.86);
border: 1px solid rgba(255,255,255,0.78);
color: rgba(29,29,31,0.78);
box-shadow: 0 18px 44px rgba(15,23,42,0.13);
backdrop-filter: blur(18px);
font-size: 0.84rem;
font-weight: 850;
letter-spacing: 0.02em;
}
.bubble-study { top: 11%; left: 2%; background: linear-gradient(135deg, #d6eaff, #ffffff); color: #093353; }
.bubble-text { top: 20%; right: 0; background: linear-gradient(135deg, #efe3ff, #ffffff); color: #3b246c; }
.bubble-form { bottom: 20%; left: 0; background: linear-gradient(135deg, #ffe2b3, #ffffff); color: #5a3507; }
.bubble-thought { right: 6%; bottom: 9%; background: linear-gradient(135deg, #d7f4df, #ffffff); color: #123d23; }
body.dark .portrait-bubble {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.18);
color: rgba(245,245,247,0.82);
box-shadow: 0 22px 58px rgba(0,0,0,0.38);
}
body.dark .bubble-study { background: linear-gradient(135deg, rgba(72,150,220,0.34), rgba(255,255,255,0.08)); color: #d8ecff; }
body.dark .bubble-text { background: linear-gradient(135deg, rgba(144,104,220,0.34), rgba(255,255,255,0.08)); color: #efe6ff; }
body.dark .bubble-form { background: linear-gradient(135deg, rgba(224,160,70,0.34), rgba(255,255,255,0.08)); color: #ffe7bf; }
body.dark .bubble-thought { background: linear-gradient(135deg, rgba(85,180,110,0.30), rgba(255,255,255,0.08)); color: #dcffe6; }
body.dark .home-portrait-simple::before {
background:
radial-gradient(circle at 72% 14%, rgba(31,95,139,0.24), transparent 17rem),
linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
border-color: rgba(255,255,255,0.12);
box-shadow: 0 32px 90px rgba(0,0,0,0.42);
}
.direction-section {
padding: clamp(80px, 10vw, 130px) 0;
}
.direction-layout {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
gap: clamp(32px, 7vw, 82px);
align-items: start;
}
.direction-layout .section-head {
margin-bottom: 0;
}
.direction-copy {
display: grid;
gap: 18px;
padding: clamp(24px, 4vw, 36px);
border: 1px solid var(--line);
border-radius: var(--panel-radius);
background:
linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.74)),
radial-gradient(circle at 86% 12%, var(--ring), transparent 18rem);
box-shadow: var(--shadow-soft);
}
body.dark .direction-copy {
background:
linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)),
radial-gradient(circle at 86% 12%, rgba(31,95,139,0.2), transparent 18rem);
}
.direction-copy p,
.field-section .split-head > p,
.field-panel p {
color: var(--muted);
}
.field-section {
padding-top: clamp(82px, 10vw, 128px);
}
.field-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.field-panel {
position: relative;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 28px;
padding: clamp(24px, 3vw, 32px);
border: 1px solid var(--line);
border-radius: var(--panel-radius);
background:
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.78)),
radial-gradient(circle at 90% 10%, rgba(31,95,139,0.12), transparent 16rem);
box-shadow: var(--shadow-soft);
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.field-panel::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(31,95,139,0.42), transparent);
}
.field-panel > span {
width: fit-content;
border-radius: 999px;
padding: 7px 11px;
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent);
font-size: 12px;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.field-panel h3 {
max-width: 13ch;
font-size: clamp(1.55rem, 2.4vw, 2.1rem);
}
.field-panel:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
box-shadow: var(--shadow);
}
body.dark .field-panel {
background:
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
radial-gradient(circle at 90% 10%, rgba(31,95,139,0.18), transparent 16rem);
}
.button-secondary:hover,
.button-secondary:focus-visible {
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
}
@keyframes settle-in {
from { opacity: 0.92; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 940px) {
.direction-layout,
.field-grid {
grid-template-columns: 1fr;
}
.hero-home .hero-grid {
grid-template-columns: minmax(0, 1fr);
}
.field-panel {
min-height: 240px;
}
}
@media (max-width: 640px) {
.site-header { padding-left: 8px; padding-right: 8px; }
.site-nav { max-width: calc(100vw - 20px); margin-left: auto; margin-right: auto; }
.hero-grid { padding-top: 26px; gap: 18px; }
.hero-copy { padding-top: 2px; }
.hero-sub { margin-top: 16px; }
.hero-line-note { margin-top: 16px; font-size: 0.88rem; }
.hero-visual { min-height: 350px; padding-bottom: 0; }
.hero-portrait-clean .portrait-panel { width: min(300px, 86vw); margin-bottom: 0; }
.portrait-note {
position: absolute;
right: 18px;
bottom: 18px;
top: auto;
max-width: min(210px, 70vw);
margin: 0;
text-align: left;
}
.home-portrait-simple {
min-height: 340px;
}
.home-portrait-simple::before {
width: min(320px, 88vw);
border-radius: 34px;
}
.home-portrait-simple .portrait-panel {
width: min(285px, 82vw);
}
.portrait-bubble {
min-height: 34px;
padding: 0 11px;
font-size: 0.74rem;
box-shadow: 0 12px 30px rgba(15,23,42,0.13);
}
.bubble-study { top: 5%; left: 4%; }
.bubble-text { top: 12%; right: 4%; }
.bubble-form { bottom: 17%; left: 4%; }
.bubble-thought { right: 7%; bottom: 7%; }
.direction-copy,
.field-panel {
border-radius: 24px;
}
}
/* Homepage press proof and academic research board. */
.home-press-section {
position: relative;
overflow: hidden;
padding: clamp(74px, 9vw, 118px) 0;
background:
radial-gradient(circle at 82% 6%, rgba(31,95,139,0.32), transparent 32rem),
radial-gradient(circle at 12% 90%, rgba(109,92,61,0.2), transparent 28rem),
#030304;
border-top: 1px solid rgba(255,255,255,0.08);
}
.home-press-section::before,
.home-press-section::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 50%;
}
.home-press-section::before {
width: 440px;
height: 440px;
right: -160px;
top: -180px;
background: radial-gradient(circle, rgba(41,151,255,0.24), transparent 68%);
}
.home-press-section::after {
width: 320px;
height: 320px;
left: -120px;
bottom: -150px;
background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 66%);
}
.home-press-section .wide-container {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
gap: clamp(32px, 6vw, 72px);
align-items: center;
}
.home-press-head { max-width: 520px; }
.home-press-head .eyebrow { color: #7fb8df; }
.home-press-head h2 {
max-width: 720px;
color: #fff;
font-size: clamp(2.45rem, 5vw, 5rem);
}
.home-press-logos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.home-press-logo {
min-height: 168px;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
place-items: center;
gap: 16px;
padding: clamp(20px, 3vw, 30px);
border-radius: 30px;
background: linear-gradient(180deg, #fff, #f3f6fa);
border: 1px solid rgba(255,255,255,0.72);
box-shadow: 0 26px 70px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.78);
}
.home-press-logo img {
width: min(100%, 180px);
max-height: 70px;
object-fit: contain;
display: block;
}
.research-direction {
background:
radial-gradient(circle at 82% 8%, rgba(31,95,139,0.12), transparent 30rem),
radial-gradient(circle at 8% 88%, rgba(109,92,61,0.10), transparent 26rem),
var(--bg);
}
.research-board {
display: grid;
grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
gap: 18px;
align-items: stretch;
}
.research-core-card,
.research-card,
.research-axis {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
}
.research-core-card {
min-height: 560px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 22px;
padding: clamp(30px, 5vw, 52px);
border-radius: 36px;
color: #fff;
background:
radial-gradient(circle at 86% 10%, rgba(41,151,255,0.36), transparent 26rem),
radial-gradient(circle at 10% 90%, rgba(109,92,61,0.26), transparent 24rem),
linear-gradient(145deg, #030304, #101318);
border-color: rgba(255,255,255,0.12);
}
.research-core-card::before {
content: "";
position: absolute;
inset: 22px;
border-radius: 28px;
border: 1px solid rgba(255,255,255,0.10);
pointer-events: none;
}
.research-mark,
.research-card > span {
width: fit-content;
max-width: 100%;
border-radius: 999px;
padding: 7px 12px;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.research-mark {
position: relative;
z-index: 1;
background: rgba(255,255,255,0.12);
color: #8fc4ec;
border: 1px solid rgba(255,255,255,0.16);
}
.research-core-card h2,
.research-core-card p {
position: relative;
z-index: 1;
}
.research-core-card h2 {
max-width: 740px;
font-size: clamp(2.2rem, 4.3vw, 4rem);
}
.research-core-card p {
max-width: 620px;
color: rgba(255,255,255,0.72);
font-size: 1.08rem;
}
.research-side-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.research-card {
min-height: 270px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
padding: clamp(24px, 3vw, 32px);
border-radius: 30px;
background:
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.78)),
radial-gradient(circle at 88% 12%, rgba(31,95,139,0.12), transparent 16rem);
}
.research-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(31,95,139,0.42), transparent);
}
.research-card > span {
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent);
}
.research-card h3 {
max-width: none;
font-size: clamp(1.38rem, 2vw, 1.78rem);
overflow-wrap: normal;
}
.research-card p { color: var(--muted); }
.research-thesis { background: radial-gradient(circle at 90% 8%, rgba(109,92,61,0.16), transparent 16rem), linear-gradient(180deg, #ffffff, #f8f5ee); }
.research-current { background: radial-gradient(circle at 12% 90%, rgba(31,95,139,0.13), transparent 16rem), linear-gradient(180deg, #ffffff, #f5f8fa); }
.research-longer { background: radial-gradient(circle at 88% 12%, rgba(77,135,104,0.14), transparent 16rem), linear-gradient(180deg, #ffffff, #f4f8f4); }
.research-axis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 18px;
border-radius: 30px;
background: rgba(255,255,255,0.72);
backdrop-filter: blur(18px);
}
.research-axis > div {
min-height: 138px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
padding: 22px;
border-right: 1px solid var(--line);
}
.research-axis > div:last-child { border-right: 0; }
.research-axis > div > span:first-child {
color: var(--accent);
font-size: 12px;
font-weight: 950;
letter-spacing: 0.14em;
}
.research-axis strong {
display: block;
font-size: 1.22rem;
line-height: 1.05;
letter-spacing: -0.045em;
}
.research-axis small {
display: block;
color: var(--muted);
font-size: 0.88rem;
line-height: 1.28;
}
body.dark .research-direction {
background:
radial-gradient(circle at 82% 8%, rgba(31,95,139,0.20), transparent 30rem),
radial-gradient(circle at 8% 88%, rgba(109,92,61,0.16), transparent 26rem),
var(--bg);
}
body.dark .research-card,
body.dark .research-axis {
background:
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
radial-gradient(circle at 88% 12%, rgba(31,95,139,0.16), transparent 16rem);
border-color: rgba(255,255,255,0.12);
}
@media (max-width: 940px) {
.home-press-section .wide-container,
.research-board,
.research-side-grid,
.research-axis {
grid-template-columns: 1fr;
}
.research-core-card { min-height: 460px; }
.research-axis > div { border-right: 0; border-bottom: 1px solid var(--line); }
.research-axis > div:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
.home-press-section { padding: 62px 0; }
.home-press-logos { grid-template-columns: 1fr; }
.home-press-logo { min-height: 134px; border-radius: 24px; }
.home-press-logo img { max-height: 58px; }
.research-core-card { min-height: 420px; border-radius: 28px; padding: 26px; }
.research-core-card::before { inset: 14px; border-radius: 22px; }
.research-card, .research-axis { border-radius: 24px; }
.research-card { min-height: 220px; }
}
/* Direct top-to-bottom portfolio development pass. */
.home-portrait-orbit .portrait-bubble {
min-height: 46px;
max-width: min(270px, calc(100% - 16px));
padding: 8px 17px;
justify-content: flex-start;
line-height: 1.08;
text-align: left;
font-size: 0.82rem;
letter-spacing: -0.035em;
}
.home-portrait-orbit .bubble-study { top: 5%; left: -7%; }
.home-portrait-orbit .bubble-text { top: 17%; right: -8%; }
.home-portrait-orbit .bubble-form { bottom: 20%; left: -8%; }
.home-portrait-orbit .bubble-thought { right: -2%; bottom: 6%; }
.home-press-section {
padding: clamp(86px, 10vw, 138px) 0;
color: var(--ink);
background:
linear-gradient(120deg, rgba(31,95,139,0.045) 0 1px, transparent 1px 160px),
radial-gradient(circle at 78% 8%, rgba(41,151,255,0.14), transparent 32rem),
radial-gradient(circle at 8% 92%, rgba(109,92,61,0.10), transparent 30rem),
linear-gradient(145deg, #fbfcff 0%, #eef4f8 58%, #f8f6ef 100%);
border-top: 1px solid var(--line);
}
.home-press-section .wide-container {
grid-template-columns: minmax(260px, 0.5fr) minmax(0, 1.5fr);
align-items: stretch;
}
.home-press-head {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
}
.home-press-head h2 {
max-width: 12ch;
color: var(--ink);
font-size: clamp(2.15rem, 3vw, 3.35rem);
line-height: 0.98;
letter-spacing: -0.064em;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.home-press-logos {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 22px);
}
.home-press-logo {
min-height: clamp(210px, 18vw, 260px);
position: relative;
overflow: hidden;
display: grid;
grid-template-rows: 1fr;
place-items: center;
padding: clamp(30px, 4vw, 48px);
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,244,249,0.92)),
radial-gradient(circle at 80% 10%, rgba(31,95,139,0.10), transparent 14rem);
border-color: rgba(255,255,255,0.82);
box-shadow: 0 30px 78px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.86);
}
.home-press-logo::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 4px;
background: linear-gradient(90deg, #7fb8df, rgba(109,92,61,0.8));
}
.home-press-logo.press-logo-strong {
min-height: clamp(236px, 20vw, 290px);
background:
linear-gradient(180deg, #ffffff, #eef5fb),
radial-gradient(circle at 50% 0%, rgba(31,95,139,0.14), transparent 14rem);
}
.home-press-logo img {
width: min(100%, 260px);
max-height: 132px;
object-fit: contain;
display: block;
}
.home-press-logo.press-logo-strong img {
width: min(100%, 310px);
max-height: 154px;
}
.home-rhythm-section {
padding: clamp(72px, 9vw, 112px) 0;
background:
radial-gradient(circle at 86% 16%, rgba(31,95,139,0.10), transparent 30rem),
radial-gradient(circle at 8% 82%, rgba(109,92,61,0.08), transparent 26rem),
#ffffff;
border-top: 1px solid var(--line);
}
.home-rhythm-grid {
display: grid;
grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
gap: clamp(28px, 6vw, 68px);
align-items: start;
}
.home-rhythm-intro h2 {
max-width: 10ch;
font-size: clamp(2.35rem, 4vw, 4.25rem);
}
.home-rhythm-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.home-rhythm-card {
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 28px;
padding: clamp(24px, 3vw, 34px);
border: 1px solid rgba(15,23,42,0.10);
border-radius: 30px;
background:
linear-gradient(180deg, rgba(255,255,255,0.97), rgba(247,250,252,0.82)),
radial-gradient(circle at 86% 10%, rgba(31,95,139,0.12), transparent 16rem);
box-shadow: var(--shadow-soft);
}
.home-rhythm-card > span {
width: fit-content;
max-width: 100%;
border-radius: 999px;
padding: 7px 11px;
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent);
font-size: 12px;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.home-rhythm-card p {
color: var(--muted);
font-size: 1.02rem;
line-height: 1.42;
}
body.dark .home-rhythm-section {
background:
radial-gradient(circle at 86% 16%, rgba(31,95,139,0.20), transparent 30rem),
radial-gradient(circle at 8% 82%, rgba(109,92,61,0.14), transparent 26rem),
var(--bg);
}
body.dark .home-rhythm-card {
background:
linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.028)),
radial-gradient(circle at 86% 10%, rgba(31,95,139,0.16), transparent 16rem);
border-color: rgba(255,255,255,0.12);
}
body.dark .home-rhythm-card > span {
background: rgba(255,255,255,0.10);
color: #8fc4ec;
}
body.dark .home-press-section {
background:
linear-gradient(120deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 150px),
radial-gradient(circle at 74% 8%, rgba(41,151,255,0.42), transparent 34rem),
radial-gradient(circle at 8% 92%, rgba(146,118,73,0.28), transparent 30rem),
linear-gradient(145deg, #000 0%, #06111c 58%, #020203 100%);
}
body.dark .home-press-logo {
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(234,240,247,0.94)),
radial-gradient(circle at 50% 0%, rgba(41,151,255,0.16), transparent 14rem);
box-shadow: 0 34px 88px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.88);
}
.academic-spine-section {
padding: clamp(82px, 10vw, 132px) 0;
color: var(--ink);
background:
radial-gradient(circle at 88% 12%, rgba(41,151,255,0.16), transparent 34rem),
radial-gradient(circle at 12% 82%, rgba(109,92,61,0.10), transparent 28rem),
linear-gradient(180deg, #f9fbff 0%, #eef5f8 100%);
border-top: 1px solid var(--line);
}
.academic-spine-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
gap: 18px;
align-items: stretch;
}
.academic-spine-core,
.academic-spine-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(15,23,42,0.10);
box-shadow: 0 28px 90px rgba(15,23,42,0.10);
}
.academic-spine-core {
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 22px;
padding: clamp(32px, 5vw, 58px);
border-radius: 38px;
background:
radial-gradient(circle at 84% 10%, rgba(41,151,255,0.16), transparent 26rem),
linear-gradient(145deg, rgba(255,255,255,0.96), rgba(239,246,250,0.78));
}
.academic-spine-core::before {
content: "";
position: absolute;
inset: 20px;
border-radius: 30px;
border: 1px solid rgba(15,23,42,0.08);
pointer-events: none;
}
.academic-spine-core > * { position: relative; z-index: 1; }
.academic-spine-core .eyebrow { color: var(--accent); }
.academic-spine-core h2 { max-width: 760px; font-size: clamp(2.5rem, 5vw, 5rem); }
.academic-spine-core p { max-width: 640px; color: var(--muted); font-size: 1.1rem; }
.academic-spine-stack {
display: grid;
gap: 18px;
}
.academic-spine-card {
min-height: 201px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
padding: clamp(26px, 4vw, 38px);
border-radius: 32px;
background:
radial-gradient(circle at 85% 10%, rgba(109,92,61,0.12), transparent 18rem),
linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,248,250,0.78));
}
.academic-spine-card.spine-card-blue {
background:
radial-gradient(circle at 86% 12%, rgba(41,151,255,0.16), transparent 18rem),
linear-gradient(180deg, rgba(255,255,255,0.94), rgba(238,246,252,0.78));
}
.academic-spine-card > span {
width: fit-content;
padding: 7px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.academic-spine-card strong {
display: block;
max-width: 15ch;
font-size: clamp(1.8rem, 3vw, 2.55rem);
line-height: 0.98;
letter-spacing: -0.065em;
}
body.dark .academic-spine-section {
color: #fff;
background:
radial-gradient(circle at 88% 12%, rgba(41,151,255,0.30), transparent 34rem),
radial-gradient(circle at 12% 82%, rgba(109,92,61,0.20), transparent 28rem),
linear-gradient(145deg, #020203, #080b10 54%, #030304);
}
body.dark .academic-spine-core,
body.dark .academic-spine-card {
border-color: rgba(255,255,255,0.12);
box-shadow: 0 28px 90px rgba(0,0,0,0.38);
}
body.dark .academic-spine-core {
background:
radial-gradient(circle at 84% 10%, rgba(41,151,255,0.26), transparent 26rem),
linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
}
body.dark .academic-spine-core::before { border-color: rgba(255,255,255,0.10); }
body.dark .academic-spine-core .eyebrow { color: #8fc4ec; }
body.dark .academic-spine-core p { color: rgba(255,255,255,0.68); }
body.dark .academic-spine-card {
background:
radial-gradient(circle at 85% 10%, rgba(109,92,61,0.20), transparent 18rem),
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}
body.dark .academic-spine-card.spine-card-blue {
background:
radial-gradient(circle at 86% 12%, rgba(41,151,255,0.22), transparent 18rem),
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}
body.dark .academic-spine-card > span {
background: rgba(255,255,255,0.10);
color: #8fc4ec;
}
.academic-fields-section {
background:
radial-gradient(circle at 78% 12%, rgba(31,95,139,0.12), transparent 30rem),
radial-gradient(circle at 12% 88%, rgba(109,92,61,0.10), transparent 28rem),
#f5f7fb;
}
body.dark .academic-fields-section {
background:
radial-gradient(circle at 78% 10%, rgba(41,151,255,0.20), transparent 30rem),
radial-gradient(circle at 12% 88%, rgba(109,92,61,0.18), transparent 28rem),
linear-gradient(180deg, #050607 0%, #091019 100%);
}
body.dark .section-head.split-head p { color: rgba(245,245,247,0.66); }
.research-direction {
color: var(--ink);
background:
linear-gradient(120deg, rgba(31,95,139,0.04) 0 1px, transparent 1px 170px),
radial-gradient(circle at 82% 8%, rgba(31,95,139,0.14), transparent 34rem),
radial-gradient(circle at 8% 88%, rgba(109,92,61,0.10), transparent 30rem),
linear-gradient(180deg, #f7f9fc 0%, #eef4f8 100%);
}
.research-direction .eyebrow { color: var(--accent); }
.research-direction .split-head p { color: var(--muted); }
.research-core-card {
min-height: 610px;
color: var(--ink);
background:
radial-gradient(circle at 86% 8%, rgba(41,151,255,0.18), transparent 28rem),
radial-gradient(circle at 8% 92%, rgba(109,92,61,0.12), transparent 26rem),
linear-gradient(145deg, rgba(255,255,255,0.98), rgba(238,246,252,0.82));
border-color: rgba(15,23,42,0.10);
}
.research-core-card::before { border-color: rgba(15,23,42,0.08); }
.research-core-card p { color: var(--muted); }
.research-mark {
background: rgba(31,95,139,0.08);
color: var(--accent);
border-color: rgba(31,95,139,0.16);
}
.research-card,
.research-thesis,
.research-current,
.research-longer {
color: var(--ink);
background:
radial-gradient(circle at 90% 8%, rgba(41,151,255,0.12), transparent 18rem),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,248,250,0.78));
border-color: rgba(15,23,42,0.10);
box-shadow: 0 24px 76px rgba(15,23,42,0.10);
}
.research-thesis { background: radial-gradient(circle at 88% 8%, rgba(109,92,61,0.12), transparent 18rem), linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,246,239,0.78)); }
.research-current { background: radial-gradient(circle at 10% 90%, rgba(31,95,139,0.12), transparent 18rem), linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,247,251,0.78)); }
.research-longer { background: radial-gradient(circle at 88% 12%, rgba(77,135,104,0.12), transparent 18rem), linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,248,243,0.78)); }
.research-card > span {
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent);
}
.research-card p { color: var(--muted); }
.research-axis {
color: var(--ink);
background: rgba(255,255,255,0.72);
border-color: rgba(15,23,42,0.10);
}
.research-axis small { color: var(--muted); }
.research-axis > div { border-color: rgba(15,23,42,0.10); }
body.dark .research-direction {
color: #fff;
background:
linear-gradient(120deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 170px),
radial-gradient(circle at 82% 8%, rgba(31,95,139,0.30), transparent 34rem),
radial-gradient(circle at 8% 88%, rgba(109,92,61,0.22), transparent 30rem),
#020203;
}
body.dark .research-direction .eyebrow { color: #8fc4ec; }
body.dark .research-direction .split-head p { color: rgba(255,255,255,0.66); }
body.dark .research-core-card {
color: #fff;
background:
radial-gradient(circle at 86% 8%, rgba(41,151,255,0.42), transparent 28rem),
radial-gradient(circle at 8% 92%, rgba(109,92,61,0.32), transparent 26rem),
linear-gradient(145deg, #030304, #0b1016 56%, #030304);
border-color: rgba(255,255,255,0.12);
}
body.dark .research-core-card::before { border-color: rgba(255,255,255,0.10); }
body.dark .research-core-card p { color: rgba(255,255,255,0.72); }
body.dark .research-mark {
background: rgba(255,255,255,0.12);
color: #8fc4ec;
border-color: rgba(255,255,255,0.16);
}
body.dark .research-card,
body.dark .research-thesis,
body.dark .research-current,
body.dark .research-longer {
color: #fff;
background:
radial-gradient(circle at 90% 8%, rgba(41,151,255,0.16), transparent 18rem),
linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.028));
border-color: rgba(255,255,255,0.12);
box-shadow: 0 24px 76px rgba(0,0,0,0.28);
}
body.dark .research-thesis { background: radial-gradient(circle at 88% 8%, rgba(109,92,61,0.24), transparent 18rem), linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.028)); }
body.dark .research-current { background: radial-gradient(circle at 10% 90%, rgba(31,95,139,0.22), transparent 18rem), linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.028)); }
body.dark .research-longer { background: radial-gradient(circle at 88% 12%, rgba(77,135,104,0.24), transparent 18rem), linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.028)); }
body.dark .research-card > span {
background: rgba(255,255,255,0.10);
color: #8fc4ec;
}
body.dark .research-card p { color: rgba(255,255,255,0.68); }
body.dark .research-axis {
color: #fff;
background: rgba(255,255,255,0.07);
border-color: rgba(255,255,255,0.12);
}
body.dark .research-axis small { color: rgba(255,255,255,0.60); }
body.dark .research-axis > div { border-color: rgba(255,255,255,0.12); }
.academic-question-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: -10px 0 24px;
}
.academic-question-card {
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 18px;
padding: 20px;
border-radius: 24px;
border: 1px solid rgba(15,23,42,0.10);
background:
linear-gradient(180deg, rgba(255,255,255,0.88), rgba(247,250,252,0.68)),
radial-gradient(circle at 90% 8%, rgba(31,95,139,0.10), transparent 12rem);
box-shadow: 0 18px 52px rgba(15,23,42,0.08);
}
.academic-question-card > span {
color: var(--accent);
font-size: 12px;
font-weight: 950;
letter-spacing: 0.14em;
}
.academic-question-card p {
color: var(--ink);
font-size: clamp(1rem, 1.25vw, 1.12rem);
font-weight: 750;
line-height: 1.18;
letter-spacing: -0.04em;
}
body.dark .academic-question-card {
background:
linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.026)),
radial-gradient(circle at 90% 8%, rgba(31,95,139,0.18), transparent 12rem);
border-color: rgba(255,255,255,0.12);
box-shadow: 0 20px 62px rgba(0,0,0,0.28);
}
body.dark .academic-question-card > span { color: #8fc4ec; }
body.dark .academic-question-card p { color: #fff; }
.contact-card.contact-copy-card,
body.dark .contact-card.contact-copy-card {
background-color: #0b1720;
background-image:
radial-gradient(circle at 88% 0%, rgba(31,95,139,0.30), transparent 18rem),
linear-gradient(180deg, #0b1720, #071014);
}
.reading-room-note {
display: grid;
gap: 10px;
padding: clamp(22px, 3vw, 30px);
border: 1px solid rgba(15,23,42,0.10);
border-radius: 30px;
background:
radial-gradient(circle at 92% 12%, rgba(109,92,61,0.12), transparent 18rem),
linear-gradient(180deg, #fffdf8, #f7f8fa);
box-shadow: var(--shadow-soft);
}
.reading-room-note > span {
color: var(--accent);
font-size: 12px;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.reading-room-note p {
max-width: 64ch;
color: var(--muted);
font-size: 1.06rem;
}
.reading-room-index article {
background:
radial-gradient(circle at 88% 8%, rgba(31,95,139,0.10), transparent 18rem),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,250,252,0.86));
}
body.dark .reading-room-note,
body.dark .reading-room-index article {
background:
radial-gradient(circle at 88% 8%, rgba(31,95,139,0.16), transparent 18rem),
linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.028));
border-color: rgba(255,255,255,0.12);
}
body.dark .reading-room-note > span { color: #8fc4ec; }
body.dark .reading-room-note p { color: rgba(255,255,255,0.68); }
@media (max-width: 940px) {
.home-press-section .wide-container,
.academic-spine-grid,
.home-rhythm-grid,
.academic-question-strip {
grid-template-columns: 1fr;
}
.home-press-head { max-width: 620px; }
.home-press-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.academic-spine-core { min-height: 360px; }
.home-rhythm-cards { grid-template-columns: 1fr; }
.home-rhythm-card { min-height: 180px; }
}
@media (max-width: 640px) {
.home-portrait-simple { min-height: 430px; }
.home-portrait-orbit .portrait-bubble {
min-height: 40px;
max-width: 156px;
padding: 7px 10px;
font-size: 0.68rem;
}
.home-portrait-orbit .bubble-study { top: 1%; left: 2%; }
.home-portrait-orbit .bubble-text { top: 14%; right: 0; }
.home-portrait-orbit .bubble-form { bottom: 19%; left: 2%; }
.home-portrait-orbit .bubble-thought { right: 1%; bottom: 2%; }
.home-press-logos { grid-template-columns: 1fr; }
.home-press-head h2 { font-size: clamp(2.45rem, 10.5vw, 3.15rem); max-width: 12ch; }
.home-press-logo,
.home-press-logo.press-logo-strong { min-height: 190px; padding: 34px; }
.home-press-logo img { width: min(100%, 245px); max-height: 126px; }
.academic-spine-core { min-height: 340px; border-radius: 28px; padding: 26px; }
.academic-spine-core::before { inset: 14px; border-radius: 22px; }
.academic-spine-card { min-height: 180px; border-radius: 24px; }
.research-core-card { min-height: 500px; }
}
/* Manuur interaction pass: previews, scroll motion and physical cards. */
.reveal-on-scroll {
opacity: 1;
transform: translateY(0);
transition:
opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 300ms ease,
border-color 300ms ease,
background 300ms ease;
}
body.motion-ready .reveal-on-scroll {
opacity: 0;
transform: translateY(32px);
}
body.motion-ready .reveal-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-on-scroll:nth-child(2) { transition-delay: 100ms; }
.reveal-on-scroll:nth-child(3) { transition-delay: 200ms; }
.reveal-on-scroll:nth-child(4) { transition-delay: 300ms; }
.home-rhythm-card,
.home-press-logo,
.project-list-modern a {
--tilt-x: 0deg;
--tilt-y: 0deg;
transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0);
}
.home-rhythm-card {
position: relative;
overflow: hidden;
isolation: isolate;
transition:
transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 220ms ease,
border-color 180ms ease;
}
.home-rhythm-card::after {
content: "";
position: absolute;
inset: auto 18px 18px;
height: 42px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(31,95,139,0.16), rgba(109,92,61,0.14));
opacity: 0;
transform: translateY(12px);
transition: opacity 180ms ease, transform 180ms ease;
pointer-events: none;
z-index: -1;
}
.home-rhythm-card:hover,
.home-rhythm-card:focus-within,
.home-rhythm-card[data-tilt-active="true"] {
transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-6px);
box-shadow: 0 34px 84px rgba(15,23,42,0.16);
border-color: color-mix(in srgb, var(--accent) 28%, rgba(15,23,42,0.10));
}
.home-rhythm-card:hover::after,
.home-rhythm-card:focus-within::after,
.home-rhythm-card[data-tilt-active="true"]::after {
opacity: 1;
transform: translateY(0);
}
.home-press-logo {
isolation: isolate;
cursor: default;
transition:
transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 220ms ease,
border-color 180ms ease;
}
.home-press-logo img {
transition:
transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 200ms ease,
filter 200ms ease;
}
.press-logo-preview {
position: absolute;
left: clamp(16px, 2vw, 24px);
right: clamp(16px, 2vw, 24px);
bottom: clamp(16px, 2vw, 24px);
z-index: 2;
display: grid;
gap: 7px;
padding: 16px;
border-radius: 22px;
background: rgba(255,255,255,0.96);
color: rgba(15,23,42,0.96);
border: 1px solid rgba(31,95,139,0.20);
box-shadow: 0 24px 58px rgba(15,23,42,0.22);
backdrop-filter: blur(18px);
opacity: 0;
transform: translateY(14px) scale(0.98);
transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.press-logo-preview strong {
font-size: clamp(1.08rem, 2vw, 1.42rem);
line-height: 1;
letter-spacing: -0.045em;
}
.press-logo-preview p {
color: rgba(15,23,42,0.76);
font-size: 0.9rem;
line-height: 1.35;
}
.home-press-logo:hover,
.home-press-logo:focus-visible,
.home-press-logo[data-tilt-active="true"] {
transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-8px);
border-color: rgba(31,95,139,0.30);
box-shadow: 0 42px 102px rgba(15,23,42,0.25), inset 0 1px 0 rgba(255,255,255,0.9);
}
.home-press-logo:hover img,
.home-press-logo:focus-visible img,
.home-press-logo[data-tilt-active="true"] img {
opacity: 0.18;
transform: translateY(-20px) scale(0.88);
filter: saturate(0.8) blur(0.5px);
}
.home-press-logo:hover .press-logo-preview,
.home-press-logo:focus-visible .press-logo-preview,
.home-press-logo[data-tilt-active="true"] .press-logo-preview {
opacity: 1;
transform: translateY(0) scale(1);
}
.project-list-modern a {
transition:
transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 220ms ease,
border-color 180ms ease,
background 180ms ease;
}
.project-list-modern a:hover,
.project-list-modern a:focus-visible,
.project-list-modern a[data-tilt-active="true"] {
transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-5px);
}
.project-preview img {
transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.project-list-modern a:hover .project-preview img,
.project-list-modern a:focus-visible .project-preview img,
.project-list-modern a[data-tilt-active="true"] .project-preview img {
transform: scale(1.035);
}
body.dark .press-logo-preview {
background: rgba(7,12,18,0.82);
color: rgba(245,245,247,0.9);
border-color: rgba(255,255,255,0.16);
box-shadow: 0 22px 54px rgba(0,0,0,0.38);
}
body.dark .press-logo-preview p {
color: rgba(245,245,247,0.66);
}
@media (max-width: 640px) {
.press-logo-preview {
padding: 14px;
}
.press-logo-preview p {
font-size: 0.86rem;
}
}
@media (prefers-reduced-motion: reduce) {
body.motion-ready .reveal-on-scroll,
body.motion-ready .reveal-on-scroll.visible,
.home-rhythm-card,
.home-rhythm-card:hover,
.home-press-logo,
.home-press-logo:hover,
.project-list-modern a,
.project-list-modern a:hover {
opacity: 1 !important;
transform: none !important;
}
}
/* Manuur image-led rhythm pass: advice translated into visible structure. */
.home-rhythm-card {
min-height: 360px;
padding: 0;
justify-content: stretch;
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,252,0.88)),
radial-gradient(circle at 86% 10%, rgba(31,95,139,0.12), transparent 16rem);
}
.rhythm-visual {
position: relative;
min-height: 148px;
overflow: hidden;
border-radius: 29px 29px 20px 20px;
background:
radial-gradient(circle at 75% 10%, rgba(31,95,139,0.14), transparent 14rem),
linear-gradient(145deg, rgba(255,255,255,0.92), rgba(229,238,246,0.82));
border-bottom: 1px solid rgba(15,23,42,0.08);
isolation: isolate;
}
.rhythm-visual::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 42%, rgba(0,0,0,0.20)),
radial-gradient(circle at 12% 8%, rgba(255,255,255,0.72), transparent 14rem);
opacity: 0.7;
pointer-events: none;
}
.rhythm-visual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}
.rhythm-photo img { object-position: center 37%; }
.rhythm-project-stack {
display: grid;
place-items: center;
min-height: 168px;
background:
radial-gradient(circle at 70% 16%, rgba(31,95,139,0.18), transparent 16rem),
linear-gradient(145deg, #eef5fb, #ffffff);
}
.rhythm-project-stack img {
inset: auto;
width: 78%;
height: auto;
aspect-ratio: 16 / 10;
border-radius: 14px;
border: 1px solid rgba(15,23,42,0.10);
box-shadow: 0 18px 36px rgba(15,23,42,0.16);
object-fit: cover;
object-position: top center;
}
.rhythm-project-stack img:first-child {
transform: translate(-9%, 3%) rotate(-4deg);
}
.rhythm-project-stack img:nth-child(2) {
transform: translate(12%, 12%) rotate(5deg);
}
.rhythm-system-art {
display: grid;
place-items: center;
min-height: 168px;
}
.rhythm-system-art img {
position: relative;
inset: auto;
width: min(62%, 170px);
height: auto;
object-fit: contain;
transform: translateY(4px) scale(1);
filter: drop-shadow(0 18px 28px rgba(15,23,42,0.16));
}
.rhythm-copy {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
gap: 22px;
padding: clamp(22px, 3vw, 30px);
}
.rhythm-label {
width: fit-content;
max-width: 100%;
border-radius: 999px;
padding: 7px 11px;
background: color-mix(in srgb, var(--accent) 10%, transparent);
color: var(--accent);
font-size: 12px;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.home-rhythm-card > span {
display: none;
}
.home-rhythm-card:hover .rhythm-visual img,
.home-rhythm-card[data-tilt-active="true"] .rhythm-visual img {
filter: saturate(1.04) contrast(1.02);
}
.home-rhythm-card:hover .rhythm-photo img,
.home-rhythm-card[data-tilt-active="true"] .rhythm-photo img {
transform: scale(1.08);
}
.home-rhythm-card:hover .rhythm-project-stack img:first-child,
.home-rhythm-card[data-tilt-active="true"] .rhythm-project-stack img:first-child {
transform: translate(-14%, -2%) rotate(-7deg) scale(1.02);
}
.home-rhythm-card:hover .rhythm-project-stack img:nth-child(2),
.home-rhythm-card[data-tilt-active="true"] .rhythm-project-stack img:nth-child(2) {
transform: translate(16%, 14%) rotate(8deg) scale(1.02);
}
.home-rhythm-card:hover .rhythm-system-art img,
.home-rhythm-card[data-tilt-active="true"] .rhythm-system-art img {
transform: translateY(-4px) scale(1.04);
}
body.dark .rhythm-visual {
background:
radial-gradient(circle at 75% 10%, rgba(31,95,139,0.24), transparent 14rem),
linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
border-bottom-color: rgba(255,255,255,0.12);
}
body.dark .rhythm-project-stack img {
border-color: rgba(255,255,255,0.14);
box-shadow: 0 20px 44px rgba(0,0,0,0.34);
}
body.dark .rhythm-label {
background: rgba(255,255,255,0.10);
color: #8fc4ec;
}
@media (max-width: 940px) {
.home-rhythm-card {
min-height: 0;
}
.rhythm-visual {
min-height: 190px;
}
}
@media (max-width: 640px) {
.rhythm-visual {
min-height: 178px;
}
.rhythm-copy {
min-height: 188px;
padding: 22px;
}
.rhythm-project-stack img {
width: 74%;
}
}
/* Brand and page-level interaction pass. */
.brand-preview-trigger {
position: relative;
}
.brand-preview-card {
position: absolute;
left: 0;
top: calc(100% + 14px);
z-index: 140;
width: min(280px, 78vw);
display: grid;
gap: 6px;
padding: 16px;
border-radius: 20px;
background: rgba(255,255,255,0.98);
color: rgba(15,23,42,0.96);
border: 1px solid rgba(31,95,139,0.18);
box-shadow: 0 24px 68px rgba(15,23,42,0.24);
backdrop-filter: blur(18px);
opacity: 0;
transform: translateY(-6px) scale(0.98);
transform-origin: top left;
font-style: normal;
pointer-events: none;
transition: opacity 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-preview-card strong {
font-size: 1rem;
line-height: 1;
letter-spacing: -0.04em;
}
.brand-preview-card small {
color: var(--muted);
font-size: 0.84rem;
line-height: 1.35;
letter-spacing: -0.02em;
}
.brand-preview-card i {
font-style: normal;
}
.brand-preview-trigger:hover .brand-preview-card,
.brand-preview-trigger:focus .brand-preview-card,
.brand-preview-trigger:focus-visible .brand-preview-card,
.brand-preview-trigger:focus-within .brand-preview-card {
opacity: 1;
transform: translateY(0) scale(1);
}
body.dark .brand-preview-card {
background: rgba(12,12,14,0.92);
border-color: rgba(255,255,255,0.14);
box-shadow: 0 22px 58px rgba(0,0,0,0.44);
}
.home-portrait-orbit .portrait-panel,
.home-portrait-orbit .portrait-bubble,
.home-rhythm-section,
.home-press-section {
transition: transform 220ms ease-out;
}
body.home-scroll-ready .home-portrait-orbit .portrait-panel {
transform: translateY(calc(var(--home-scroll, 0) * -12px));
}
body.home-scroll-ready .home-portrait-orbit .portrait-bubble {
transform: translateY(calc(var(--home-scroll, 0) * -18px));
}
body.home-scroll-ready .home-rhythm-section {
transform: translateY(calc(var(--home-scroll, 0) * -6px));
}
body.home-scroll-ready .home-press-section {
transform: translateY(calc(var(--home-scroll, 0) * -10px));
}
.home-press-logo {
perspective: 1000px;
}
.home-press-logo img,
.press-logo-preview {
backface-visibility: hidden;
transform-style: preserve-3d;
}
.press-logo-preview {
transform: rotateY(12deg) translateY(14px) scale(0.98);
}
.home-press-logo:hover img,
.home-press-logo:focus-visible img,
.home-press-logo[data-tilt-active="true"] img {
opacity: 0.12;
transform: rotateY(-16deg) translateY(-20px) scale(0.86);
}
.home-press-logo:hover .press-logo-preview,
.home-press-logo:focus-visible .press-logo-preview,
.home-press-logo[data-tilt-active="true"] .press-logo-preview {
opacity: 1;
transform: rotateY(0) translateY(0) scale(1);
}
@media (max-width: 640px) {
.brand-preview-card {
left: -2px;
top: calc(100% + 10px);
width: min(260px, calc(100vw - 36px));
}
}
@media (prefers-reduced-motion: reduce) {
.brand-preview-card,
.brand-preview-trigger:hover .brand-preview-card,
.brand-preview-trigger:focus-visible .brand-preview-card,
.home-portrait-orbit .portrait-panel,
.home-portrait-orbit .portrait-bubble,
.home-rhythm-section,
.home-press-section,
.press-logo-preview,
.home-press-logo:hover img,
.home-press-logo:hover .press-logo-preview {
transform: none !important;
transition: none !important;
}
}
/* Archive consolidation */
.archive-map {
padding: clamp(36px, 6vw, 72px) 0;
}
.archive-map-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
gap: clamp(24px, 5vw, 64px);
align-items: start;
}
.archive-map-copy h2 {
margin: 0;
font-size: clamp(2rem, 4vw, 4rem);
letter-spacing: -0.05em;
}
.archive-jump-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.archive-jump-list a {
min-height: 96px;
border: 1px solid rgba(10, 20, 30, 0.12);
border-radius: 24px;
background: rgba(255, 255, 255, 0.78);
color: var(--ink);
padding: 18px;
display: flex;
align-items: flex-end;
text-decoration: none;
font-weight: 760;
letter-spacing: -0.025em;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.archive-jump-list a:hover,
.archive-jump-list a:focus-visible {
transform: translateY(-3px);
border-color: rgba(60, 105, 255, 0.35);
box-shadow: 0 24px 56px rgba(58, 92, 204, 0.13);
}
.archive-page .about-section,
.archive-page .archive-projects-section,
.archive-page .archive-texts-section {
scroll-margin-top: 96px;
}
.archive-page .archive-academic-section,
.archive-page .archive-public-section {
scroll-margin-top: 96px;
}
.archive-redirect-section {
min-height: 62vh;
display: grid;
align-items: center;
}
.archive-redirect-card {
max-width: 760px;
border: 1px solid rgba(10, 20, 30, 0.1);
border-radius: 32px;
background: rgba(255, 255, 255, 0.86);
padding: clamp(28px, 5vw, 56px);
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
}
.archive-redirect-card h1 {
margin: 0 0 14px;
font-size: clamp(2rem, 5vw, 4.6rem);
letter-spacing: -0.06em;
line-height: 0.96;
}
.archive-redirect-card p:not(.eyebrow) {
max-width: 58ch;
color: var(--muted);
line-height: 1.7;
}
body.dark .archive-jump-list a,
body.dark .archive-redirect-card {
background: rgba(11, 23, 32, 0.72);
border-color: rgba(255, 255, 255, 0.12);
color: var(--ink);
}
@media (max-width: 980px) {
.archive-map-grid {
grid-template-columns: 1fr;
}
.archive-jump-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.archive-jump-list {
grid-template-columns: 1fr;
}
.archive-jump-list a {
min-height: 72px;
}
}
.archive-section-group { scroll-margin-top: 96px; }
.archive-section-intro {
max-width: 980px;
margin-bottom: clamp(24px, 4vw, 44px);
}
.archive-section-intro h2 {
margin: 0 0 14px;
font-size: clamp(2rem, 4vw, 4.7rem);
line-height: 0.96;
letter-spacing: -0.06em;
}
.archive-section-intro p:not(.eyebrow) {
max-width: 64ch;
color: var(--muted);
line-height: 1.7;
}
/* Direct navigation and real-image refresh */
:root {
--bg: #fbf3e6;
--surface: #fffdf8;
--surface-soft: #f7ecdd;
--surface-glass: rgba(255, 253, 248, 0.78);
--ink: #17130f;
--muted: rgba(23, 19, 15, 0.64);
--line: rgba(83, 62, 39, 0.16);
--accent: #0f7668;
--accent-strong: #0a8f7a;
--hot: #c46d2d;
--glow: rgba(15, 118, 104, 0.22);
}
body.dark {
--bg: #050605;
--surface: #10110f;
--surface-soft: #181814;
--surface-glass: rgba(11, 12, 10, 0.76);
--ink: #f6f2ea;
--muted: rgba(246, 242, 234, 0.68);
--line: rgba(246, 242, 234, 0.14);
--accent: #51d4bd;
--accent-strong: #7ae4d0;
--hot: #f0b066;
}
body {
background:
radial-gradient(circle at 80% -6%, rgba(15, 118, 104, 0.14), transparent 34rem),
radial-gradient(circle at 4% 18%, rgba(196, 109, 45, 0.13), transparent 30rem),
var(--bg);
}
body.dark {
background:
radial-gradient(circle at 80% -6%, rgba(81, 212, 189, 0.16), transparent 34rem),
radial-gradient(circle at 4% 18%, rgba(240, 176, 102, 0.11), transparent 30rem),
var(--bg);
}
.site-header.direct-header { background: transparent; border-bottom: 0; padding: 10px 0; pointer-events: none; }
.site-nav { pointer-events: auto; }
.nav-route-links {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.52);
box-shadow: 0 0 0 1px rgba(83,62,39,0.10), inset 0 1px 0 rgba(255,255,255,0.72);
justify-self: center;
}
body.dark .nav-route-links {
background: rgba(255,255,255,0.065);
box-shadow: 0 0 0 1px rgba(255,255,255,0.09), inset 0 1px 0 rgba(255,255,255,0.06);
}
.nav-route-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
color: var(--muted);
font-size: 13px;
font-weight: 780;
letter-spacing: -0.01em;
transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.nav-route-link:hover { color: var(--ink); transform: translateY(-1px); }
.nav-route-link.active {
color: #fff;
background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--accent) 34%, var(--ink)));
box-shadow: 0 10px 26px rgba(23,19,15,0.14);
}
body.dark .nav-route-link.active { color: #050605; background: #f6f2ea; box-shadow: 0 10px 30px rgba(0,0,0,0.32); }
.hero-home {
background:
radial-gradient(circle at 76% 16%, rgba(15,118,104,0.18), transparent 31rem),
radial-gradient(circle at 16% 82%, rgba(196,109,45,0.13), transparent 28rem),
linear-gradient(135deg, #fff8ef 0%, #f6ead8 48%, #edf6ef 100%);
}
body.dark .hero-home {
background:
radial-gradient(circle at 76% 16%, rgba(81,212,189,0.22), transparent 31rem),
radial-gradient(circle at 16% 82%, rgba(240,176,102,0.13), transparent 28rem),
linear-gradient(135deg, #050605 0%, #10120f 48%, #0d1714 100%);
}
.home-visual-gallery {
position: relative;
min-height: clamp(470px, 52vw, 640px);
display: grid;
place-items: center;
isolation: isolate;
}
.net-photo-card {
position: relative;
overflow: hidden;
border-radius: 38px;
border: 1px solid rgba(255,255,255,0.72);
background: #fff;
box-shadow: 0 34px 90px rgba(61, 42, 21, 0.16), 0 0 0 1px rgba(83,62,39,0.08);
}
.home-hero-photo {
position: absolute;
inset: 20px 6px 36px auto;
width: min(410px, 88%);
transform: rotate(2.4deg);
z-index: 1;
}
.home-hero-photo img,
.page-hero-net-photo img,
.rhythm-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.home-hero-photo img { aspect-ratio: 4 / 5.45; filter: saturate(0.95) contrast(1.04); }
.home-portrait-card {
position: relative;
z-index: 3;
width: min(310px, 74%);
justify-self: start;
margin-left: clamp(0px, 3vw, 32px);
transform: rotate(-3.2deg);
}
.home-portrait-card img {
border-radius: 32px;
box-shadow: 0 30px 86px rgba(61, 42, 21, 0.22), 0 0 0 1px rgba(255,255,255,0.6);
}
.home-portrait-card::after {
content: "Manuur";
position: absolute;
left: 18px;
bottom: 18px;
padding: 7px 11px;
border-radius: 999px;
background: rgba(255,255,255,0.78);
color: #17130f;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
backdrop-filter: blur(14px);
}
.net-photo-card figcaption,
.page-hero-net-photo figcaption {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 2;
display: inline-flex;
width: fit-content;
max-width: calc(100% - 28px);
padding: 7px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.74);
color: rgba(23,19,15,0.68);
font-size: 11px;
font-weight: 760;
letter-spacing: -0.01em;
backdrop-filter: blur(14px);
}
body.dark .net-photo-card { border-color: rgba(255,255,255,0.14); background: #10110f; box-shadow: 0 34px 100px rgba(0,0,0,0.56), 0 0 0 1px rgba(255,255,255,0.08); }
body.dark .home-hero-photo img,
body.dark .page-hero-net-photo img,
body.dark .rhythm-photo img { filter: saturate(0.82) brightness(0.72) contrast(1.08); }
body.dark .net-photo-card figcaption,
body.dark .page-hero-net-photo figcaption,
body.dark .home-portrait-card::after { background: rgba(5,6,5,0.68); color: rgba(246,242,234,0.76); }
.page-hero-grid {
background:
linear-gradient(145deg, rgba(255,253,248,0.92), rgba(255,246,232,0.72)),
radial-gradient(circle at 88% 12%, rgba(15,118,104,0.17), transparent 22rem);
}
.page-hero-net-photo {
min-height: 360px;
padding: 0;
display: block;
transform: rotate(1.4deg);
}
.page-hero-net-photo::before { display: none; }
.page-hero-net-photo img { aspect-ratio: 4 / 5; }
.home-rhythm-card {
border-color: rgba(83,62,39,0.14);
background: linear-gradient(180deg, rgba(255,253,248,0.94), rgba(255,247,236,0.78));
}
.rhythm-local img { object-position: center 42%; }
body.dark .home-rhythm-card { background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)); border-color: rgba(255,255,255,0.12); }
@media (max-width: 780px) {
.site-nav { flex-wrap: wrap; border-radius: 28px; gap: 8px; }
.nav-route-links { order: 3; width: 100%; justify-content: stretch; }
.nav-route-link { flex: 1 1 0; min-width: 0; padding: 0 10px; }
.home-visual-gallery { min-height: 520px; }
.home-hero-photo { inset: 26px 50% 42px auto; width: min(430px, 86vw); transform: translateX(50%) rotate(1.8deg); }
.home-portrait-card { justify-self: center; align-self: end; width: min(260px, 64vw); margin: 0 0 8px; transform: rotate(-2.4deg); }
.net-photo-card figcaption { font-size: 10px; }
}
@media (max-width: 430px) {
.nav-route-link { font-size: 12px; min-height: 34px; padding: 0 6px; }
.home-visual-gallery { min-height: 470px; }
.home-portrait-card { width: min(235px, 66vw); }
.home-hero-photo { width: min(380px, 90vw); }
}
/* William Asefaw inspired restraint pass: lighter, flatter, calmer. */
:root {
--bg: #f7f5ef;
--surface: #ffffff;
--surface-soft: #f1efe8;
--surface-glass: rgba(250, 249, 245, 0.9);
--ink: #161616;
--muted: rgba(22, 22, 22, 0.66);
--line: rgba(22, 22, 22, 0.13);
--accent: #233c59;
--accent-strong: #315d86;
--hot: #8d7258;
--glow: rgba(35, 60, 89, 0.13);
--radius: 10px;
--radius-lg: 12px;
--panel-radius: 10px;
--shadow: 0 16px 44px rgba(15, 23, 42, 0.08);
--shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.055);
}
body.dark {
--bg: #070707;
--surface: #101010;
--surface-soft: #151515;
--surface-glass: rgba(12, 12, 12, 0.88);
--ink: #f4f1ea;
--muted: rgba(244, 241, 234, 0.66);
--line: rgba(244, 241, 234, 0.15);
--accent: #a8c9e8;
--accent-strong: #c7def4;
--hot: #d4b98f;
}
body,
body.dark {
background: var(--bg);
letter-spacing: -0.01em;
}
.site-header.direct-header {
padding: 0;
background: color-mix(in srgb, var(--bg) 86%, transparent);
border-bottom: 1px solid var(--line);
pointer-events: auto;
}
.site-nav {
min-height: 66px;
max-width: 1120px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
body.dark .site-nav {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.brand {
gap: 8px;
font-weight: 500;
letter-spacing: -0.01em;
}
.brand-mark {
width: 23px;
height: 23px;
font-size: 10px;
background: var(--ink);
box-shadow: none;
}
.nav-route-links {
gap: clamp(14px, 2vw, 24px);
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.dark .nav-route-links {
background: transparent;
box-shadow: none;
}
.nav-route-link {
min-height: auto;
padding: 4px 0 5px;
border-radius: 0;
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid transparent;
transition: color 0.16s ease, border-color 0.16s ease;
}
.nav-route-link:hover {
transform: none;
border-color: color-mix(in srgb, var(--ink) 32%, transparent);
}
.nav-route-link.active,
body.dark .nav-route-link.active {
color: var(--ink);
background: transparent;
box-shadow: none;
border-bottom-color: currentColor;
}
.nav-icon-button {
width: 34px;
height: 34px;
border-color: var(--line);
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.nav-icon-button svg {
width: 16px;
height: 16px;
}
.nav-icon-button:hover {
transform: none;
}
.hero,
.hero-home {
min-height: auto;
background: var(--bg);
}
body.dark .hero-home {
background: var(--bg);
}
.hero-home .hero-grid {
grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.78fr);
gap: clamp(34px, 8vw, 88px);
align-items: start;
padding-top: clamp(64px, 9vw, 118px);
padding-bottom: clamp(64px, 10vw, 132px);
}
.hero-copy {
padding-top: clamp(4px, 2vw, 22px);
}
h1 {
max-width: 13ch;
font-size: clamp(2.75rem, 5.2vw, 4.75rem);
font-weight: 410;
line-height: 1.04;
letter-spacing: -0.045em;
}
h2 {
font-size: clamp(2rem, 3.35vw, 3.55rem);
font-weight: 420;
line-height: 1.06;
letter-spacing: -0.04em;
}
h3 {
font-weight: 520;
letter-spacing: -0.025em;
}
.eyebrow {
margin-bottom: 14px;
color: var(--accent);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.13em;
}
.hero-sub.compact {
max-width: 39rem;
margin-top: 22px;
font-size: clamp(0.98rem, 1.25vw, 1.12rem);
line-height: 1.68;
}
.home-visual-gallery {
min-height: 0;
display: block;
place-items: unset;
}
.net-photo-card,
.home-hero-photo,
.home-portrait-card,
.page-hero-net-photo {
border-radius: 4px;
border: 0;
box-shadow: none;
background: transparent;
}
.home-hero-photo {
position: relative;
inset: auto;
width: 100%;
transform: none;
z-index: auto;
}
.home-hero-photo img {
aspect-ratio: 4 / 3.15;
border-radius: 4px;
object-position: center 42%;
filter: saturate(0.9) contrast(1.02);
}
.portrait-panel::before,
.home-portrait-card::after {
display: none;
}
.net-photo-card figcaption,
.page-hero-net-photo figcaption {
position: static;
display: block;
width: auto;
max-width: none;
margin-top: 10px;
padding: 0;
border-radius: 0;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
backdrop-filter: none;
}
body.dark .net-photo-card,
body.dark .home-hero-photo img {
box-shadow: none;
}
body.dark .home-hero-photo img,
body.dark .page-hero-net-photo img,
body.dark .rhythm-photo img {
filter: saturate(0.82) brightness(0.8) contrast(1.05);
}
body.dark .net-photo-card figcaption,
body.dark .page-hero-net-photo figcaption {
background: transparent;
color: var(--muted);
}
.home-rhythm-section {
padding: clamp(72px, 9vw, 118px) 0;
background: var(--surface);
border-top: 1px solid var(--line);
}
body.dark .home-rhythm-section {
background: var(--surface);
}
.home-rhythm-grid {
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
gap: clamp(32px, 7vw, 82px);
}
.home-rhythm-intro h2 {
max-width: 12ch;
font-size: clamp(2rem, 3.2vw, 3.45rem);
}
.home-rhythm-cards {
gap: clamp(20px, 2.6vw, 34px);
}
.home-rhythm-card {
min-height: auto;
padding: 0;
border: 0;
border-radius: 4px;
background: transparent;
box-shadow: none;
transform: none;
transition: none;
}
.home-rhythm-card::after,
.home-rhythm-card::before {
display: none;
}
.rhythm-visual {
min-height: 185px;
border: 0;
border-radius: 4px;
background: #eceae2;
}
.rhythm-visual::after {
opacity: 0.16;
}
.rhythm-visual img,
.home-rhythm-card:hover .rhythm-visual img,
.home-rhythm-card[data-tilt-active="true"] .rhythm-visual img,
.home-rhythm-card:hover .rhythm-photo img,
.home-rhythm-card[data-tilt-active="true"] .rhythm-photo img {
transform: none;
filter: saturate(0.92) contrast(1.02);
}
.rhythm-project-stack {
background: #eceae2;
}
.rhythm-project-stack img,
.home-rhythm-card:hover .rhythm-project-stack img:first-child,
.home-rhythm-card[data-tilt-active="true"] .rhythm-project-stack img:first-child,
.home-rhythm-card:hover .rhythm-project-stack img:nth-child(2),
.home-rhythm-card[data-tilt-active="true"] .rhythm-project-stack img:nth-child(2) {
width: 82%;
border-radius: 3px;
box-shadow: none;
transform: none;
}
.rhythm-project-stack img:nth-child(2) {
display: none;
}
.rhythm-copy {
gap: 16px;
min-height: 0;
padding: 18px 0 0;
}
.rhythm-label {
padding: 0;
border-radius: 0;
background: transparent;
color: var(--accent);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.11em;
}
.home-rhythm-card p {
max-width: 34ch;
font-size: 0.97rem;
line-height: 1.62;
}
.home-press-section {
padding: clamp(72px, 9vw, 116px) 0;
color: var(--ink);
background: #e9e8df;
border-top: 1px solid var(--line);
}
.home-press-section::before,
.home-press-section::after,
.home-press-logo::before {
display: none;
}
body.dark .home-press-section {
background: #111111;
}
.home-press-section .wide-container {
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
gap: clamp(28px, 7vw, 86px);
align-items: center;
}
.home-press-head {
gap: 14px;
}
.home-press-head .eyebrow {
color: var(--accent);
}
.home-press-head h2 {
max-width: 12ch;
color: var(--ink);
font-size: clamp(2rem, 3.15vw, 3.35rem);
font-weight: 420;
line-height: 1.06;
letter-spacing: -0.04em;
}
.home-press-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(20px, 4vw, 46px) clamp(28px, 5vw, 58px);
}
.home-press-logo,
.home-press-logo.press-logo-strong {
width: auto;
min-height: 0;
max-width: 170px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
perspective: none;
transform: none;
transition: opacity 0.16s ease;
}
.home-press-logo img,
.home-press-logo.press-logo-strong img {
width: auto;
max-width: 160px;
max-height: 48px;
display: block;
opacity: 0.9;
filter: saturate(0.82) contrast(1.04);
transform: none;
}
.home-press-logo:hover,
.home-press-logo:focus-visible,
.home-press-logo[data-tilt-active="true"] {
transform: none;
border-color: transparent;
box-shadow: none;
}
.home-press-logo:hover img,
.home-press-logo:focus-visible img,
.home-press-logo[data-tilt-active="true"] img {
opacity: 1;
transform: none;
filter: saturate(0.92) contrast(1.04);
}
.press-logo-preview,
.home-press-logo:hover .press-logo-preview,
.home-press-logo:focus-visible .press-logo-preview,
.home-press-logo[data-tilt-active="true"] .press-logo-preview {
display: none;
opacity: 0;
transform: none;
}
body.home-scroll-ready .home-rhythm-section,
body.home-scroll-ready .home-press-section {
transform: none;
}
.project-list-modern a,
.project-list-modern a:hover,
.project-list-modern a:focus-visible,
.project-list-modern a[data-tilt-active="true"] {
transform: none;
}
@media (max-width: 940px) {
.hero-home .hero-grid,
.home-rhythm-grid,
.home-press-section .wide-container {
grid-template-columns: 1fr;
}
.home-rhythm-cards {
grid-template-columns: 1fr;
}
.home-press-logos {
gap: 24px 34px;
}
}
@media (max-width: 780px) {
.site-nav {
flex-wrap: wrap;
gap: 10px 14px;
border-radius: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.nav-route-links {
order: 3;
width: 100%;
justify-content: flex-start;
}
.nav-route-link {
flex: 0 0 auto;
padding: 2px 0 5px;
}
.home-visual-gallery {
min-height: 0;
}
.home-hero-photo {
width: 100%;
transform: none;
}
}
@media (max-width: 520px) {
.wide-container,
.narrow-container,
.site-nav {
padding-left: 20px;
padding-right: 20px;
}
h1 {
font-size: clamp(2.3rem, 12vw, 3.25rem);
}
.home-press-logos {
align-items: flex-start;
gap: 22px 30px;
}
.home-press-logo,
.home-press-logo.press-logo-strong {
max-width: 132px;
}
.home-press-logo img,
.home-press-logo.press-logo-strong img {
max-width: 132px;
max-height: 42px;
}
}
/* Manuur calm editorial continuation pass. */
.hero-home .hero-grid {
grid-template-columns: minmax(0, 0.94fr) minmax(320px, 0.82fr);
align-items: center;
}
.hero-home h1 {
font-weight: 400;
max-width: 12.6ch;
}
.home-hero-photo img {
aspect-ratio: 4 / 3;
object-position: center 46%;
}
.home-rhythm-section {
background: color-mix(in srgb, var(--surface) 94%, #e9e8df);
}
.home-rhythm-grid {
align-items: center;
}
.home-rhythm-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
}
.rhythm-visual {
min-height: clamp(174px, 17vw, 220px);
overflow: hidden;
}
.rhythm-copy {
padding-top: 20px;
}
.home-press-section {
background: linear-gradient(180deg, #ecebe3 0%, #e5e3d8 100%);
}
body.dark .home-press-section {
background: linear-gradient(180deg, #10100f 0%, #141411 100%);
}
.home-press-section .wide-container {
grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
align-items: center;
}
.home-press-logos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 4vw, 56px) clamp(28px, 5vw, 64px);
align-items: center;
}
.home-press-logo,
.home-press-logo.press-logo-strong {
width: 100%;
max-width: none;
min-height: 54px;
justify-content: flex-start;
}
.home-press-logo img,
.home-press-logo.press-logo-strong img {
max-width: min(100%, 175px);
max-height: 50px;
object-position: left center;
}
.home-press-logo[aria-label*="Helsingborgs Dagblad"] img {
max-width: 72px;
}
.home-press-logo[aria-label*="Fryshuset"] img {
max-width: 112px;
}
.home-press-logo[aria-label*="Mötesplats Social Innovation"] img {
max-width: 78px;
}
@media (max-width: 940px) {
.hero-home .hero-grid,
.home-rhythm-grid,
.home-press-section .wide-container {
grid-template-columns: 1fr;
}
.home-rhythm-cards {
grid-template-columns: 1fr;
}
.home-press-logos {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.home-press-logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 28px;
}
.home-press-logo,
.home-press-logo.press-logo-strong {
min-height: 42px;
}
.home-press-logo img,
.home-press-logo.press-logo-strong img {
max-width: min(100%, 136px);
max-height: 42px;
}
}
/* Manuur person-first restraint pass. */
.hero-home .hero-grid {
grid-template-columns: minmax(0, 0.84fr) minmax(340px, 0.92fr);
align-items: center;
padding-top: clamp(56px, 8vw, 104px);
padding-bottom: clamp(54px, 8vw, 108px);
}
.hero-home h1 {
max-width: 11.8ch;
font-weight: 390;
}
.hero-sub.compact {
max-width: 34rem;
}
.home-mahad-photo {
width: min(100%, 470px);
margin-left: auto;
}
.home-mahad-photo img {
width: 100%;
display: block;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 64% 58%;
border-radius: 6px;
filter: saturate(0.95) contrast(1.02);
}
.home-hero-photo figcaption,
.page-hero-net-photo figcaption {
display: none;
}
.home-presence-section {
padding: clamp(100px, 14vw, 180px) 0;
background: var(--surface);
border-top: 1px solid var(--line);
}
.home-presence-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(48px, 8vw, 80px);
align-items: start;
}
.home-presence-photo {
width: 100%;
}
.home-presence-photo img {
width: 100%;
display: block;
aspect-ratio: 21 / 9;
object-fit: cover;
object-position: center 60%;
border-radius: 2px;
filter: saturate(0.85) contrast(1.05);
}
.home-presence-copy h2 {
max-width: 14ch;
font-size: clamp(3rem, 6vw, 5.5rem);
font-weight: 380;
line-height: 0.95;
letter-spacing: -0.05em;
}
.home-presence-copy p {
max-width: 38rem;
margin-top: 32px;
color: var(--muted);
font-size: clamp(1.2rem, 1.8vw, 1.4rem);
line-height: 1.6;
}
.home-press-section {
padding: clamp(70px, 8vw, 104px) 0;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.home-press-head h2 {
max-width: 10ch;
}
.archive-profile-section {
padding-top: clamp(80px, 10vw, 140px);
}
.field-bubble-row,
.field-card-copy small {
display: none;
}
@media (max-width: 940px) {
.home-mahad-photo,
.home-presence-photo {
width: 100%;
margin: 0;
}
.home-presence-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.hero-home .hero-grid {
padding-top: 64px;
}
.home-mahad-photo img {
aspect-ratio: 4 / 4.55;
}
.home-presence-photo img {
aspect-ratio: 16 / 9;
}
.home-presence-section {
padding: 64px 0 76px;
}
}
/* Manuur extra editorial polish and micro-interactions */
.home-mahad-photo img,
.home-presence-photo img {
box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.09);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
body.dark .home-mahad-photo img,
body.dark .home-presence-photo img {
box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45);
}
.home-mahad-photo:hover img,
.home-presence-photo:hover img {
transform: translateY(-3px);
box-shadow: 0 22px 48px -12px rgba(0, 0, 0, 0.14);
}
body.dark .home-mahad-photo:hover img,
body.dark .home-presence-photo:hover img {
box-shadow: 0 22px 48px -12px rgba(0, 0, 0, 0.6);
}
.home-press-logo img {
transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
filter: opacity(0.82);
}
.home-press-logo:hover img,
.home-press-logo:focus-visible img {
filter: opacity(1);
transform: translateY(-1px);
}
.about-card,
.project-case-card,
.academic-field-card,
.archive-jump-list a {
transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-card:hover,
.project-case-card:hover,
.academic-field-card:hover {
border-color: color-mix(in srgb, var(--line) 40%, var(--foreground));
}
.back-top {
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
.back-top:hover {
transform: translateY(-3px);
}
/* --- RAW MINIMALIST REBUILD --- */
.raw-container {
max-width: 1040px;
margin: 0 auto;
padding: 0 32px;
}
.raw-hero {
padding: clamp(180px, 24vh, 300px) 0 clamp(100px, 16vh, 180px);
border-bottom: 1px solid var(--line);
}
.raw-title {
font-size: clamp(4rem, 10.5vw, 9rem);
font-weight: 350;
line-height: 0.88;
letter-spacing: -0.06em;
margin-bottom: 80px;
max-width: 14ch;
}
.raw-statement {
max-width: 920px;
}
.raw-subtitle {
font-size: clamp(1.6rem, 3.2vw, 2.8rem);
font-weight: 380;
line-height: 1.30;
color: var(--ink);
margin-bottom: 40px;
letter-spacing: -0.025em;
}
.raw-prose {
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
line-height: 1.7;
color: var(--muted);
max-width: 800px;
}
.raw-visual {
width: 100%;
padding: 0 32px;
max-width: 1400px;
margin: 0 auto clamp(80px, 12vh, 140px);
}
.raw-visual img {
width: 100%;
aspect-ratio: 21 / 9;
object-fit: cover;
border-radius: 4px;
}
.raw-projects {
padding-bottom: clamp(100px, 15vh, 180px);
}
.raw-press {
padding-bottom: clamp(80px, 12vh, 140px);
}
.raw-press-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
}
.raw-press-item {
display: block;
padding: 32px;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--surface-soft, rgba(0,0,0,0.01));
text-decoration: none;
color: inherit;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.raw-press-item:hover {
border-color: var(--ink);
transform: translateY(-2px);
}
.raw-press-source {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 12px;
display: block;
}
.raw-press-item h4 {
font-size: 1.35rem;
font-weight: 400;
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.raw-press-item p {
font-size: 1rem;
color: var(--muted);
line-height: 1.5;
}
@media (max-width: 768px) {
.raw-press-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
.raw-section-title {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-bottom: 64px;
color: var(--muted);
}
.raw-project-item {
margin-bottom: 80px;
max-width: 720px;
}
.raw-project-item h4 {
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 400;
margin-bottom: 16px;
letter-spacing: -0.03em;
}
.raw-project-item p {
font-size: clamp(1.1rem, 1.4vw, 1.25rem);
color: var(--muted);
line-height: 1.6;
margin-bottom: 24px;
}
.raw-link {
display: inline-flex;
font-size: 1.05rem;
font-weight: 500;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--ink);
padding-bottom: 4px;
transition: opacity 0.3s ease;
}
.raw-link:hover {
opacity: 0.6;
}
.raw-form {
max-width: 600px;
margin-top: 48px;
display: flex;
flex-direction: column;
gap: 24px;
}
.raw-form label {
display: flex;
flex-direction: column;
gap: 12px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.raw-input {
width: 100%;
padding: 12px 0 16px 0;
border: none;
border-bottom: 1px solid var(--line);
background: transparent;
border-radius: 0;
font-size: 1.2rem;
font-weight: 400;
color: var(--ink);
font-family: inherit;
transition: border-color 0.4s ease;
}
.raw-input:focus {
outline: none;
border-color: var(--ink);
box-shadow: 0 1px 0 0 var(--ink);
background: rgba(127, 127, 127, 0.03);
}
.raw-input::placeholder {
color: rgba(0,0,0,0.25);
}
body.dark .raw-input::placeholder {
color: rgba(255,255,255,0.25);
}
.raw-button {
align-self: flex-start;
margin-top: 24px;
padding: 18px 42px;
background: var(--ink);
color: var(--bg);
border: none;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
border-radius: 0;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.raw-button:hover {
transform: translateY(-4px);
opacity: 0.85;
}
@media (max-width: 640px) {
.raw-hero { padding-top: 100px; }
.raw-visual { padding: 0; }
.raw-visual img { aspect-ratio: 4 / 3; border-radius: 0; }
}
/* --- EDITORIAL IMAGE-LED CARDS --- */
.raw-editorial-section {
padding-bottom: clamp(100px, 15vh, 180px);
padding-top: clamp(60px, 8vh, 120px);
border-bottom: 1px solid var(--line);
}
.editorial-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
.editorial-card {
display: block;
text-decoration: none;
color: inherit;
position: relative;
}
.editorial-card-img {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 2px;
background: var(--surface-soft, rgba(0,0,0,0.02));
margin-bottom: 24px;
}
.editorial-source {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 8px;
display: block;
}
.editorial-card-body h4 {
font-size: 1.25rem;
font-weight: 400;
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.editorial-card-body p {
font-size: 0.95rem;
color: var(--muted);
line-height: 1.5;
}
@media (max-width: 940px) {
.editorial-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
}
@media (max-width: 640px) {
.editorial-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* --- HIGH-END EDITORIAL INTERACTIONS --- */
/* Manifesto Text Grid (Swiss Layout) */
.raw-manifesto {
padding-bottom: clamp(100px, 15vh, 180px);
}
.manifesto-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
border-top: 1px solid var(--line);
padding-top: 32px;
}
.manifesto-column {
display: flex;
flex-direction: column;
}
.manifesto-image-wrapper {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 2px;
margin-bottom: 32px;
background: var(--surface-soft);
position: relative;
}
.manifesto-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.8) contrast(1.05);
transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1), filter 1.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.manifesto-column:hover .manifesto-image-wrapper img {
transform: scale(1.08);
filter: saturate(1.1) contrast(1.1);
}
.manifesto-number {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 24px;
}
.manifesto-heading {
font-size: 1.4rem;
font-weight: 500;
letter-spacing: -0.02em;
margin-bottom: 16px;
color: var(--ink);
}
.manifesto-text {
font-size: 1.1rem;
line-height: 1.6;
color: var(--muted);
}
@media (max-width: 768px) {
.manifesto-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.manifesto-column {
border-top: 1px solid var(--line);
padding-top: 24px;
}
.manifesto-grid {
border-top: none;
padding-top: 0;
}
}
/* Text List (Essays & Analysis) */
.raw-texts {
padding-bottom: clamp(120px, 18vh, 220px);
}
.text-list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--line);
}
.text-list-item {
display: flex;
align-items: baseline;
padding: 32px 0;
border-bottom: 1px solid var(--line);
transition: opacity 0.4s ease;
cursor: default;
}
.text-list-item:hover {
opacity: 0.7;
}
.text-meta {
font-family: inherit;
font-size: 0.9rem;
font-weight: 500;
color: var(--muted);
width: 120px;
flex-shrink: 0;
}
.text-content h4 {
font-size: 1.5rem;
font-weight: 500;
letter-spacing: -0.01em;
margin-bottom: 8px;
color: var(--ink);
}
.text-content p {
font-size: 1.1rem;
color: var(--muted);
line-height: 1.5;
margin: 0;
}
@media (max-width: 640px) {
.text-list-item {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 24px 0;
}
.text-meta {
width: auto;
}
}
/* Cinematic Cover */
.raw-cover {
width: 100%;
padding-top: calc(var(--nav-height) + 20px);
padding-bottom: 0;
display: flex;
justify-content: center;
}
.raw-cover-image {
width: 100%;
max-width: 1600px; /* Cap width on ultra-wides */
aspect-ratio: 21 / 9;
overflow: hidden;
background: var(--surface-soft);
position: relative;
}
.raw-cover-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1), filter 1.8s cubic-bezier(0.19, 1, 0.22, 1);
filter: saturate(0.85) contrast(1.05) brightness(0.95);
}
.raw-cover:hover .raw-cover-image img {
transform: scale(1.04);
filter: saturate(1.05) contrast(1.1) brightness(1.02);
}
@media (max-width: 768px) {
.raw-cover-image {
aspect-ratio: 16 / 9;
}
}
/* Refined Image Hover Physics */
.editorial-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 32px;
transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.editorial-card:hover .editorial-card-img img {
transform: scale(1.05);
}
/* Subtle Text Masking on Scroll */
.raw-title, .raw-subtitle, .raw-prose {
clip-path: polygon(0 0, 100% 0, 100% 120%, 0% 120%);
}
body.motion-ready .reveal-on-scroll .raw-title,
body.motion-ready .reveal-on-scroll .raw-subtitle,
body.motion-ready .reveal-on-scroll .raw-prose {
opacity: 0;
transform: translateY(40px);
transition: opacity 1.4s cubic-bezier(0.19, 1, 0.22, 1), transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}
body.motion-ready .reveal-on-scroll.visible .raw-title,
body.motion-ready .reveal-on-scroll.visible .raw-subtitle,
body.motion-ready .reveal-on-scroll.visible .raw-prose {
opacity: 1;
transform: translateY(0);
}
.reveal-on-scroll.visible .raw-subtitle { transition-delay: 150ms; }
.reveal-on-scroll.visible .raw-prose { transition-delay: 300ms; }
/* Manuur brand prominence override */
.brand {
font-size: 16px;
font-weight: 500;
letter-spacing: -0.02em;
}
.brand-name {
display: inline-block;
font-weight: 600;
}
@media (max-width: 640px) {
.brand-name {
font-size: 14px;
letter-spacing: -0.01em;
}
}
.press-logo-link:hover img { filter: grayscale(0%) opacity(1) !important; }
.raw-press-section {
padding: 100px 0;
text-align: center;
}
.press-section-title {
font-family: 'Inter', sans-serif;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 8px;
}
.press-wave {
margin: 0 auto 60px;
width: 60px;
height: 10px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
background-size: contain;
opacity: 0.5;
}
.press-logo-row {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
.press-logo-link {
display: block;
transition: opacity 0.3s ease;
}
.press-cta {
margin-top: 60px;
display: flex;
justify-content: center;
}
.press-cta .raw-button {
padding: 12px 32px;
border-radius: 30px;
text-decoration: none;
color: var(--bg);
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.press-cta-text {
font-family: 'Merriweather', serif;
font-style: italic;
font-size: 1.05rem;
}
.press-logo-img {
filter: grayscale(100%) opacity(0.6);
transition: opacity 0.3s ease, filter 0.3s ease;
}
body.dark .press-logo-img {
filter: invert(1) grayscale(100%) opacity(0.85);
}
.press-logo-link:hover .press-logo-img {
opacity: 1;
}
body.dark .press-logo-link:hover .press-logo-img {
opacity: 1;
}
.section-wave {
margin: 60px auto;
width: 60px;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-size: contain;
opacity: 0.5;
}
body.dark .section-wave {
filter: invert(1) opacity(0.8);
}