/* Structure comparison demo page. Every rule is scoped under .structures-page; the cell diagram
   itself comes unchanged from styles.css + layers.css (section 03 of the study page). */
.structures-page { --accent:#7c8a3a; }
.structures-page [hidden] { display:none!important; }
.structures-page .site-header { height:82px; }
.structures-page .page-width { max-width:1100px; }
.structures-page .eyebrow { color:var(--accent); font-size:11px; letter-spacing:1.5px; }

/* Hero */
.structures-hero { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; padding:54px 0 36px; align-items:start; }
.structures-hero h1 { font-size:clamp(32px,4vw,54px); line-height:1.25; letter-spacing:-2px; margin:16px 0 20px; font-weight:740; }
.structures-intro { font-size:16px; color:var(--ink); line-height:1.9; }
.scope-box { display:grid; gap:14px; margin-top:34px; }
.scope-box>div { border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--white); }
.scope-box strong { display:block; font-size:12px; color:var(--accent); letter-spacing:.5px; margin-bottom:8px; }
.scope-box p { font-size:14px; line-height:1.8; color:var(--ink); }

/* Sections */
.structures-page .lesson { padding:48px 0; }
.structures-page .lesson h2 { font-size:30px; letter-spacing:-1.2px; }
.structures-page .experiment { margin-top:24px; }

