/* ==========================================================================
   Roomio — inner pages (products, product, projects, project)
   Builds on the tokens and components in style.css.
   ========================================================================== */

/* ---------- shared ---------- */
.pg-hero { padding-top: clamp(130px, 14vw, 190px); padding-bottom: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--dim); }
.crumbs a { color: var(--muted); transition: color 0.3s; }
.crumbs a:hover { color: var(--text); }
.crumbs i { font-style: normal; opacity: 0.5; }
.crumbs [aria-current] { color: var(--text); }
.pg-title { font-size: clamp(52px, 8vw, 132px); font-weight: 300; letter-spacing: -0.045em; line-height: 0.95; max-width: 14ch; }
.pg-title .char { display: inline-block; }
.pg-hero .lead { max-width: 52ch; }
.pg-filter { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); margin-top: 10px; }
.pg-filter button { position: relative; z-index: 1; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; transition: color 0.4s; }
.pg-filter button sup { font-size: 9px; color: var(--dim); transition: color 0.4s; }
.pg-filter button.is-active { color: #17120a; }
.pg-filter button.is-active sup { color: rgba(23, 18, 10, 0.55); }
.pg-filter__pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--btn-glow); box-shadow: 0 0 24px -6px rgba(var(--glow-rgb), 0.6); }
.pg-stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 72px); padding-top: 8px; }
.pg-stats div { display: grid; gap: 4px; }
.pg-stats b { font-size: clamp(36px, 4vw, 60px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.pg-stats span { color: var(--muted); }
.pg-note { color: var(--dim); display: inline-flex; align-items: center; gap: 8px; }
.pg-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.tag-sample { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.pg-grid-wrap { padding-bottom: clamp(60px, 8vw, 120px); }
.pg-cta { border-top: 1px solid var(--line); }
.pg-cta__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 72px); align-items: end; }
.pg-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- product cards ---------- */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pgrid--3 .pcard--wide { grid-column: auto; }
.pcard { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--graphite); border: 1px solid var(--line); transition: border-color 0.5s; }
.pcard:hover { border-color: rgba(var(--glow-rgb), 0.45); }
.pcard--wide { grid-column: span 2; }
.pcard__stage { --mx: 50%; --my: 40%; position: relative; aspect-ratio: 1.25; display: grid; place-items: center; perspective: 900px; overflow: hidden;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--glow-rgb), 0.14), transparent 60%), radial-gradient(ellipse at 50% 120%, var(--graphite-2), transparent 70%); }
.pcard--wide .pcard__stage { aspect-ratio: 2.1; }
.pcard__media { width: 62%; height: 78%; display: grid; place-items: center; transform-style: preserve-3d; will-change: transform; }
.pcard--wide .pcard__media { width: 40%; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); transition: transform 0.9s var(--ease); }
.pcard:hover .pcard__media img { transform: translateZ(30px) scale(1.04); }
.pcard__body { position: relative; padding: 22px 24px 26px; display: grid; gap: 8px; border-top: 1px solid var(--line); }
.pcard__body .mono { color: var(--muted); }
.pcard__body h3 { font-size: clamp(24px, 2.2vw, 34px); font-weight: 300; letter-spacing: -0.03em; }
.pcard__body p { color: var(--muted); font-size: 15px; max-width: 40ch; }
.pcard__go { position: absolute; right: 22px; bottom: 24px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); transition: background 0.5s var(--ease), color 0.5s, transform 0.6s var(--ease), border-color 0.5s; }
.pcard:hover .pcard__go { background: var(--btn-glow); color: #17120a; border-color: transparent; transform: rotate(-45deg); }

/* presence sensor illustration */
.sensor-vis { position: relative; width: 70%; aspect-ratio: 1; display: grid; place-items: center; }
.sensor-vis i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--glow-rgb), 0.45); animation: sv 3.2s var(--ease) infinite; }
.sensor-vis i:nth-child(2) { animation-delay: 1.05s; }
.sensor-vis i:nth-child(3) { animation-delay: 2.1s; }
@keyframes sv { 0% { transform: scale(0.35); opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }
.sensor-vis__puck { position: relative; width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a3a3e, #121214 70%); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); display: grid; place-items: center; }
.sensor-vis__puck b { width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd23a, #d1326b 55%, #18093a 100%); box-shadow: 0 0 30px rgba(255, 140, 60, 0.6); animation: heat 2.6s ease-in-out infinite alternate; }
@keyframes heat { to { filter: hue-rotate(-25deg) brightness(1.2); transform: scale(1.08); } }

/* ---------- product page ---------- */
.pd-hero { padding-top: clamp(120px, 12vw, 160px); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 72px); align-items: center; min-height: 100svh; padding-bottom: 40px; }
.pd-hero__copy { display: grid; gap: 22px; align-content: center; }
.pd-hero .pg-title { font-size: clamp(56px, 7vw, 120px); }
.pd-tag { font-size: clamp(20px, 1.8vw, 28px); font-weight: 300; letter-spacing: -0.02em; color: var(--glow); }
.pd-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.pd-stage { position: relative; height: min(76svh, 720px); border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: #1a1917; user-select: none; -webkit-user-select: none; }
.pd-wall { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pd-wall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255, 240, 220, 0.12), transparent 55%), linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.45)); }
.pd-stage .kp-anchor { width: min(52%, 380px); z-index: 2; }
.pd-visual { position: relative; z-index: 2; width: 72%; height: 72%; display: grid; place-items: center; }
.pd-visual img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)); }
.pd-swatches { position: absolute; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(10, 10, 11, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: calc(100% - 32px); overflow-x: auto; scrollbar-width: none; }
.pd-sw { flex: none; width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); position: relative; transition: transform 0.4s var(--ease); }
.pd-sw:hover { transform: translateY(-2px); }
.pd-sw.is-active::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #ffe3b8; }
.pd-hint { position: absolute; z-index: 3; top: 16px; right: 16px; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(10, 10, 11, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(236, 232, 226, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; }

.pd-specs { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pd-spec { padding: 26px 20px 26px 0; display: grid; gap: 10px; align-content: start; border-right: 1px solid var(--line); padding-left: 20px; }
.pd-spec:first-child { padding-left: 0; }
.pd-spec:last-child { border-right: 0; }
.pd-spec .mono { color: var(--muted); }
.pd-spec b { font-size: clamp(16px, 1.3vw, 20px); font-weight: 400; letter-spacing: -0.01em; }

.pd-layouts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: start; }
.pd-lay-list { display: grid; gap: 8px; }
.pd-lay { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--graphite); text-align: left; transition: border-color 0.4s, background 0.4s, transform 0.5s var(--ease); }
.pd-lay:hover, .pd-lay.is-active { border-color: rgba(var(--glow-rgb), 0.55); transform: translateX(6px); }
.pd-lay.is-active { background: color-mix(in srgb, var(--graphite) 88%, rgb(var(--glow-rgb))); }
.pd-lay__ic { width: 48px; height: 48px; background: var(--muted); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background 0.4s; }
.pd-lay.is-active .pd-lay__ic, .pd-lay:hover .pd-lay__ic { background: var(--glow); }
.pd-lay b { display: block; font-size: 17px; font-weight: 400; }
.pd-lay span span { color: var(--muted); font-size: 14px; }
.pd-lay i { font-style: normal; color: var(--dim); transition: transform 0.4s var(--ease), color 0.4s; }
.pd-lay.is-active i { color: var(--glow); transform: translateX(4px); }
.pd-layouts__stage { position: sticky; top: 110px; height: min(72svh, 620px); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); display: grid; place-items: center; }
.pd-blueprint { position: absolute; inset: 0; background: linear-gradient(var(--fill) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--fill) 1px, transparent 1px) 0 0 / 40px 40px, radial-gradient(ellipse at 50% 45%, var(--graphite-2), var(--ink) 70%); }
.pd-layouts__stage .kp-anchor { width: min(86%, 600px); aspect-ratio: 1.45; z-index: 2; }
.pd-layouts__stage .pd-hint { top: auto; bottom: 16px; right: 50%; transform: translateX(50%); }

