/* PuffyWings Studio home page (/): two worlds meeting.
   The studio speaks in Instrument Sans (the name block is in studio-brand.css, load that first); each game speaks in its own lettering
   inside its own poster. PuffyWings sky on the left, Boxdini indigo on the right, the studio mark where they meet. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/boxdini/bricolage-grotesque-latin.woff") format("woff"); font-weight: 600 800; font-style: normal; font-display: swap; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body.hub {
  --studio-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ink: #1A1A2E;
  --spark: #6B4CE6;
  font-family: var(--studio-font);
  font-size: 1.0625rem;
  line-height: 1.6;
}
body.hub h1, body.hub h2, body.hub h3, body.hub .btn { font-family: var(--studio-font); }
body.hub h1 { text-wrap: balance; }

/* ---------- header nav ---------- */
body.hub .nav-links a { font-family: var(--studio-font); font-weight: 600; font-size: .98rem; color: var(--nav-ink, var(--ink)); }
body.hub .btn-nav { min-height: 42px; padding: 0 20px; font-size: .95rem; font-weight: 700; box-shadow: none; }
body.hub .btn-nav:hover { transform: translateY(-1px); box-shadow: none; }

/* ---------- eyebrow ---------- */
.hub-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 18px; }
.hub-eyebrow svg { width: 15px; height: 15px; flex: none; fill: var(--spark); }