/* 01 ZOOM: the section 03 diagram, with the titanium layer marked as the zoom target */
.zoom-stage { position:relative; overflow:hidden; border-radius:12px; transition:background-color .6s; }
.zoom-stage .cell-diagram { transition:transform .9s cubic-bezier(.4,0,.2,1), opacity .6s .3s; transform-origin:45% 160px; }
.zoom-stage.is-zoomed { background-color:#e7e99d; background-image:radial-gradient(#839249 6px,transparent 6.5px); background-size:42px 42px; }
.zoom-stage.is-zoomed .cell-diagram { transform:scale(7); opacity:0; pointer-events:none; }
.zoom-target { outline:2px dashed var(--accent); outline-offset:3px; animation:zoom-pulse 1.6s ease-in-out infinite; }
.is-zoomed .zoom-target { animation:none; }
@keyframes zoom-pulse {
  0%,100% { outline-offset:3px; outline-color:var(--accent); }
  50% { outline-offset:7px; outline-color:#c9d36a; }
}
.structures-page .experiment-caption { margin-bottom:0; }

/* 02 SWAP: sample picker and schematic cross-section */
.sample-picker { margin-top:24px; scroll-margin-top:110px; }
.picker-label { font-size:13px; font-weight:650; margin-bottom:10px; }
.sample-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:520px; }
.sample-buttons button { min-height:56px; border:2px solid #b9c08a; background:var(--white); border-radius:12px; font-size:16px; font-weight:650; padding:10px 14px; transition:background .2s, border-color .2s; touch-action:manipulation; }
.sample-buttons button[aria-pressed=true] { background:#e7e99d; border-color:var(--accent); }
.cross-section { margin:22px 0 0; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px 18px 12px; transition:opacity .6s, transform .6s; scroll-margin-top:110px; }
.cross-section.is-dimmed { opacity:.35; transform:scale(.92); }
.cross-svg { display:block; width:100%; height:auto; overflow:visible; font-family:inherit; }
.cross-svg .cs-membrane { fill:#c6def3; stroke:#8baecb; stroke-width:1; }
.cross-svg .cs-catalyst { fill:#b9614a; }
.cross-svg .cs-ptl { fill:#e7e99d; stroke:#9ba75f; stroke-width:1; }
.cross-svg .cs-flow { fill:#e0edf2; stroke:#c6d5e0; stroke-width:1; }
.cross-svg pattern circle { fill:#f6f6e4; stroke:#9ba75f; stroke-width:1; }
.cross-svg .cs-boundary line { stroke:#9ba75f; stroke-width:1.5; stroke-dasharray:4 3; }
.cross-svg .cs-leader line { stroke:#7c8a3a; stroke-width:1; }
.cross-svg .cs-dim line { stroke:#637078; stroke-width:1; }
.cross-svg .cs-label { font-size:12px; fill:#3b4a55; }
.cross-svg .cs-on-dark { fill:#fff5f0; }
.cross-svg .cs-dim-text { fill:#3b4a55; font-weight:600; }
.cross-svg .cs-layer-label { font-size:12px; fill:#4d5d2a; font-weight:600; }
.cross-svg .cs-formula { font-size:13px; font-weight:600; font-family:Georgia,serif; }
.cross-svg .cs-water-text { fill:#315ed8; }
.cross-svg .cs-oxygen-text { fill:#3b4a55; }
.cross-svg .cs-arrow line { stroke-width:3; stroke-linecap:round; }
.cross-svg .cs-water line { stroke:#9cc0dd; }
.cross-svg .cs-water polygon { fill:#9cc0dd; }
.cross-svg .cs-oxygen line { stroke:#5c91b0; }
.cross-svg .cs-oxygen polygon { fill:#5c91b0; }
.cross-svg .ptl-group { transition:transform .45s ease, opacity .45s ease; }
.cross-svg .ptl-group.is-leaving { transform:translateY(-40px); opacity:0; }
.cross-svg .ptl-group.is-entering { transform:translateY(40px); opacity:0; }
.cross-svg .is-hidden { display:none; }
.cross-svg .o2 { fill:#dcebf5; stroke:#5c91b0; stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; animation:o2-travel-single 7s linear infinite; }
#ptl-triple .o2 { animation-name:o2-travel-triple; animation-duration:3.6s; }
/* Exaggerated illustration, not measured bubble speeds. Single layer: many bubbles, one slow steady pace all the way
   through (uniform pores). Triple layer: bubbles gather briefly in the fine MPL, then are released one after another,
   speeding up and growing toward the coarse, high-porosity backing layer (paper Fig. 5c-e, authors' interpretation).
   Delays and durations are hand-scattered so bubbles never line up. */
#ptl-single .o2:nth-child(1) { animation-delay:0s; animation-duration:7.2s; }
#ptl-single .o2:nth-child(2) { animation-delay:2.1s; animation-duration:6.8s; }
#ptl-single .o2:nth-child(3) { animation-delay:0.7s; animation-duration:7.6s; }
#ptl-single .o2:nth-child(4) { animation-delay:4.4s; animation-duration:7s; }
#ptl-single .o2:nth-child(5) { animation-delay:1.5s; animation-duration:6.6s; }
#ptl-single .o2:nth-child(6) { animation-delay:3.3s; animation-duration:7.4s; }
#ptl-single .o2:nth-child(7) { animation-delay:5.6s; animation-duration:6.9s; }
#ptl-single .o2:nth-child(8) { animation-delay:0.3s; animation-duration:7.3s; }
#ptl-single .o2:nth-child(9) { animation-delay:2.8s; animation-duration:6.7s; }
#ptl-single .o2:nth-child(10) { animation-delay:4.9s; animation-duration:7.5s; }
#ptl-single .o2:nth-child(11) { animation-delay:1.1s; animation-duration:7.1s; }
#ptl-single .o2:nth-child(12) { animation-delay:6.2s; animation-duration:6.5s; }
#ptl-single .o2:nth-child(13) { animation-delay:3.8s; animation-duration:7.7s; }
#ptl-single .o2:nth-child(14) { animation-delay:5.2s; animation-duration:7s; }
#ptl-single .o2:nth-child(15) { animation-delay:1.9s; animation-duration:6.9s; }
#ptl-single .o2:nth-child(16) { animation-delay:6.7s; animation-duration:7.3s; }
#ptl-triple .o2:nth-child(1) { animation-delay:0s; animation-duration:3.5s; }
#ptl-triple .o2:nth-child(2) { animation-delay:1.9s; animation-duration:3.9s; }
#ptl-triple .o2:nth-child(3) { animation-delay:0.6s; animation-duration:3.3s; }
#ptl-triple .o2:nth-child(4) { animation-delay:2.7s; animation-duration:3.7s; }
#ptl-triple .o2:nth-child(5) { animation-delay:1.2s; animation-duration:4.1s; }
#ptl-triple .o2:nth-child(6) { animation-delay:0.3s; animation-duration:3.4s; }
#ptl-triple .o2:nth-child(7) { animation-delay:2.3s; animation-duration:3.8s; }
#ptl-triple .o2:nth-child(8) { animation-delay:1.6s; animation-duration:3.6s; }
#ptl-triple .o2:nth-child(9) { animation-delay:3.1s; animation-duration:4s; }
#ptl-triple .o2:nth-child(10) { animation-delay:0.9s; animation-duration:3.5s; }
@keyframes o2-travel-single {
  /* One steady, slow pace from the catalyst layer to the channel; size barely changes. */
  0% { transform:translateX(0) scale(1); opacity:0; }
  4% { opacity:.9; }
  95% { opacity:.9; }
  100% { transform:translateX(548px) scale(1.08); opacity:0; }
}
@keyframes o2-travel-triple {
  /* Gather in the MPL (0-50 px) for 38 %, slowing as they queue; then release through the interlayer (50-150 px) in 14 %
     and race through the backing layer (150-548 px), growing to 1.9x. */
  0% { transform:translateX(0) scale(.8); opacity:0; }
  6% { opacity:.9; }
  22% { transform:translateX(34px) scale(.85); }
  38% { transform:translateX(50px) scale(.9); }
  52% { transform:translateX(150px) scale(1.25); }
  74% { transform:translateX(330px) scale(1.8); }
  92% { opacity:.9; }
  100% { transform:translateX(548px) scale(1.9); opacity:0; }
}
.cross-section figcaption { font-size:13px; color:var(--muted); line-height:1.7; margin-top:12px; }
.compare-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:14px; }
.swap-status { font-size:15px; font-weight:600; line-height:1.7; min-height:1.7em; }
.zoom-back { background:transparent; border:1px solid #b9c08a; border-radius:30px; min-height:44px; padding:8px 16px; font-size:13px; font-weight:600; }
.zoom-back:hover { background:#f3f5e2; }

/* 03 NUMBERS */
.condition-badge { display:inline-block; font-size:12px; line-height:1.7; padding:8px 14px; background:#e9eddf; border-radius:8px; margin:18px 0 10px; color:#3b4a2a; }
.cards-sample { font-size:13px; font-weight:650; color:var(--accent); margin:6px 0 12px; }
.number-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.number-card { background:var(--white); border:1px solid var(--line); border-radius:12px; padding:18px 20px; min-width:0; }
.card-title { font-size:13px; font-weight:650; }
.card-badge { display:inline-block; font-size:11px; background:#e9eddf; border:1px solid #d0d8c4; border-radius:20px; padding:3px 9px; margin:8px 0 12px; color:#4d5d3a; line-height:1.6; }
.card-value { font-size:34px; font-weight:740; letter-spacing:-1px; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.card-unit { font-size:14px; font-weight:600; color:var(--muted); margin-left:6px; letter-spacing:0; }
.card-value-text { font-size:18px; line-height:1.6; letter-spacing:0; }
.card-sub { font-size:12px; color:var(--muted); margin-top:4px; min-height:1.6em; line-height:1.6; }
.card-note { font-size:13px; color:var(--muted); margin-top:12px; line-height:1.7; }
.number-cards[data-sample=triple] .card-value { color:var(--accent); }
.table-wrap { overflow-x:auto; margin-top:28px; -webkit-overflow-scrolling:touch; }
.sample-table { border-collapse:collapse; width:100%; min-width:680px; font-size:13px; background:var(--white); }
.sample-table caption { text-align:left; font-size:12px; color:var(--muted); padding-bottom:8px; }
.sample-table th,.sample-table td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; line-height:1.6; }
.sample-table thead th { background:#e9eddf; font-size:12px; }
.sample-table tbody th { font-weight:650; white-space:nowrap; }
.sample-table tr.is-current { background:#f3f5e2; }
.paper-figure { margin-top:28px; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:16px; }
.paper-figure img { width:100%; max-width:560px; margin:0 auto; }
.paper-figure.fig6 img { max-width:640px; }
.sem-images { display:grid; gap:12px; max-width:560px; margin:0 auto; }
.paper-figure figcaption { font-size:13px; color:var(--muted); line-height:1.7; margin-top:12px; text-align:center; }
.paper-figure .fig-source { display:block; color:var(--ink); font-weight:600; margin-bottom:4px; }
.paper-source { font-size:12px; color:var(--muted); margin-top:16px; line-height:1.8; overflow-wrap:anywhere; }

/* 04 BANNER: booth banner 03 thumbnail beside a static stack schematic (no bubbles: nothing measured) */
.banner-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.banner-thumb { margin:0; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:10px; }
.banner-thumb img { display:block; width:100%; height:auto; border-radius:8px; border:1px solid var(--line); }
.banner-thumb figcaption { font-size:12px; color:var(--muted); line-height:1.7; padding:10px 4px 2px; }
.banner-stack { min-width:0; }
.banner-stack .sample-picker { margin-top:0; }
.stack-figure { margin-top:18px; }
.stack-svg .cs-coating { fill:#eef3f6; stroke:#8d9ba4; stroke-width:1; }
.stack-svg pattern .fiber { stroke:#8a9650; stroke-width:1.8; stroke-linecap:round; }
.stack-svg pattern .mesh-open { fill:#f6f6e4; }
.stack-svg pattern .mesh-wire { fill:none; stroke:#8a9650; stroke-width:1.2; }
.stack-svg #mesh-medium .mesh-wire { stroke-width:1.7; }
.stack-svg #mesh-coarse .mesh-wire { stroke-width:2.4; }
/* Paper peek on the composite page: two cross-section pictures that open the structure comparison with that sample installed. */
.paper-peek { margin-top:22px; padding:18px 20px 16px; background:#f3f3ef; border:1px dashed #cfd2cd; border-radius:14px; }
.peek-title { font-size:17px; font-weight:700; line-height:1.5; margin:0 0 6px; }
.peek-intro { font-size:14px; line-height:1.8; color:var(--muted); margin:0 0 14px; }
.peek-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.peek-card { display:flex; flex-direction:column; gap:8px; padding:10px 10px 12px; background:var(--white); border:2px solid #b9c08a; border-radius:12px; text-decoration:none; color:var(--ink); transition:border-color .2s, box-shadow .2s; touch-action:manipulation; }
.peek-card:hover, .peek-card:focus-visible { border-color:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.08); outline:none; }
.peek-card img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }
.peek-label { font-size:14px; line-height:1.6; color:var(--muted); }
.peek-label strong { display:block; font-size:16px; color:var(--ink); }
.peek-cta { align-self:flex-start; margin-top:auto; font-size:14px; font-weight:650; color:#4b5a1f; padding:8px 14px; border-radius:8px; background:#e7e99d; }
.peek-note { font-size:12px; color:var(--muted); line-height:1.7; margin:12px 0 0; }
.evidence-list { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px; }
.evidence-list li { font-size:14px; line-height:1.8; color:var(--ink); padding:12px 16px; background:var(--white); border:1px solid var(--line); border-radius:10px; }
.grade { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.6px; line-height:1.6; padding:1px 9px; border-radius:20px; margin-left:4px; vertical-align:middle; }
.grade-fact { background:#dfeadb; color:#2f5a2f; border:1px solid #b7cdb2; }
.grade-claim { background:#f4e7c4; color:#6b5218; border:1px solid #e3cf98; }
.grade-unknown { background:#e9e9e6; color:#4a4f52; border:1px solid #cfd2cd; }
.stack-table { min-width:560px; }
.meeting-note { margin-top:22px; padding:16px 18px; border:1px dashed #9dac98; border-radius:10px; font-size:14px; line-height:1.8; color:var(--ink); }
.meeting-note strong { display:block; font-size:12px; color:var(--accent); letter-spacing:.3px; margin-bottom:6px; }

/* 05 COATING: three text cards reuse the number-card frame */
.text-cards { margin-top:22px; }
.text-cards .card-badge { margin-bottom:10px; }
.text-cards .card-badge.grade-unknown { background:#e9e9e6; color:#4a4f52; border-color:#cfd2cd; }
.text-cards .card-body { font-size:14px; line-height:1.8; color:var(--ink); }
.text-cards .card-link { display:inline-block; margin-top:12px; font-size:13px; }

/* 06–07 details */
.structures-page .lesson>details { border-top:1px solid var(--line); }
.structures-page .details-body ul { padding-left:20px; margin:0; line-height:1.9; font-size:14px; color:var(--ink); }
.structures-page .details-body p { font-size:14px; line-height:1.9; color:var(--ink); }

/* 08 products and footer */
.structures-page .plain-explanation { margin-top:20px; }
.structures-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.structures-links a { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:1px solid #bdcbb7; border-radius:8px; background:#f0f4e9; text-decoration:none; font-size:14px; }
.todo-box { margin-top:22px; padding:16px 18px; background:#f0f1ea; border:1px solid var(--line); border-radius:10px; font-size:14px; line-height:1.8; color:var(--ink); }
.todo-box strong { display:block; font-size:12px; color:var(--accent); letter-spacing:.3px; margin-bottom:4px; }
.todo-box p { font-size:13px; color:var(--muted); margin:0 0 8px; }
.todo-box ul { margin:0; padding-left:20px; }
.structures-footer { padding:30px 0 50px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:12px; color:var(--muted); }

@media (max-width:800px) {
  .structures-page .site-header { padding-inline:20px; }
  .structures-page .header-right { gap:14px; }
  .structures-hero { grid-template-columns:1fr; gap:10px; padding-top:34px; }
  .scope-box { margin-top:14px; }
  .structures-page .lesson h2 { font-size:25px; }
  .number-cards { grid-template-columns:1fr; }
  .structures-page .experiment { padding:16px 12px; }
  .cross-section { padding:12px 10px 10px; }
  .cross-svg .cs-label,.cross-svg .cs-layer-label { font-size:17px; }
  .cross-svg .cs-formula { font-size:18px; }
  .banner-layout { grid-template-columns:1fr; }
  .banner-thumb img { width:auto; max-width:100%; max-height:360px; margin:0 auto; }
  .banner-thumb figcaption { text-align:center; }
}
@media (max-width:560px) {
  .structures-hero h1 { font-size:30px; letter-spacing:-1.3px; }
  .structures-intro { font-size:15px; }
  .sample-buttons button { font-size:14px; padding:8px 10px; }
  .cross-svg .cs-label { font-size:18px; }
  .cross-svg .cs-layer-label { font-size:20px; }
  .cross-svg .cs-formula { font-size:22px; }
  /* Stack schematic: 21/20 px in the 760-unit box renders at about 9 px on a 390 px phone; the rotated bipolar label must stay inside its 260-unit band. */
  .stack-svg .cs-layer-label { font-size:21px; }
  .stack-svg .cs-label { font-size:20px; }
  .card-value { font-size:30px; }
  .structures-page .experiment-top { flex-wrap:wrap; gap:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .cross-svg .o2 { opacity:0; }
  #ptl-single .o2:nth-child(1),#ptl-single .o2:nth-child(3),#ptl-single .o2:nth-child(5),#ptl-single .o2:nth-child(7),#ptl-single .o2:nth-child(9) { opacity:.8; }
  #ptl-single .o2:nth-child(1) { transform:translateX(40px); }
  #ptl-single .o2:nth-child(3) { transform:translateX(150px); }
  #ptl-single .o2:nth-child(5) { transform:translateX(260px); }
  #ptl-single .o2:nth-child(7) { transform:translateX(380px); }
  #ptl-single .o2:nth-child(9) { transform:translateX(490px); }
  #ptl-triple .o2:nth-child(1),#ptl-triple .o2:nth-child(2),#ptl-triple .o2:nth-child(3),#ptl-triple .o2:nth-child(4) { opacity:.8; }
  #ptl-triple .o2:nth-child(1) { transform:translateX(16px) scale(.85); }
  #ptl-triple .o2:nth-child(4) { transform:translateX(38px) scale(.9); }
  #ptl-triple .o2:nth-child(2) { transform:translateX(300px) scale(1.8); }
  #ptl-triple .o2:nth-child(3) { transform:translateX(460px) scale(1.9); }
}

/* Hero photo (supplier product, structure reference only) */
.hero-side { display:grid; gap:14px; }
.hero-side .scope-box { margin-top:0; }
.hero-photo { margin:0; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:10px; }
.hero-photo img { width:100%; height:auto; border-radius:9px; display:block; }
.hero-photo figcaption { font-size:12px; color:var(--muted); line-height:1.7; padding:10px 4px 2px; }

/* "Not measured" badge on the schematic */
.cross-section { position:relative; }
.model-badge { position:absolute; top:10px; right:12px; margin:0; z-index:2; font-size:11px; font-weight:650; letter-spacing:.3px; padding:5px 10px; border-radius:20px; background:#f4e7c4; color:#6b5218; border:1px solid #e3cf98; line-height:1.5; }

/* Supplier product photo strip under the schematic */
.product-strip { margin-top:22px; padding:18px 18px 16px; background:var(--white); border:1px solid var(--line); border-radius:14px; }
.product-strip h3 { font-size:17px; line-height:1.5; margin:0 0 14px; }
.product-strip h3 small { display:inline-block; margin-left:10px; font-size:11px; font-weight:600; color:var(--accent); letter-spacing:.5px; vertical-align:middle; }
.strip-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.strip-grid a { display:block; text-decoration:none; color:inherit; min-width:0; border-radius:12px; }
.strip-grid a:hover img { border-color:var(--accent); }
.strip-grid img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:10px; border:2px solid var(--line); background:#f0f1ea; display:block; transition:border-color .2s; }
.strip-grid strong { display:block; font-size:14px; margin-top:10px; line-height:1.5; }
.strip-grid small { display:block; font-size:12px; color:var(--muted); margin-top:3px; line-height:1.5; }
.strip-note { font-size:13px; color:var(--muted); line-height:1.8; margin:14px 0 0; }
@media (max-width:800px) {
  .strip-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .model-badge { position:static; display:inline-block; margin:0 0 8px; }
}