/* Fleet Score: the site is one page of the exercise book the game is played in.
   Paper #f5f1e4 with blue squares every 24px, one red margin rule with the margin to its right (where the game keeps
   its score and the Fire button), blue ballpoint for words, red pen for what matters, graphite for the rest.
   Caveat is the hand, PT Mono the numbers. Flat: no gradients for shading, no glow, no rounded cards. */
.landing{
  --paper:#f5f1e4; --rule:rgba(160,180,222,.55); --pen:#1f3d99; --red:#d1232a; --lead:#5b5b5b; --sheet:#fffdf6;
  --hand:'Caveat',cursive; --num:'PT Mono',ui-monospace,monospace;
  --sketch:255px 14px 225px 14px/14px 225px 14px 255px;
  --m:300px; --g:56px;
  background-color:var(--paper);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:24px 24px; color:var(--pen); font:500 24px/1.3 var(--hand)}

/* the book: centred, with the red margin rule running the full height of the page */
.landing .book{position:relative;max-width:1180px;min-height:100vh;margin:0 auto;padding:0 22px}
.landing .book::before{content:"";position:absolute;top:0;bottom:0;left:calc(100% - 22px - var(--m) - var(--g) / 2);width:2px;background:var(--red);opacity:.8;pointer-events:none}
.landing .wrap{padding-left:0;padding-right:0}   /* horizontal only; the book carries the side padding */

/* ---- the cover, and the margin beside it ---- */
.landing header{display:grid;grid-template-columns:minmax(0,1fr) var(--m);grid-template-rows:auto 1fr;column-gap:var(--g);padding-top:26px;align-items:start}
.landing .top{grid-column:2;grid-row:1;display:flex;justify-content:flex-start}
.landing .cover{grid-column:1;grid-row:1 / span 2;position:relative;width:min(100%,600px);margin:22px 0 0 10px;transform:rotate(-1.2deg);filter:drop-shadow(3px 5px 0 rgba(91,91,91,.22))}
.landing .cover .kraft{display:block;width:100%;height:auto;border-radius:6px 14px 14px 6px}
.landing .cover h1{position:absolute;left:25%;top:23.5%;width:58.5%;height:23%;margin:0;display:flex;align-items:center;justify-content:center}
.landing .cover h1 img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.landing .cover .ring{position:absolute;right:-6%;top:-5%;width:24%;height:auto;opacity:.75;mix-blend-mode:multiply;transform:rotate(-24deg);pointer-events:none}
.landing .side{grid-column:2;grid-row:2;padding-top:58px}
.landing .tag{font:700 clamp(36px,3.6vw,46px)/1.02 var(--hand);color:var(--pen);margin:0 0 18px}
.landing .short{font:500 27px/1.2 var(--hand);color:var(--lead);margin:0 0 30px}

/* language links: words written in the margin, the open one underlined in red pen */
.landing .langs{gap:4px 14px}
.landing .langs a{font:600 24px/1 var(--hand);color:var(--pen);background:none;border:0;border-radius:0;padding:9px 2px 7px;min-height:40px;display:inline-flex;align-items:center;text-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.landing .langs a:hover{background:none;color:var(--red)}
.landing .langs a[aria-current="page"]{background:none;color:var(--red);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* Play: the game's pencil box round a word, ringed in red pen */
.landing .ctas{display:flex;gap:12px;flex-wrap:wrap}
.landing .btn{display:inline-flex;align-items:center;justify-content:center;font:700 36px/1 var(--hand);color:var(--pen);text-decoration:none;cursor:pointer;
  background:rgba(255,253,246,.75);border:2.5px solid var(--red);border-radius:var(--sketch);padding:12px 44px 14px;min-height:60px;transition:transform .08s}
.landing .btn:hover{background:var(--sheet);transform:rotate(-.6deg)}
.landing .btn:active{transform:translateY(1px) rotate(-.4deg)}

/* focus: a dashed red pen loop, on everything that takes it */
.landing a:focus-visible,.landing button:focus-visible,.landing video:focus-visible,.landing .shots:focus-visible,
.landing .where .opts a:focus-visible,.landing .langs a:focus-visible{outline:2.5px dashed var(--red);outline-offset:4px}

/* ---- the page: words on the left of the rule, notes in the margin ---- */
.landing main{display:grid;grid-template-columns:minmax(0,1fr) var(--m);column-gap:var(--g);margin-top:96px}
.landing .about{grid-column:1;grid-row:1}
.landing .notes{grid-column:2;grid-row:1 / span 2;padding-top:84px}
.landing .pages{grid-column:1;grid-row:2;margin-top:60px;min-width:0}
.landing h2{display:inline-block;font:700 44px/1 var(--hand);color:var(--pen);margin:0 0 26px;padding-bottom:10px;
  background:linear-gradient(var(--red),var(--red)) 0 100%/100% 2px no-repeat,linear-gradient(var(--red),var(--red)) 4px calc(100% - 5px)/94% 1.5px no-repeat}
.landing .lead{font:500 27px/1.3 var(--hand);color:var(--pen);max-width:30em;margin:0 0 22px}

/* the bullets: each one a hit, two quick strokes of red pen */
.landing .feat{list-style:none;margin:0;padding:0}
.landing .feat li{position:relative;font:500 24px/1.2 var(--hand);color:var(--pen);padding-left:34px;margin:0 0 18px}
.landing .feat li::before{content:"";position:absolute;left:2px;top:4px;width:20px;height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 3.5 16.5 17M16 2.5 3.5 16.5' stroke='%23d1232a' stroke-width='2.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat}
.landing .whale{display:block;width:150px;height:auto;margin:30px 0 0 auto;opacity:.75;mix-blend-mode:multiply}

/* the clip and the pages, laid on the desk */
.landing .clip{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--paper);border:2px solid var(--lead);border-radius:3px;margin:0 0 30px}
.landing .shots{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 6px 20px;scrollbar-color:var(--lead) transparent}
.landing .shots img{flex:none;height:min(480px,70vh);width:auto;aspect-ratio:9/16;border:2px solid var(--lead);border-radius:3px;background:var(--paper);scroll-snap-align:start;transform:rotate(-.7deg)}
.landing .shots img:nth-child(2n){transform:rotate(.6deg)}

/* footer: the bottom of the page, in pencil */
.landing footer.wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;margin-top:110px;padding:22px 0 60px;margin-right:calc(var(--m) + var(--g));border-top:1.5px solid var(--lead)}
.landing footer a{font:600 24px/1 var(--hand);color:var(--pen);padding:8px 0;min-height:40px;display:inline-flex;align-items:center}
.landing footer a:hover{color:var(--red)}
.landing footer .made{font:400 14px var(--num);color:var(--lead);margin-left:auto}