.pd-fgroup { margin-top: 28px; }
.pd-fgroup__h { display: flex; gap: 10px; color: var(--muted); margin-bottom: 14px; }
.pd-fgroup__h span { color: var(--dim); }
.pd-ftiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.pd-ftile { position: relative; display: grid; gap: 10px; text-align: left; }
.pd-ftile__img { aspect-ratio: 1; border-radius: 14px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--line-2); position: relative; overflow: hidden; transition: transform 0.6s var(--ease), box-shadow 0.4s; }
.pd-ftile__img::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%); transform: translateX(-60%); transition: transform 1s var(--ease); }
.pd-ftile:hover .pd-ftile__img { transform: translateY(-4px); }
.pd-ftile:hover .pd-ftile__img::after { transform: translateX(60%); }
.pd-ftile.is-active .pd-ftile__img { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 2px var(--page), 0 0 0 3px var(--glow); }
.pd-ftile__name { font-size: 13px; color: var(--muted); }
.pd-ftile.is-active .pd-ftile__name { color: var(--text); }
.pd-ftile.is-soon .pd-ftile__name::after { content: " · preview in portal"; color: var(--dim); }

.pd-mods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pd-mod { display: grid; gap: 12px; }
.pd-mod__img { aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #111; border: 1px solid var(--line); }
.pd-mod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.pd-mod:hover img { transform: scale(1.06); }
.pd-mod b { font-weight: 400; font-size: 15px; }

.pd-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pd-feat { position: relative; padding: 26px; border-radius: 18px; background: var(--graphite); border: 1px solid var(--line); display: grid; gap: 14px; align-content: start; min-height: 260px; }
.pd-feat .mono { color: var(--dim); }
.pd-feat__ic { font-size: 38px; color: var(--glow); text-shadow: 0 0 22px rgba(var(--glow-rgb), 0.45); }
.pd-feat h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; }
.pd-feat p { color: var(--muted); font-size: 14px; }


