@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  --ink: #111318;
  --paper: #f3f1ec;
  --acid: #d7ff39;
  --petrol: #00727a;
  --line: rgba(17, 19, 24, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.mono { font: 500 11px/1.2 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.demo { overflow: hidden; }
.demo-nav { position: fixed; z-index: 10; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px clamp(22px, 5vw, 82px); color: white; background: rgba(7,10,13,.58); backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255,255,255,.14); }
.demo-nav a { font: 500 11px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.demo-nav .back::before { content: "← "; font-size: 15px; }
.demo-nav .demo-logo { font-size: 14px; letter-spacing: .02em; }
.demo-nav .nav-links { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); margin-left: auto; }
.demo-nav .nav-links a { opacity: .72; transition: opacity .2s ease; }
.demo-nav .nav-links a:hover, .demo-nav .nav-links a:focus-visible { opacity: 1; }
.demo-nav a:focus-visible, .demo-button:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }
.demo-hero { position: relative; display: grid; align-items: end; min-height: min(850px, 100svh); padding: 145px clamp(22px, 7vw, 120px) 62px; color: white; isolation: isolate; }
.demo-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-position: center; background-size: cover; }
.demo-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(6,8,12,.82) 0%, rgba(6,8,12,.36) 48%, rgba(6,8,12,.06) 100%); }
.demo-kicker { display: block; margin-bottom: 20px; color: var(--acid); }
.demo-hero h1 { max-width: 9ch; margin: 0; font-size: clamp(4rem, 10vw, 10rem); line-height: .86; letter-spacing: -.085em; }
.demo-hero p { max-width: 48ch; margin: 25px 0 0; font-size: clamp(1rem, 1.55vw, 1.2rem); line-height: 1.6; }
.demo-button { display: inline-flex; align-items: center; gap: 10px; margin-top: 31px; padding: 13px 18px; border: 1px solid currentColor; border-radius: 999px; font: 500 11px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s, background .2s, color .2s; }
.demo-button::after { content: "↗"; font-size: 16px; }
.demo-button:hover { transform: translateY(-3px); background: var(--acid); color: var(--ink); border-color: var(--acid); }
.concept-note { position: absolute; right: clamp(22px, 7vw, 120px); bottom: 66px; max-width: 21ch; margin: 0; color: rgba(255,255,255,.72); text-align: right; }
.demo-section { padding: clamp(75px, 11vw, 150px) clamp(22px, 7vw, 120px); }
.demo-section[id], .feature-band[id], .demo-cta[id] { scroll-margin-top: 78px; }
.section-top { display: grid; grid-template-columns: minmax(150px, .55fr) 2fr; gap: 34px; }
.section-top h2 { max-width: 14ch; margin: 0; font-size: clamp(2.7rem, 6.3vw, 7rem); line-height: .93; letter-spacing: -.075em; }
.section-top p { max-width: 44ch; margin: 9px 0 0; font-size: 1.04rem; line-height: 1.68; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 70px; background: var(--line); border: 1px solid var(--line); }
.metric { min-height: 230px; padding: 25px; background: var(--paper); display: flex; flex-direction: column; justify-content: space-between; }
.metric strong { display: block; max-width: 10ch; font-size: clamp(1.85rem, 3vw, 3.25rem); line-height: .96; letter-spacing: -.065em; }
.metric p { max-width: 29ch; margin: 0; font-size: .9rem; line-height: 1.55; }
.collection { padding: clamp(70px, 10vw, 135px) clamp(22px, 7vw, 120px); background: color-mix(in srgb, var(--paper) 82%, white); }
.collection-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.collection-heading h2 { max-width: 11ch; margin: 12px 0 0; font-size: clamp(2.7rem, 5.3vw, 6.2rem); line-height: .9; letter-spacing: -.075em; }
.collection-heading p { max-width: 33ch; margin: 0; font-size: .94rem; line-height: 1.6; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.product-card { min-height: 425px; padding: 23px; display: flex; flex-direction: column; position: relative; overflow: hidden; color: var(--card-ink, var(--ink)); background: var(--card-bg, #dce2e0); }
.product-card::before { content: ""; position: absolute; width: 145%; aspect-ratio: 1; right: -40%; bottom: -40%; border: 1px solid currentColor; border-radius: 50%; opacity: .22; }
.product-card::after { content: ""; position: absolute; width: 68%; height: 31%; right: 9%; bottom: 20%; border: 1px solid currentColor; border-radius: 50% 50% 32% 32%; opacity: .62; transform: skewX(-16deg); }
.product-card > * { position: relative; z-index: 1; }
.product-card .mono { opacity: .76; }
.product-card strong { display: block; max-width: 7ch; margin-top: auto; font-size: clamp(2.1rem, 3.1vw, 3.55rem); line-height: .9; letter-spacing: -.07em; }
.product-card p { max-width: 28ch; margin: 16px 0 0; font-size: .9rem; line-height: 1.55; }
.product-card:nth-child(2) { --card-bg: var(--ink); --card-ink: var(--paper); }
.product-card:nth-child(3) { --card-bg: var(--acid); --card-ink: var(--ink); }
.product-card:nth-child(2)::after { border-radius: 3px; transform: rotate(-35deg); }
.product-card:nth-child(3)::after { width: 57%; height: 57%; border-radius: 0; transform: rotate(45deg); }
.story-layout { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 620px; color: var(--paper); background: var(--ink); }
.story-copy { padding: clamp(55px, 8vw, 115px) clamp(22px, 7vw, 120px); display: flex; flex-direction: column; justify-content: end; }
.story-copy h2 { max-width: 10ch; margin: 18px 0 21px; font-size: clamp(3rem, 6.3vw, 7rem); line-height: .9; letter-spacing: -.08em; }
.story-copy p { max-width: 39ch; margin: 0; color: color-mix(in srgb, var(--paper) 75%, transparent); font-size: 1rem; line-height: 1.65; }
.story-list { display: grid; align-content: center; gap: 0; margin: 0; padding: clamp(55px, 8vw, 115px) clamp(22px, 7vw, 120px); list-style: none; border-left: 1px solid rgba(255,255,255,.22); }
.story-list li { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.story-list strong { display: block; margin-top: 10px; font-size: clamp(1.35rem, 2.1vw, 2.15rem); line-height: 1; letter-spacing: -.055em; }
.story-list p { max-width: 31ch; margin: 10px 0 0; color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.55; }
.service-board { padding: clamp(72px, 11vw, 145px) clamp(22px, 7vw, 120px); }
.service-board-head { max-width: 48rem; margin-bottom: 48px; }
.service-board-head h2 { max-width: 11ch; margin: 14px 0 0; font-size: clamp(2.8rem, 5.6vw, 6.4rem); line-height: .9; letter-spacing: -.075em; }
.service-board-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.service-board-item { min-height: 240px; padding: 27px 0 28px; border-bottom: 1px solid var(--line); }
.service-board-item:nth-child(odd) { padding-right: clamp(22px, 5vw, 72px); border-right: 1px solid var(--line); }
.service-board-item:nth-child(even) { padding-left: clamp(22px, 5vw, 72px); }
.service-board-item h3 { max-width: 11ch; margin: 42px 0 12px; font-size: clamp(1.55rem, 2.7vw, 2.8rem); line-height: .95; letter-spacing: -.06em; }
.service-board-item p { max-width: 34ch; margin: 0; font-size: .91rem; line-height: 1.6; }
.visit-panel { display: grid; grid-template-columns: .76fr 1.24fr; min-height: 510px; color: var(--ink); background: var(--acid); }
.visit-panel .visit-mark { position: relative; overflow: hidden; padding: clamp(45px, 7vw, 100px) clamp(22px, 7vw, 120px); border-right: 1px solid rgba(17,19,24,.24); }
.visit-panel .visit-mark::after { content: "↗"; position: absolute; right: -4%; bottom: -20%; color: var(--petrol); font: 800 clamp(16rem, 34vw, 35rem)/.7 Manrope, sans-serif; letter-spacing: -.14em; }
.visit-panel .visit-mark > * { position: relative; z-index: 1; }
.visit-panel h2 { max-width: 10ch; margin: 18px 0 0; font-size: clamp(3rem, 6.1vw, 6.8rem); line-height: .88; letter-spacing: -.08em; }
.visit-details { padding: clamp(45px, 7vw, 100px) clamp(22px, 7vw, 120px); display: grid; align-content: center; gap: 0; }
.visit-details div { padding: 18px 0; border-bottom: 1px solid rgba(17,19,24,.24); }
.visit-details strong { display: block; margin-top: 9px; font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1; letter-spacing: -.045em; }
.visit-details p { max-width: 35ch; margin: 10px 0 0; font-size: .92rem; line-height: 1.55; }
.feature-band { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 500px; color: white; background: var(--ink); }
.feature-band > div { padding: clamp(45px, 7vw, 100px) clamp(22px, 7vw, 120px); }
.feature-copy { display: flex; flex-direction: column; justify-content: end; }
.feature-copy h2 { max-width: 10ch; margin: 18px 0 20px; font-size: clamp(2.8rem, 5.8vw, 6.6rem); line-height: .9; letter-spacing: -.08em; }
.feature-copy p { max-width: 38ch; margin: 0; color: rgba(255,255,255,.72); line-height: 1.65; }
.feature-list { margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(255,255,255,.25); }
.feature-list li { padding: 21px 0 21px 25px; border-bottom: 1px solid rgba(255,255,255,.22); font-size: clamp(1.2rem, 2vw, 2rem); line-height: 1; letter-spacing: -.045em; }
.feature-list li span { display: block; margin-bottom: 8px; color: var(--acid); font: 500 10px/1 "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.demo-cta { padding: clamp(90px, 14vw, 175px) clamp(22px, 7vw, 120px) 43px; background: var(--acid); position: relative; overflow: hidden; }
.demo-cta::after { content: "K"; position: absolute; right: -3vw; bottom: -17vw; color: var(--petrol); font: 800 clamp(22rem, 53vw, 60rem)/.7 Manrope, sans-serif; letter-spacing: -.15em; }
.demo-cta > * { position: relative; z-index: 1; }
.demo-cta h2 { max-width: 10ch; margin: 18px 0 26px; font-size: clamp(3rem, 8vw, 8.5rem); line-height: .88; letter-spacing: -.085em; }
.demo-cta p { max-width: 41ch; margin: 0; font-size: 1.02rem; line-height: 1.65; }
.demo-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 100px; padding-top: 21px; border-top: 1px solid rgba(17,19,24,.23); font: 500 10px/1.4 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }

.demo-nox { --paper: #edf0ef; --ink: #0b1015; --acid: #c7ff56; --petrol: #1d6971; }
.demo-nox .demo-hero::before { background-image: url('assets/nox-motorhaus-hero.png'); }
.demo-nox .feature-band { background: #101a20; }
.demo-nox .demo-cta::after { content: "N"; }
.demo-mohn { --paper: #f5eee4; --ink: #292019; --acid: #e9b475; --petrol: #6a4830; }
.demo-mohn .demo-hero::before { background-image: url('assets/mohn-kruste-hero.png'); }
.demo-mohn .demo-hero::after { background: linear-gradient(90deg, rgba(45,25,11,.52), rgba(45,25,11,.08) 72%); }
.demo-mohn .demo-hero h1, .demo-mohn .section-top h2 { font-family: "Playfair Display", Georgia, serif; letter-spacing: -.065em; }
.demo-mohn .demo-kicker { color: #ffe0b2; }
.demo-mohn .feature-band { background: #3b2618; }
.demo-mohn .demo-cta::after { content: "M"; color: #6a4830; }
.demo-kernwerk { --paper: #eceeec; --ink: #11171c; --acid: #ef9f4b; --petrol: #435d68; }
.demo-kernwerk .demo-hero::before { background-image: url('assets/kernwerk-hero.png'); }
.demo-kernwerk .demo-hero::after { background: linear-gradient(90deg, rgba(7,14,20,.74), rgba(7,14,20,.15) 72%); }
.demo-kernwerk .demo-kicker { color: #ffbf7b; }
.demo-kernwerk .feature-band { background: #17242c; }
.demo-kernwerk .demo-cta::after { content: "K"; color: #435d68; }
.demo-nightwash { --paper: #071013; --ink: #eaffbd; --acid: #d7ff39; --petrol: #00b4c6; --line: rgba(234,255,189,.18); background: var(--paper); color: var(--ink); }
.demo-nightwash .demo-hero::before { background-image: url('assets/nightwash-hero.png'); }
.demo-nightwash .demo-hero::after { background: linear-gradient(90deg, rgba(0,7,11,.9), rgba(0,7,11,.32) 60%, transparent); }
.demo-nightwash .demo-section { background: #071013; }
.demo-nightwash .metric-grid { background: var(--line); }
.demo-nightwash .metric { background: #0d1b20; }
.demo-nightwash .feature-band { background: #00a6b6; color: #071013; }
.demo-nightwash .feature-copy p { color: rgba(7,16,19,.8); }
.demo-nightwash .feature-list { border-left-color: rgba(7,16,19,.25); }
.demo-nightwash .feature-list li { border-bottom-color: rgba(7,16,19,.25); }
.demo-nightwash .feature-list li span { color: #071013; }
.demo-nightwash .demo-cta { background: var(--acid); color: #071013; }
.demo-nightwash .demo-cta::after { content: "N"; color: var(--petrol); }
.demo-nightwash .demo-footer { border-top-color: rgba(234,255,189,.25); }

@media (max-width: 760px) {
  .demo-nav { padding: 16px 22px; }
  .demo-nav .nav-links { display: none; }
  .demo-hero { min-height: 720px; padding: 125px 22px 42px; }
  .demo-hero h1 { font-size: clamp(3.7rem, 17vw, 6.4rem); }
  .concept-note { display: none; }
  .section-top { grid-template-columns: 1fr; gap: 26px; }
  .metric-grid, .feature-band, .product-grid, .story-layout, .visit-panel { grid-template-columns: 1fr; }
  .collection-heading { display: block; }
  .collection-heading p { margin-top: 20px; }
  .product-card { min-height: 320px; }
  .metric { min-height: 190px; }
  .story-list { border-left: 0; padding-top: 0; }
  .service-board-grid { grid-template-columns: 1fr; }
  .service-board-item:nth-child(odd), .service-board-item:nth-child(even) { padding-left: 0; padding-right: 0; border-right: 0; }
  .visit-panel .visit-mark { min-height: 330px; border-right: 0; border-bottom: 1px solid rgba(17,19,24,.24); }
  .feature-list { border-left: 0; padding: 0 22px 45px; }
  .feature-list li { padding-left: 0; }
  .demo-footer { align-items: flex-start; flex-direction: column; margin-top: 75px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Each concept below deliberately uses a different information architecture. */
.mohn-layout { background: #f5eee4; color: #292019; }
.mohn-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 20px clamp(22px, 6vw, 96px); border-bottom: 1px solid rgba(41,32,25,.22); font: 500 10px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.mohn-nav > :last-child { text-align: right; }.mohn-logo { font: 600 clamp(1.45rem, 2.6vw, 2.3rem)/.9 "Playfair Display", Georgia, serif; letter-spacing: -.07em; text-transform: none; }.mohn-logo i { color: #b06e3b; }
.mohn-cover { position: relative; min-height: 820px; padding: clamp(58px, 10vw, 130px) clamp(22px, 11vw, 170px); display: flex; align-items: end; overflow: hidden; color: #fff7eb; isolation: isolate; }.mohn-cover::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('assets/mohn-kruste-hero.png') center/cover; }.mohn-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(45,25,11,.78), rgba(45,25,11,.1) 76%); }.mohn-cover-copy { max-width: 43rem; }.mohn-cover h1 { margin: 18px 0; font: 600 clamp(4rem, 9vw, 9.5rem)/.83 "Playfair Display", Georgia, serif; letter-spacing: -.08em; }.mohn-cover p { max-width: 43ch; font-size: 1.05rem; line-height: 1.65; }.mohn-cover-copy > a { display: inline-block; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.mohn-cover-stamp { position: absolute; right: clamp(22px, 7vw, 120px); bottom: 54px; width: 155px; aspect-ratio: 1; display: grid; place-content: center; border: 1px solid rgba(255,247,235,.75); border-radius: 50%; text-align: center; transform: rotate(12deg); }.mohn-cover-stamp span { font: 500 9px/1.4 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.mohn-cover-stamp b { margin-top: 9px; font: 600 2.3rem/1 "Playfair Display", Georgia, serif; }
.mohn-editorial { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 620px; }.mohn-day { padding: clamp(65px, 10vw, 140px) clamp(22px, 11vw, 170px); }.mohn-day h2 { max-width: 10ch; margin: 20px 0; font: 600 clamp(3.2rem, 6.3vw, 7rem)/.88 "Playfair Display", Georgia, serif; letter-spacing: -.075em; }.mohn-day p { max-width: 41ch; line-height: 1.7; }.mohn-note { padding: 44px; display: flex; flex-direction: column; justify-content: end; background: #e8b073; color: #382416; }.mohn-note strong { display: block; margin: 35px 0 12px; font: 600 clamp(4.7rem, 8vw, 8rem)/.75 "Playfair Display", Georgia, serif; letter-spacing: -.09em; }.mohn-note p { margin: 0; font-size: 1.1rem; line-height: 1.45; }
.mohn-table { padding: clamp(70px, 11vw, 145px) clamp(22px, 7vw, 120px); background: #382416; color: #f8eddf; }.mohn-table header { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 32px; border-bottom: 1px solid rgba(248,237,223,.27); }.mohn-table header p { max-width: 33ch; margin: 0; color: rgba(248,237,223,.75); line-height: 1.6; }.mohn-menu { display: grid; grid-template-columns: repeat(3,1fr); }.mohn-menu article { min-height: 380px; padding: 30px 30px 30px 0; display: flex; flex-direction: column; border-bottom: 1px solid rgba(248,237,223,.27); }.mohn-menu article + article { padding-left: 30px; border-left: 1px solid rgba(248,237,223,.27); }.mohn-menu article span { color: #e8b073; font: 500 10px/1 "DM Mono", monospace; }.mohn-menu h3 { max-width: 8ch; margin: auto 0 20px; font: 600 clamp(2.4rem,4.6vw,5rem)/.85 "Playfair Display", Georgia, serif; letter-spacing: -.08em; }.mohn-menu h3 em { color: #e8b073; }.mohn-menu p { max-width: 29ch; margin: 0; color: rgba(248,237,223,.74); line-height: 1.6; }
.mohn-ritual { display: grid; grid-template-columns: 1.1fr .9fr; padding: clamp(70px, 11vw, 145px) clamp(22px, 7vw, 120px); gap: 70px; }.mohn-ritual h2 { max-width: 9ch; margin: 19px 0 0; font: 600 clamp(3.1rem,6vw,6.7rem)/.88 "Playfair Display", Georgia, serif; letter-spacing: -.08em; }.mohn-ritual ol { margin: 0; padding: 0; list-style: none; }.mohn-ritual li { display: flex; gap: 22px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid rgba(41,32,25,.22); font: 600 clamp(1.3rem,2.2vw,2rem)/1 "Playfair Display", Georgia, serif; }.mohn-ritual li b { color: #b06e3b; font: 500 10px/1 "DM Mono", monospace; }
.mohn-locations { display: grid; grid-template-columns: .85fr 1.15fr; padding: clamp(70px, 11vw, 145px) clamp(22px, 7vw, 120px); gap: 70px; background: #e8b073; }.mohn-locations h2 { max-width: 9ch; margin: 17px 0; font: 600 clamp(3rem,5.7vw,6.2rem)/.88 "Playfair Display", Georgia, serif; letter-spacing: -.08em; }.mohn-locations p { max-width: 35ch; line-height: 1.65; }.mohn-location-list { align-self: end; }.mohn-location-list a { display: grid; grid-template-columns: 45px 1fr auto; gap: 15px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(41,32,25,.24); }.mohn-location-list span { font: 500 10px/1 "DM Mono", monospace; }.mohn-location-list strong { font: 600 clamp(1.45rem,2.5vw,2.5rem)/1 "Playfair Display", Georgia, serif; }.mohn-location-list em { font: 500 10px/1 "DM Mono", monospace; letter-spacing: .05em; text-transform: uppercase; }.mohn-closing { padding: clamp(80px, 12vw, 160px) clamp(22px, 7vw, 120px) 43px; background: #292019; color: #f5eee4; }.mohn-closing h2 { max-width: 10ch; margin: 17px 0 24px; font: 600 clamp(3.4rem,7vw,7.8rem)/.86 "Playfair Display", Georgia, serif; letter-spacing: -.08em; }.mohn-closing p { max-width: 43ch; margin: 0; color: rgba(245,238,228,.75); line-height: 1.65; }.mohn-closing footer { border-top-color: rgba(245,238,228,.28); }

.kern-layout { display: grid; grid-template-columns: 220px 1fr; color: #e9edeb; background: #11171c; }.kern-rail { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: 31px 25px; border-right: 1px solid rgba(233,237,235,.2); background: #11171c; }.kern-logo { font: 700 1.5rem/.83 Manrope, sans-serif; letter-spacing: -.09em; }.kern-logo sup { color: #ef9f4b; font-size: .5rem; }.kern-rail nav { display: grid; gap: 15px; margin: auto 0; }.kern-rail nav a, .kern-back { color: rgba(233,237,235,.68); font: 500 10px/1.35 "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }.kern-rail nav a:hover { color: #ef9f4b; }.kern-intro { position: relative; min-height: 100svh; padding: clamp(50px, 9vw, 130px); display: flex; flex-direction: column; justify-content: end; overflow: hidden; isolation: isolate; }.kern-intro::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('assets/kernwerk-hero.png') center/cover; }.kern-intro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(7,14,20,.94),rgba(7,14,20,.24)); }.kern-intro h1 { max-width: 9ch; margin: 22px 0; font-size: clamp(4.2rem,9vw,10rem); line-height: .82; letter-spacing: -.09em; }.kern-intro h1 em { color: #ef9f4b; font-style: normal; }.kern-intro p { max-width: 43ch; margin: 0; color: rgba(233,237,235,.8); line-height: 1.65; }.kern-intro > a { display: inline-block; width: fit-content; margin-top: 30px; padding: 12px 14px; border: 1px solid rgba(233,237,235,.55); font: 500 10px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.kern-index { position: absolute; right: 34px; top: 32px; color: #ef9f4b; font: 500 11px/1 "DM Mono", monospace; }
.kern-status, .kern-matrix, .kern-process { padding: clamp(70px, 10vw, 135px); }.kern-status { background: #eceeec; color: #11171c; }.kern-status header { display: grid; grid-template-columns: .55fr 1.45fr; gap: 30px; }.kern-status h2 { max-width: 10ch; margin: 0; font-size: clamp(3.1rem,6vw,6.7rem); line-height: .88; letter-spacing: -.08em; }.kern-signals { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 70px; border-top: 1px solid rgba(17,23,28,.28); }.kern-signals article { min-height: 240px; padding: 25px 25px 25px 0; display: flex; flex-direction: column; border-bottom: 1px solid rgba(17,23,28,.28); }.kern-signals article + article { padding-left: 25px; border-left: 1px solid rgba(17,23,28,.28); }.kern-signals span,.kern-grid b,.kern-flow b { color: #af6123; font: 500 10px/1 "DM Mono", monospace; }.kern-signals h3 { margin: auto 0 15px; font-size: clamp(1.8rem,3vw,3rem); line-height: .9; letter-spacing: -.07em; }.kern-signals p { max-width: 23ch; margin: 0; line-height: 1.55; }.kern-matrix { background: #17242c; }.kern-matrix header { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(233,237,235,.22); }.kern-matrix header p { max-width: 38ch; margin: 0; color: rgba(233,237,235,.69); line-height: 1.6; }.kern-grid { display: grid; grid-template-columns: repeat(2,1fr); }.kern-grid article { min-height: 315px; padding: 28px 28px 28px 0; display: flex; flex-direction: column; border-bottom: 1px solid rgba(233,237,235,.22); }.kern-grid article:nth-child(even) { padding-left: 28px; border-left: 1px solid rgba(233,237,235,.22); }.kern-grid h2 { margin: auto 0 18px; font-size: clamp(2.5rem,4.8vw,5.3rem); line-height: .83; letter-spacing: -.085em; }.kern-grid span { max-width: 30ch; color: rgba(233,237,235,.72); line-height: 1.55; }.kern-process { background: #ef9f4b; color: #11171c; }.kern-process { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }.kern-process h2 { max-width: 9ch; margin: 17px 0 0; font-size: clamp(3rem,5.7vw,6.5rem); line-height: .87; letter-spacing: -.08em; }.kern-flow { align-self: end; }.kern-flow div { padding: 20px 0; border-bottom: 1px solid rgba(17,23,28,.28); }.kern-flow strong { display: block; margin: 10px 0; font-size: clamp(1.3rem,2.1vw,2rem); letter-spacing: -.05em; }.kern-flow p { max-width: 33ch; margin: 0; line-height: 1.55; }.kern-outro { padding: clamp(80px, 12vw, 155px) clamp(50px,9vw,130px) 43px; }.kern-outro h2 { max-width: 10ch; margin: 17px 0 22px; font-size: clamp(3.2rem,6.6vw,7.5rem); line-height: .85; letter-spacing: -.085em; }.kern-outro p { max-width: 40ch; color: rgba(233,237,235,.71); line-height: 1.65; }.kern-outro footer { border-top-color: rgba(233,237,235,.22); }

.night-layout { background: #071013; color: #eaffbd; }.night-nav { position: absolute; z-index: 2; inset: 25px clamp(22px, 5vw, 82px) auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.night-nav > :last-child { text-align: right; }.night-logo { font: 800 clamp(1.4rem,2.7vw,2.3rem)/1 Manrope,sans-serif; letter-spacing: -.08em; }.night-logo span { color: #00b4c6; }.night-hero { position: relative; min-height: 100svh; padding: 150px clamp(22px, 9vw, 150px) 90px; display: flex; flex-direction: column; justify-content: end; isolation: isolate; overflow: hidden; }.night-hero::before { content:""; position:absolute; inset:0; z-index:-2; background:url('assets/nightwash-hero.png') center/cover; }.night-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,7,11,.92),rgba(0,7,11,.16) 75%); }.night-hero h1 { margin: 19px 0; font-size: clamp(5rem,11vw,11.5rem); line-height: .76; letter-spacing: -.1em; }.night-hero h1 em { color: #d7ff39; font-style: normal; }.night-hero p { max-width: 40ch; margin: 0; color: rgba(234,255,189,.78); line-height: 1.65; }.night-hero > a { display: inline-block; width: fit-content; margin-top: 29px; padding: 13px 16px; border-radius: 999px; color: #071013; background: #d7ff39; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.night-orbit { position: absolute; right: 6vw; top: 22%; width: 150px; height: 150px; display: grid; place-content: center; border: 1px solid rgba(234,255,189,.62); border-radius: 50%; font: 500 9px/1.35 "DM Mono", monospace; letter-spacing: .1em; text-align: center; transform: rotate(-12deg); }
.night-modes { padding: clamp(72px,10vw,135px) clamp(22px,7vw,120px); }.night-modes header { display:flex; justify-content:space-between; gap:30px; margin-bottom:58px; }.night-modes h2 { margin:0; font-size:clamp(3.5rem,7vw,8rem); line-height:.8; letter-spacing:-.09em; text-align:right; }.night-mode-list { border-top:1px solid rgba(234,255,189,.22); }.night-mode-list article { display:grid; grid-template-columns:70px 1fr 1fr auto; align-items:center; gap:20px; padding:28px 0; border-bottom:1px solid rgba(234,255,189,.22); }.night-mode-list span,.night-mode-list b { color:#00b4c6; font:500 11px/1 "DM Mono",monospace; }.night-mode-list h3 { margin:0; font-size:clamp(2.4rem,5vw,6rem); line-height:.8; letter-spacing:-.09em; }.night-mode-list p { max-width:27ch; margin:0; color:rgba(234,255,189,.72); line-height:1.55; }.night-mode-list b { font-size:2rem; }.night-pulse { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; padding:clamp(75px,11vw,145px) clamp(22px,7vw,120px); color:#071013; background:#00b4c6; }.night-pulse h2 { max-width:9ch; margin:18px 0 0; font-size:clamp(3.3rem,6vw,7rem); line-height:.84; letter-spacing:-.085em; }.night-pulse p { align-self:end; max-width:35ch; margin:0; line-height:1.65; }.night-club { display:grid; grid-template-columns:1.05fr .95fr; min-height:700px; }.night-club-card { padding:clamp(70px,9vw,125px); display:flex; flex-direction:column; justify-content:end; background:#17282e; }.night-club-card h2 { max-width:9ch; margin:18px 0 20px; font-size:clamp(3.3rem,6.2vw,7rem); line-height:.84; letter-spacing:-.085em; }.night-club-card p { max-width:34ch; color:rgba(234,255,189,.74); line-height:1.65; }.night-club-card a { width:fit-content; margin-top:25px; padding-bottom:5px; border-bottom:1px solid #d7ff39; color:#d7ff39; font:500 10px/1 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.night-club ol { margin:0; padding:clamp(70px,9vw,125px); display:grid; align-content:center; list-style:none; }.night-club li { display:grid; grid-template-columns:50px 1fr; gap:18px; padding:23px 0; border-bottom:1px solid rgba(234,255,189,.22); font-size:clamp(1.35rem,2.4vw,2.4rem); letter-spacing:-.055em; }.night-club li b { color:#00b4c6; font:500 10px/1 "DM Mono",monospace; }.night-visit { padding:clamp(75px,11vw,145px) clamp(22px,7vw,120px); background:#d7ff39; color:#071013; }.night-visit { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; }.night-visit h2 { max-width:8ch; margin:17px 0 0; font-size:clamp(3.5rem,6vw,7rem); line-height:.84; letter-spacing:-.085em; }.night-visit-grid { display:grid; gap:0; align-self:end; }.night-visit-grid p { margin:0; padding:19px 0; border-bottom:1px solid rgba(7,16,19,.25); font-size:1rem; line-height:1.55; }.night-visit-grid b { display:block; margin-bottom:7px; font:500 10px/1 "DM Mono",monospace; letter-spacing:.08em; }.night-close { padding:clamp(80px,12vw,155px) clamp(22px,7vw,120px) 43px; background:#071013; }.night-close h2 { max-width:9ch; margin:17px 0 22px; font-size:clamp(3.4rem,7vw,7.8rem); line-height:.83; letter-spacing:-.09em; }.night-close p { max-width:42ch; color:rgba(234,255,189,.72); line-height:1.65; }.night-close footer { border-top-color:rgba(234,255,189,.22); }

@media (max-width: 760px) {
  .mohn-nav, .night-nav { grid-template-columns: 1fr auto; }.mohn-nav > :last-child, .night-nav > :last-child { display: none; }.mohn-cover { min-height: 720px; }.mohn-cover-stamp, .night-orbit { display:none; }.mohn-editorial, .mohn-ritual, .mohn-locations, .kern-process, .night-pulse, .night-club, .night-visit { grid-template-columns:1fr; gap:0; }.mohn-menu, .kern-signals { grid-template-columns:1fr; }.mohn-menu article + article, .kern-signals article + article { padding-left:0; border-left:0; }.mohn-table header, .kern-matrix header, .night-modes header { display:block; }.mohn-table header p, .kern-matrix header p { margin-top:18px; }.mohn-location-list { margin-top:35px; }.kern-layout { grid-template-columns:1fr; }.kern-rail { position:static; height:auto; flex-direction:row; align-items:center; justify-content:space-between; padding:20px 22px; border-right:0; border-bottom:1px solid rgba(233,237,235,.2); }.kern-rail nav { display:none; }.kern-back { text-align:right; }.kern-intro, .kern-status, .kern-matrix, .kern-process, .kern-outro { padding-left:22px; padding-right:22px; }.kern-status header { grid-template-columns:1fr; }.kern-grid { grid-template-columns:1fr; }.kern-grid article:nth-child(even) { padding-left:0; border-left:0; }.night-mode-list article { grid-template-columns:42px 1fr auto; }.night-mode-list p { grid-column:2 / -1; }.night-modes h2 { margin-top:18px; text-align:left; }.night-hero { padding-left:22px; padding-right:22px; }
}