/* ==========================================================================
   inTakt · Carsten Duetschke — main stylesheet
   Storyline: "Zusammenspiel" (Technologie=Instrument, Vision=Partitur,
   Organisation=Orchester). Petrol/Brass dark base. Fonts via css/fonts.css.
   No CDN, no build.
   ========================================================================== */

:root{
  --bg:#121411; --raised:#1A1D18; --raised-2:#22261F; --ink:#ECE9E0; --ink-2:#ABA89C; --ink-3:#7B796E;
  --line:#2A2E27; --petrol:#37AE9E; --petrol-press:#2E9587; --petrol-tint:#17322C; --on-petrol:#08201C;
  --brass:#E3A857; --brass-press:#D0913F; --brass-tint:#2A2114; --on-brass:#1A140A; --clay:#D98E73;
  --raised-warm:#1C1B15; --wash:#141A18; --petrol-lift:#4CC8B6;
  --grad-takt:linear-gradient(105deg, var(--petrol-tint), var(--bg) 55%, var(--brass-tint));
  --display:"Hanken Grotesk", system-ui, sans-serif; --ui:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --maxw:66rem; --pad:clamp(1.2rem,4vw,4rem);
}
:root[data-theme="light"]{
  --bg:#EAE7DF; --raised:#F4F2EC; --raised-2:#FFFFFF; --ink:#1C1B18; --ink-2:#4C4A43; --ink-3:#78766C;
  --line:#D9D5CB; --petrol:#0E6E64; --petrol-press:#0B5A52; --petrol-tint:#DCE8E3; --on-petrol:#F4F2EC;
  --brass:#9C6216; --brass-press:#804F0F; --brass-tint:#EFE4D2; --on-brass:#F4F2EC; --clay:#A85A3D;
  --raised-warm:#F1EBDD; --wash:#E1E9E4; --petrol-lift:#0E6E64;
}
*{box-sizing:border-box;} body{margin:0;}
.site{position:relative; background:var(--bg); color:var(--ink); font-family:var(--ui); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;}
.site::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.04; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.band{max-width:var(--maxw); width:100%; margin-inline:auto; padding-inline:var(--pad);}
.eyebrow{font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);}
h2{font-family:var(--display); font-weight:600; letter-spacing:-.025em; line-height:1.05; margin:0; font-size:clamp(2.4rem,1rem+4.5vw,4rem);}
p{margin:0;}
a{color:var(--petrol); text-decoration:none;}
.num{color:var(--brass); font-weight:600;}

/* wordmark */
.wm{font-family:var(--display); font-weight:500; letter-spacing:-.03em; color:var(--ink); line-height:1; display:inline-block; white-space:nowrap;}
.wm .takt,.wm .t{position:relative;}
.wm .t::after{content:""; position:absolute; left:15%; right:15%; bottom:-.175em; height:.07em; background:var(--petrol); border-radius:3px;}
.wm .takt::after{content:""; position:absolute; left:2%; right:3%; bottom:-.165em; height:.035em; background:var(--petrol); border-radius:2px; opacity:.5;}

/* nav */
@media(min-width: 1024px) {
  .site { display: grid; grid-template-columns: 260px 1fr; grid-template-rows: 1fr auto; min-height: 100vh; }
  .nav { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); border-bottom: none; background: var(--bg); }
  main { grid-column: 2; grid-row: 1; min-width: 0; }
  .foot { grid-column: 2; grid-row: 2; }
  .bleed { width: 100%; margin-inline: 0; }
  .nav__in { flex-direction: column; align-items: flex-start; padding: 3.5rem 2rem; gap: 4rem; margin: 0; max-width: 100%; height: 100%; }
  .nav__links { flex-direction: column; align-items: flex-start; gap: 1.5rem; font-size: 1.1rem; width: 100%; border-top: none; padding: 0; margin: 0; display: flex !important; }
  .nav__toggle { display: none; }
}