/* ---- the Play chooser: a sheet torn from the same book ---- */
.landing .where{max-width:min(92vw,440px)}
.landing .where::backdrop{background:rgba(245,241,228,.88);backdrop-filter:none;-webkit-backdrop-filter:none}
.landing .where-box{background:var(--sheet);border:2px solid var(--lead);border-radius:var(--sketch);box-shadow:4px 6px 0 rgba(91,91,91,.22);color:var(--pen);padding:22px 22px 20px;font-family:var(--hand)}
.landing .where b{font:700 34px/1 var(--hand);letter-spacing:0;text-transform:none;opacity:1;color:var(--pen);margin:2px 48px 16px 0}
.landing .where .opts{gap:8px}
.landing .where .opts a,.landing .where .opts .soon{font:600 25px/1.1 var(--hand);color:var(--pen);background:transparent;border:2px solid var(--lead);border-radius:var(--sketch);padding:10px 16px;min-height:48px}
.landing .where .opts a:hover{background:var(--paper);border-color:var(--red)}
.landing .where .opts .soon{color:var(--lead);border-style:dashed;border-color:rgba(91,91,91,.5);opacity:1}
.landing .where .close button{font:700 22px/1 var(--hand);width:44px;height:44px;border:2px solid var(--lead);border-radius:var(--sketch);background:transparent;color:var(--pen)}
.landing .where .close button:hover{border-color:var(--red);color:var(--red)}

/* ---- narrow: one column, the red rule close to the right edge, as in a phone-sized notebook ---- */
@media (max-width:900px){
  .landing{--m:0px;--g:0px}
  .landing .book{padding:0 36px 0 18px}
  .landing .book::before{left:auto;right:16px}
  .landing header{display:flex;flex-direction:column;padding-top:14px}
  .landing .top{justify-content:flex-end;width:100%}
  .landing .cover{width:min(100% - 12px,440px);margin:22px auto 0}
  .landing .side{padding-top:44px;width:100%}
  .landing .tag{font-size:clamp(34px,9vw,42px)}
  .landing .short{font-size:26px;margin-bottom:26px}
  .landing main{display:block;margin-top:80px}
  .landing .notes{padding-top:40px}
  .landing .whale{width:120px}
  .landing .pages{margin-top:56px}
  .landing h2{font-size:40px}
  .landing .lead{font-size:26px}
  .landing .shots img{height:min(440px,64vh)}
  .landing footer.wrap{margin-right:0;margin-top:90px}
  .landing footer .made{margin-left:0;width:100%}
}
@media (max-width:420px){ .landing .btn{width:100%} .landing .langs{gap:2px 10px} .landing .langs a{font-size:22px} }

@media (prefers-reduced-motion:reduce){ .landing *{transition:none !important;scroll-behavior:auto !important} .landing .btn:hover,.landing .btn:active{transform:none} }