/* White glass, soft lavender gradients, and purple accents.
   The landscape is static CSS geometry; there are no motion or image assets. */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --surface: #f6f3fc;
  --ink: #25243e;
  --muted: #4c4e6b;
  --line: #d9d2e8;
  --accent: #6342b5;
  --on-accent: #faf8ff;
  --glass: rgba(255, 255, 255, .72);
  --glass-edge: rgba(218, 210, 237, .72);
  --glass-shadow: 0 16px 48px rgba(81, 57, 130, .06), inset 0 1px 0 rgba(255, 255, 255, .65);
  --font-poetic: 'Shippori Mincho', Georgia, serif;
}
body {
  background:
    radial-gradient(ellipse at 90% 5%, #f2edfc 0, transparent 23%),
    radial-gradient(ellipse at 5% 27%, #eee6fa 0, transparent 23%),
    radial-gradient(ellipse at 90% 48%, #f5effc 0, transparent 22%),
    var(--paper);
}
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.045em; }
em { font-family: var(--font-poetic); letter-spacing: -.06em; }
a:focus-visible, button:focus-visible { outline-color: var(--accent); }
.portfolio-nav {
  top: 16px;
  max-width: 1440px;
  width: calc(100% - 48px);
  margin-top: 16px;
  padding: 16px 28px;
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
  box-shadow: var(--glass-shadow);
  border-radius: 4px;
}
.wordmark { font-weight: 500; font-size: 26px; }
.wordmark small { font-size: 9px; letter-spacing: .16em; }
.page-links .nav-contact {
  background: var(--accent);
  color: #f4f2ff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 2px;
}
.page-links .nav-contact:hover { background: var(--accent); }
.poster-hero { padding-top: 44px; }
.hero-kicker .eyeline { font-size: 10px; letter-spacing: .16em; }
.hero-composition {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 24px;
  min-height: 570px;
  padding-block: 40px;
}
.hero-statement { position: relative; z-index: 2; }
.hero-chapter { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.poster-hero h1 { font-size: clamp(76px, 8.7vw, 136px); padding: 30px 0 24px; letter-spacing: -.07em; line-height: 1.05; }
.hero-second { padding-left: 10%; font-family: var(--font-poetic); font-weight: 400; letter-spacing: -.075em; }
.hero-note { padding-left: 11%; color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero-bottom {
  padding: 28px 32px;
  margin-bottom: 32px;
  border: 1px solid var(--glass-edge);
  border-radius: 4px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--glass-shadow);
  grid-template-columns: .8fr 1.3fr 1fr;
  align-items: center;
}
.hero-index { display: flex; align-items: center; gap: 16px; align-self: center; font-size: 10px; letter-spacing: .1em; line-height: 1.8; padding: 0; text-transform: uppercase; }
.seal-mark { display: grid; place-items: center; width: 40px; height: 48px; border: 1px solid var(--accent); color: var(--accent); font-size: 13px; letter-spacing: -.04em; border-radius: 2px; }
.hero-bottom p { font-size: 16px; }
.explore-link { border-color: var(--line); }
.explore-link span { color: var(--accent); }
.hero-foot { border-top: 0; padding-bottom: 24px; }
.hero-foot span:before { content: '·'; }
/* A static sculpture behind two translucent screens. */
.glass-landscape { position: relative; height: 490px; isolation: isolate; }
.landscape-grid {
  position: absolute; inset: 12px 0 12px 12%;
  border: 1px solid rgba(78, 82, 136, .16);
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(78, 82, 136, .12) calc(25% - 1px), rgba(78, 82, 136, .12) 25%);
  mask-image: linear-gradient(#000, #000 70%, transparent);
}
.sun-disc {
  position: absolute; width: 210px; height: 210px; border-radius: 50%; top: 38px; right: 13%;
  background: radial-gradient(circle at 30% 25%, #b296f2, #7660d6 60%, #384fa1);
  box-shadow: inset -10px -16px 30px #49317526, 0 24px 60px #7761cc25;
}
.orbit-ring { position: absolute; width: 290px; height: 290px; right: 5%; top: 0; border: 1px solid #8170b855; border-radius: 50%; transform: rotateX(28deg); }
.ink-stone { position: absolute; background: linear-gradient(115deg, #7b7ca5 0, #4f5281 38%, #292b55 70%, #626695); box-shadow: 24px 30px 45px #303c7126; }
.stone-back { width: 145px; height: 285px; left: 26%; top: 135px; border-radius: 43% 46% 6px 4px / 22% 27% 4px 6px; transform: rotate(-8deg); }
.stone-front { width: 170px; height: 230px; right: 11%; bottom: 35px; border-radius: 46% 30% 4px 4px / 34% 20% 4px 4px; background: linear-gradient(115deg, #98a7ce, #627eaf 36%, #3b528a 80%); transform: rotate(10deg); }
.glass-plane {
  position: absolute;
  border: 1px solid rgba(246,247,255,.76);
  background: linear-gradient(115deg, rgba(247,245,255,.35), rgba(230,237,255,.09));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 12px 20px 40px #30326312, inset 0 1px 0 #ffffff9c;
  border-radius: 3px;
}
.plane-back { width: 47%; height: 310px; right: 2%; top: 105px; transform: skewY(-7deg); }
.plane-front { width: 56%; height: 245px; left: 3%; bottom: 48px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(115deg, #f0edff8c, #e4ecff4d); }
.plane-front span { font-size: 9px; letter-spacing: .16em; line-height: 1.6; color: #292b54; }
.plane-front i { width: 52px; height: 52px; border: 1px solid #626ca080; border-radius: 50%; align-self: end; }
.landscape-coordinate { position: absolute; left: 12%; bottom: 2px; font-size: 9px; letter-spacing: .18em; color: var(--muted); }
.landscape-caption { position: absolute; right: -12px; top: 12px; writing-mode: vertical-rl; font-size: 9px; letter-spacing: .25em; color: var(--muted); }
/* Light glass surfaces retain a consistent text substrate. */
.chapter-intro h2 { line-height: 1.12; }
.chapter-intro>.eyeline, .section-eyebrow { letter-spacing: .15em; }
.pitch-band { gap: 24px; }
.pitch-line {
  padding: 28px;
  border: 1px solid var(--glass-edge);
  border-radius: 3px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--glass-shadow);
}
.running-head { border-color: var(--line); }
.reel-embed, .video-frame { padding: 10px 10px 0; border: 1px solid var(--glass-edge); background: var(--glass); border-radius: 5px; box-shadow: var(--glass-shadow); }
.media-link { background: transparent; border: 0; }
.media-link:hover { background: var(--surface); color: var(--ink); }
.dg-star { font-size: 0; width: 12px; height: 12px; border: 1px solid var(--accent); border-radius: 50%; }
.card-grid { gap: 20px; border: 0; position: relative; }
.card-grid::before { content: ''; position: absolute; inset: 5% 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 25% 25%, #f0e8fc 0, transparent 60%), radial-gradient(ellipse at 75% 80%, #f6f0ff 0, transparent 55%); }
.card { border: 1px solid var(--glass-edge); border-radius: 4px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--glass-shadow); }
.card:hover { background: rgba(246,247,255,.74); border-color: #b4b8d6; }
.card-num { border: 1px solid #b4b8d6; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; }
.card-title { font-weight: 500; }
/* The product and research sections share the same light glass palette. */
.technical-section {
  --paper: #ffffff;
  --surface: #f6f3fc;
  --ink: #25243e;
  --muted: #4c4e6b;
  --line: #d9d2e8;
  --accent: #6342b5;
  --on-accent: #ffffff;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(245,239,252,.65) 55%, rgba(255,255,255,.92));
  border-block: 1px solid var(--line);
}
.technical-section em { color: var(--accent); }
.metrics { padding: 0 28px; border: 1px solid var(--glass-edge); background: var(--glass); border-radius: 3px; }
.metric-val { font-family: var(--font-poetic); }
.viewer { background: var(--glass); border-color: var(--glass-edge); border-radius: 4px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--glass-shadow); }
.sidebar { background: rgba(255,255,255,.45); }
.report-card { border-radius: 3px; }
.report-card.active { background: var(--surface); }
.toc-chip, .stage-nav, .open-link { border-radius: 2px; }
.stage-bar, .stage-foot { background: rgba(255,255,255,.45); }
.pdf-frame { border-block: 1px solid var(--line); }
/* A quiet closing panel, rather than a separate visual language. */
.contact-section { position: relative; }
.cta-panel { padding: 48px; border: 1px solid var(--glass-edge); border-radius: 4px; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--glass-shadow); gap: 40px; }
.cta-panel h2 { font-size: clamp(48px, 6vw, 84px); line-height: 1.1; }
.btn-primary { background: var(--accent); border: 1px solid var(--accent); border-radius: 2px; box-shadow: inset 0 1px 0 #ffffff1c; }
.btn-primary:hover { background: var(--accent); color: #faf8ff; }
.footer { background: rgba(255,255,255,.6); }
@media (min-width: 1600px) {
  .poster-hero h1 { font-size: 136px; }
}
@media (max-width: 1024px) {
  .portfolio-nav { width: calc(100% - 32px); padding: 14px 22px; }
  .hero-composition { min-height: 480px; gap: 12px; }
  .glass-landscape { height: 420px; }
  .sun-disc { width: 160px; height: 160px; }
  .orbit-ring { width: 230px; height: 230px; }
  .stone-back { width: 115px; height: 240px; top: 100px; }
  .stone-front { width: 130px; height: 190px; }
  .plane-back { height: 250px; top: 95px; }
  .plane-front { height: 220px; }
  .hero-bottom { padding: 24px; grid-template-columns: .7fr 1.3fr 1fr; gap: 20px; }
  .hero-index { gap: 10px; font-size: 9px; }
  .hero-bottom p { font-size: 14px; }
  .explore-link { font-size: 12px; }
  .cta-panel { padding: 32px; gap: 32px; }
}
@media (max-width: 767px) {
  .portfolio-nav { top: 8px; margin-top: 8px; padding: 14px 18px 8px; }
  .hero-composition { grid-template-columns: 1fr; padding: 40px 0 24px; gap: 12px; }
  .hero-statement { max-width: 540px; width: 100%; }
  .poster-hero h1 { font-size: clamp(72px, 15vw, 112px); padding: 24px 0; }
  .hero-chapter { font-size: 9px; }
  .hero-note { font-size: 14px; }
  .glass-landscape { height: 350px; width: min(100%, 440px); margin: 0 auto; }
  .landscape-grid { inset: 0 5% 0 12%; }
  .sun-disc { width: 150px; height: 150px; top: 12px; }
  .orbit-ring { width: 200px; height: 200px; top: 0; right: 7%; }
  .stone-back { top: 65px; height: 220px; }
  .stone-front { height: 180px; bottom: 30px; }
  .plane-back { height: 230px; top: 50px; right: 4%; }
  .plane-front { height: 200px; bottom: 32px; }
  .landscape-caption { right: 0; }
  .hero-bottom { grid-template-columns: 1fr; padding: 24px; gap: 22px; }
  .hero-index { display: none; }
  .hero-bottom p { font-size: 16px; }
  .explore-link { max-width: none; font-size: 13px; }
  .hero-foot { font-size: 9px; }
  .pitch-line { padding: 24px; font-size: 15px; }
  .card-grid { gap: 16px; }
  .card { padding: 24px; }
  .card-desc { font-size: 15px; }
  .metrics { padding: 0 20px; }
  .metric-val { font-size: 40px; }
  .cta-panel { padding: 28px; margin-top: 28px; }
  .cta-panel h2 { font-size: clamp(44px, 9vw, 64px); }
  .contact-detail p { font-size: 16px; }
}
@media (max-width: 420px) {
  .poster-hero h1 { font-size: 18.5vw; }
  .hero-second { padding-left: 7%; }
  .hero-note { padding-left: 7%; }
  .glass-landscape { height: 330px; }
  .card-desc { font-size: 16px; }
  .cta-panel { padding: 24px; }
  .btn-primary { padding: 16px; font-size: 13px; }
}
/* Solid substrates when backdrop blur or transparency preferences require them. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portfolio-nav, .hero-bottom, .pitch-line, .card, .cta-panel { background: #fff; }
  .glass-plane { background: rgba(225,230,250,.85); }
  .viewer { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  .portfolio-nav, .hero-bottom, .pitch-line, .card, .cta-panel { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass-plane { background: #dfe3f5; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .viewer { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}