/* Bobbin's Harbor site (lane bobbin-site-v2, 10/9/2026). Art is Illustrator plates + sprites; this file only places and styles them.
   Fonts are local files; no font service, no third-party anything. Positions per layout live in stage.css (generated). */
@font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
:root { --navy: #1E3A5F; --night: #163049; --foam: #FFF6EA; --teal: #2A9C8C; --gold: #F2C23A; --paper: #F6ECD9; --body: #1C3553; --subtle: #5A6E86; --drift: #C9A46B; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--body); background: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--navy); color: var(--foam); font: 600 18px 'Fredoka', sans-serif; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- kid pages: the harbor stage */
body.kid { min-height: 100vh; overflow-x: hidden; font-family: 'Fredoka', 'Trebuchet MS', sans-serif; touch-action: manipulation; -webkit-user-select: none; user-select: none; background: #EAD9B8; }
body.kid { display: flex; flex-direction: column; }
.harbor { position: relative; width: 100%; margin: auto 0; }
.stage { position: relative; margin: 0 auto; overflow: hidden; isolation: isolate; }
.stage.wide { width: min(100vw, calc(100vh * 1.6)); width: min(100vw, calc(100dvh * 1.6)); }
.stage.tall { width: 100vw; display: none; }
@media (max-aspect-ratio: 4/5) { .stage.wide { display: none; } .stage.tall { display: block; } }
.bleed { position: fixed; inset: -60px; z-index: -2; background-size: cover; background-position: center bottom; filter: blur(30px) saturate(.9); }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.grain { position: absolute; inset: 0; z-index: 40; pointer-events: none; background: url('../img/grain.png') center / cover; mix-blend-mode: soft-light; opacity: .3; }
.sp { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.sp img { display: block; width: 100%; height: 100%; pointer-events: none; transition: transform .22s cubic-bezier(.34,1.56,.64,1), filter .2s ease; }
span.sp, h1.sp { pointer-events: none; cursor: default; }
h1.sp { font-size: 0; }
.games, .games li { list-style: none; margin: 0; padding: 0; display: contents; }
.feelings, .hud, nav.dock { display: contents; }
.hit { position: absolute; z-index: 1; padding: 0; margin: 0; border: 0; background: transparent; border-radius: 28px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp:focus-visible, .hit:focus-visible { outline: 5px solid var(--foam); outline-offset: 3px; box-shadow: 0 0 0 9px var(--navy); border-radius: 22px; z-index: 30; }
.sp:focus:not(:focus-visible), .hit:focus:not(:focus-visible) { outline: none; }
/* glow and lift: the Illustrator glow sprites move to whatever is pointed at; world objects get a warm rim */
.glow-nav, .glow-big { transition: left .28s cubic-bezier(.34,1.56,.64,1), top .28s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; }
.off { opacity: 0; }
.nav:hover img, .nav.lit img, .ring:hover img, .ring.lit img { transform: translateY(-5%) scale(1.06); }
.bob:hover img, .bob.lit img { filter: drop-shadow(0 0 12px rgba(242, 194, 58, .9)) drop-shadow(0 0 4px var(--foam)); }
.nav[aria-current="page"] img { transform: translateY(-3%); }
.ring[aria-pressed="true"] img { filter: drop-shadow(0 0 10px var(--gold)); }
.ring[data-act="sound"][aria-pressed="false"] img { filter: grayscale(.8) opacity(.75); }
/* life in the harbor: Mike sails by, Bobbin breathes; calm mode holds everything still */
.sail { animation: sail 75s linear infinite; animation-delay: -18s; }
.sail img { animation: rock 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes sail { from { transform: translateX(var(--sail-from, -200%)); } to { transform: translateX(var(--sail-to, 180%)); } }
@keyframes rock { 0%, 100% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(1.2deg) translateY(-2%); } }
.s-bobbin img { transform-origin: 50% 100%; animation: breathe 4.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .988); } }
.s-gully img { transform-origin: 50% 100%; animation: perch 5.5s ease-in-out infinite; }
@keyframes perch { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-4deg); } 96% { transform: rotate(3deg); } }
body.calm .sail, body.calm .sail img, body.calm .s-bobbin img, body.calm .s-gully img { animation: none; }
body.calm .sp img { transition-duration: .5s; }
@media (prefers-reduced-motion: reduce) { .sail, .sail img, .s-bobbin img, .s-gully img { animation: none; } }

/* the paper-tag caption (Illustrator tag art as its background); every spoken line is also shown in words */
#caption { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  min-width: min(420px, 86vw); max-width: min(900px, 94vw); padding: .42em 1em .48em 2.9em; color: var(--navy); font: 600 clamp(20px, 2.4vw, 34px)/1.15 'Fredoka', sans-serif;
  background: url('../img/tag.png') center / 100% 100% no-repeat; transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
