/* Home "Go this way" screen: the GO திசை wordmark big and centred, everything else follows it. Moving the
   cursor leaves fading breadcrumbs across the whole page (js/landing-go.js). Colours come from the site tokens in base.css. */
.go { position: relative; display: grid; place-items: center; text-align: center; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(32px, 7vh, 80px) clamp(20px, 4vw, 56px) 24px; box-sizing: border-box; }
.go-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 1100px; }
.go-stub { display: inline-block; margin: 0; padding: .45rem 1rem; border: 1.5px dashed var(--fg); border-radius: 6px; background: var(--bg);
  font: 700 .82rem/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.go h1 { margin: clamp(.6rem, 2vh, 1.2rem) 0 clamp(.4rem, 1.4vh, .8rem); display: flex; flex-direction: column; align-items: center; gap: .1em; color: var(--fg); }
.go-word { font: 800 clamp(4.5rem, min(17vw, 20vh), 13.5rem)/.9 var(--display); letter-spacing: -.03em; }
.go-word b { color: var(--accent); font-weight: 800; }
.go-sub { font: 800 clamp(1.8rem, min(4.6vw, 6vh), 3.6rem)/1 var(--display); letter-spacing: -.02em; }
.go-sub i { font-style: normal; color: var(--accent); }
.go-lede { margin: .4rem 0 clamp(1rem, 3vh, 2rem); max-width: 44rem; font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.55; color: var(--muted); }

.go-actions { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.go-ticket { display: inline-flex; text-decoration: none; color: var(--accent-fg); filter: drop-shadow(4px 4px 0 var(--fg)); transition: transform .12s, filter .12s; }
.go-ticket:hover { transform: translate(2px, 2px); filter: drop-shadow(2px 2px 0 var(--fg)); }
.go-ticket-main { display: flex; flex-direction: column; align-items: flex-start; padding: 1rem 1.9rem; background: var(--accent); border: 2px solid var(--fg); border-right: 0;
  border-radius: 14px 0 0 14px; font: 800 1.6rem/1.1 var(--display); }
.go-ticket-main small { font: 700 .66rem/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-bottom: .3rem; }
.go-ticket-stub { display: grid; place-items: center; width: 4.2rem; background: var(--fg); color: var(--bg); border: 2px solid var(--fg); border-radius: 0 14px 14px 0; font-size: 1.7rem; position: relative; }
.go-ticket-stub::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; border-left: 2px dashed var(--bg); }
.go-alt { font-size: .98rem; font-weight: 600; }

/* Four wooden direction boards on posts. Hovering one swings it and pins a note above it saying what the track is. */
.go-signs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2.2rem; margin: clamp(1rem, 3vh, 2rem) 0 0; }
.sign { --wood-1: #d5833f; --wood-2: #b5602b; --wood-3: #8d4520; --edge: #5e2a12;
  position: relative; display: flex; flex-direction: column; align-items: center; width: 170px; height: 124px; text-decoration: none; }
.sign-post { position: absolute; left: 50%; top: 6px; bottom: 0; width: 16px; margin-left: -8px; border-radius: 3px 3px 2px 2px;
  background: var(--wood-2); box-shadow: inset 4px 0 0 var(--wood-3), inset -4px 0 0 var(--wood-3), inset 0 -6px 0 rgba(0, 0, 0, .12); }
.sign-post::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -4px; height: 8px; border-radius: 50%; background: rgba(23, 22, 26, .16); }
.sign-wrap { position: relative; z-index: 1; margin-top: 18px; filter: drop-shadow(0 4px 0 var(--edge)) drop-shadow(0 8px 10px rgba(23, 22, 26, .18));
  transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 20%; transition: transform .25s ease; }
.sign-board { display: block; min-width: 150px; padding: .75rem 2.3rem .75rem 1.3rem; box-sizing: border-box;
  clip-path: polygon(0 4%, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 2% 96%);
  background:
    radial-gradient(circle at 50% 22%, #f1f1f1 0 2.6px, #7d7d7d 3.2px, transparent 4px),
    radial-gradient(circle at 50% 80%, #f1f1f1 0 2.6px, #7d7d7d 3.2px, transparent 4px),
    linear-gradient(transparent 49%, rgba(94, 42, 18, .55) 49% 52%, transparent 52%),
    repeating-linear-gradient(176deg, transparent 0 9px, rgba(94, 42, 18, .14) 9px 10px, transparent 10px 17px),
    var(--wood-1);
  font: 800 1.55rem/1.1 var(--display); color: #fff7ea; text-shadow: 0 2px 0 var(--edge); text-align: left; letter-spacing: .01em; }
.sign.left .sign-board { padding: .75rem 1.3rem .75rem 2.3rem; text-align: right;
  clip-path: polygon(26px 0, 98% 4%, 100% 96%, 26px 100%, 0 50%); }
.sign:nth-child(2) { --wood-1: #c9823f; --wood-2: #a85a2a; }
.sign:nth-child(3) { --wood-1: #d98f4b; --wood-2: #bb6a33; }
.sign:nth-child(4) { --wood-1: #c7763a; --wood-2: #a4552a; }
.sign:hover .sign-wrap, .sign:focus-visible .sign-wrap { animation: swing .9s ease-out; }
@keyframes swing { 0% { transform: rotate(var(--tilt)); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(9deg); } 75% { transform: rotate(-4deg); } 100% { transform: rotate(0deg); } }
.sign:hover .sign-wrap, .sign:focus-visible .sign-wrap { transform: rotate(0deg); }
.sign-note { position: absolute; z-index: 3; bottom: calc(100% - 4px); left: 50%; width: 220px; padding: .8rem .9rem .7rem; box-sizing: border-box;
  background: #fffbe8; color: var(--fg); border: 1px solid #eadfae; border-radius: 4px; box-shadow: 0 10px 24px rgba(23, 22, 26, .16);
  font: 500 .86rem/1.4 Inter, system-ui, sans-serif; text-align: left; transform: translate(-50%, 8px) rotate(-2deg) scale(.92); opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .22s ease; }
.sign-note::before { content: ""; position: absolute; top: -9px; left: 50%; width: 60px; height: 16px; margin-left: -30px; background: rgba(147, 197, 253, .7); transform: rotate(-3deg); }
.sign-note b { display: block; margin-bottom: .2rem; font: 800 1.05rem/1.2 var(--display); }
.sign-note i { display: block; margin-top: .4rem; font-style: normal; font-weight: 700; color: var(--accent); }
.sign:hover .sign-note, .sign:focus-visible .sign-note { opacity: 1; transform: translate(-50%, 0) rotate(-2deg) scale(1); }
.sign:focus-visible { outline: none; }
.sign:focus-visible .sign-board { outline: 3px solid #2f7bff; }
.go-ticket:focus-visible { outline: 3px solid #2f7bff; outline-offset: 3px; }
.go-fine { margin: clamp(.8rem, 2.2vh, 1.6rem) 0 0; font-size: .95rem; color: var(--muted); }

@media (max-width: 640px) {
  .go-signs { gap: .2rem .8rem; } .sign { width: 140px; height: 100px; } .sign-board { min-width: 120px; font-size: 1.2rem; } .sign-note { display: none; }
  .go-ticket-main { font-size: 1.3rem; padding: .8rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .go-ticket, .sign-wrap, .sign-note { transition: none; } .sign:hover .sign-wrap, .sign:focus-visible .sign-wrap { animation: none; } }