.pd-next { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 24px; padding: clamp(48px, 7vw, 110px) var(--gutter); border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.pd-next .mono { color: var(--muted); grid-column: 1; }
.pd-next b { grid-column: 1; font-size: clamp(56px, 9vw, 150px); font-weight: 300; letter-spacing: -0.05em; line-height: 0.9; transition: transform 0.9s var(--ease), color 0.5s; }
.pd-next__tag { grid-column: 1; color: var(--muted); }
.pd-next__media { grid-column: 2; grid-row: 1 / span 3; width: clamp(140px, 18vw, 260px); aspect-ratio: 1; display: grid; place-items: center; transition: transform 0.9s var(--ease); }
.pd-next__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45)); }
.pd-next:hover b { transform: translateX(16px); color: var(--glow); }
.pd-next:hover .pd-next__media { transform: rotate(-6deg) scale(1.06); }
.pd-next--project { min-height: 60svh; align-content: end; color: var(--text); border-top: 0; }
.pd-next__bg { position: absolute; inset: 0; z-index: -1; }
.pd-next__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); transform: scale(1.08); transition: transform 1.4s var(--ease), filter 1s; }
.pd-next--project:hover .pd-next__bg img { transform: scale(1); filter: brightness(0.6); }

/* modes / states */
.pd-modes { padding-top: 0; }
.pm { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 14px; align-items: stretch; }
.pm__tabs { display: grid; gap: 8px; align-content: start; }
.pm__tab { --t: 0; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--graphite); text-align: left; transition: border-color 0.5s, background 0.5s, transform 0.6s var(--ease); }
.pm__tab b { font-weight: 400; font-size: 17px; color: var(--muted); transition: color 0.4s; }
.pm__tab .mono { color: var(--dim); }
.pm__tab:hover { border-color: var(--line-2); }
.pm__tab.is-active { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--graphite) 90%, var(--c)); transform: translateX(6px); }
.pm__tab.is-active b { color: var(--text); }
.pm__ring { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.pm__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--t) * 360deg), var(--line-2) 0); -webkit-mask: radial-gradient(circle, transparent 24px, #000 24.5px); mask: radial-gradient(circle, transparent 24px, #000 24.5px); opacity: 0.35; transition: opacity 0.4s; }
.pm__tab.is-active .pm__ring::before { opacity: 1; }
.pm__ring .ri { font-size: 22px; color: var(--off-2); transition: color 0.4s, text-shadow 0.4s; }
.pm__tab.is-active .pm__ring .ri { color: var(--c); text-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent); }
.pm__panel { position: relative; overflow: hidden; padding: clamp(26px, 3.4vw, 48px); border-radius: 22px; background: var(--graphite); border: 1px solid var(--line); display: grid; gap: 18px; align-content: start; min-height: 440px; transition: border-color 0.8s; border-color: color-mix(in srgb, var(--c) 22%, var(--line)); }
.pm__glow { position: absolute; right: -20%; top: -40%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 65%); filter: blur(20px); pointer-events: none; transition: background 0.8s; }
.pm__head { position: relative; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.pm__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); transition: background 0.6s, box-shadow 0.6s; }
.pm__name { position: relative; font-size: clamp(40px, 4.6vw, 76px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.pm__text { position: relative; color: var(--muted); font-size: var(--fs-lead); max-width: 46ch; }
.pm__rows { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 10px; }
.pm__row { --line: 1; position: relative; display: grid; gap: 6px; padding: 16px 0; }
.pm__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); transform: scaleX(var(--line)); transform-origin: left; }
.pm__row span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.pm__row b { font-weight: 400; font-size: 17px; overflow: hidden; display: block; }
.pm__row b i { font-style: normal; display: block; }