.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s;}
.nav.scrolled{border-bottom-color:var(--line);}
.nav__in{max-width:var(--maxw); margin-inline:auto; padding:.9rem var(--pad); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.nav .wm{font-size:1.4rem; z-index:52;}
.nav__links{display:flex; gap:2rem; align-items:center;}
.nav__links a{color:var(--ink); font-size:1rem; font-weight:500; transition:color .2s, font-weight .2s;}
.nav__links a:hover{color:var(--petrol);}
.nav__links a.is-active{color:var(--petrol); font-weight:600;}
.nav__k{padding:.5rem 1.2rem; border-radius:24px; background:var(--petrol); color:var(--on-petrol) !important; text-decoration:none; transition:background .2s;}
.nav__toggle{display:none; background:none; border:none; color:var(--ink); cursor:pointer; padding:.5rem; margin:-.5rem; z-index:52;}
@media(max-width:880px){ 
  .nav__toggle{display:block;}
  .nav__links{display:none; width:100%; flex-direction:column; gap:1.5rem; padding-block:1rem 2rem; font-size:1.1rem; border-top:1px solid var(--line); margin-top:.5rem;}
  .nav__links.is-open{display:flex;}
}

/* buttons */
.btn{border:0; border-radius:999px; padding:.85em 1.6em; font-family:var(--ui); font-weight:600; font-size:.98rem;
  cursor:pointer; text-decoration:none; display:inline-block; background:var(--petrol); color:var(--on-petrol); transition:transform .15s, background-color .15s;}
.btn:hover{transform:translateY(-2px); background:var(--petrol-press);}
.link-q{color:var(--ink-2); font-weight:500; border-bottom:1px solid var(--line); padding-bottom:2px;}
.link-q:hover{color:var(--petrol); border-color:var(--petrol);}

/* section frame */
.sec{padding-block:clamp(4rem,9vw,7.5rem); scroll-margin-top:72px; border-top:1px solid var(--line);}
.sec--alt{background:var(--raised);}
.sec--warm{background:var(--raised-warm);}
.sechead{margin-bottom:clamp(1.8rem,4vw,3rem);}
.sechead h2{position:relative;}
.sechead h2::before{content:""; display:block; width:26px; height:3px; border-radius:3px; background:var(--petrol); margin-bottom:.9rem;}

/* hero */
.hero{position:relative; min-height:92svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
.hero__in{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; padding-block:clamp(3rem,10vh,7rem);}
.hero { position: relative; overflow: hidden; }
.hero__bg {
  position: absolute;
  top: -10%; left: -10%; right: -10%; bottom: -10%;
  background-image: url('../img/atmosphere.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  pointer-events: none;
  animation: ken-burns 12s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  transform-origin: 30% 70%;
}
@keyframes ken-burns {
  0% { transform: scale(1) translate(0, 0) rotate(0deg); }
  100% { transform: scale(1.3) translate(-4%, 4%) rotate(2deg); }
}

.hero__title{font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:1.0;
  font-size:clamp(3rem,1rem+7vw,6.5rem); margin:0; margin-top:clamp(1rem,3vw,1.5rem); max-width:20ch; text-wrap:balance;}
.hero__title .u{color:var(--petrol);}
.hero__lede{font-size:clamp(1.15rem,1rem+1vw,1.5rem); color:var(--ink-2); max-width:54ch; margin-top:clamp(1.5rem,4vw,2rem); line-height:1.5;}
.hero__cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.5rem; margin-top:clamp(2rem,5vw,3rem);}
.hero__wave{position:absolute; left:0; right:0; bottom:0; z-index:1; width:100%; height:clamp(60px,10vh,120px); opacity:.3;}

/* intro grid */
.intro__grid{display:grid; grid-template-columns:1fr; gap:3rem;}
@media(min-width:820px){ .intro__grid{grid-template-columns:1.2fr .8fr; align-items:center;} }
.open__spass{font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,1rem+.9vw,1.55rem); color:var(--ink);
  border-left:2px solid var(--brass); padding-left:1.1rem; line-height:1.35; margin:0;}

/* chapters */
.chapter__meta{color:var(--petrol);}
.chapter--2 .chapter__meta{color:var(--brass);}
.chapter--3 .chapter__meta{color:var(--clay);}
.chapter__grid{display:grid; grid-template-columns:1fr; gap:clamp(1.8rem,4vw,3rem); align-items:center;}
@media(min-width:860px){ .chapter__grid{grid-template-columns:1.05fr .95fr;} .chapter--2 .chapter__grid{direction:rtl;} .chapter--2 .chapter__grid>*{direction:ltr;} }
.beats{display:flex; flex-direction:column; gap:1.4rem;}
.beat__k{font-family:var(--mono); font-weight:500; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--petrol); margin-bottom:.35rem;}
.chapter--2 .beat__k{color:var(--brass);} .chapter--3 .beat__k{color:var(--clay);}
.beat__t{color:var(--ink-2); max-width:48ch;}
.beat--lead .beat__t{font-family:var(--display); font-weight:600; font-size:clamp(1.35rem,1rem+1.5vw,2rem); color:var(--ink); letter-spacing:-.015em; line-height:1.2;}

