:root{
  /* —— TV/FAQ mapping —— */
  --term-green:#32de84;
  --screen-left:13.2%;
  --screen-top-vh:15.8;
  --screen-width:50.6%;
  --screen-height:68.4%;
  --glow-speed:.85s;

  /* —— tiny FAQ toolbar —— */
  --faq-toolbar-h:24px;

  /* —— CONTACT parchment —— */
  --paper-min:320px; --paper-width:92vw; --paper-max:840px; --paper-scale:1.5;
  --paper-viewport-margin:24px;
  --paper-nudge-vh:-4;

  --paper-pad-top:13%;
  --paper-pad-right:20%;
  --paper-pad-bottom:24%;
  --paper-pad-left:20%;

  --paper-title-size:clamp(28px,1.1rem + 1.4vw,40px);
  --paper-body-size: clamp(18px,0.95rem + 0.45vw,22px);
}

/* ====== base layout ====== */
body{font-family:'Inter',sans-serif;background:#000;overflow:hidden;color:#fff}
.page-view{position:absolute;inset:0;transition:opacity .5s,visibility .5s}
.hidden-view{opacity:0;visibility:hidden}
.scroll-container{scroll-snap-type:y mandatory;overflow-y:scroll;height:100dvh;-webkit-overflow-scrolling:touch}
.scroll-section{scroll-snap-align:start;scroll-snap-stop:always;min-height:100vh;position:relative}

.font-fantasy-terminal{font-family:'VT323',monospace}
@keyframes blink{50%{opacity:0}}
.blinking-cursor{animation:blink 1s step-end infinite}

/* CRT look */
.crt-effect{position:relative;overflow:hidden}
.crt-effect::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) 1px,transparent 1px,transparent 2px)
}
@keyframes text-flicker{0%,100%{text-shadow:0 0 1px var(--term-green),0 0 2px var(--term-green)}50%{text-shadow:0 0 2px var(--term-green),0 0 4px var(--term-green)}}
.text-flicker-effect{animation:text-flicker 2s infinite}

/* TV glow */
#screen-glow{
  position:absolute;z-index:5;pointer-events:none;mix-blend-mode:screen;
  left:var(--screen-left);top:calc(var(--screen-top-vh)*1vh);
  width:var(--screen-width);height:var(--screen-height);
  background:radial-gradient(ellipse at center,
    rgba(50,222,132,.28) 0%, rgba(50,222,132,.16) 50%, rgba(50,222,132,.07) 70%, transparent 85%);
  filter:blur(26px) saturate(115%);transform:scale(2.35);opacity:.55;
  animation:glowPulse var(--glow-speed) ease-in-out infinite;
}
@keyframes glowPulse{0%{opacity:.42}50%{opacity:.86}100%{opacity:.42}}

/* Contact parchment aligned to TV band */
.paper-anchor{
  position:absolute;
  top:calc((var(--screen-top-vh)+var(--paper-nudge-vh))*1vh);
  left:50%; transform:translateX(-50%);
  width:100%; display:grid; place-items:center; pointer-events:none; z-index:20;
}
.paper-stage{position:relative;display:grid;place-items:center;padding:0!important}
.paper-vignette{position:absolute;z-index:10;pointer-events:none;width:clamp(520px,64vw,1100px);height:clamp(420px,56vh,720px);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.60) 0%,rgba(0,0,0,.40) 38%,rgba(0,0,0,.18) 60%,transparent 78%);filter:blur(10px)}
.paper-anchor .paper-wrap{pointer-events:auto}
.paper-wrap{position:relative;--paper-w:clamp(var(--paper-min),var(--paper-width),var(--paper-max));
  width:min(calc(100vw - var(--paper-viewport-margin)),calc(var(--paper-w)*var(--paper-scale)));
  max-width:100vw;margin-inline:auto;z-index:20;transform-origin:center top}