/* ---------- projects ---------- */
.prjgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; padding-bottom: clamp(60px, 8vw, 120px); }
.prj { grid-column: span var(--span, 6); position: relative; height: clamp(380px, 44vw, 600px); border-radius: 22px; overflow: hidden; display: block; cursor: none; }
.prj__img { position: absolute; inset: 0; overflow: hidden; }
.prj__img img { width: 100%; height: 116%; object-fit: cover; margin-top: -8%; transition: filter 0.8s; filter: brightness(0.7) saturate(0.9); }
.prj:hover .prj__img img { filter: brightness(0.85) saturate(1); }
.prj__body { position: absolute; inset: 0; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(0deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0) 55%); color: var(--text); }
.prj__top { display: flex; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, 0.75); }
.prj h3 { font-size: clamp(30px, 3vw, 48px); font-weight: 300; letter-spacing: -0.03em; line-height: 1; transition: transform 0.8s var(--ease); }
.prj:hover h3 { transform: translateX(10px); }
.prj__body p { color: rgba(255, 255, 255, 0.7); margin-top: 10px; }
.prj__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.prj__chips span { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12px; }
.view-cursor { position: fixed; left: 0; top: 0; z-index: 90; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; display: grid; place-items: center; background: var(--btn-glow); color: #17120a; pointer-events: none; transform: scale(0); opacity: 0; box-shadow: 0 0 40px -6px rgba(var(--glow-rgb), 0.6); }

/* ---------- project page ---------- */
.pj-hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; display: flex; align-items: flex-end; background: #000; }
.pj-hero__img { position: absolute; inset: 0; }
.pj-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.pj-hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.45) 100%); }
.pj-hero__copy { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: start; padding-bottom: clamp(60px, 9vh, 110px); }
.pj-hero .pg-title { max-width: 12ch; }
.pj-hero__meta { color: rgba(236, 232, 226, 0.75); }
.pj-facts { display: grid; grid-template-columns: repeat(4, 1fr) 1.6fr; border-bottom: 1px solid var(--line); }
.pj-facts > div { padding: 28px 20px; display: grid; gap: 8px; border-right: 1px solid var(--line); }
.pj-facts > div:first-child { padding-left: 0; }
.pj-facts > div:last-child { border-right: 0; }
.pj-facts .mono { color: var(--muted); }
.pj-facts b { font-weight: 400; font-size: 17px; }
.pj-facts a { border-bottom: 1px solid rgba(var(--glow-rgb), 0.5); transition: color 0.3s; }
.pj-facts a:hover { color: var(--glow); }
.pj-summary { font-size: clamp(30px, 4vw, 64px); font-weight: 300; line-height: 1.12; letter-spacing: -0.03em; max-width: 24ch; }
.pj-summary .w { --lit: 0; color: color-mix(in srgb, var(--text) calc(var(--lit) * 100%), var(--off)); }
.pj-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pj-block { padding: clamp(24px, 3vw, 44px); border-radius: 22px; background: var(--graphite); border: 1px solid var(--line); display: grid; gap: 22px; align-content: start; }
.pj-block .mono { color: var(--glow); }
.pj-block h3 { font-size: clamp(20px, 1.8vw, 28px); font-weight: 300; line-height: 1.35; letter-spacing: -0.015em; }
.pj-scope { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-scope span { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.pj-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 18px; }
.pj-res__item { padding: 28px 0; border-top: 1px solid var(--line-2); display: grid; gap: 10px; }
.pj-res__item b { font-size: clamp(64px, 8vw, 128px); font-weight: 300; letter-spacing: -0.05em; line-height: 0.9; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
.pj-res__item b small { font-size: 0.32em; color: var(--glow); letter-spacing: 0; }
.pj-res__v .char { display: inline-block; }
.pj-res__item > span { color: var(--muted); }
.pj-gallery { position: relative; }
.pj-gallery__pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden; }
.pj-gallery__head { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.pj-gallery__head .mono { color: var(--muted); }
.pj-track { display: flex; gap: 14px; padding: 0 var(--gutter); width: max-content; will-change: transform; }
.pj-shot { position: relative; margin: 0; height: 62svh; aspect-ratio: 1.45; border-radius: 22px; overflow: hidden; background: #111; }
.pj-shot img { width: 100%; height: 100%; object-fit: cover; }
.pj-shot figcaption { position: absolute; left: 18px; bottom: 16px; color: rgba(255, 255, 255, 0.8); }
.pj-quote blockquote { margin: 0; position: relative; }
.pj-quote blockquote::before { content: "“"; position: absolute; left: -0.1em; top: -0.55em; font-size: clamp(120px, 14vw, 240px); line-height: 1; color: var(--glow); opacity: 0.18; }
.pj-quote p { font-size: clamp(30px, 3.6vw, 58px); font-weight: 300; line-height: 1.12; letter-spacing: -0.03em; position: relative; max-width: 24ch; text-wrap: balance; }
.pj-quote footer { margin-top: 26px; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pd-specs { grid-template-columns: repeat(3, 1fr); }
  .pd-spec:nth-child(3) { border-right: 0; }
  .pd-spec:nth-child(4) { padding-left: 0; }
  .pd-spec:nth-child(n+4) { border-top: 1px solid var(--line); }
  .pd-feats { grid-template-columns: repeat(2, 1fr); }
  .pd-ftiles { grid-template-columns: repeat(6, 1fr); }
  .pd-mods { grid-template-columns: repeat(3, 1fr); }
  .pj-facts { grid-template-columns: repeat(2, 1fr); }
  .pj-facts > div { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .pj-facts > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .pgrid, .pgrid--3 { grid-template-columns: 1fr; }
  .pcard--wide { grid-column: auto; }
  .pcard--wide .pcard__stage { aspect-ratio: 1.25; }
  .pcard--wide .pcard__media { width: 62%; }
  .pg-cta__inner, .pd-hero, .pd-layouts__grid, .pj-story__grid, .pm { grid-template-columns: 1fr; }
  .pm__panel { min-height: 0; }
  .pm__tab.is-active { transform: none; }
  .pd-hero { min-height: 0; padding-top: 110px; }
  .pd-stage { height: 64svh; }
  .pd-stage .kp-anchor { width: min(62%, 260px); }
  .pd-specs { grid-template-columns: repeat(2, 1fr); }
  .pd-spec { padding-left: 0 !important; border-right: 0 !important; border-top: 1px solid var(--line); }
  .pd-layouts__stage { position: relative; top: 0; height: 46svh; order: -1; }
  .pd-feats { grid-template-columns: 1fr; }
  .pd-feat { min-height: 0; }
  .pd-ftiles { grid-template-columns: repeat(4, 1fr); }
  .pd-mods { grid-template-columns: repeat(2, 1fr); }
  .pd-next { grid-template-columns: 1fr; }
  .pd-next__media { grid-column: 1; grid-row: auto; width: 140px; }
  .prj { grid-column: 1 / -1; height: 440px; cursor: pointer; }
  .pj-res { grid-template-columns: 1fr; }
  .pj-gallery__pin { height: auto; padding: 60px 0; }
  .pj-track { overflow-x: auto; width: 100%; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pj-shot { height: 52svh; aspect-ratio: 0.8; flex: none; scroll-snap-align: center; }
  .pg-filter { display: flex; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .pg-filter button { flex: none; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
.feat { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; min-height: clamp(420px, 46vw, 600px); border-radius: 22px; overflow: hidden; background: var(--graphite); border: 1px solid var(--line); isolation: isolate; }
.feat__img { position: relative; overflow: hidden; }
.feat__img img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transition: filter 0.8s; filter: brightness(0.85); }
.feat:hover .feat__img img { filter: brightness(1); }
.feat__body { padding: clamp(28px, 3.6vw, 56px); display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; }
.feat__body h2 { font-size: clamp(32px, 3.4vw, 54px); font-weight: 300; letter-spacing: -0.035em; line-height: 1.04; transition: color 0.5s; }
.feat:hover h2 { color: var(--glow); }
.feat__body p { color: var(--muted); font-size: var(--fs-lead); max-width: 40ch; }
.feat__tag { color: #17120a; background: var(--btn-glow); padding: 4px 10px; border-radius: 999px; }
.post__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--muted); }
.blog-list { padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(60px, 8vw, 120px); }
.blog-list__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.blog-list__head .pg-filter { margin-top: 0; max-width: 100%; }
.blog-list__head > * { min-width: 0; }
.postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.post { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--graphite); border: 1px solid var(--line); transition: border-color 0.5s, box-shadow 0.7s var(--ease); }
.post:hover { border-color: rgba(var(--glow-rgb), 0.45); box-shadow: 0 24px 60px -30px rgba(var(--glow-rgb), 0.35); }
.post__img { aspect-ratio: 1.5; overflow: hidden; background: #111; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 0.8s; filter: brightness(0.85); }
.post:hover .post__img img { transform: scale(1.06); filter: brightness(1); }
.post__body { padding: 22px 24px 26px; display: grid; gap: 12px; align-content: start; }
.post__body h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.25; }
.post__body p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
/* fixed text heights: every card is the same size in any filter, so Flip only moves them */
.post__body h3, .post__body p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.post__body h3 { -webkit-line-clamp: 3; height: 3.75em; }
.post__body p { -webkit-line-clamp: 2; height: 3.2em; }
.news { border-top: 1px solid var(--line); }
.news__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: end; }
.news__form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.news__ok { grid-column: 1 / -1; color: var(--signal); display: none; }
.news__form.is-sent .news__ok { display: block; }

/* article */
.read-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 2px; pointer-events: none; }
.read-bar i { display: block; height: 100%; background: var(--glow); box-shadow: 0 0 10px var(--glow); transform: scaleX(0); transform-origin: left; }
.art-hero { padding-top: clamp(130px, 13vw, 180px); padding-bottom: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: start; }
.art__title { font-size: clamp(44px, 6vw, 96px); max-width: 18ch; }
.art__meta { display: flex; flex-wrap: wrap; gap: 20px; color: var(--muted); }
.art__meta span + span::before { content: "·"; margin-right: 20px; color: var(--dim); }
.art-cover { margin: 0 auto; }
.art-cover__img { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 2.2; background: #111; }
.art-cover__img img { width: 100%; height: 100%; object-fit: cover; }
.art-grid { display: grid; grid-template-columns: 260px minmax(0, 720px); justify-content: space-between; gap: clamp(32px, 6vw, 120px); padding-top: clamp(56px, 7vw, 100px); }
.art-toc { position: sticky; top: 110px; align-self: start; display: grid; gap: 28px; }
.art-toc > .mono, .art-share .mono { color: var(--dim); }
.art-toc nav { display: grid; gap: 2px; border-left: 1px solid var(--line-2); }
.art-toc nav a { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 9px 0 9px 16px; font-size: 14px; color: var(--muted); line-height: 1.35; transition: color 0.4s; }
.art-toc nav a::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 1px; background: var(--glow); box-shadow: 0 0 8px var(--glow); transform: scaleY(0); transition: transform 0.5s var(--ease); }
.art-toc nav a.is-active { color: var(--text); }
.art-toc nav a.is-active::before { transform: scaleY(1); }
.art-toc nav a .mono { color: var(--dim); font-size: 10px; padding-top: 3px; }
.art-share div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.art-share__btn { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); display: inline-flex; align-items: center; transition: color 0.3s, border-color 0.3s; }
.art-share__btn:hover { color: var(--text); border-color: rgba(var(--glow-rgb), 0.6); }
.art { font-size: 18px; line-height: 1.7; color: color-mix(in srgb, var(--text) 86%, transparent); }
.art > * + * { margin-top: 1.1em; }
.art__lead { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.45; color: var(--text); font-weight: 300; letter-spacing: -0.01em; }
.art h2 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.15; color: var(--text); margin-top: 2.2em; scroll-margin-top: 110px; }
.art ul { padding: 0; margin-left: 0; display: grid; gap: 10px; }
.art li { position: relative; padding-left: 26px; }
.art li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 12px; height: 4px; border-radius: 4px; background: var(--glow); box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.6); }
.art blockquote { margin: 2em 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--glow); }
.art blockquote p { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.3; font-weight: 300; letter-spacing: -0.02em; color: var(--text); }
.art__stat { margin: 2em 0; padding: 28px 30px; border-radius: 18px; background: var(--graphite); border: 1px solid var(--line); display: grid; gap: 8px; }
.art__stat b { font-size: clamp(48px, 5vw, 76px); font-weight: 300; letter-spacing: -0.045em; line-height: 1; color: var(--glow); overflow: hidden; }
.art__stat b .char { display: inline-block; }
.art__stat > span { color: var(--muted); font-size: 15px; }
.art-related { padding-bottom: clamp(60px, 8vw, 120px); }