/* chapter head: oversize ghost number + colored metaphor word */
.chapter__head{position:relative;}
.chapter__num{position:absolute; top:-.42em; right:0; z-index:0; pointer-events:none; font-family:var(--display); font-weight:700;
  line-height:1; font-size:clamp(5rem,12vw,11rem); letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px var(--line);}
.chapter--1 .chapter__num{-webkit-text-stroke-color:color-mix(in srgb,var(--petrol) 42%,transparent);}
.chapter--2 .chapter__num{-webkit-text-stroke-color:color-mix(in srgb,var(--brass) 42%,transparent);}
.chapter--3 .chapter__num{-webkit-text-stroke-color:color-mix(in srgb,var(--clay) 46%,transparent);}
.chapter__head .eyebrow,.chapter__head h2{position:relative; z-index:1;}
.chapter__head h2{font-size:clamp(2.6rem,1rem+5vw,4.5rem);}
.chapter--1 .mw{color:var(--petrol);} .chapter--2 .mw{color:var(--brass);} .chapter--3 .mw{color:var(--clay);}

/* full-bleed utility */
.bleed{width:100vw; margin-inline:calc(50% - 50vw);}

/* signature Takt-Spread */
.spread{background:var(--grad-takt); min-height:70svh; display:flex; align-items:center; position:relative; overflow:hidden; padding-block:clamp(3.5rem,8vw,6rem);}
.spread__inner{max-width:var(--maxw); width:100%; margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; display:flex; flex-direction:column; gap:clamp(.5rem,1.6vw,1.2rem);}
.spread__line{font-family:var(--display); font-weight:700; line-height:.95; letter-spacing:-.03em; color:var(--ink); display:flex; align-items:baseline; gap:.6em; flex-wrap:nowrap; white-space:nowrap; margin:0;}
.spread__line .w{font-size:clamp(1.8rem, 5.5vw, 6.5rem); text-transform:uppercase;}
.spread__line em{font-style:normal;}
.spread__line .t{font-family:var(--mono); font-weight:500; font-size:clamp(.72rem,1.3vw,.95rem); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);}
.sp1 em{color:var(--petrol);} .sp2 em{color:var(--brass);} .sp3 em{color:var(--clay);}
.spread__wave{position:absolute; left:0; right:0; bottom:7%; z-index:1; width:100%; height:64px; opacity:.55;}

/* recurring big Takt-wave, line-draw on reveal (no-JS safe: default drawn) */
.takt-wave{display:block; width:100%; height:auto;}
html.motion .draw-line path[data-line]{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1);}
html.motion .draw-line.in path[data-line]{stroke-dashoffset:0;}

/* visualization */
.viz{margin:0; background:var(--raised-2); border:1px solid var(--line); border-radius:16px; padding:clamp(1.1rem,2.5vw,1.6rem); display:flex; flex-direction:column; gap:.9rem;}
.viz svg{width:100%; height:auto; display:block; overflow:visible;}
.viz text{font-family:var(--mono); fill:var(--ink);}
.viz .lbl{font-size:14px; letter-spacing:.02em;}
.viz .lbl-sm{font-size:12px; fill:var(--ink-2);}
.viz .lbl-on{fill:var(--on-petrol);} .viz .lbl-b{fill:var(--brass);} .viz .lbl-p{fill:var(--petrol);}
.viz__cap{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}

/* UX: Guided Narrative (Vertical Flow) */
.chapter-head{margin-bottom:3rem;}
.chapter-content{max-width:var(--maxw);}
.chapter-intro{max-width:70ch; margin-bottom:4rem;}
.chapter-intro .card__t{font-family:var(--display); font-size:clamp(1.6rem, 3vw, 2rem); color:var(--ink); font-weight:700; margin-bottom:1.5rem; line-height:1.2; letter-spacing:-.02em; text-wrap:balance;}
.chapter-intro .card__c{font-size:1.15rem; color:var(--ink-2); line-height:1.6;}