#caption.on { opacity: 1; transform: translate(-50%, 0); }
#caption.noface { padding-left: 1em; }
#caption .face { position: absolute; left: .5em; top: 50%; width: 1.9em; height: 1.9em; transform: translateY(-50%); border-radius: 50%; overflow: hidden; background: #E6F3F6; box-shadow: 0 0 0 4px #C7A355; }
#caption.noface .face { display: none; }
#caption .face img { position: absolute; width: 140%; left: -20%; top: -4%; }
body.calm #caption { transition-duration: .5s; }
/* never over the dock: wide = just above the boardwalk (dock = bottom 18% of the stage); tall = just under the top rings */
body.kid #caption { bottom: calc((100vh - min(100vh, 62.5vw)) / 2 + min(100vh, 62.5vw) * 0.205); }
/* Play and friend pages: the line sits up top (where the comps put the bubble), clear of the game signs and the doors */
body.kid.play #caption, body.kid.friend #caption { bottom: auto; top: calc((100vh - min(100vh, 62.5vw)) / 2 + min(100vh, 62.5vw) * 0.13); transform: translate(-50%, -24px); }
body.kid.friend #caption { top: calc((100vh - min(100vh, 62.5vw)) / 2 + min(100vh, 62.5vw) * 0.075); left: calc((100vw - min(100vw, 160vh)) / 2 + min(100vw, 160vh) * 0.37); }
body.kid.play #caption.on, body.kid.friend #caption.on { transform: translate(-50%, 0); }
@media (max-aspect-ratio: 4/5) {
  /* phone: the friend/play rules above are more specific, so name them here too; the line sits in the sky under the top rings, clear of the face */
  body.kid.friend #caption { left: 50%; }
  body.kid #caption, body.kid.play #caption, body.kid.friend #caption { bottom: auto; top: calc(19vw + env(safe-area-inset-top)); transform: translate(-50%, -24px); }
  body.kid #caption.on { transform: translate(-50%, 0); }
}
body.nocaps #caption { display: none; }