@media (max-width: 1100px) {
  .postgrid { grid-template-columns: repeat(2, 1fr); }
  .art-grid { grid-template-columns: 1fr; }
  .art-toc { position: static; }
  .art-toc nav { display: none; }
}
@media (max-width: 860px) {
  .feat, .news__inner { grid-template-columns: 1fr; }
  .feat__img { aspect-ratio: 1.4; }
  .postgrid { grid-template-columns: 1fr; }
  .news__form { grid-template-columns: 1fr; }
  .art-cover__img { aspect-ratio: 1.3; }
  .art { font-size: 17px; }
}
@media (max-width: 560px) {
  .blog-list__head .pg-filter, .nx-store__tabs.pg-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: 26px; max-width: 100%; }
  .blog-list__head .pg-filter::-webkit-scrollbar, .nx-store__tabs.pg-filter::-webkit-scrollbar { display: none; }
  .blog-list__head .pg-filter button, .nx-store__tabs.pg-filter button { flex: none; padding: 0 14px; }
}

/* product → its own landing (Noesis) */
.pd-landing-wrap { padding-bottom: clamp(60px, 8vw, 120px); }
.pd-landing { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 64px); border-radius: 26px; border: 1px solid var(--line-2); background: radial-gradient(ellipse at 80% 30%, rgba(var(--glow-rgb), 0.12), transparent 60%), var(--ink-2); overflow: hidden; transition: border-color 0.5s; }
.pd-landing:hover { border-color: rgba(var(--glow-rgb), 0.5); }
.pd-landing__copy { display: grid; gap: 24px; justify-items: start; }
.pd-landing__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-landing__list li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 13px; transition: color 0.4s, border-color 0.4s; }
.pd-landing:hover .pd-landing__list li { color: var(--text); }
.pd-landing__vis { transition: transform 1s var(--ease); }
.pd-landing:hover .pd-landing__vis { transform: scale(1.03) rotate(-1deg); }
@media (max-width: 860px) { .pd-landing { grid-template-columns: minmax(0, 1fr); } .pd-landing__vis { order: -1; } }