.chapter-label{font-family:var(--mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.5rem; border-bottom:1px solid var(--line); padding-bottom:.5rem;}

.card-grid{display:grid; grid-template-columns:1fr; gap:1.5rem; margin-bottom:4rem;}
@media(min-width:768px){ .card-grid{grid-template-columns:1fr 1fr;} }

.card{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:2rem; display:flex; flex-direction:column; gap:1rem;}
.card__t{font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.02em; color:var(--ink); line-height:1.25;}
.card__c{font-size:1.05rem; color:var(--ink-2); line-height:1.55;}

/* SVG Animation: Chaos to Order */
.card__visual {
  height: 140px;
  background: color-mix(in srgb, var(--bg) 40%, var(--raised-2));
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  padding: 1rem;
}
.anim-svg { width: 100%; height: 100%; }

@keyframes fade-out {
  0%, 15% { opacity: 1; }
  35%, 85% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes draw-in {
  0%, 15% { stroke-dashoffset: 400; opacity: 0; }
  35%, 85% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 400; opacity: 0; }
}
@keyframes pop-in {
  0%, 25% { transform: scale(0); opacity: 0; }
  35%, 85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

.layer-chaos {
  animation: fade-out 7s infinite ease-in-out;
}
.layer-order .order-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw-in 7s infinite ease-in-out;
}
.layer-order .order-dot {
  transform-origin: center;
  transform-box: fill-box;
  animation: pop-in 7s infinite ease-out;
}
.layer-order .order-dot:nth-child(2) { animation-delay: 0.1s; }
.layer-order .order-dot:nth-child(3) { animation-delay: 0.2s; }
.layer-order .order-dot:nth-child(4) { animation-delay: 0.3s; }
.layer-order .order-dot:nth-child(5) { animation-delay: 0.4s; }
.layer-order .order-dot:nth-child(6) { animation-delay: 0.5s; }
.layer-order .order-dot:nth-child(7) { animation-delay: 0.6s; }

/* tech grid */
.tech-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem;}
@media(min-width:680px){ .tech-grid{grid-template-columns:repeat(4, 1fr);} }
.tech-logo{padding:.5rem; display:flex; justify-content:center; align-items:center; background:var(--raised-2); border:1px solid var(--line); border-radius:6px; color:var(--ink-2); transition:border-color .2s, transform .2s, background .2s; cursor:default; aspect-ratio: 4/3;}
.tech-logo img{max-width:100%; max-height:100%; filter:grayscale(100%) opacity(0.5); transition:all .2s;}
.tech-logo:hover{border-color:var(--petrol); background:var(--raised); transform:translateY(-2px);}
.tech-logo:hover img{filter:grayscale(0%) opacity(1);}
.tech-logo--txt{font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.02em;}

.detail{margin-top:clamp(2rem,5vw,3.5rem);}
.detail__cue{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem;}
.detail__cue span{color:var(--petrol);}
.strip{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity; padding:.2rem .2rem 1rem; margin:0 -.2rem;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;}
.strip::-webkit-scrollbar{height:8px;} .strip::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px;}
.strip .card{flex:0 0 auto; scroll-snap-align:start; width:min(20rem,78vw); background:var(--raised); border:1px solid var(--line);
  border-radius:14px; padding:1.3rem; display:flex; flex-direction:column; gap:.5rem;}
.card__k{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--petrol);}
.card__t{font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em;}
.card__c{color:var(--ink-2); font-size:.95rem;}
.card--soft{border-style:dashed; color:var(--ink-3);} .card--soft .card__t{color:var(--ink-2);}


/* wie ich ticke — premises */
.premises{display:flex; flex-direction:column;}
.premise{display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.4rem; align-items:baseline;
  padding-block:clamp(1.6rem,3.5vw,2.3rem); border-bottom:1px solid var(--line);}
.premise:first-child{border-top:1px solid var(--line);}
.premise__n{font-family:var(--mono); font-weight:500; color:var(--petrol); font-size:.85rem;}
.premise__t{grid-column:2; font-family:var(--display); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(1.2rem,1rem+1vw,1.55rem);}
.premise__c{grid-column:2; color:var(--ink-2); max-width:58ch; margin-top:.5rem;}

/* warum ich */
.why__grid{display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,4vw,2.5rem);}
@media(min-width:820px){ .why__grid{grid-template-columns:auto 1.25fr; align-items:start;} }
.why__portrait{aspect-ratio:4/5; max-width:17rem; border-radius:12px; overflow:hidden; background:var(--raised-2);
  box-shadow:0 0 0 1px var(--line), 0 30px 60px -34px var(--brass-tint);}