/* ---------- the two games ---------- */
body.hub .hub-games { padding-top: 0; }
.game { position: relative; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; }
.game-art { position: relative; height: clamp(236px, 23vw, 300px); }
.game-art > * { position: absolute; }
.game-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 6px clamp(24px, 3vw, 38px) clamp(26px, 3vw, 38px); }
.game-tag { font-weight: 700; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 10px; }
.game-name { margin: 0 0 8px; line-height: 1; }
.game-name-pw {
  font-family: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; font-weight: 700; letter-spacing: 0;
  font-size: clamp(2.3rem, 1.9rem + 1.6vw, 3.1rem);
  color: #FFE566; -webkit-text-stroke: .17em #B87800; paint-order: stroke fill; text-shadow: 0 .06em 0 #8A5400;
}
.game-name-bx img { height: clamp(42px, 4.2vw, 52px); width: auto; display: block; }
.game-line { margin: 0 0 12px; font-size: 1.3rem; line-height: 1.2; }
.game-pw .game-line { font-family: "Fredoka", ui-rounded, system-ui, sans-serif; font-weight: 700; }
.game-bx .game-line { font-family: "Bricolage Grotesque", var(--studio-font); font-weight: 800; letter-spacing: -.01em; }
.game-desc { margin: 0 0 24px; max-width: 46ch; font-size: 1.04rem; line-height: 1.55; }
.game-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; min-height: 56px; }
.game-actions .btn { min-height: 52px; font-weight: 700; }
.btn-tape { --btn-bg: #FFC21A; --btn-fg: #151834; background: linear-gradient(180deg, #FFD95C 0%, #FFC21A 55%); box-shadow: 0 4px 0 #B88A00, 0 10px 22px rgba(0,0,0,.18); }
.btn-tape:hover { box-shadow: 0 6px 0 #B88A00, 0 14px 26px rgba(0,0,0,.2); }
.game-soon { font-weight: 700; color: #FFC21A; }
.game-link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.cloud { fill: #fff; }
.glint { fill: #FFC21A; }
.art-pw .art-bird { left: 50%; top: 52%; width: clamp(150px, 15vw, 196px); height: auto; translate: -50% -50%; filter: drop-shadow(0 14px 16px rgba(120, 70, 0, .22)); }
.art-bx .art-mascot { left: 50%; top: 54%; width: clamp(150px, 14.5vw, 188px); height: auto; translate: -50% -50%; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .35)); }
.art-pw .c1 { left: 7%; top: 20%; width: min(24%, 170px); opacity: .95; }
.art-pw .c2 { right: 6%; top: 11%; width: min(30%, 210px); opacity: .9; }
.art-pw .c3 { right: 14%; bottom: 14%; width: min(19%, 140px); opacity: .85; }
.art-pw .c4 { left: 12%; bottom: 10%; width: min(16%, 120px); opacity: .8; }
.art-pw .g1 { left: 28%; top: 14%; width: 18px; }
.art-pw .g2 { right: 25%; bottom: 24%; width: 13px; }
.art-bx .g1 { left: 24%; top: 20%; width: 24px; }
.art-bx .g2 { right: 22%; top: 16%; width: 17px; fill: #9A86FF; }
.art-bx .g3 { right: 30%; bottom: 20%; width: 13px; fill: #FFF4DC; opacity: .8; }

/* ---------- footer ---------- */
body.hub .site-footer .tag { max-width: 34ch; }
body.hub .site-footer .footer-h { font-family: var(--studio-font); font-weight: 700; }

/* ---------- small screens ---------- */
@media (max-width: 1099px) {
  .game-art { height: 250px; }
}

/* focus ring that shows on dark game art */
.game-bx :focus-visible { outline-color: #FFC21A; }

/* ---------- layout and colors: the two worlds ---------- */
body.hub { --nav-ink: #1A1A2E; --spark: #6B4CE6; background: #F7F3EA; color: #1A1A2E; }
body.hub .site-header.is-stuck { background: rgba(247, 243, 234, .88); box-shadow: 0 1px 0 rgba(26, 26, 46, .08); }
body.hub .nav-links a:hover { background: rgba(26, 26, 46, .07); }
body.hub .btn-nav { --btn-bg: #1A1A2E; --btn-fg: #FFF8E8; background: #1A1A2E; color: #FFF8E8; }

body.hub .hub-hero { padding: calc(var(--header-h) + clamp(48px, 6.5vw, 88px)) 0 clamp(112px, 11vw, 160px); text-align: center; background: linear-gradient(90deg, #D2EBF9 0%, #FFF3D6 50%, #E0DAF6 100%); }
body.hub .hub-hero .hub-eyebrow { color: #5E5A78; }
body.hub .hub-hero h1 { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5.2rem); line-height: 1.02; letter-spacing: -.036em; font-weight: 700; margin: 0 auto 20px; }
body.hub .hub-lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.55; color: #4F4C66; max-width: 42ch; margin: 0 auto; }

body.hub .diptych { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
body.hub .game { border-radius: 0; min-height: 640px; }
body.hub .game-body { width: 100%; max-width: 560px; margin-inline: auto; }
body.hub .game-pw { color: #1A1A2E; background: linear-gradient(180deg, #5DB6EE 0%, #86CDF3 24%, #BFE4F7 46%, #FFF0C8 70%, #FFDC94 100%); }
body.hub .game-pw .game-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 54%, rgba(255, 228, 156, .8), rgba(255, 228, 156, 0) 70%); }
body.hub .game-pw .game-tag { color: #7A4A00; }
body.hub .game-pw .game-line { color: #412402; }
body.hub .game-pw .game-desc { color: #3A3850; }
body.hub .game-pw .btn-sun { box-shadow: 0 4px 0 #C98F00, 0 10px 20px rgba(120, 80, 0, .16); }
body.hub .game-bx { color: #FFF4DC; background: linear-gradient(180deg, #2D3373 0%, #1F2347 44%, #151834 100%); }
body.hub .game-bx .game-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(54% 52% at 50% 52%, rgba(115, 87, 242, .55), rgba(115, 87, 242, .14) 58%, rgba(115, 87, 242, 0) 76%); }
body.hub .game-bx .game-tag { color: #FFC21A; }
body.hub .game-bx .game-line { color: #FFF4DC; }
body.hub .game-bx .game-desc { color: rgba(255, 244, 220, .8); }

/* the studio mark sits where the two worlds meet */
body.hub .hinge { position: absolute; left: 33.3333%; top: 150px; z-index: 5; width: 0; height: 0; }
body.hub .hinge-2 { left: 66.6667%; }
body.hub .hinge-disc { position: absolute; left: 0; top: 0; translate: -50% -50%; width: clamp(104px, 8.4vw, 132px); aspect-ratio: 1; border-radius: 50%; background: #FFF8E8; display: grid; place-items: center; box-shadow: 0 0 0 clamp(6px, .6vw, 8px) rgba(255, 248, 232, .92), 0 22px 44px rgba(26, 26, 46, .34); }
body.hub .hinge::before { content: ""; position: absolute; left: 0; top: 0; translate: -50% -50%; width: 380px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 128, .5), rgba(255, 196, 96, .14) 56%, rgba(255, 196, 96, 0)); pointer-events: none; }
/* keep the clouds off the seam */
body.hub .art-pw .c2 { right: auto; left: 54%; top: 7%; width: min(20%, 150px); }
body.hub .art-pw .c3 { display: none; }
body.hub .hinge-disc img { width: 88%; height: auto; display: block; }

body.hub .site-footer { background: #120C2E; }
/* five columns now (studio name, three games, studio): give the studio name enough room so it never touches the first column */
@media (min-width: 1081px) { body.hub .footer-grid { grid-template-columns: 1.9fr repeat(4, 1fr); } }

@media (max-width: 1099px) {
  body.hub .diptych { display: flex; flex-direction: column; }
  body.hub .game { min-height: 0; }
  body.hub .game-body { padding-left: clamp(24px, 6vw, 72px); padding-right: clamp(24px, 6vw, 72px); }
  body.hub .hinge { position: relative; left: auto; top: auto; order: 1; width: 100%; height: 0; }
  body.hub .hinge-2 { left: auto; order: 3; }
  body.hub .hinge-disc { left: 50%; width: clamp(112px, 22vw, 132px); }
  body.hub .game-pw { order: 0; }
  body.hub .game-bx { order: 2; }
  body.hub .game-af { order: 4; }
  body.hub .game-bx .game-art { padding-top: 40px; height: 290px; }
  body.hub .game-pw .game-body, body.hub .game-bx .game-body { padding-bottom: 92px; }
  body.hub .hinge::before { width: 380px; }
  body.hub .art-pw .c2 { right: 6%; left: auto; top: 11%; width: min(30%, 210px); }
  body.hub .art-pw .c3 { display: block; }
  body.hub .game-af .game-art { padding-top: 24px; }
}

/* ---------- Aerofield: calm paper, ink and one orange, flat ---------- */
.game-name-af { font-family: "Avenir Next Condensed", "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif; font-weight: 800; letter-spacing: .005em; font-size: clamp(2.7rem, 2.1rem + 1.6vw, 3.4rem); color: #22303B; }
.game-af .game-line { font-family: "Avenir Next Condensed", "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif; font-weight: 700; color: #A85208; }
body.hub .game-af { color: #22303B; background: linear-gradient(180deg, #CFE1EE 0%, #E3EBEE 26%, #F4F1E7 50%, #DCE5CF 80%, #C9D8BA 100%); }
body.hub .game-af .game-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(56% 52% at 50% 52%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 72%); }
body.hub .game-af .game-tag { color: #4E5C67; }
body.hub .game-af .game-desc { color: #3A4852; }
body.hub .game-af .game-soon { color: #A85208; }
.btn-af { --btn-bg: #F2A33A; --btn-fg: #22303B; background: #F2A33A; color: #22303B; box-shadow: 0 4px 0 #B87413, 0 10px 22px rgba(34, 48, 59, .14); }
.btn-af:hover { color: #22303B; box-shadow: 0 6px 0 #B87413, 0 14px 26px rgba(34, 48, 59, .16); }
.game-af :focus-visible { outline-color: #CE6C0B; }
.art-af .art-icon { left: 50%; top: 52%; width: clamp(120px, 12vw, 156px); height: auto; translate: -50% -50%; border-radius: 23%; box-shadow: 0 14px 18px rgba(34, 48, 59, .18); }
.art-af .af-trail { left: 0; top: 0; width: 100%; height: 100%; }
.art-af .af-craft { height: auto; filter: drop-shadow(0 6px 6px rgba(34, 48, 59, .16)); }
.art-af .af-c1 { left: 10%; top: 12%; width: clamp(44px, 4.6vw, 62px); rotate: 38deg; }
.art-af .af-c2 { right: 11%; top: 14%; width: clamp(42px, 4.4vw, 58px); rotate: -14deg; }
.art-af .af-c3 { right: 17%; bottom: 10%; width: clamp(40px, 4.2vw, 56px); rotate: 24deg; }