/* Glassport uses the studio frame, type, controls and reading layout. */
.glassport-page {--page-accent:#00ff41; accent-color:var(--page-accent)}
.glassport-page .glassport-context {align-items:center}
.glassport-context img {width:24px; height:24px; object-fit:contain}
.glassport-context .glassport-name {margin-right:auto; font-family:var(--mono); font-size:max(var(--font-min),.875rem); color:var(--text)}
.glassport-hero {display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:center; padding-block:clamp(4rem,7vw,7rem)}
.glassport-hero h1 {max-width:10ch; font-size:var(--display-xl); line-height:.96}
.glassport-page .eyebrow {color:var(--muted)}
.glassport-page .eyebrow::before {background:var(--page-accent)}
.glassport-hero .hero-intro {max-width:48ch}
.glassport-art {position:relative; display:grid; place-items:center; margin:0; padding:1.5rem; border:1px solid var(--rule); background:radial-gradient(ellipse at center,#00ff4109,transparent 65%),var(--surface)}
.glassport-art img {width:min(100%,30rem); height:auto}
.glassport-art figcaption {justify-self:start; color:var(--muted)}
.glassport-facts {display:flex; flex-wrap:wrap; gap:1rem 3rem; padding-block:1.5rem; border-block:1px solid var(--rule); color:var(--muted); font-size:max(var(--font-min),.875rem)}
.glassport-facts strong {color:var(--text); font-weight:400}
.glassport-section {padding-block:clamp(3.5rem,6vw,6rem)}
.glassport-section-heading {display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-bottom:2.5rem}
.glassport-section h2 {margin:0 0 1.5rem; font-size:var(--heading-lg); line-height:1.08}
.glassport-section-heading p {max-width:48ch; color:var(--muted)}
.glassport-features {display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule)}
.glassport-feature {padding:2rem 3rem 2rem 0; border-bottom:1px solid var(--rule)}
.glassport-feature:nth-child(even) {padding-left:3rem; border-left:1px solid var(--rule)}
.glassport-feature .folio {display:block; margin-bottom:1rem; color:var(--muted)}
.glassport-feature h3 {font-size:1.75rem; line-height:1.15; margin:0 0 1rem}
.glassport-feature p {max-width:54ch; margin:0; color:var(--muted)}
.glassport-setup {border-block:1px solid var(--rule); background:var(--surface)}
.glassport-setup .shell {display:grid; grid-template-columns:1fr 1.25fr; gap:5rem; padding-block:4rem}
.glassport-setup h2 {font-size:var(--heading-lg); line-height:1.08; margin:0 0 1.5rem}
.glassport-setup ol {margin:0; padding-left:1.5rem}
.glassport-setup li {padding:0 0 1.5rem .5rem}
.glassport-setup li::marker {color:var(--page-accent)}
.glassport-setup strong {display:block; font-weight:500}
.glassport-setup li span {color:var(--muted)}
.glassport-availability {display:flex; align-items:center; justify-content:space-between; gap:3rem}
.glassport-price {font:400 var(--display-lg)/1 var(--serif); margin:0 0 1rem}
.glassport-small {font-size:max(var(--font-min),.875rem); color:var(--muted)}
.glassport-page .reading-content {min-width:0}
.glassport-page .reading-content h1 {line-height:1}
.glassport-page .reading-aside {align-self:start}
.glassport-page .glassport-contents {display:flex; flex-direction:column; gap:.5rem; margin-top:1.5rem; font-size:max(var(--font-min),.875rem)}
.glassport-contents a {color:var(--muted); text-decoration:none; padding-block:.25rem}
.glassport-contents a:hover {color:var(--text); text-decoration:underline}
.glassport-page .reading-content table {width:100%; border-collapse:collapse; margin-block:2rem; font-size:1rem}
.glassport-page .reading-content th,.glassport-page .reading-content td {padding:.75rem .75rem .75rem 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule); overflow-wrap:anywhere}
.glassport-page .reading-content th {font-weight:500}
.glassport-page .reading-content td {color:var(--muted)}
.glassport-page .reading-content .callout {border-left:2px solid var(--page-accent); padding:1rem 1.5rem; background:var(--surface); margin-block:2rem}
.glassport-page .reading-content h2 {scroll-margin-top:2rem}
@media(max-width:47.999rem) {
 .glassport-hero {grid-template-columns:1fr; gap:2rem}
 .glassport-hero h1 {font-size:clamp(3rem,12vw,5rem)}
 .glassport-art {max-width:28rem; width:100%; margin-inline:auto}
 .glassport-art img {max-width:18rem}
 .glassport-section-heading,.glassport-features,.glassport-setup .shell {grid-template-columns:1fr; gap:1.5rem}
 .glassport-feature,.glassport-feature:nth-child(even) {padding:2rem 0; border-left:0}
 .glassport-availability {align-items:start; flex-direction:column; gap:2rem}
 .glassport-context .glassport-name {width:calc(100% - 48px)}
}