/* Landing page additive styles – keeps core variables from 13style.css */
.landing-body { --hero-gradient:linear-gradient(135deg, rgba(240,230,140,.9), rgba(139,74,156,.85)); }
.landing-hero { position:relative; padding: clamp(3rem,6vw,6rem) 1.5rem 4rem; background: var(--hero-gradient); border-bottom:5px ridge var(--color-header-border); box-shadow: var(--shadow-header,4px 4px 0 var(--color-accent-2)); }
.hero-inner { max-width: 1040px; margin:0 auto; text-align:center; }
.hero-title { font-size: clamp(2.4rem,5vw,3.8rem); margin-bottom: .75rem; font-family: var(--font-heading); text-decoration: underline; color: var(--color-header-text); }
.hero-tag { font-size: clamp(1rem,1.9vw,1.4rem); max-width: 780px; margin:0 auto 1.5rem; line-height:1.35; color: var(--color-text-strong); }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.start-btn { font-size:1.15rem; padding:.9rem 1.6rem; }

.ambient-ribbon { content:""; position:absolute; inset:0; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0 14px, rgba(255,255,255,0) 14px 28px); mix-blend-mode:overlay; pointer-events:none; }

.landing-main { max-width: 1100px; margin:0 auto; padding: 2.5rem 1.5rem 4rem; display:grid; gap:3.5rem; }
.landing-main section > h2 { font-size:1.9rem; margin-bottom:.75rem; color: var(--color-heading-primary); }
.summary p, .tech p, .access p { margin-bottom:1rem; line-height:1.5; }

