#fringe-guide,[data-fringe-reopen]{display:none}
@media(min-width:0px){
  .fringe-preview-active .hero-home{min-height:720px;padding:42px 0 180px;isolation:isolate;border-bottom:0;box-shadow:none;overflow:clip}
  .fringe-preview-active .hero-home-grid{display:block;pointer-events:none}
  .fringe-preview-active .hero-home-copy{width:48%;max-width:560px;pointer-events:auto}
  .fringe-preview-active .hero-wordmark{max-width:245px;margin-bottom:12px}
  .fringe-preview-active .hero-home h1{font-size:clamp(38px,4.3vw,57px)}
  .fringe-preview-active .hero-home .lede{font-size:16px;line-height:1.5;max-width:490px;margin-bottom:18px}
  .fringe-preview-active .hero-fringe-guide{display:none}
  .fringe-preview-active .hero-home::before{background:linear-gradient(90deg,#100c08e8,#100c08a6 42%,#100c0820 75%)}
  #fringe-guide{display:block;padding:0;position:absolute;inset:0;z-index:3;pointer-events:none}
  #fringe-guide[hidden],#fringe-guide [hidden]{display:none!important}
  #fringe-guide::after{display:none}
  .fringe-character{position:absolute;width:min(94vw,1180px);max-width:none;height:auto;right:0;bottom:44px;pointer-events:none}
  #fringe-guide video{opacity:0}
  #fringe-guide.is-playing video{opacity:1}
  #fringe-guide.is-playing #fringe-poster{opacity:0}
  .fringe-controls{position:absolute;inset:auto 0 0;display:flex;align-items:center;gap:8px;padding:5px 18px;min-height:44px;box-sizing:border-box;background:#21190f;z-index:4;pointer-events:auto}
  #fringe-guide button,[data-fringe-reopen]{font:600 13px/1.2 Inter,Arial,sans-serif;border:1px solid #e0bd86;border-radius:5px;padding:10px 14px;background:#1d1710e8;color:#fff7e5;cursor:pointer;min-height:40px}
  #fringe-guide button:hover,[data-fringe-reopen]:hover{background:#5d3f26}
  #fringe-guide button:focus-visible,[data-fringe-reopen]:focus-visible{outline:3px solid #ffda92;outline-offset:4px}
  .fringe-invite{position:absolute;bottom:96px;left:max(22px,calc((100% - 1076px)/2));width:43%;pointer-events:auto}
  #fringe-start{background:#e5b765!important;color:#20170d!important;border-color:#e5b765!important;font-size:16px!important;padding:13px 22px!important}
  .fringe-invite p{font:500 15px/1.45 Inter,Arial,sans-serif;color:#fff5de;margin:10px 0 0;max-width:420px;text-shadow:0 2px 4px #000}
  .fringe-caption{min-height:44px}
  .fringe-choosing .hero-home-copy{visibility:hidden;pointer-events:none}
  .fringe-choosing .fringe-invite{top:130px;bottom:auto;width:42%;max-width:460px}
  #fringe-choices h2,#fringe-answer h2{font:700 clamp(25px,2.5vw,36px)/1.15 Inter,Arial,sans-serif;color:#fff5de;margin:18px 0;text-shadow:0 2px 4px #000}
  .fringe-choice-buttons{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  #fringe-guide .fringe-choice-buttons button{font-size:17px;padding:15px 20px;min-width:220px;text-align:left;background:#21190ff2}
  .fringe-next{display:block;width:fit-content;margin:22px 0 14px;padding:13px 18px;background:#e5b765;color:#20170d;border-radius:5px;font-weight:700;text-decoration:none}
  .fringe-next:hover{background:#ffda92;color:#20170d}
  .fringe-next:focus-visible{outline:3px solid #fff;outline-offset:4px}
  [data-fringe-reopen]:not([hidden]){display:block;position:fixed;right:20px;bottom:20px;z-index:60;border-radius:30px}
  @media(max-width:1000px){
    .fringe-preview-active .hero-home{min-height:730px;padding-top:42px}
    .fringe-preview-active .hero-home-copy{width:51%}
    .fringe-preview-active .hero-wordmark{max-width:215px}
    .fringe-preview-active .hero-home .lede{font-size:14px}
    .fringe-preview-active .hero-home h1{font-size:39px}
    .fringe-preview-active .hero-actions{gap:8px}
    .fringe-preview-active .hero-actions .btn{font-size:13px;padding:11px 14px}
    .fringe-character{bottom:44px;width:100vw;right:0}
    .fringe-invite{width:45%;bottom:86px;left:22px}
  }
}
@media(min-width:0px){
 #fringe-guide .fringe-controls{flex-wrap:wrap;justify-content:flex-end;max-width:none}
 #fringe-guide .fringe-menu-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:370px;overflow:auto;padding:4px}
 #fringe-guide .fringe-menu-buttons button{text-align:left;font-size:13px}
 #fringe-guide .fringe-links{display:flex;flex-wrap:wrap;gap:10px}
 #fringe-guide .fringe-links .fringe-next{margin:14px 0}
 #fringe-guide #fringe-back{margin-left:8px}
 /* Compact top ledge keeps the section below visible, matching Atlas. */
 #fringe-guide.fringe-docked{position:fixed;inset:0 0 auto;width:100%;height:230px;max-height:none;z-index:70;background:#21190ff5;border-radius:0;border-bottom:9px solid #bda37e;overflow:hidden;box-shadow:0 3px 18px #0005;backdrop-filter:blur(12px)}
 #fringe-guide.fringe-docked .fringe-character{width:420px;right:20px;bottom:44px;max-height:calc(100% - 44px);object-fit:contain;object-position:right bottom}
 #fringe-guide.fringe-docked .fringe-controls{inset:auto 0 0;gap:6px;justify-content:flex-start}
 #fringe-guide.fringe-docked .fringe-controls button{font-size:12px;padding:7px 11px;min-height:34px}
 #fringe-guide.fringe-docked .fringe-invite{top:12px;bottom:55px;left:24px;width:calc(100% - 475px);max-width:none;overflow:auto;overscroll-behavior:contain;padding-right:6px}
 #fringe-guide.fringe-docked .fringe-caption{font-size:14px;line-height:1.35;min-height:0;margin:4px 0;max-width:none}
 #fringe-guide.fringe-docked h2{font-size:23px;margin:8px 0 5px}
 #fringe-guide.fringe-docked .fringe-next{font-size:13px;padding:9px;margin:8px 0}
 #fringe-guide.fringe-docked #fringe-answer>p:empty{display:none}
 #fringe-guide.fringe-docked .fringe-links{display:inline-flex;vertical-align:middle;margin-right:8px}
 #fringe-guide.fringe-docked #fringe-back{font-size:12px;padding:8px;margin:0}
 #fringe-guide.fringe-docked .fringe-menu-buttons{max-height:none;grid-template-columns:1fr 1fr}
 .fringe-tour-active [id]{scroll-margin-top:250px}
 nav a.fringe-highlight{outline:3px solid #ffd981;outline-offset:5px;box-shadow:0 0 20px #ffd981aa}
 @media(max-width:1000px){#fringe-guide.fringe-docked{height:280px}#fringe-guide.fringe-docked .fringe-character{width:350px;right:0}#fringe-guide.fringe-docked .fringe-invite{width:calc(100% - 365px)}.fringe-tour-active [id]{scroll-margin-top:300px}}
}

/* The phone guide occupies the top third; the page scrolls beneath it. */
@media(max-width:767px){
 :root{--fringe-phone-height:33.333svh}
 body.fringe-preview-active{padding-top:var(--fringe-phone-height)}
 body.fringe-preview-active [id]{scroll-margin-top:calc(var(--fringe-phone-height) + 16px)}
 .fringe-preview-active header{position:relative;top:auto}
 .fringe-preview-active .hero-home{height:0;min-height:0;padding:0;border:0;overflow:visible;isolation:auto}
 .fringe-preview-active .hero-home-grid{display:none}
 #fringe-guide,#fringe-guide.fringe-docked{position:fixed;inset:0 0 auto;width:100%;height:var(--fringe-phone-height);box-sizing:border-box;border:0;border-radius:0;z-index:100;overflow:hidden;background:linear-gradient(90deg,#21190ff5 5%,#21190f99 60%,#21190f20),url('/images/hero-glamis-home.webp') 65% center/cover;box-shadow:0 3px 12px #0005;backdrop-filter:none}
 #fringe-guide .fringe-character,#fringe-guide.fringe-docked .fringe-character{width:auto;max-width:85vw;right:0;bottom:109px;height:calc(100% - 109px);object-fit:contain;object-position:right bottom}
 #fringe-guide .fringe-controls,#fringe-guide.fringe-docked .fringe-controls{inset:auto 0 55px;max-width:none;display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:4px;padding:5px 8px;min-height:53px;box-sizing:border-box;background:#21190ff5;z-index:4}
 #fringe-guide .fringe-controls button,#fringe-guide.fringe-docked .fringe-controls button{font-size:11px;padding:6px 8px;min-height:44px;white-space:nowrap}
 #fringe-guide .fringe-invite,#fringe-guide.fringe-docked .fringe-invite{position:static;display:contents;width:auto;max-width:none;padding:0;overflow:visible}
 #fringe-guide h2,#fringe-guide.fringe-docked h2{position:absolute;left:14px;top:8px;width:46%;font-size:17px;line-height:1.1;margin:0;color:#fff5de;z-index:3}
 #fringe-guide .fringe-caption,#fringe-guide.fringe-docked .fringe-caption{position:absolute;left:14px;top:54px;bottom:125px;width:46%;min-height:0;font:13px/1.35 Arial,sans-serif;margin:0;overflow:auto;scrollbar-width:none;pointer-events:auto;z-index:3}
 #fringe-guide .fringe-choice-buttons,#fringe-guide #fringe-answer{position:absolute;inset:auto 0 0;height:55px;padding:5px 8px;box-sizing:border-box;display:flex;align-items:center;gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;background:#21190f;z-index:5;pointer-events:auto}
 #fringe-guide .fringe-choice-buttons{flex-direction:row}
 #fringe-guide .fringe-choice-buttons button{flex:1;min-width:0;min-height:44px;padding:6px 5px;font-size:12px;text-align:center;white-space:normal}
 #fringe-guide #fringe-answer{overflow:visible}
 #fringe-guide #fringe-answer h2{top:calc(8px - var(--fringe-phone-height) + 55px);white-space:normal}
 #fringe-guide #fringe-answer>p{display:none}
 #fringe-guide .fringe-links,#fringe-guide.fringe-docked .fringe-links{display:flex;flex-wrap:nowrap;gap:5px;margin:0;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
 #fringe-guide .fringe-links .fringe-next,#fringe-guide.fringe-docked .fringe-next{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;font-size:12px;line-height:1.2;margin:0;padding:8px}
 #fringe-guide #fringe-explore,#fringe-guide #fringe-back{min-height:44px;padding:7px;font-size:11px;margin:0;white-space:normal;flex-shrink:0;max-width:85px}
 #fringe-guide[data-panel=menu] .fringe-caption,#fringe-guide #fringe-scene-menu h2{display:none}
 #fringe-guide .fringe-menu-buttons,#fringe-guide.fringe-docked .fringe-menu-buttons{position:absolute;inset:8px 8px 110px;max-height:none;overflow:auto;grid-template-columns:1fr 1fr;gap:6px;background:#21190ff2;z-index:5;pointer-events:auto}
 #fringe-guide .fringe-menu-buttons button{min-height:44px;font-size:12px}
 [data-fringe-reopen]:not([hidden]){min-height:44px;z-index:101}
}
@media(max-width:767px) and (max-height:650px){
 #fringe-guide h2,#fringe-guide.fringe-docked h2{font-size:15px;top:8px}
 #fringe-guide #fringe-answer h2{top:calc(8px - var(--fringe-phone-height) + 55px)}
 #fringe-guide .fringe-caption,#fringe-guide.fringe-docked .fringe-caption{top:46px;bottom:118px;font-size:12px}
 #fringe-guide .fringe-character,#fringe-guide.fringe-docked .fringe-character{max-width:80vw;right:0}
}

/* Hands-free tour controls remain separate from the character and page links. */
#fringe-guide .fringe-auto-controls{display:flex;align-items:center;gap:6px;color:#fff7e5;font:600 12px/1.2 Inter,Arial,sans-serif}
#fringe-guide.fringe-auto-tour #fringe-replay,#fringe-guide.fringe-auto-tour #fringe-pause,#fringe-guide.fringe-auto-tour #fringe-menu,#fringe-guide.fringe-auto-tour #fringe-back{display:none!important}
#fringe-guide .fringe-auto-controls [role=status]{min-width:36px;text-align:center}
#fringe-guide .fringe-links button{margin:8px 0}
@media(max-width:767px){
 #fringe-guide.fringe-auto-tour .fringe-controls{justify-content:center;gap:3px;padding:5px 4px}
 #fringe-guide.fringe-auto-tour .fringe-controls button{font-size:10px;padding:5px;min-height:44px}
 #fringe-guide .fringe-auto-controls{gap:3px;font-size:10px}
 #fringe-guide .fringe-auto-controls [role=status]{min-width:30px}
 #fringe-guide .fringe-links button{flex-shrink:0;font-size:12px;min-height:44px;margin:0;padding:6px 8px}
}