/* The website wears the same clothes as the app: cream honeycomb paper, ink
   outlines, honey markers, and a hard offset shadow under every surface. The
   tokens are copied rather than shared because this page is plain HTML with no
   build step, and it should keep working if the app's bundle changes. */
:root {
    --ink: #24423e;
    --paper: #fffdf7;
    --mat: #fcf2c7;
    --honey: #f6c85f;
    --honey-deep: #eab63c;
    --purple: #8a45cd;
    --fern: #6faf88;
    --coral: #e8807a;
    --radius: 6px;
    --panel-border: 2px solid var(--ink);
    --panel-shadow: 6px 6px 0 rgb(36 66 62 / 16%);
    --content-width: 1120px;
    --bounce: cubic-bezier(0.47, 2.02, 0.31, -0.36);

    color: var(--ink);
    background: var(--mat) url('/honeycomb.svg');
    /* The same tile at the same size as the app, so crossing the front door
       does not change the wallpaper. */
    background-size: 48px 84px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-synthesis: none;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* The script swaps the form and the door by the hidden attribute, which must
   beat any display a class sets. */
[hidden] {
    display: none !important;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    line-height: 1.55;
}

h1,
h2,
h3 {
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

p {
    margin: 0;
}

a {
    color: inherit;
}

button,
input {
    min-height: 44px;
    font: inherit;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #fff8e7;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 16px;
    top: 16px;
    z-index: 5;
    padding: 10px 16px;
    border: var(--panel-border);
    border-radius: var(--radius);
    background: var(--paper);
}

/* Header: the wordmark and three ways in, floating over the paper the way the
   app's own header does. */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 20px clamp(16px, 4vw, 32px);
}

/* The same mark the app wears, rule for rule: fat rounded glyphs, honey for
   the bee half and purple for the spelling half, the bee as it comes. */
.wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bee-mark {
    width: 44px;
    height: auto;
}

.wordmark-text {
    color: var(--honey);
    font-family: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.wordmark-spell {
    color: var(--purple);
}

main {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px) 48px;
    display: grid;
    gap: clamp(28px, 4vw, 48px);
}

/* Hero: the promise on the left, the bee and the way in on the right. */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(24px, 5vw, 56px);
    align-items: start;
    padding-top: clamp(16px, 4vw, 40px);
}

.hero h1 {
    font-size: clamp(2.3rem, 6.4vw, 4rem);
    font-weight: 800;
    max-width: 15ch;
}

.lede {
    margin-top: 18px;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    max-width: 46ch;
}

/* The name spells itself in the tiles of the game inside: each letter its own
   key, no two sitting quite straight, the way a word looks mid-turn. */
.hero-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.tile {
    --rest: none;
    display: grid;
    place-items: center;
    width: clamp(44px, 5.6vw, 58px);
    height: clamp(44px, 5.6vw, 58px);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: 0 4px 0 var(--ink);
    font-family: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    transform: var(--rest);
    animation: tile-in 480ms var(--bounce) backwards;
}

.tile:nth-child(2) { animation-delay: 60ms; }
.tile:nth-child(3) { animation-delay: 120ms; }
.tile:nth-child(4) { animation-delay: 180ms; }
.tile:nth-child(5) { animation-delay: 240ms; }
.tile:nth-child(6) { animation-delay: 300ms; }
.tile:nth-child(7) { animation-delay: 360ms; }
.tile:nth-child(8) { animation-delay: 420ms; }

.tile-fern { background: var(--fern); color: var(--paper); }
.tile-honey { background: var(--honey); }
.tile-purple { background: var(--purple); color: var(--paper); }
.tile-coral { background: var(--coral); color: var(--paper); }

.tile.lift { --rest: translateY(-6px) rotate(-2deg); }
.tile.sink { --rest: translateY(4px) rotate(2deg); }
.tile.tilt-l { --rest: rotate(-3deg); }
.tile.tilt-r { --rest: rotate(3deg); }

@keyframes tile-in {
    from {
        transform: translateY(16px) scale(0.7);
        opacity: 0;
    }

    to {
        transform: var(--rest);
        opacity: 1;
    }
}

