/* RIVET — home page (light editorial · science × art) */

main { padding-top: 84px; }

.section--alt { background: var(--paper-2); border-block: 1px solid var(--line-soft); }
.card-flat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--card-shadow); }
.anno { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
.serif-em { font-style: italic; }
.num-mark { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; }

/* ---- duotone portrait frame (hosts a real photo via image-slot) ---- */
.duo { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--paper-3); isolation: isolate; }
.duo image-slot { width: 100%; height: 100%; display: block; filter: grayscale(0.55) contrast(1.04); }
.duo > span:not(.testi__idx) { /* legacy text placeholder fallback */
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:0.78rem; color:var(--fg-mute);
}
.duo::after { /* refined editorial accent — subtle, only in the shadows */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(150deg, transparent 35%, var(--duo-accent, var(--violet)));
  mix-blend-mode: multiply; opacity:0.22;
}
.duo::before { /* hairline edge */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
}

/* ---- RIVET-native diagram (transparent PNG on a clean lab card) ---- */
.dgram { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding: clamp(16px,2vw,26px); }
.dgram__cap { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.dgram__cap .label { color:var(--fg-mute); }
.dgram__tag { font-family:var(--font-mono); font-size:0.68rem; color:var(--violet); padding:3px 8px; border:1px solid color-mix(in oklab,var(--violet) 26%,transparent); border-radius:var(--r-pill); }
.dgram img { width:100%; height:auto; display:block; }
.dgram--plain { border:0; box-shadow:none; background:transparent; padding:0; }
.camel img { max-width:920px; margin-inline:auto; }
.camel-svg { width:100%; max-width:540px; height:auto; display:block; margin:8px auto 6px; }
.camelx-stage .cross-chips { justify-content:center; }

/* OS knowledge-graph in the hero poster */
.poster--os .os-graph { background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:10px; }
.poster--os .os-graph img { width:100%; height:auto; display:block; }
.poster--os .poster__name { font-size:0.98rem; }

/* GTM Pro hero media */
.hero-pro { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:12px; }
.hero-pro__photo .gtmpro__inner { aspect-ratio:4/5; }
.hero-pro__cap { display:flex; justify-content:space-between; align-items:center; padding:0 2px 2px; }
.hero-pro__cap .poster__name { font-size:1rem; font-weight:600; color:var(--ink); }

/* footer bilingual note */
.footer-bi { font-family:inherit; color:var(--fg-mute); font-size:0.8rem; }
.footer-bi .ar { color:var(--violet); font-size:0.95rem; }

/* brand slogan — the script signature */
.slogan { font-family:var(--font-script); color:var(--magenta); line-height:0.85; display:inline-block; font-size:clamp(2.4rem, 1.7rem + 2.8vw, 3.8rem); }
.slogan--sm { font-size:clamp(1.25rem,1rem + 0.9vw,1.6rem); }
.hl { color:var(--violet); }
/* (footer + GTM Pro portrait styles moved to chrome.css — global) */


/* ---- HERO ---- */
.hero { padding-top: clamp(22px, 4vw, 52px); padding-bottom: 0; }
.hero__grid { display:grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.hero__copy { display:flex; flex-direction:column; gap: 18px; }
.hero .display { margin-top: 2px; }
.hero .display .serif-em { font-family: var(--font-script); font-style: normal; font-size: 1.18em; line-height:0.7; }
.hero__cta { flex-wrap: wrap; gap: 12px; }
.hero__proof { display:flex; align-items:center; gap: clamp(16px,2.5vw,28px); margin-top: 8px; border-top:1px solid var(--line); padding-top:18px; flex-wrap:wrap; }
.hero__proof div:not(.hero__proof-sep) { display:flex; flex-direction:column; gap:1px; }
.hero__proof strong { font-size: var(--step-2); font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
.hero__proof span { font-size: var(--step--1); color: var(--fg-mute); }
.hero__proof-sep { width:1px; height:30px; background:var(--line); }

/* editorial poster card */
.poster { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:12px; }
.poster__top { display:flex; justify-content:space-between; align-items:center; }
.poster__num { font-family:var(--font-mono); font-weight:600; font-size:clamp(2.4rem,5vw,3.4rem); line-height:0.9; letter-spacing:-0.04em; color:var(--ink); }
.poster__duo { aspect-ratio: 4/5; }
.poster__foot { display:flex; flex-direction:column; gap:4px; }
.poster__name { font-weight:600; font-size:1.05rem; letter-spacing:-0.01em; color:var(--ink); }

/* hero ticker */
.hero__ticker { margin-top: clamp(34px,5vw,64px); border-block:1px solid var(--line); overflow:hidden; padding-block:13px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.ticker__track { display:inline-flex; align-items:center; gap:18px; white-space:nowrap; animation: ticker 38s linear infinite; font-family:var(--font-mono); font-size:0.82rem; color:var(--fg-soft); letter-spacing:0.02em; }
.ticker__track .dotsep { color:var(--magenta); font-size:0.6rem; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

/* ---- SCIENCE × ART ---- */
.sciart { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px,4vw,56px); align-items:center; }
.sciart__copy { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.formula { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--font-mono); font-size:clamp(1rem,0.9rem + 0.6vw,1.4rem); color:var(--ink); margin-top:4px; }
.formula .term { padding:7px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.formula .op { color:var(--fg-mute); }
.formula .res { background:var(--ink); color:#fff; border-color:var(--ink); }
.plot { margin:0; padding: clamp(16px,2vw,24px); }
.plot__head { margin-bottom:12px; }
.plot svg { width:100%; height:auto; display:block; overflow:visible; }
.plot .axis { stroke: var(--line-strong); stroke-width:1; }
.plot .grid-line { stroke: var(--grid-line); stroke-width:1; }
.plot .tick { font-family:var(--font-mono); font-size:10px; fill: var(--fg-mute); }

/* ---- FIVE SURFACES ---- */
.surfaces { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap: clamp(12px,1.6vw,18px); }
.surfaces li:first-child { grid-column: 1 / -1; }
.surface { display:flex; align-items:center; gap:18px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--card-shadow); text-decoration:none; color:var(--ink); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.surface:hover { transform:translateY(-2px); box-shadow:var(--card-shadow-hover); border-color:var(--line-strong); }
.surface__n { font-family:var(--font-mono); font-size:0.82rem; color:var(--fg-mute); }
.surface__main { flex:1; display:flex; flex-direction:column; gap:3px; }
.surface__main b { font-size:1.05rem; font-weight:600; letter-spacing:-0.01em; }
.surface__main small { color:var(--fg-soft); font-size:0.88rem; }
.surface__tag { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill); color:var(--c); border:1px solid color-mix(in oklab, var(--c) 32%, transparent); background:color-mix(in oklab, var(--c) 7%, #fff); white-space:nowrap; }
.surface__go { font-size:1.1rem; color:var(--fg-mute); transition:transform .2s ease, color .2s ease; }
.surface:hover .surface__go { transform:translateX(3px); color:var(--magenta); }
.surface--feature { background:var(--ink); border-color:var(--ink); }
.surface--feature .surface__main b, .surface--feature .surface__go { color:#fff; }
.surface--feature .surface__main small { color:rgba(255,255,255,0.7); }
.surface--feature .surface__n { color:rgba(255,255,255,0.5); }

/* ---- WORKFLOW / BOWTIE ---- */
.flow { margin:0 0 clamp(20px,2.5vw,30px); padding: clamp(18px,2.2vw,28px); }
.flow svg { width:100%; height:auto; display:block; overflow:visible; }
.flow .grid-line { stroke:var(--grid-line); stroke-width:1; }
.flow .tick { font-family:var(--font-mono); font-size:11px; fill:var(--fg-soft); letter-spacing:0.04em; }
.models { display:flex; flex-wrap:wrap; gap:8px; }
.model { font-family:var(--font-mono); font-size:0.8rem; padding:7px 13px; border:1px solid var(--line); border-radius:var(--r-pill); background:#fff; color:var(--fg-soft); }

/* ---- IMPACT ---- */
.impact { display:grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px,4vw,60px); align-items:center; }
.impact__copy { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.figures { margin:0; display:grid; grid-template-columns:1fr 1fr; gap: clamp(16px,2.5vw,28px); }
.figures div { display:flex; flex-direction:column; gap:6px; padding-top:18px; border-top:2px solid var(--ink); }
.figures dt { font-size:var(--step-4); line-height:1; color:var(--ink); }
.figures dd { margin:0; color:var(--fg-soft); font-size:0.9rem; }

/* ---- TESTIMONIALS ---- */
.testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(14px,1.8vw,22px); }
.testi { margin:0; display:flex; flex-direction:column; gap:16px; }
.testi__duo { aspect-ratio: 4/3; }
.testi__idx { position:absolute; top:10px; left:10px; z-index:2; font-family:var(--font-mono); font-size:0.7rem; color:#fff; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); padding:3px 8px; border-radius:var(--r-pill); }
.testi blockquote { margin:0; font-size:var(--step-1); line-height:1.42; letter-spacing:-0.01em; color:var(--ink); font-weight:500; text-wrap:pretty; }
.testi figcaption { color:var(--fg-mute); font-size:0.86rem; }
.testi figcaption b { color:var(--ink); font-weight:600; }
.logos { display:flex; flex-wrap:wrap; gap:16px; margin-top:clamp(28px,3.5vw,44px); justify-content:space-between; align-items:center; }
.logo { min-height:46px; flex:1 1 130px; border-style:solid; opacity:0.75; }

/* ---- FINALE (ink block) ---- */
.finale { position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,44px); align-items:center; padding:clamp(32px,4.5vw,60px); background:var(--ink); border-radius:var(--r-xl); }
.finale__num { font-size:clamp(3.5rem,8vw,6rem); line-height:0.8; color:rgba(255,255,255,0.16); }
.finale__body { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.finale, .finale h2 { color:#fff; }
.finale .eyebrow { color:var(--violet); }
.finale .lead, .finale .muted { color:rgba(255,255,255,0.72); }
.finale__cta { flex-wrap:wrap; }
.finale .btn--ghost { border-color:rgba(255,255,255,0.3); color:#fff; }
.finale .btn--ghost:hover { background:rgba(255,255,255,0.1); border-color:#fff; }

/* ---- responsive ---- */
@media (max-width: 980px){
  .hero__grid { grid-template-columns: 1fr; }
  .poster { max-width: 400px; }
  .poster__duo { aspect-ratio: 5/4; }
  .sciart, .impact { grid-template-columns:1fr; }
  .finale { grid-template-columns:1fr; }
  .finale__num { display:none; }
}
@media (max-width: 720px){
  .surfaces, .testimonials { grid-template-columns:1fr; }
  .surfaces li:first-child { grid-column:auto; }
  .figures { grid-template-columns:1fr 1fr; }
}