.why__portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; filter:saturate(.82) contrast(1.03) brightness(1.02);}/* why */
.why__grid{display:grid; grid-template-columns:1fr; gap:2rem;}
@media(min-width:768px){ .why__grid{grid-template-columns:1fr; max-width:800px;} }
.why__list{display:flex; flex-direction:column; gap:1.5rem;}
.why__list p{position:relative; padding-left:1.5rem; border-left:2px solid var(--petrol); color:var(--ink-2); line-height:1.6;}
.why__list p b{color:var(--ink);}

/* partner grid */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1.5rem;
}
.partner-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  aspect-ratio: 16 / 9;
}
.partner-card img {
  max-width: 100%;
  max-height: 100%;
  filter: grayscale(100%) opacity(0.5);
  transition: all 0.3s ease;
}
.partner-card:hover {
  border-color: var(--petrol);
  background: var(--raised);
}
.partner-card:hover img {
  filter: grayscale(0%) opacity(1);
}
.why__list p:first-child{border-color:var(--brass);}
.why__list p:first-child b{color:var(--brass);}

/* FAQ Grid & Cards */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
  width: 100%;
}
@media (min-width: 820px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
.faq-card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  width: 100%;
  box-sizing: border-box;
}
.faq-card:hover {
  border-color: var(--petrol);
  background: var(--raised-2);
}
.faq-card.is-open {
  border-color: var(--petrol);
  background: var(--raised-2);
}
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  font-family: inherit;
  color: inherit;
}
.faq-q .card__t {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--ink);
  transition: color .2s ease;
}
.faq-card:hover .faq-q .card__t {
  color: var(--petrol);
}
.faq-icon {
  font-size: 1.4rem;
  color: var(--petrol);
  transition: transform .3s ease;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.faq-a {
  display: none;
  padding-top: 1.2rem;
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Ambient Pain-Point Ticker */
.ambient-ticker {
  overflow: hidden;
  user-select: none;
  padding: 1.2rem 0;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.ambient-ticker__track {
  display: flex;
  gap: 0.85rem;
  width: max-content;
  animation: ticker-scroll 45s linear infinite;
}
.ambient-ticker__track:hover {
  animation-play-state: paused;
}
.pain-tag {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  background: var(--raised-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  opacity: 0.85;
}
.pain-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clay);
  opacity: 0.7;
}
.pain-tag:hover {
  border-color: var(--clay);
  color: var(--ink);
  opacity: 1;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* contact */
.contact-split{display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,5vw,3.5rem); align-items:center; padding-block:clamp(4rem,10vw,8rem);}
@media(min-width:820px){ .contact-split{grid-template-columns:auto 1fr;} }
.contact__photo{position:relative; margin:0; width:100%; max-width:15rem; aspect-ratio:4/5; border-radius:12px; overflow:hidden; background:var(--raised-2); border:1px solid var(--line);}
.contact__photo img{width:100%; height:100%; object-fit:cover; object-position:50% 28%; display:block; filter:grayscale(1) contrast(1.12) brightness(1.03);}
.contact__photo::after{content:""; position:absolute; inset:0; background:linear-gradient(145deg, var(--petrol), var(--brass)); mix-blend-mode:color; opacity:.72; pointer-events:none;}
.contact{display:flex; flex-direction:column; gap:1.3rem;}
.contact__h{font-family:var(--display); font-weight:600; letter-spacing:-.025em; line-height:1.06; font-size:clamp(2rem,1rem+4.5vw,3.4rem); margin:0; max-width:18ch;}
.contact__c{color:var(--ink-2); max-width:46ch; font-size:1.1rem;}
.contact__cta{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:.6rem;}
.contact__mail{font-family:var(--mono); font-size:.9rem; color:var(--ink); margin-top:1rem;}

/* footer */
.foot{border-top:1px solid var(--line); padding-block:2rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:baseline;}
.foot .wm{font-size:1.1rem;} .foot small{color:var(--ink-3); font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;}
.foot__links{display:flex; gap:1rem; font-size:.8rem; color:var(--ink-3);} .foot__links a{color:inherit;} .foot__links a:hover{color:var(--petrol);}

/* presence rail — a name on the right edge; 1-3 letters travel through it,
   lit in petrol, tracking how far down the page the reader has scrolled. */
.presence{position:fixed; top:calc(72px + 1rem); bottom:1rem; right:clamp(1rem,3vw,2rem); z-index:40;
  display:flex; align-items:center; pointer-events:none;}
.presence__name{pointer-events:auto; font-family:var(--mono); font-weight:500; font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); writing-mode:vertical-rl;
  transform:rotate(180deg); white-space:nowrap; text-decoration:none;}
.presence__name:hover{color:var(--petrol);}
.presence__name .ch{transition:color .35s ease;}
.presence__name .ch.is-hot{color:var(--petrol);}
@media(prefers-reduced-motion:reduce){ .presence__name .ch{transition:none;} }
@media(max-width:820px){ .presence{display:none;} }

/* reveals — hidden only under html.motion */
.rev{transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
html.motion .rev{opacity:0; transform:translateY(20px);}
html.motion .rev.in{opacity:1; transform:none;}
:focus-visible{outline:2px solid var(--petrol); outline-offset:3px;}

/* Spotlight Search Button in Header */
.nav__search-btn {
  display: flex; align-items: center; gap: 0.45rem;
  background: var(--raised-2); border: 1px solid var(--line);
  color: var(--ink-2); padding: 0.35rem 0.75rem; border-radius: 20px;
  cursor: pointer; font-family: inherit; font-size: 0.82rem; transition: all 0.2s;
}
.nav__search-btn:hover { border-color: var(--petrol); color: var(--ink); background: var(--raised); }
.nav__search-btn .kbd-hint {
  font-family: var(--mono); font-size: 0.68rem;
  background: var(--bg); padding: 0.1rem 0.35rem; border-radius: 4px;
  border: 1px solid var(--line); color: var(--ink-3);
}
@media(max-width:960px){
  .nav__search-btn { width: 100%; justify-content: center; }
}

/* Secondary Button Outline */
.btn--outline{background:transparent; border-color:var(--line); color:var(--ink);}
.btn--outline:hover{border-color:var(--petrol); color:var(--petrol);}

/* Card Grid Variants */
.card-grid--3{display:grid; grid-template-columns:1fr; gap:1.5rem;}
@media(min-width:768px){ .card-grid--3{grid-template-columns:repeat(3, 1fr);} }
.card-grid--4{display:grid; grid-template-columns:1fr; gap:1.5rem;}
@media(min-width:768px){ .card-grid--4{grid-template-columns:repeat(2, 1fr);} }
@media(min-width:1024px){ .card-grid--4{grid-template-columns:repeat(4, 1fr);} }

/* Spotlight Modal Overlay */
.spotlight-overlay{
  position:fixed; inset:0; background:rgba(10, 12, 10, 0.85); backdrop-filter:blur(14px);
  z-index:9999; display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(2rem, 10vh, 6rem) 1rem 2rem;
}
.spotlight-dialog{
  background:var(--raised); border:1px solid var(--line-strong); border-radius:16px;
  width:100%; max-width:640px; box-shadow:0 24px 60px rgba(0,0,0,0.7);
  overflow:hidden; display:flex; flex-direction:column;
}
.spotlight-header{
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.4rem; border-bottom:1px solid var(--line);
}
.spotlight-header input{
  flex:1; background:transparent; border:none; outline:none; font-size:1.1rem; color:var(--ink); font-family:inherit;
}
.spotlight-esc{
  font-family:var(--mono); font-size:.72rem; color:var(--ink-3); padding:.2rem .45rem; background:var(--raised-2); border-radius:4px;
}
.spotlight-results{
  max-height:50vh; overflow-y:auto; padding:.8rem; display:flex; flex-direction:column; gap:.4rem;
}
.spotlight-item{
  display:flex; flex-direction:column; gap:.2rem; padding:.8rem 1rem; border-radius:8px; text-decoration:none; color:inherit; transition:background .15s;
}
.spotlight-item:hover, .spotlight-item.is-selected{background:var(--raised-2);}
.spotlight-item-badge{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;}
.spotlight-item-title{font-weight:600; font-size:1.02rem; color:var(--ink);}
.spotlight-item-desc{font-size:.85rem; color:var(--ink-2); line-height:1.4;}
.spotlight-footer{
  display:flex; justify-content:space-between; padding:.65rem 1.4rem; border-top:1px solid var(--line); font-family:var(--mono); font-size:.7rem; color:var(--ink-3); background:var(--raised-2);
}
.spotlight-footer kbd{background:var(--bg); border:1px solid var(--line); border-radius:3px; padding:.1rem .3rem;}