/* ---------------------------------------------------------------- grown-up pages: the Parents Pier */
body.grown { font: 18px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.grown h1, .grown h2, .grown h3 { font-family: 'Fredoka', 'Trebuchet MS', sans-serif; color: var(--navy); line-height: 1.15; margin: 0; }
.grown a { color: var(--navy); }
.grown a:focus-visible, .grown button:focus-visible, .grown input:focus-visible { outline: 4px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.pier-hero { position: relative; overflow: hidden; border-bottom: 6px solid #E2CFA5; }
.pier-hero img, .pier-hero picture { display: block; width: 100%; height: auto; }
.pier-hero .back { position: absolute; left: 22px; top: 18px; display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 17px 'Fredoka', sans-serif; }
.pier-hero .back img { width: 62px; height: auto; }
.pier-hero .logo { position: absolute; right: 2.2%; top: 22px; width: 15%; min-width: 120px; }
.pier-hero .logo img { width: 100%; height: auto; }
.hero-words { position: absolute; left: 4.2%; top: 37%; width: 56%; }
.hero-words h1 { font-size: clamp(40px, 5.6vw, 82px); font-weight: 700; }
.hero-words.compact { width: 66%; }
.hero-words.compact h1 { font-size: clamp(34px, 4.1vw, 60px); }
.hero-words .sub { margin: .5em 0 0; max-width: 46ch; font-size: clamp(16px, 1.55vw, 22px); line-height: 1.45; color: var(--navy); }
.pier-body { display: grid; grid-template-columns: 290px minmax(0, 940px); gap: 48px; max-width: 1340px; margin: 0 auto; padding: 56px 40px 40px; }
.slips { position: sticky; top: 24px; align-self: start; }
.slips p { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--subtle); }
.slips ol { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 3px solid #C9A46B; counter-reset: slip; }
.slips li { counter-increment: slip; margin: 0 0 6px; }
.slips a { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 0; margin-left: -17px; text-decoration: none; font-weight: 600; font-size: 17px; }
.slips a::before { content: counter(slip); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--drift); color: var(--foam); font: 700 15px 'Fredoka', sans-serif; box-shadow: inset 0 0 0 2px #A9834C; }
.slips a:hover { text-decoration: underline; }
.pier-col section { scroll-margin-top: 20px; }
.pier-col h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; margin: 0 0 18px; }
.pile img { display: block; width: 38px; height: auto; }
.pier-col h3 { font-size: 21px; font-weight: 600; color: var(--teal); margin: 0 0 6px; }
.pier-col p { margin: 0 0 14px; max-width: 70ch; }
.pier-col .lede { color: var(--subtle); }
.plank { margin: 36px 0 44px; }
.plank img { display: block; width: 100%; height: auto; }
.week { display: grid; grid-template-columns: 330px 1fr; gap: 32px; margin-bottom: 22px; }
.week .still img { display: block; width: 100%; height: auto; }
.two { display: grid; grid-template-columns: 62% 1fr; gap: 32px; }
.two h3 { color: var(--navy); }
.talk p { color: var(--subtle); }
.dots { margin: 0 0 14px; padding: 0; list-style: none; }
.dots li { position: relative; padding-left: 24px; margin: 0 0 8px; }
.dots li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.pdfs { list-style: none; margin: 10px 0 0; padding: 0; }
.pdfs.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.pdfs li { margin: 0 0 8px; }
.pdfs a, .pdfs li.soon { display: inline-flex; align-items: baseline; gap: 12px; font-weight: 600; }
.pdfs li.soon { color: var(--subtle); }
.pdfs em { font-weight: 400; font-size: 15px; }
.tag { flex: none; padding: 1px 10px; border-radius: 12px; background: #D5EEEA; box-shadow: inset 0 0 0 1px #8CC9BF; color: #1F5F66; font: 600 12.5px system-ui, sans-serif; letter-spacing: .03em; }
.line img { display: block; width: 100%; height: auto; margin: 6px 0 14px; }
.ft img { display: block; width: 100%; max-width: 380px; height: auto; }
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; margin-top: 18px; }
.tg { position: relative; display: flex; gap: 16px; align-items: flex-start; cursor: pointer; }
.tg input { position: absolute; opacity: 0; width: 64px; height: 34px; margin: 0; cursor: pointer; }
.tg .knob { flex: none; position: relative; width: 64px; height: 34px; border-radius: 17px; background: #B9B0A0; transition: background .2s; }
.tg .knob::after { content: ''; position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--foam); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.tg input:checked + .knob { background: #237E78; }
.tg input:checked + .knob::after { transform: translateX(30px); }
.tg input:focus-visible + .knob { outline: 4px solid var(--teal); outline-offset: 3px; }
.tg b { display: block; color: var(--navy); }
.tg small { display: block; font-size: 15px; color: var(--subtle); }
.credit { text-align: center; padding: 10px 20px 40px; font-size: 14px; color: var(--subtle); }
.credit a { color: var(--subtle); }
/* single-column grown-up page (privacy) */
.pier-body.single { grid-template-columns: minmax(0, 860px); justify-content: center; }
.pier-body.single section { margin: 0 0 30px; }
.pier-body.single h2 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 10px; }
/* the grown-ups' privacy link under the home harbor (reachable without the gate) */
.grown-link { position: relative; z-index: 1; margin: 0; padding: 14px 20px 22px; text-align: center; font: 500 15px system-ui, sans-serif; background: #F6EBD9; }
.grown-link a { color: #3E5570; }
@media (max-width: 980px) {
  .pier-body { grid-template-columns: 1fr; gap: 20px; padding: 26px 20px 30px; }
  .slips { position: static; }
  .slips ol { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; }
  .slips li { margin: 0; }
  .slips a { margin: 0; padding: 4px 12px 4px 4px; gap: 8px; border-radius: 20px; background: #EFE2C6; font-size: 15px; }
  .slips a::before { width: 24px; height: 24px; font-size: 13px; }
  .week, .two, .toggles, .pdfs.grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* phone fix (10/9): the subtitle sits on the paper under the hero, never over the pier posts */
  /* phone fix (10/10): the title comes down onto the paper too (it sat on the lighthouse and the horizon), and the
     subtitle gets room above the plank rule instead of touching it */
  .hero-words { position: static; width: auto; padding: 20px 20px 24px; }
  .hero-words h1 { font-size: 42px; }
  .hero-words.compact { width: auto; }
  .hero-words.compact h1 { font-size: 38px; }
  .pier-hero { overflow: visible; }
  .pier-hero .logo { display: none; }
  .pier-hero .back span { display: none; }
  .pier-hero .back img { width: 46px; }
  .hero-words .sub { font-size: 17px; max-width: none; }
  body.grown { font-size: 17px; }
}

/* the parent gate */
.gate-hero { position: relative; }
.gate-art { position: absolute; left: 50%; bottom: 4%; width: 46%; max-width: 220px; transform: translateX(-50%); }
.gate-art img { width: 100%; height: auto; }
.gate .gate-hero > img { max-height: 46vh; object-fit: cover; }
.gate-card { max-width: 440px; margin: 0 auto; padding: 26px 22px 40px; }
.gate-card h1 { font-size: 28px; font-weight: 600; margin-bottom: 10px; }
.gate-card .words { margin: 14px 0; text-align: center; font: 700 36px 'Fredoka', sans-serif; color: var(--teal); letter-spacing: .02em; }
.gate-card input { display: block; width: 100%; height: 66px; padding: 0 18px; border: 3px solid var(--navy); border-radius: 12px; background: #fff; font: 600 32px system-ui, sans-serif; color: var(--navy); letter-spacing: .3em; text-align: center; }
.gate-card button { display: block; width: 100%; height: 60px; margin-top: 16px; border: 0; border-radius: 12px; background: #237E78; color: var(--foam); font: 600 22px 'Fredoka', sans-serif; cursor: pointer; }
.gate-card button:hover { background: #1D6B66; }
.gate-card .msg { min-height: 1.6em; margin: 12px 0 0; font-weight: 600; color: #9B3B2B; }
.gate-card .small { font-size: 14px; color: var(--subtle); }