/* What the game promises, said the way the game says it. */
.promises {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.promise {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: #fff;
    box-shadow: 2px 2px 0 rgb(36 66 62 / 20%);
    font-weight: 700;
    font-size: 0.95rem;
}

/* The way in is the app's own sign in card: same welcome, same field, same
   dark button, so crossing from the site to the app changes nothing. */
.login-card {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    justify-self: end;
    padding: clamp(24px, 3vw, 34px);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    background: rgb(255 253 247 / 92%);
    box-shadow: 10px 10px 0 rgb(36 66 62 / 16%);
    text-align: center;
}

.login-card h2 {
    font-family: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', system-ui, sans-serif;
    font-size: 1.8rem;
}

.login-lede {
    font-size: 1rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.join {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.join input {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid rgb(36 66 62 / 24%);
    border-radius: var(--radius);
    background: #fff;
    text-align: center;
    font: inherit;
}

.join button,
.open-app {
    padding: 11px 18px;
    border: 0;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff8e7;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 140ms var(--bounce);
}

.join button:hover,
.open-app:hover {
    transform: translateY(-1px);
}

.open-app {
    justify-self: center;
    display: inline-block;
}

.join button[disabled] {
    cursor: progress;
    opacity: 0.75;
}

.join-status:empty {
    display: none;
}

.join-status {
    font-weight: 600;
}

.join-status.failed {
    color: #a3232b;
}

.join-note {
    font-size: 0.92rem;
}

/* Everything a grown up wants to read, folded behind one line, because the page
   belongs to the child first. The drawer wears the same sticker as every other
   surface, and its marker turns rather than swapping for another glyph. */
.drawer {
    border: var(--panel-border);
    border-radius: var(--radius);
    background: rgb(255 253 247 / 92%);
    box-shadow: var(--panel-shadow);
}

.drawer > summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px clamp(18px, 3vw, 26px);
    cursor: pointer;
    list-style: none;
}

.drawer > summary::-webkit-details-marker {
    display: none;
}

.drawer > summary::after {
    content: '';
    width: 12px;
    height: 12px;
    margin-left: auto;
    border-right: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform 160ms ease;
}

.drawer[open] > summary::after {
    transform: rotate(-135deg) translate(-3px, -3px);
}

.drawer-title {
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.drawer-hint {
    font-size: 0.98rem;
}

.drawer-body {
    display: grid;
    gap: 22px;
    padding: 0 clamp(18px, 3vw, 26px) 26px;
    border-top: 2px dashed rgb(36 66 62 / 25%);
    padding-top: 22px;
}

.drawer-body h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 800;
}

/* What it actually does, grouped, for somebody deciding rather than browsing. */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

.features h3 {
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.features ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
    font-size: 0.98rem;
}

.drawer-close {
    font-size: 0.98rem;
}

/* One word, in three steps, because the order is the point. */
.turn h2,
.closing h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    font-weight: 800;
}

.turn-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.turn-steps li {
    position: relative;
    padding: 26px 22px 22px;
    border: var(--panel-border);
    border-radius: var(--radius);
    background: rgb(255 253 247 / 92%);
    box-shadow: var(--panel-shadow);
    counter-increment: step;
}

.turn-steps li::before {
    content: counter(step);
    position: absolute;
    top: -18px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: var(--panel-border);
    border-radius: 50%;
    background: var(--honey);
    font-weight: 800;
}

.turn-steps h3,
.benefits h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

/* The two audiences, each marked in its own colour so a teacher scrolling past
   knows which half is theirs. The second one changes the ground as well, which
   is the only break in the paper on the page. */
.audience {
    display: grid;
    gap: 26px;
}

#teachers {
    margin-inline: calc(50% - 50vw);
    padding: clamp(30px, 5vw, 52px) calc(50vw - 50%);
    background: rgb(111 175 136 / 22%);
    border-block: var(--panel-border);
}

.audience-words h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    font-weight: 800;
}

.audience-words .lede {
    margin-top: 12px;
}

#students h2,
.drawer-body h2 {
    text-decoration: underline;
    text-decoration-color: var(--honey);
    text-decoration-thickness: 9px;
    text-underline-offset: -2px;
    text-decoration-skip-ink: none;
}

#teachers {
    text-decoration-color: var(--fern);
}

#students .audience-words h2 {
    text-decoration: underline;
    text-decoration-color: var(--honey);
    text-decoration-thickness: 10px;
    text-underline-offset: -2px;
    text-decoration-skip-ink: none;
}

#teachers .audience-words h2 {
    text-decoration: underline;
    text-decoration-color: var(--fern);
    text-decoration-thickness: 10px;
    text-underline-offset: -2px;
    text-decoration-skip-ink: none;
}

.benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefits li {
    padding: 20px;
    border: var(--panel-border);
    border-radius: var(--radius);
    background: rgb(255 253 247 / 92%);
    box-shadow: var(--panel-shadow);
}

.closing {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: clamp(30px, 5vw, 48px) 24px;
    border: var(--panel-border);
    border-radius: var(--radius);
    background: rgb(246 200 95 / 45%);
    box-shadow: var(--panel-shadow);
    text-align: center;
}

.closing-link {
    padding: 12px 22px;
    border: var(--panel-border);
    border-radius: var(--radius);
    background: var(--paper);
    font-weight: 700;
    text-decoration: none;
    transition: transform 140ms var(--bounce);
}

.closing-link:hover {
    transform: translateY(-1px);
}

/* A page that is mostly words: the policy. Narrower than the front page so a
   line stays readable, with room between the things it says. */
.prose {
    max-width: 68ch;
    margin: 0 auto;
    padding: clamp(16px, 4vw, 32px) clamp(16px, 4vw, 32px) 56px;
    display: grid;
    gap: 18px;
}

.prose h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
}

.prose h2 {
    margin-top: 22px;
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--honey);
    text-decoration-thickness: 8px;
    text-underline-offset: -2px;
    text-decoration-skip-ink: none;
}

.prose ul {
    margin: 0;
    padding-left: 22px;
    display: grid;
    gap: 8px;
}

.prose a {
    font-weight: 600;
}

.wordmark a {
    text-decoration: none;
}

/* Somewhere that is not a page. */
.lost {
    justify-items: center;
    text-align: center;
    padding-top: clamp(24px, 6vw, 60px);
}

.lost-bee {
    width: min(220px, 52vw);
    height: auto;
    transform: scaleX(-1);
    animation: hover 5.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .lost-bee {
        animation: none;
    }
}

.site-footer {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px) 48px;
    display: grid;
    gap: 8px;
    font-size: 0.92rem;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
    padding-top: 12px;
    border-top: 1.5px dashed rgb(36 66 62 / 35%);
}

@media (max-width: 860px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Narrow, the card follows the words rather than sitting beside them. */
    .login-card {
        justify-self: stretch;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tile {
        animation: none;
    }

    .join button,
    .open-app,
    .closing-link {
        transition: none;
    }
}