.features .feature-grid { list-style:none; display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); padding:0; }
.features .feature-grid li { background: var(--color-surface-1); border:2px inset var(--color-border-inset); padding:12px 14px; font-size:.95rem; line-height:1.35; box-shadow:4px 4px 0 #808080; }
.features .feature-grid li strong { display:block; font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; color: var(--color-accent-2); margin-bottom:4px; }

.screens-scroller { display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.shot { background: var(--color-surface-1); border:2px inset var(--color-border-inset); padding:10px; box-shadow:4px 4px 0 #808080; }
.shot img { width:100%; display:block; aspect-ratio: 4/3; object-fit:cover; border:2px solid #c0c0c0; background:#fff; }
.shot figcaption { margin-top:6px; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; opacity:.75; }

.changelog { background: var(--color-surface-accent); padding:1.8rem 1.4rem 2.2rem; border:4px ridge var(--color-panel-border); box-shadow: var(--shadow-panel); }
.changelog-list { display:flex; flex-direction:column; gap:12px; margin: 1.2rem 0 1.2rem; }
.change-note { font-size:.85rem; opacity:.8; }
.change-entry { background: var(--color-surface-1); border:2px inset var(--color-border-inset); box-shadow:4px 4px 0 #808080; }
.change-entry summary { cursor:pointer; padding:.75rem 1rem; list-style:none; position:relative; font-weight:bold; font-size:.95rem; display:flex; gap:.75rem; align-items:center; }
.change-entry summary::-webkit-details-marker { display:none; }
.change-entry summary:focus { outline:2px solid var(--color-accent-2); outline-offset:2px; }
.change-entry[open] summary { background: var(--color-btn-hover-bg); border-bottom:1px solid #c8c8c8; }
.change-meta { font-size:.7rem; letter-spacing:.5px; font-weight:600; color: var(--color-text-muted); text-transform:uppercase; }
.change-body { padding:.8rem 1rem 1rem; font-size:.9rem; line-height:1.4; }
.change-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.tag { background:#e0f7fa; border:1px solid #9cc; padding:2px 8px; font-size:.65rem; font-weight:700; letter-spacing:.5px; border-radius:12px; }

.quick-links { display:flex; gap:1.1rem; flex-wrap:wrap; justify-content:center; font-size:.85rem; }
.quick-links a { background: var(--color-surface-1); border:2px inset var(--color-border-inset); padding:.45rem .85rem; text-decoration:none; color: var(--color-accent-1); box-shadow:2px 2px 0 #808080; }
.quick-links a:hover { background: var(--color-btn-hover-bg); }

.landing-footer { text-align:center; padding:2rem 1rem 3rem; font-size:.8rem; opacity:.85; }

@media (prefers-reduced-motion: reduce) { .ambient-ribbon { background:none; } }
@media (max-width: 760px) {
  .landing-main { gap:2.5rem; }
  .features .feature-grid { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
  .hero-title { font-size: clamp(2.2rem,8vw,3.1rem); }
}

/* === Neocities Style Layout Additions === */
.layout-neocities .site-shell { max-width: 1420px; margin:0 auto; padding:2.2rem 1.3rem 4rem; display:grid; grid-template-columns: 260px 1fr; gap:28px; position:relative; }
@media (max-width: 980px){ .layout-neocities .site-shell { grid-template-columns: 1fr; } .site-sidebar { order:2; } }

.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:absolute; left:10px; top:10px; width:auto; height:auto; padding:.6rem 1rem; background:var(--color-surface-1); border:2px solid var(--color-accent-2); z-index:999; }

.site-sidebar { align-self:start; display:flex; flex-direction:column; gap:18px; }
.side-heading { font-size:1.1rem; margin-bottom:.4rem; color:var(--color-heading-primary); text-shadow:1px 1px 0 var(--color-surface-1); }
.side-nav { background: var(--color-surface-accent); border:4px ridge var(--color-panel-border); box-shadow: var(--shadow-panel); padding:14px 14px 16px; }
.side-links { list-style: square; margin-left:1.1rem; display:flex; flex-direction:column; gap:6px; font-size:.9rem; }
.side-links a { text-decoration:none; font-weight:600; color:var(--color-accent-1); background:var(--color-surface-1); border:2px inset var(--color-border-inset); padding:4px 6px; display:inline-block; box-shadow:2px 2px 0 #808080; }
.side-links a:hover { background:var(--color-btn-hover-bg); }
.side-box { background: var(--color-surface-1); border:4px ridge var(--color-panel-border); box-shadow: var(--shadow-panel); padding:12px 14px 14px; font-size:.8rem; line-height:1.4; }
.side-box h3 { font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; color:var(--color-accent-2); margin-bottom:6px; }
.mini-list { list-style: none; padding:0; margin:4px 0 0; display:flex; flex-direction:column; gap:4px; }
.mini-list a { font-size:.75rem; text-decoration:none; background:#e8e8e8; padding:3px 6px; border:1px solid #c0c0c0; display:inline-block; }
.mini-list a:hover { background:#f5f5f5; }
.hit-counter { font-family: 'Courier New', monospace; background:#000; color:#0f0; padding:6px 10px; font-size:.95rem; letter-spacing:2px; border:2px inset #333; text-align:center; }

.content-panels { display:flex; flex-direction:column; gap:34px; }
.panel { background: var(--color-surface-1); border:5px double var(--color-border-strong,#C0C0C0); box-shadow:6px 6px 0 #808080; padding:1.2rem 1.3rem 1.4rem; position:relative; }
.panel:before { content:""; position:absolute; inset:4px; border:1px dashed rgba(0,0,0,0.08); pointer-events:none; }
.panel > h2 { margin-top:0; font-size:1.55rem; text-decoration:underline; }
.panel-body { font-size:.95rem; line-height:1.5; }
.panel-body p { margin-bottom:1rem; }
.panel-body code { background:#222; color:#f5f5f5; padding:2px 5px; font-size:.8rem; border-radius:4px; }

/* Retro tiny text */
.tiny { font-size:.65rem; letter-spacing:.5px; opacity:.7; margin-top:.85rem; }

/* Slight color accents for extra panels */
#extras.panel { background: var(--color-surface-accent); }

/* Adjust hero overlap spacing */
.layout-neocities .landing-hero { margin-bottom:0; }
.layout-neocities .site-shell { margin-top: -2.2rem; padding-top: 0; }
.layout-neocities .site-shell:before { content:""; position:absolute; top:0; left:0; right:0; height:20px; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 8px, rgba(0,0,0,0) 8px 16px); opacity:.25; pointer-events:none; }

/* Mobile stacking adjustments */
@media (max-width:980px){
  .panel { box-shadow:4px 4px 0 #808080; }
  .panel > h2 { font-size:1.4rem; }
  .side-links { flex-direction:row; flex-wrap:wrap; margin-left:0; list-style:none; }
  .side-links li { flex:1 1 auto; min-width:120px; }
  .side-nav { padding:10px; }
}

/* === Compact Variant === */
.compact .hero-compact { padding: 2.8rem 1rem 2.2rem; }
.compact .hero-title { font-size: clamp(2.1rem,4.2vw,2.9rem); text-decoration:none; }
.compact .hero-tag.small { font-size:.95rem; opacity:.85; max-width:520px; margin-bottom:1rem; }
.compact-shell { padding:1.5rem 1rem 2.5rem; grid-template-columns: 200px 1fr; gap:20px; }
@media (max-width:900px){ .compact-shell { grid-template-columns:1fr; } .compact-sidebar { order:2; } }
.compact-panels { gap:20px; }
.panel-tight { padding: .9rem 1rem 1.05rem; box-shadow:4px 4px 0 #808080; }
.panel-tight > h2 { font-size:1.25rem; margin-bottom:.5rem; }
.mini-feature-list { list-style: square; margin: .3rem 0 0 1.1rem; padding:0; columns:2; column-gap:1.4rem; font-size:.75rem; line-height:1.3; }
@media (max-width:620px){ .mini-feature-list { columns:1; } }
.mini-feature-list li { break-inside:avoid; margin:0 0 .35rem; }
.mini-changelog { list-style:none; padding:0; margin:.2rem 0 .6rem; display:flex; flex-direction:column; gap:6px; }
.mini-changelog li { background: var(--color-surface-1); border:2px inset var(--color-border-inset); padding:6px 8px 7px; font-size:.7rem; line-height:1.25; box-shadow:2px 2px 0 #808080; display:flex; flex-direction:column; gap:2px; }
.mini-changelog .chg-head { font-weight:700; font-size:.7rem; letter-spacing:.5px; display:flex; justify-content:space-between; }
.mini-changelog .chg-ver { color:var(--color-accent-2); }
.mini-changelog .chg-date { opacity:.65; }
.mini-changelog .chg-body { font-size:.65rem; }
.mini-more { font-size:.65rem; text-decoration:none; background:var(--color-surface-1); border:2px inset var(--color-border-inset); padding:4px 6px; box-shadow:2px 2px 0 #808080; display:inline-block; }
.mini-more:hover { background:var(--color-btn-hover-bg); }
.more-link-wrap { text-align:right; }