.paper-img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 40px rgba(0,0,0,.75)) drop-shadow(0 0 24px rgba(0,0,0,.45))}
.paper-inner{
  position:absolute;inset:0;
  padding:var(--paper-pad-top) var(--paper-pad-right) var(--paper-pad-bottom) var(--paper-pad-left);
  display:flex;flex-direction:column;gap:.6rem;align-items:center;text-align:center;
}
.paper-content{width:min(72ch,100%);margin:0 auto}
.paper-title{font-family:"Caveat",cursive;font-size:var(--paper-title-size);color:#1a1207}
.paper-body{font-family:"EB Garamond",serif;font-size:var(--paper-body-size);line-height:1.52;color:#141008;font-weight:600;
  text-shadow:0 .5px 0 #f6e6c2,0 1px 0 rgba(0,0,0,.05),0 0 1px rgba(0,0,0,.15)}
.paper-list{margin:.25rem 0 0;padding-left:1.2em}
.paper-list li{margin:.2em 0}
.paper-link{color:#0f5132;font-weight:700;text-underline-offset:2px;text-decoration-thickness:2px;text-decoration:underline;background:linear-gradient(transparent 68%,rgba(15,81,50,.22) 68%)}
.paper-link:hover{color:#083a22;background:linear-gradient(transparent 68%,rgba(15,81,50,.32) 68%)}

/* Magic trail canvas */
#magic-trail-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}

/* FAQ toolbar */
#faq-terminal-wrapper .faq-toolbar{
  position:absolute;inset:0 0 auto 0;height:var(--faq-toolbar-h);
  display:flex;justify-content:flex-end;align-items:center;padding:2px 8px;z-index:3;pointer-events:auto;
}
#faq-terminal-wrapper .faq-surface{position:absolute;top:var(--faq-toolbar-h);left:0;right:0;bottom:0;padding:.5rem;display:flex;flex-direction:column;z-index:2}

/* Global SFX Toggle Styles */
.faq-sfx-toggle, .ww-sfx-toggle {
    font-family:'VT323',monospace;
    font-size: 12px;
    line-height: 1;
    background: rgba(0,0,0,.6);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 9999px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: opacity .2s, transform .08s, background-color .2s;
    white-space: nowrap;
}
.faq-sfx-toggle { color: var(--term-green); border-color: rgba(50, 222, 132, 0.4); }
.ww-sfx-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.faq-sfx-toggle:hover, .ww-sfx-toggle:hover { background: rgba(255,255,255,.1); }
.faq-sfx-toggle:active, .ww-sfx-toggle:active { transform: translateY(1px); }
.faq-sfx-toggle[aria-pressed="true"], .ww-sfx-toggle[aria-pressed="true"] { opacity: .6; }
.faq-sfx-toggle:focus-visible { outline: 2px solid rgba(50, 222, 132, 0.6); outline-offset: 2px; }
.ww-sfx-toggle:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }

/* Compact floors */
body.compact{
  --paper-scale: 1.24;
  --paper-title-size: clamp(22px, 0.9rem + 0.9vw, 30px);
  --paper-body-size:  clamp(15px, 0.85rem + 0.30vw, 18px);
  --paper-pad-bottom: 30%;
}
body.compact .scroll-container{ scroll-snap-type: y mandatory; }
body.compact .paper-anchor{
  position: static; transform: none; pointer-events:auto;
  margin-top: calc(var(--screen-top-vh)*1vh - 2vh);
}

/* Tiny-window hard floor */
#too-small{
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.88); color: #fff; text-align: center; padding: 24px;
  font: 600 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
}
#too-small .box{
  max-width: 520px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15); border-radius: 14px;
  padding: 20px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
body.too-small #too-small{ display:flex; }

/* ====== NEW: Wonderworks Grid & Cards ====== */
a.project-card {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
a.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}
.project-card-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
a.project-card:hover .project-card-thumbnail {
    transform: scale(1.05);
}
.project-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
}
.project-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
}