/* dara. project pages: one structure, four themes. Each page wears its project's own colours and type. */
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }
.cp { container-type: inline-size; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.cp a { color: inherit; text-decoration: none; }
.cp h1, .cp h2, .cp h3, .cp h4, .cp p { margin: 0; }
.cp h1, .cp h2, .cp h3 { font-family: var(--display); font-weight: var(--display-w, 400); letter-spacing: var(--display-ls, -0.02em); line-height: 1.02; text-wrap: balance; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(18px, 4cqw, 48px); }

/* Themes */
.t-goe    { --bg: #f6f3ff; --ink: #130b43; --muted: #716b9a; --accent: #604fcd; --accent-2: #2e7ff0; --soft: #e9e3ff; --deep: #130b43; --on-deep: #ffffff; --pop: #ffd9f2; --display: 'Poppins', sans-serif; --display-w: 800; --display-ls: -0.035em; --body: 'Poppins', sans-serif; --mono: 'Poppins', sans-serif; }
.t-osso   { --bg: #f5efe0; --ink: #2a1f1a; --muted: #6b4a38; --accent: #b8331c; --accent-2: #6b4a38; --soft: #ebe1cb; --deep: #1a1411; --on-deep: #f5efe0; --pop: #e8c9a0; --display: 'Fraunces', serif; --display-ls: -0.02em; --body: 'Inter', sans-serif; --mono: 'JetBrains Mono', monospace; }
.t-hanami { --bg: #0a1119; --ink: #f5efe0; --muted: #c9bda6; --accent: #d4af6e; --accent-2: #8a7350; --soft: #121c27; --deep: #05090e; --on-deep: #f5efe0; --pop: #d4af6e; --display: 'Cormorant Garamond', serif; --display-ls: -0.01em; --body: 'Cormorant Garamond', serif; --mono: 'JetBrains Mono', monospace; font-size: 20px; }
.t-trop   { --bg: #000000; --ink: #ffffff; --muted: #bdbdbd; --accent: #f4c542; --accent-2: #ff7a1a; --soft: #141414; --deep: #f4c542; --on-deep: #000000; --pop: #f4c542; --display: 'Anton', sans-serif; --display-ls: 0; --body: 'JetBrains Mono', monospace; --mono: 'JetBrains Mono', monospace; font-size: 15px; }

/* Top bar */
.c-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(18px, 4cqw, 48px); font-size: 14px; font-family: var(--mono); }
.c-back { display: inline-flex; align-items: center; gap: 10px; font-family: 'Cal Sans', sans-serif; font-size: 22px; }
.c-back img { width: 28px; height: 28px; }
.c-back span { font-family: var(--mono); font-size: 13px; opacity: 0.7; margin-left: 6px; }
.c-count { letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; opacity: 0.75; }
.c-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 15px; font-family: var(--body); }
.c-pill--solid { background: var(--accent); color: var(--on-accent, #fff); }
.c-pill--line { box-shadow: inset 0 0 0 1.5px currentColor; }

/* Labels, sections */
.c-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.c-sec { padding: clamp(64px, 8cqw, 120px) 0; position: relative; }
.c-sec--soft { background: var(--soft); }
.c-sec--deep { background: var(--deep); color: var(--on-deep); }
.c-h2 { font-size: clamp(2.2rem, 3.6cqw + 1rem, 4.2rem); margin-top: 14px; max-width: 18ch; }
.c-lede { font-size: 1.15em; color: var(--muted); max-width: 52ch; margin-top: 20px; }
.c-concept { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: inset 0 0 0 1px currentColor; }
.c-concept::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Tilted windows */
.win { position: relative; background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 50px 100px -40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.08); transform: rotate(var(--tilt, -3deg)); }
.win img { width: 100%; border-radius: 9px; }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 3px 6px 9px; font: 500 11.5px/1 'Figtree', sans-serif; color: #8b8794; }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dcd8e6; }
.win-bar span { margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,0.05); }
.win--dark { background: #161616; }
.win--dark .win-bar i { background: #3a3a3a; }
.win--dark .win-bar span { background: rgba(255,255,255,0.08); color: #aaa; }
.phone { position: relative; width: 250px; border-radius: 34px; padding: 10px; background: #111; box-shadow: 0 50px 90px -40px rgba(0,0,0,0.6); transform: rotate(var(--tilt, 5deg)); }
.phone img { border-radius: 26px; width: 100%; }
.phone::before { content: ''; position: absolute; top: 18px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: #111; z-index: 2; }
.drift { animation: c-drift var(--d, 9s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes c-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* Hero */
.c-hero { position: relative; padding: clamp(40px, 5cqw, 80px) 0 clamp(70px, 8cqw, 120px); overflow: hidden; }
.c-hero h1 { font-size: clamp(3rem, 6cqw + 1rem, 7.2rem); }
.c-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
@container (min-width: 1000px) { .c-hero-grid { grid-template-columns: 0.9fr 1.1fr; } }
.c-stagewin { position: relative; height: 560px; }
.c-stagewin > * { position: absolute; }

/* Stats */
.c-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (min-width: 900px) { .c-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.c-stat { padding: 26px 22px; border-radius: 24px; background: #fff; transform: rotate(var(--tilt, 0deg)); box-shadow: 0 24px 50px -36px rgba(19,11,67,0.4); }
.c-stat strong { display: block; font-family: var(--display); font-weight: var(--display-w, 400); font-size: clamp(2.6rem, 3cqw + 1rem, 3.8rem); line-height: 1; color: var(--accent); letter-spacing: var(--display-ls); }
.c-stat span { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }

/* Notes: tilted cards with reasons */
.c-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 48px; }
@container (min-width: 760px) { .c-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1100px) { .c-notes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c-note { padding: 28px 26px; border-radius: 22px; background: var(--note-bg, #fff); color: var(--note-ink, inherit); transform: rotate(var(--tilt, 0deg)); box-shadow: 0 30px 60px -40px rgba(0,0,0,0.5); }
.c-note .n { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.7; }
.c-note h3 { font-size: 1.6em; margin: 14px 0 10px; }
.c-note p { font-size: 0.95em; opacity: 0.85; }

/* Palette and type */
.c-swatches { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.sw { width: 150px; }
.sw i { display: block; height: 150px; border-radius: 22px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(127,127,127,0.25); transform: rotate(var(--tilt, 0deg)); }
.sw b { display: block; margin-top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.sw span { font-family: var(--mono); font-size: 12px; opacity: 0.7; }
.c-type { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
@container (min-width: 900px) { .c-type { grid-template-columns: 1.4fr 1fr 1fr; } }
.ty { padding: 28px; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(127,127,127,0.3); }
.ty .aa { font-size: 96px; line-height: 1; }
.ty b { display: block; margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.ty span { font-size: 14px; opacity: 0.75; }

/* Closing band */
.c-cta { margin: 0 clamp(18px, 4cqw, 48px) clamp(40px, 5cqw, 64px); border-radius: 36px; padding: clamp(40px, 6cqw, 80px); background: var(--deep); color: var(--on-deep); display: grid; gap: 24px; align-items: center; position: relative; overflow: hidden; }
@container (min-width: 900px) { .c-cta { grid-template-columns: 1fr auto; } }
.c-cta h2 { font-size: clamp(2.2rem, 3.4cqw + 1rem, 4rem); max-width: 16ch; }
.c-cta p { margin-top: 14px; opacity: 0.8; max-width: 46ch; }
.c-cta .c-acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Floating shapes */
.blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(var(--bl, 0px)); }
.steam { position: absolute; z-index: 2; pointer-events: none; width: 220px; height: 200px; }
.steam i { position: absolute; bottom: 0; left: var(--l); width: 84px; height: 130px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.95), rgba(255,255,255,0.35) 40%, rgba(255,255,255,0) 70%); filter: blur(10px); opacity: 0; animation: c-steam 4.4s ease-out infinite; animation-delay: var(--t); }
@keyframes c-steam { 0% { transform: translate(0, 10px) scale(0.45, 0.6); opacity: 0; } 25% { opacity: 0.9; } 60% { transform: translate(10px, -60px) scale(1.15, 1.25); opacity: 0.55; } 100% { transform: translate(-12px, -140px) scale(1.7, 1.6); opacity: 0; } }
.embers { position: absolute; pointer-events: none; width: 300px; height: 260px; }
.embers i { position: absolute; bottom: 0; left: var(--l); width: 6px; height: 6px; border-radius: 50%; background: #ffb340; box-shadow: 0 0 8px 3px rgba(255,140,30,0.8); opacity: 0; animation: c-ember 2.6s ease-out infinite; animation-delay: var(--t); }
@keyframes c-ember { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx, 14px), -220px); opacity: 0; } }
.ticker { overflow: hidden; white-space: nowrap; background: var(--accent); color: #000; font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; padding: 14px 0; }
.ticker span { display: inline-block; animation: c-tick 26s linear infinite; }
@keyframes c-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .drift, .steam i, .embers i, .ticker span { animation: none !important; } }

/* Moving between pages: same transition as the rest of the site (styles.css). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 240ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: page-in 480ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-16px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(28px) rotate(0.5deg); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
html.a11y-still::view-transition-group(*), html.a11y-still::view-transition-old(*), html.a11y-still::view-transition-new(*) { animation: none !important; }