/* ============================================================ Mad Machine — shared styles Theme system: color variables swap per route via .theme-* on ============================================================ */ :root { --bg: #4A1581; --fg: #E8B645; --fg-soft: color-mix(in oklab, var(--fg) 60%, transparent); --fg-line: color-mix(in oklab, var(--fg) 22%, transparent); --display: "Times New Roman", "Times", "Georgia", "DM Serif Display", serif; --sans: "Helvetica Neue", "Inter", system-ui, -apple-system, sans-serif; --mono: "SF Mono", "JetBrains Mono", Menlo, Monaco, "Liberation Mono", "Courier New", monospace; } /* Per-route themes — bg + fg pairs designed independently for each section */ .theme-home { --bg: #4A1581; --fg: #E8B645; } /* brand: purple × saffron */ .theme-programme { --bg: #F2EAD3; --fg: #14140F; } /* warm cream × deep ink */ .theme-evening { --bg: #0B0B0B; --fg: #FF3D3D; } /* near-black × signal red */ .theme-brands { --bg: #E8FF2A; --fg: #1A2018; } /* electric lemon × dark earth */ .theme-jury { --bg: #003931; --fg: #FF8A60; } /* deep teal × warm coral */ .theme-prizes { --bg: #FBF7EE; --fg: #BC0028; } /* off-white × deep crimson */ .theme-rsvp { --bg: #1D08C0; --fg: #FFE34A; } /* electric blue × pale yellow */ .theme-lab { --bg: #090A08; --fg: #DDFB4F; } /* hidden lab: black × sharp lime */ /* Recompute soft/line tokens per theme */ .theme-home, .theme-programme, .theme-evening, .theme-brands, .theme-jury, .theme-prizes, .theme-rsvp, .theme-lab { --fg-soft: color-mix(in oklab, var(--fg) 60%, transparent); --fg-line: color-mix(in oklab, var(--fg) 22%, transparent); } /* ============================ reset ============================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.5; min-height: 100dvh; overflow-x: hidden; } /* ============================ frame ============================ */ .frame { position: relative; display: flex; flex-direction: column; padding: 28px; min-height: 100dvh; background: var(--bg); isolation: isolate; overflow: hidden; } .frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklab, var(--bg) 80%, transparent), transparent 58%), linear-gradient(0deg, color-mix(in oklab, var(--bg) 72%, transparent), transparent 44%), color-mix(in oklab, var(--bg) 18%, transparent); pointer-events: none; } .hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.24) saturate(1.35); mix-blend-mode: luminosity; pointer-events: none; transition: opacity 700ms ease; } .hero-video.is-ready { opacity: 0.52; } .hero-control { position: absolute; bottom: 22px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; color: var(--fg); background: color-mix(in oklab, var(--bg) 78%, transparent); border: 1px solid color-mix(in oklab, var(--fg) 42%, transparent); border-radius: 50%; opacity: 0.58; backdrop-filter: blur(10px); transition: opacity 160ms ease, transform 160ms ease, background 160ms ease; } .channel-button { right: 22px; } .audio-button { right: 78px; } .hero-control:hover, .hero-control:focus-visible { opacity: 1; transform: translateY(-1px); background: color-mix(in oklab, var(--bg) 58%, transparent); } .hero-control:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; } .hero-control svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .head, .hero { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .hero-video, .hero-control { display: none; } } @media (min-width: 720px) { .frame { padding: 36px; } } /* ============================ header ============================ */ .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; } .brand { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; } .brand-mark { width: 64px; height: 64px; flex-shrink: 0; } .brand-popcorn { object-fit: contain; filter: invert(78%) sepia(57%) saturate(576%) hue-rotate(358deg) brightness(95%) contrast(91%); } @media (min-width: 720px) { .brand-mark { width: 96px; height: 96px; } } @media (min-width: 1200px) { .brand-mark { width: 124px; height: 124px; } } .brand-text { display: none; } @media (min-width: 720px) { .brand-text { display: block; line-height: 1; } .brand-text strong { display: block; font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; font-weight: 500; text-transform: lowercase; } .brand-text small { display: block; font-family: var(--mono); font-size: 11px; opacity: 0.7; margin-top: 4px; } } .nav { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; min-width: 240px; } @media (min-width: 720px) { .nav { min-width: 320px; gap: 22px; } } .nav-label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.85; } .nav-list { list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4.6vw, 56px); line-height: 1; letter-spacing: -0.045em; font-style: italic; } .nav-list li a { display: block; padding: 4px 0; opacity: 0.72; transition: opacity 0.18s ease; } .nav-list:hover li a { opacity: 0.42; } .nav-list li a:hover { opacity: 1; } .nav-list li[aria-current="page"] a { opacity: 1; } /* ============================ hero ============================ */ .hero { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; min-height: 0; padding-top: 40px; padding-bottom: clamp(34px, 5vh, 58px); } .hero .eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; margin-bottom: 18px; } @media (min-width: 720px) { .hero .eyebrow { font-size: 16px; margin-bottom: 22px; } } .hero h1 { font-family: var(--display); font-weight: 400; font-style: italic; font-size: clamp(44px, 8vw, 112px); line-height: 0.9; letter-spacing: -0.055em; max-width: min(1040px, 78vw); text-wrap: balance; } .hero h1 em { font-style: italic; font-weight: 400; } .hero h1 .reg { font-style: normal; } .hero h1 .meta { display: block; margin-top: 18px; font-family: var(--mono); font-style: normal; font-weight: 400; font-size: clamp(13px, 1.4vw, 18px); letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.82; } @media (max-height: 820px) and (min-width: 720px) { .hero h1 { font-size: clamp(42px, 7vw, 92px); } .hero h1 .meta { margin-top: 14px; font-size: 13px; } } @media (max-width: 719px) { .hero { padding-top: 32px; padding-bottom: 28px; } .hero h1 { max-width: 100%; } } /* ============================ section ============================ */ .section { padding: 80px 28px; border-top: 1px solid var(--fg-line); } @media (min-width: 720px) { .section { padding: 96px 36px; } } .section-marker { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; margin-bottom: 32px; opacity: 0.9; } @media (min-width: 720px) { .section-marker { font-size: 16px; margin-bottom: 44px; } } .section h2 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 6vw, 88px); line-height: 0.94; letter-spacing: -0.04em; max-width: 1100px; text-wrap: balance; margin-bottom: 32px; } .section h2 em { font-style: italic; } .section .lede { font-family: var(--display); font-weight: 400; font-style: italic; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.22; letter-spacing: -0.02em; max-width: 820px; margin-bottom: 24px; } .section .body { max-width: 720px; font-size: 16px; line-height: 1.55; } .section .body p + p { margin-top: 14px; } /* ============================ list rows ============================ */ .rows { list-style: none; border-top: 1px solid var(--fg-line); margin-top: 24px; } .rows li { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--fg-line); align-items: baseline; } @media (min-width: 720px) { .rows li { grid-template-columns: 140px 1fr; gap: 32px; padding: 24px 0; } } .rows .key { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.75; } .rows .val { font-family: var(--display); font-size: clamp(22px, 3.2vw, 36px); line-height: 1.05; letter-spacing: -0.025em; } .rows .val em { font-style: italic; } .rows .val small { display: block; font-family: var(--mono); font-style: normal; font-size: 13px; letter-spacing: 0.02em; text-transform: lowercase; opacity: 0.72; margin-top: 6px; max-width: 600px; } .rows .val small.programme-feature { font-family: var(--sans); font-size: clamp(14px, 1.6vw, 18px); font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; opacity: 0.95; margin-top: 10px; } .rows .val small.programme-feature span { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.62; margin-right: 8px; } /* ============================ buttons ============================ */ .button-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; } .btn { display: inline-block; padding: 18px 28px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; text-transform: lowercase; border: 1px solid var(--fg); transition: all 0.18s ease; } .btn-solid { background: var(--fg); color: var(--bg); } .btn-solid:hover { background: transparent; color: var(--fg); } .btn-ghost { background: transparent; } .btn-ghost:hover { background: var(--fg); color: var(--bg); } /* ============================ pill grid ============================ */ .pill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; } @media (min-width: 720px) { .pill-grid { grid-template-columns: repeat(4, 1fr); } } .pill { aspect-ratio: 5 / 3; border: 1px solid var(--fg-line); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.7; border-radius: 12px; } .pill::before { content: "["; padding-right: 3px; opacity: 0.55; } .pill::after { content: "]"; padding-left: 3px; opacity: 0.55; } .section .note { margin-top: 18px; font-family: var(--mono); font-size: 13px; opacity: 0.65; } /* ============================ q&a ============================ */ .qa { list-style: none; border-top: 1px solid var(--fg-line); margin-top: 24px; } .qa li { padding: 24px 0; border-bottom: 1px solid var(--fg-line); } .qa .q { font-family: var(--display); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; } .qa .q::before { content: "q. "; opacity: 0.5; font-family: var(--mono); font-size: 0.62em; vertical-align: 0.18em; } .qa .a { font-family: var(--sans); font-size: 16px; line-height: 1.55; max-width: 760px; opacity: 0.92; } .qa .a::before { content: "a. "; opacity: 0.5; font-family: var(--mono); font-size: 0.85em; } /* ============================ rsvp big block ============================ */ .rsvp-zone { padding: 120px 28px 140px; text-align: center; border-top: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); } @media (min-width: 720px) { .rsvp-zone { padding: 160px 36px 180px; } } .rsvp-zone h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(56px, 12vw, 168px); line-height: 0.86; letter-spacing: -0.06em; margin-bottom: 28px; text-wrap: balance; } .rsvp-zone p { max-width: 540px; margin: 0 auto 36px; font-size: 16px; line-height: 1.55; opacity: 0.88; } .rsvp-zone .button-row { justify-content: center; } /* ============================ footer ============================ */ .footer { position: relative; margin-top: auto; padding-top: 96px; overflow: hidden; cursor: crosshair; } .ascii-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .footer-content { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 64px 28px 24px; } @media (min-width: 720px) { .footer-content { flex-wrap: nowrap; padding: 120px 36px 28px; } } .footer-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(48px, 12vw, 184px); line-height: 0.84; letter-spacing: -0.06em; color: var(--fg); text-wrap: balance; } .footer-title .year { display: block; font-family: var(--mono); font-style: normal; font-size: clamp(11px, 1vw, 14px); letter-spacing: 0.04em; margin-top: 18px; text-transform: lowercase; color: var(--bg); opacity: 0.78; } .signoff { margin-top: 12px; padding: 18px 28px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-align: center; opacity: 0.66; position: relative; z-index: 1; } /* ============================ ticker ============================ */ .ticker { overflow: hidden; white-space: nowrap; padding: 18px 0; font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; text-transform: lowercase; border-top: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); } .ticker-track { display: flex; width: max-content; animation: ticker-scroll 48s linear infinite; } .ticker-group { display: inline-flex; flex: 0 0 auto; } .ticker-track span { margin-right: 48px; opacity: 0.88; } .ticker-track span::before { content: "// "; opacity: 0.5; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-20%); } } /* ============================ student lab ============================ */ .theme-lab { --lab-hot: #FF4F7B; --lab-blue: #58C8FF; --lab-paper: #F8F1DE; } .lab-frame::after { background: linear-gradient(90deg, color-mix(in oklab, var(--bg) 88%, transparent), transparent 62%), linear-gradient(0deg, color-mix(in oklab, var(--bg) 78%, transparent), transparent 46%), color-mix(in oklab, var(--lab-hot) 14%, transparent); } .lab-hero h1 { max-width: min(1180px, 86vw); } .lab-nav { min-width: 0; gap: 10px; } .lab-nav .nav-list { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; max-width: 560px; font-family: var(--mono); font-size: 13px; font-style: normal; line-height: 1.1; letter-spacing: 0.04em; } .lab-nav .nav-list li a { padding: 2px 0; } @media (max-width: 720px) { .lab-nav .nav-list { justify-content: flex-start; } } .lab-intro { background: linear-gradient(180deg, color-mix(in oklab, var(--lab-paper) 8%, transparent), transparent 72%), var(--bg); } .lab-guide > .section { padding-top: 72px; padding-bottom: 72px; } .lab-accordion { border-top: 1px solid var(--fg-line); } .lab-accordion:last-child { border-bottom: 1px solid var(--fg-line); } .lab-accordion summary { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px 20px; align-items: baseline; padding: 24px 0; list-style: none; cursor: pointer; } .lab-accordion summary::-webkit-details-marker { display: none; } .lab-accordion summary::after { content: "+"; grid-column: 2; justify-self: end; margin-top: -42px; font-family: var(--mono); font-size: 22px; } .lab-accordion[open] summary::after { content: "-"; } .lab-accordion summary span { font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; opacity: 0.68; } .lab-accordion summary strong { display: block; padding-right: 38px; font-family: var(--display); font-size: clamp(30px, 4.4vw, 58px); font-weight: 400; line-height: 0.95; letter-spacing: -0.045em; } .lab-accordion summary small { grid-column: 2; display: block; max-width: 680px; margin-top: -10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.68; } .lab-accordion[open] { padding-bottom: 34px; } .lab-accordion:focus-within summary { outline: none; } .lab-accordion summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 8px; } .lab-rule-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 36px; } @media (min-width: 760px) { .lab-rule-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lab-rule { min-height: 220px; padding: 18px; border: 1px solid var(--fg-line); border-radius: 8px; background: color-mix(in oklab, var(--fg) 8%, transparent); } .lab-rule span, .lab-step span, .lab-canvas-card span, .lab-card span, .lab-abcd span { display: inline-block; margin-bottom: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: lowercase; opacity: 0.72; } .lab-rule strong { display: block; font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 400; line-height: 0.95; letter-spacing: -0.035em; margin-bottom: 16px; } .lab-rule p, .lab-step p, .lab-card p, .lab-card small, .lab-panel li, .lab-abcd p, .lab-credit { font-size: 15px; line-height: 1.48; } .lab-flow { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 34px; } @media (min-width: 760px) { .lab-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lab-step { min-height: 260px; padding: 22px; border: 1px solid var(--fg-line); border-radius: 8px; background: color-mix(in oklab, var(--bg) 78%, var(--lab-blue) 8%); } .lab-step h3, .lab-canvas-card h3, .lab-card h3, .lab-panel h3, .lab-abcd h3 { font-family: var(--display); font-size: clamp(28px, 3.6vw, 42px); font-weight: 400; line-height: 0.98; letter-spacing: -0.035em; margin-bottom: 14px; } .lab-route { list-style: none; counter-reset: lab-route; margin-top: 8px; border: 1px solid var(--fg-line); border-radius: 8px; overflow: hidden; } .lab-route li { counter-increment: lab-route; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 24px; padding: 20px; border-bottom: 1px solid var(--fg-line); background: color-mix(in oklab, var(--fg) 6%, transparent); } .lab-route li:last-child { border-bottom: 0; } .lab-route li::before { content: counter(lab-route, decimal-leading-zero); grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; opacity: 0.62; } .lab-route strong { font-family: var(--display); font-size: clamp(24px, 3vw, 36px); font-weight: 400; line-height: 1; letter-spacing: -0.035em; } .lab-route span { font-size: 15px; line-height: 1.5; opacity: 0.86; } @media (max-width: 700px) { .lab-route li { grid-template-columns: 1fr; gap: 8px; } } .lab-canvas-section { background: var(--lab-paper); color: #15120D; --fg: #15120D; --bg: var(--lab-paper); --fg-line: rgba(21, 18, 13, 0.18); } .lab-canvas { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 36px; } @media (min-width: 860px) { .lab-canvas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lab-canvas-card { padding: 22px; min-height: 230px; border: 1px solid var(--fg-line); border-radius: 8px; background: rgba(255, 255, 255, 0.42); } .lab-canvas-card-wide { background: #15120D; color: var(--lab-paper); } @media (min-width: 860px) { .lab-canvas-card-wide { grid-column: span 2; } } .lab-canvas-card code { display: block; margin-top: 18px; padding: 14px 16px; color: inherit; background: color-mix(in oklab, currentColor 8%, transparent); border: 1px solid color-mix(in oklab, currentColor 22%, transparent); border-radius: 8px; font-family: var(--mono); font-size: 13px; white-space: normal; } .lab-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; } .lab-formula span, .lab-formula strong { padding: 12px 14px; border: 1px solid var(--fg-line); border-radius: 999px; } .lab-formula strong { color: var(--bg); background: var(--fg); border-color: var(--fg); font-weight: 500; } .lab-library { padding-top: 72px; } .lab-card-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 30vw); gap: 14px; margin: 36px -28px 0; padding: 0 28px 22px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-color: color-mix(in oklab, var(--fg) 42%, transparent) transparent; } @media (min-width: 720px) { .lab-card-carousel { grid-auto-columns: minmax(280px, 24vw); margin-left: -36px; margin-right: -36px; padding-left: 36px; padding-right: 36px; } } .lab-card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 34px; } @media (min-width: 700px) { .lab-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1120px) { .lab-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lab-card { min-height: 284px; padding: 20px; border: 1px solid var(--fg-line); border-radius: 8px; background: color-mix(in oklab, var(--fg) 7%, transparent); transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; } .lab-card-link { display: flex; flex-direction: column; color: inherit; scroll-snap-align: start; } .lab-card:nth-child(4n + 2) { background: color-mix(in oklab, var(--lab-hot) 12%, transparent); } .lab-card:nth-child(4n + 3) { background: color-mix(in oklab, var(--lab-blue) 13%, transparent); } .lab-card:hover { transform: translateY(-3px); background: color-mix(in oklab, var(--fg) 14%, transparent); border-color: color-mix(in oklab, var(--fg) 42%, transparent); } .lab-card small { display: block; margin-top: 16px; font-family: var(--mono); opacity: 0.72; } .lab-card-art { display: grid; place-items: center; height: clamp(210px, 22vw, 310px); margin: -2px 0 18px; color: var(--fg); border: 1px solid var(--fg-line); border-radius: 8px; background: color-mix(in oklab, var(--bg) 82%, transparent); overflow: hidden; } .lab-illustration { width: 100%; max-width: 230px; height: 100%; padding: 16px; } .lab-generated-illustration { display: block; width: min(88%, 330px); aspect-ratio: 1; background: currentColor; -webkit-mask: var(--card-art) center / contain no-repeat; mask: var(--card-art) center / contain no-repeat; } .lab-card-cta { display: inline-block; margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: lowercase; } .lab-card-carousel .lab-card { min-height: 420px; } .lab-card-carousel .lab-card h3 { margin-top: 4px; font-size: clamp(30px, 3.4vw, 46px); } .lab-card-carousel .lab-card span { margin-bottom: 10px; } .lab-page-head { position: sticky; top: 0; z-index: 5; padding: 22px 28px; background: color-mix(in oklab, var(--bg) 92%, transparent); border-bottom: 1px solid var(--fg-line); backdrop-filter: blur(14px); } @media (min-width: 720px) { .lab-page-head { padding: 24px 36px; } .lab-page-head .brand-mark { width: 74px; height: 74px; } } .lab-card-page { min-height: 80dvh; } .lab-card-grid-tight { grid-template-columns: 1fr; } @media (min-width: 620px) { .lab-card-grid-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .lab-card-grid-tight { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lab-card-compact { min-height: 170px; } .lab-card-compact h3 { font-size: clamp(24px, 2.6vw, 34px); } .lab-split { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 34px; } @media (min-width: 860px) { .lab-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lab-panel { padding: 24px; border: 1px solid var(--fg-line); border-radius: 8px; background: color-mix(in oklab, var(--fg) 8%, transparent); } .lab-checklist, .lab-numbered { padding-left: 20px; } .lab-checklist li + li, .lab-numbered li + li { margin-top: 12px; } .lab-pitch { max-width: 980px; margin-top: 34px; border-top: 1px solid var(--fg-line); } .lab-pitch p { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--fg-line); font-family: var(--display); font-size: clamp(26px, 4vw, 52px); line-height: 1; letter-spacing: -0.04em; } .lab-pitch strong { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; line-height: 1.4; } .lab-pitch span { font-style: italic; } .lab-abcd { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 34px; } @media (min-width: 760px) { .lab-abcd { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lab-abcd article { min-height: 210px; padding: 20px; border: 1px solid var(--fg-line); border-radius: 8px; background: color-mix(in oklab, var(--fg) 7%, transparent); } .lab-abcd span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--fg-line); border-radius: 50%; opacity: 1; } .lab-credit { max-width: 820px; margin-top: 36px; font-family: var(--mono); opacity: 0.58; } .lab-detail-section { background: radial-gradient(circle at 18% 16%, color-mix(in oklab, var(--lab-blue) 16%, transparent), transparent 34%), var(--bg); overflow: hidden; } .lab-card-top-section { padding-top: 44px; } .lab-card-backbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 32px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: lowercase; } .lab-card-backbar a { padding: 10px 0; } .lab-card-backbar a:hover { text-decoration: underline; text-underline-offset: 4px; } .lab-card-backbar span { opacity: 0.68; } .lab-detail-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; width: 100%; min-width: 0; max-width: 100%; } @media (min-width: 980px) { .lab-detail-grid { grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); gap: 48px; } } .lab-detail-visual { position: sticky; top: 124px; width: 100%; min-width: 0; max-width: 100%; } .lab-detail-art { display: grid; place-items: center; width: 100%; min-width: 0; min-height: clamp(300px, 38vw, 520px); color: var(--fg); border: 1px solid var(--fg-line); border-radius: 8px; background: linear-gradient(135deg, color-mix(in oklab, var(--lab-hot) 14%, transparent), transparent 42%), color-mix(in oklab, var(--fg) 7%, transparent); overflow: hidden; } .lab-detail-art .lab-illustration { max-width: 520px; padding: 34px; } .lab-detail-art .lab-generated-illustration { width: min(78vw, 520px); } .lab-card-neighbors { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; } .lab-card-neighbors a { display: block; padding: 14px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: lowercase; border: 1px solid var(--fg-line); border-radius: 8px; background: color-mix(in oklab, var(--fg) 6%, transparent); } .lab-card-neighbors a:hover { background: color-mix(in oklab, var(--fg) 12%, transparent); } .lab-detail-copy { width: 100%; max-width: 820px; min-width: 0; } .lab-card-page-title { max-width: 900px; font-family: var(--display); font-size: clamp(52px, 8vw, 112px); font-weight: 400; font-style: italic; line-height: 0.86; letter-spacing: -0.06em; margin-bottom: 20px; overflow-wrap: break-word; } .lab-card-page-kicker { max-width: 720px; margin-bottom: 20px; font-family: var(--display); font-size: clamp(28px, 4vw, 52px); font-style: italic; line-height: 1; letter-spacing: -0.04em; } .lab-detail-block { padding: 22px 0; border-top: 1px solid var(--fg-line); } .lab-detail-block h3, .lab-detail-prompt span { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: lowercase; opacity: 0.75; } .lab-detail-block p { max-width: 760px; font-size: 17px; line-height: 1.55; } .lab-detail-prompt { margin: 28px 0 12px; padding: 20px; border: 1px solid var(--fg-line); border-radius: 8px; background: color-mix(in oklab, var(--fg) 10%, transparent); } .lab-detail-prompt code { display: block; font-family: var(--mono); font-size: 14px; line-height: 1.55; white-space: normal; } .lab-detail-disclosure { border-top: 1px solid var(--fg-line); } .lab-detail-disclosure:last-of-type { border-bottom: 1px solid var(--fg-line); } .lab-detail-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: lowercase; } .lab-detail-disclosure summary::-webkit-details-marker { display: none; } .lab-detail-disclosure summary::after { content: "+"; font-size: 18px; } .lab-detail-disclosure[open] summary::after { content: "-"; } .lab-detail-disclosure p { max-width: 760px; padding: 0 0 20px; font-size: 16px; line-height: 1.55; } @media (max-width: 720px) { .lab-page-head { position: relative; padding: 18px 28px 20px; } .lab-card-top-section { padding-top: 32px; } .lab-card-backbar { display: grid; gap: 10px; } .lab-card-backbar span { justify-self: start; } .lab-detail-visual { position: static; } .lab-detail-grid, .lab-detail-visual, .lab-detail-copy { max-width: calc(100vw - 56px); } .lab-detail-art { width: 100%; max-width: calc(100vw - 56px); min-height: 280px; } .lab-detail-art .lab-generated-illustration { width: min(72vw, 320px); } .lab-card-page-title { font-size: clamp(42px, 13vw, 56px); line-height: 0.92; letter-spacing: -0.045em; text-wrap: balance; } .lab-card-page-kicker { font-size: clamp(27px, 8vw, 38px); } } @media (max-width: 520px) { .lab-detail-grid, .lab-detail-visual, .lab-detail-copy, .lab-detail-art, .lab-detail-prompt, .lab-card-neighbors { max-width: min(100%, 334px); } .lab-card-page-title, .lab-card-page-kicker, .lab-detail-copy .lede { max-width: 334px; } } .lab-examples-section { background: var(--lab-paper); color: #15120D; --fg: #15120D; --bg: var(--lab-paper); --fg-line: rgba(21, 18, 13, 0.18); } .lab-example-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 34px; } @media (min-width: 760px) { .lab-example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lab-example-card { display: flex; flex-direction: column; min-height: 360px; color: inherit; border: 1px solid var(--fg-line); border-radius: 8px; background: rgba(255, 255, 255, 0.4); overflow: hidden; transition: transform 160ms ease, background 160ms ease; } .lab-example-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.72); } .lab-example-thumb { position: relative; aspect-ratio: 16 / 9; background: #15120D; border-bottom: 1px solid var(--fg-line); overflow: hidden; } .lab-example-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; filter: saturate(0.75) contrast(1.04); transition: transform 220ms ease, opacity 220ms ease; } .lab-example-card:hover .lab-example-thumb img { transform: scale(1.035); opacity: 1; } .lab-example-play { position: absolute; left: 18px; bottom: 16px; display: inline-flex; align-items: center; justify-content: center; min-width: 62px; min-height: 34px; padding: 0 12px; color: var(--lab-paper); background: #15120D; border: 1px solid rgba(248, 241, 222, 0.42); border-radius: 999px; } .lab-example-body { display: flex; flex: 1; flex-direction: column; padding: 24px; } .lab-example-card span, .lab-example-card b { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: lowercase; opacity: 0.72; } .lab-example-card .lab-example-play { opacity: 1; } .lab-example-card h3 { margin: 18px 0 12px; font-family: var(--display); font-size: clamp(30px, 4vw, 48px); font-weight: 400; line-height: 0.96; letter-spacing: -0.04em; } .lab-example-card p { max-width: 560px; font-size: 16px; line-height: 1.55; } .lab-example-card b { display: inline-block; margin-top: auto; padding-top: 24px; font-weight: 500; opacity: 1; } @media (max-width: 520px) { .lab-examples-section h2, .lab-example-grid, .lab-example-card, .lab-examples-section .button-row { max-width: min(100%, 334px); } .lab-examples-section h2 { font-size: clamp(34px, 11vw, 46px); } } /* ============================ utilities ============================ */ .spacer-sm { height: 16px; } .spacer-md { height: 36px; } .spacer-lg { height: 80px; } .brackets::before { content: "["; opacity: 0.5; padding-right: 2px; } .brackets::after { content: "]"; opacity: 0.5; padding-left: 2px; } @media (max-width: 720px) { .head { flex-direction: column; } .nav { align-items: flex-start; min-width: 0; } .nav-list { align-items: flex-start; } .lab-page-head.head { flex-direction: row; gap: 18px; } .lab-page-head .brand { gap: 0; } .lab-page-head .brand-mark { width: 44px; height: 44px; } .lab-page-head .lab-nav { flex: 1; gap: 9px; } }