/* ── Cabin ───────────────────────────────────────────────────────────────
   The face used on the book covers and inside the books, so that the site
   and the printed volumes look like the same thing. Open Font License; the
   files are served from here rather than from Google, so that reading this
   page does not involve a third party. See fonts/LICENSE-Cabin.txt.

   Which parts of the page use it is set by the two variables below.
   ─────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: "Cabin"; font-style: normal; font-weight: 400;
    font-display: swap;
    src: url("fonts/cabin-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Cabin"; font-style: italic; font-weight: 400;
    font-display: swap;
    src: url("fonts/cabin-latin-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Cabin"; font-style: normal; font-weight: 500;
    font-display: swap;
    src: url("fonts/cabin-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Cabin"; font-style: normal; font-weight: 600;
    font-display: swap;
    src: url("fonts/cabin-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Cabin"; font-style: normal; font-weight: 700;
    font-display: swap;
    src: url("fonts/cabin-latin-700-normal.woff2") format("woff2");
}

/* Halifax Kakuro — the site around the puzzle app.
   One stylesheet for all pages. No framework, no build step, to match the
   app it sits in front of.

   The colours come from the book covers rather than from a template: warm
   paper, ink rather than black, a sea blue and an amber that turn up on
   nearly every cover. The covers themselves are the brightest thing on the
   page, which is as it should be. */

:root {
    --paper:     #fff6e4;   /* cream, the colour of the paper in the photo */
    --paper-alt: #e4f1fa;   /* a pale sky, for alternating bands */
    --card:      #fffdf8;
    --ink:       #27333f;   /* a navy-leaning charcoal, not black: for text */
    --shell:     #2b4573;   /* the bar and the footer: warm navy, not slate */
    --ink-soft:  #5d6b78;
    --navy:      #34548f;   /* the deep water: Fuji, the orca, the leopard */
    --rule:      #e8dcc4;
    --sea:       #1f7fbf;   /* the pen */
    --sea-deep:  #16608f;
    --sky:       #76c0ec;
    --coral:     #ef8496;   /* cherry blossom, rhododendron */
    --amber:     #e0932e;   /* the octopus, the butterfly, the owl */

    /* Swap these two to try the three combinations:
         Cabin for both                -- as set
         Cabin headings, system body   -- --font-body: var(--system)
         serif headings                -- --font-head: var(--serif)

   Cabin runs a little smaller and lighter than the system faces, so the
   sizes below are set about a point larger than they would otherwise be.
   Going back to --system means taking that back out.                      */
    --cabin:     "Cabin", "Trebuchet MS", "Lucida Grande", sans-serif;
    --serif:     Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
                 serif;
    --system:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

    --font-head: var(--cabin);
    --font-body: var(--cabin);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font: 18px/1.62 var(--font-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, .brand {
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: -0.005em;
}

a { color: var(--sea-deep); text-decoration: none; }
a:hover { color: var(--sea); }

.wrap { max-width: 1010px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 660px; }

/* ── Site header ─────────────────────────────────────────────── */

.topbar {
    background: var(--shell); color: #fff;
    border-bottom: 3px solid var(--amber);
}
.topbar .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 54px; flex-wrap: wrap;
}
.brand {
    font-size: 20px; color: #fff; text-decoration: none; white-space: nowrap;
}

.topnav { display: flex; flex-wrap: wrap; }
.topnav a {
    color: #cbd8ee; text-decoration: none; font-size: 16.5px;
    padding: 7px 13px; border-radius: 4px;
}
.topnav a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.topnav a.here { color: #fff; box-shadow: inset 0 -2px 0 var(--sky); }

/* ── Banner ──────────────────────────────────────────────────── */

.banner {
    position: relative; color: #fff;
    background:
      linear-gradient(100deg, rgba(10,5,0,0.90) 0%,
                              rgba(74,58,44,0.42) 42%,
                              rgba(98,84,58,0.0) 78%,
                              rgba(140,140,100,0.0) 100%),
      url("images/banner.jpg") center 62% / cover no-repeat,
      var(--ink);
}
.banner .wrap { padding-top: 66px; padding-bottom: 66px; }
.banner h1 {
    margin: 0 0 12px;
    font-size: clamp(32px, 6vw, 52px); line-height: 1.08;
    text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}

.banner p {
    margin: 0; max-width: 27em;
    font-size: clamp(17px, 2.4vw, 21px); color: #d9e6f5;
    text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* ── Sections ────────────────────────────────────────────────── */

section { padding: 52px 0; }
section.tinted { background: var(--paper-alt); }
section.inked  { background: var(--shell); color: #d9e5f7; }
section.inked h2 { color: #fff; }
section.skied  { background: var(--paper-alt); }

h2 { font-size: 32px; line-height: 1.2; margin: 0 0 16px; color: var(--navy); }
h3 { font-size: 21px; margin: 0 0 8px; color: var(--navy); }
p  { margin: 0 0 15px; }
.lead { font-size: 21px; color: var(--ink-soft); }
.note { font-size: 16px; color: var(--ink-soft); }

/* The rules, set apart the way an epigraph is: no box, just a rule. */
.rules {
    border-left: 3px solid var(--coral);
    padding: 4px 0 4px 20px;
    margin: 20px 0 22px;
    font-size: 20px; line-height: 1.58;
}
.rules p:last-child { margin-bottom: 0; }

/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
    display: inline-block; text-decoration: none; font-weight: 600;
    padding: 12px 26px; border-radius: 3px;
    background: var(--sea); color: #fff; border: none;
    transition: background 0.15s, transform 0.15s;
}
.btn:hover { background: var(--sea-deep); color: #fff;
             transform: translateY(-1px); }
.btn.big { font-size: 20px; padding: 15px 34px; }
.btn.amber { background: var(--amber); color: #2b2114; }
.btn.amber:hover { background: #f0a942; color: #2b2114; }

/* ── The four things the site offers ─────────────────────────── */

/* Four in a row where there is room, two by two where there is not, and
   one above another on a phone: never three and one left over. The band
   is wider than the page's text, to give four room. */
.wrap.wide { max-width: 1240px; }
.offers { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 700px)  { .offers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1160px) { .offers { grid-template-columns: repeat(4, 1fr); } }
.offer {
    display: flex; flex-direction: column;
    background: var(--card); border-radius: 4px;
    border-top: 4px solid var(--sea);
    padding: 24px 24px 22px;
    text-decoration: none; color: inherit;
    box-shadow: 0 1px 3px rgba(60,45,25,0.10);
    transition: box-shadow 0.16s, transform 0.16s;
}
.offer.kind-app   { border-top-color: var(--navy); }
.offer.kind-books { border-top-color: var(--coral); }
.offer.kind-print { border-top-color: var(--amber); }
.offer:hover {
    box-shadow: 0 10px 28px rgba(60,45,25,0.18);
    transform: translateY(-3px); color: inherit;
}
.offer p { color: var(--ink-soft); font-size: 17px; flex: 1; }
.offer .go { font-weight: 600; color: var(--sea); font-size: 17px; }
.offer.kind-app .go   { color: var(--navy); }
.offer.kind-books .go { color: #d05e73; }
.offer.kind-print .go { color: #b3711d; }

/* ── The shelf of covers ─────────────────────────────────────── */

/* Set very slightly askew, the way books actually stand. Straightens and
   lifts under the pointer. */
.shelf {
    display: flex; flex-wrap: wrap; justify-content: center;
    margin: 4px -9px 0;
}
/* Six across, or two rows of three -- never a ragged five-and-one. The
   basis is a percentage of the row rather than a pixel width, so the books
   divide the space instead of filling it until they run out. */
.shelf a { display: block; flex: 0 0 auto; width: calc(16.666% - 18px);
           margin: 0 9px 20px; }
@media (max-width: 800px) {
    .shelf a { width: calc(33.333% - 18px); }
}
@media (max-width: 420px) {
    .shelf a { width: calc(50% - 18px); }
}
.shelf img {
    width: 100%; height: auto; display: block; border-radius: 2px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.34);
    transition: transform 0.2s, box-shadow 0.2s;
}
.shelf a:nth-child(odd)  img { transform: rotate(-1.4deg); }
.shelf a:nth-child(even) img { transform: rotate(1.1deg); }
.shelf a:hover img {
    transform: rotate(0deg) translateY(-6px) scale(1.03);
    box-shadow: 0 14px 32px rgba(0,0,0,0.45);
}

/* ── Books page ──────────────────────────────────────────────── */

.books { display: flex; flex-wrap: wrap; margin: 0 -13px; }
/* Three across, or two rows of three the other way up. */
.book { flex: 0 0 auto; width: calc(33.333% - 26px); min-width: 0;
        text-align: center; margin: 0 13px 34px; }
@media (max-width: 720px) {
    .book { width: calc(50% - 26px); }
}
.book img {
    width: 100%; height: auto; display: block; border-radius: 2px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    transition: transform 0.18s, box-shadow 0.18s;
}
.book a.coverlink:hover img {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.38);
}
.book h3 { margin: 14px 0 1px; font-size: 24px; color: var(--navy); }
.book .count { color: var(--ink-soft); font-size: 15px; margin: 0 0 9px; }
.book .editions { display: flex; flex-direction: column; gap: 4px;
                  font-size: 15.5px; }
.book .editions a { text-decoration: none; font-weight: 600; }
.book .editions a:hover { text-decoration: underline; }
.book .editions a.lp { color: #c96f80; }
.book .editions a.lp:hover { color: #a94e60; }

/* ── Downloads ───────────────────────────────────────────────── */

/* A list, not a row of tiles. Downloading a PDF is a plain act and the
   page should look like one. */
.downloads { list-style: none; padding: 0; margin: 0; max-width: 34em; }
.downloads li { border-bottom: 1px solid var(--rule); }
.downloads li:first-child { border-top: 1px solid var(--rule); }
.downloads a {
    display: flex; align-items: baseline; gap: 12px;
    padding: 13px 4px; text-decoration: none; color: inherit;
}
.downloads a:hover { background: rgba(255,255,255,0.55); color: inherit; }
.downloads .yr {
    font-family: var(--font-head); font-size: 21px; font-weight: 600;
    color: var(--navy); flex: none; min-width: 3.4em;
}
.downloads .what { flex: 1; color: var(--sea); font-weight: 600; }
.downloads a:hover .what { text-decoration: underline; }
.downloads .meta { color: var(--ink-soft); font-size: 15.5px; }

/* ── Pictures ────────────────────────────────────────────────── */

.photo { margin: 0; }
.photo img { width: 100%; height: auto; display: block; border-radius: 4px; }
.photo.shadowed img { box-shadow: 0 8px 30px rgba(60,45,25,0.22); }
.photo.capped { max-width: 600px; margin-left: auto; margin-right: auto; }
/* A picture still to come: its place and what goes there. */
.photo.placeholder {
    border: 2px dashed var(--rule); border-radius: 4px; padding: 40px 20px;
    text-align: center; color: var(--ink-soft); font-size: 16px;
}
.photo.phone { max-width: 300px; margin-left: auto; margin-right: auto; }
.photo.icon  { max-width: 340px; margin: 6px auto 26px; }
.photo figcaption {
    font-size: 16px; color: var(--ink-soft); margin-top: 10px;
    text-align: center;
}

.split { display: flex; flex-wrap: wrap; align-items: center;
         margin: 0 -19px; }
.split > * { flex: 1 1 300px; min-width: 0; margin: 0 19px; }

/* Two sample pages, side by side, for comparing the editions. */
.pages { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.pages figure { flex: 0 1 350px; max-width: 350px;
                margin: 0 15px 24px; text-align: center; }
.pages img {
    width: 100%; height: auto; display: block; border-radius: 2px;
    border: 1px solid var(--rule);
    box-shadow: 0 6px 22px rgba(60,45,25,0.18);
}
.pages figcaption { margin-top: 12px; font-size: 16.5px; }
.pages figcaption strong { display: block; font-size: 18px;
                           font-family: var(--font-head); }
.pages figcaption span { color: var(--ink-soft); }

.checklist { list-style: none; padding: 0; margin: 0 0 18px; }
.checklist li { padding: 6px 0 6px 30px; position: relative; }
.checklist li::before {
    content: "◆"; position: absolute; left: 0; top: 6px;
    color: var(--coral); font-size: 13px;
}

footer {
    background: var(--shell); color: #b9c6df;
    border-top: 3px solid var(--amber);
    padding: 32px 0; font-size: 16px;
}
footer a { color: #dce6f5; }
footer a:hover { color: #fff; }
footer .wrap { display: flex; justify-content: space-between;
               gap: 14px; flex-wrap: wrap; }

@media print {
    .topbar, footer { display: none; }
    .banner { background: none; color: #000; }
}

.about h3 { margin-top: 30px; }

/* ── The app page ──────────────────────────────────────────────── */

/* A button's symbol, drawn as it is on the button, in a line of text. */
.ui-icon {
    display: inline-block; vertical-align: -0.28em;
    width: 1.35em; height: 1.35em; padding: 0.12em; box-sizing: border-box;
    border: 1px solid var(--rule); border-radius: 6px; background: #fff;
    color: var(--ink);
}
.ui-icon svg {
    display: block; width: 100%; height: 100%;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.ui-icon svg circle { fill: currentColor; stroke: none; }

/* A cut from a screenshot beside the steps it shows; on a narrow screen,
   after them, below the step it shows, and no larger than to bring its
   lettering down to about that of the text. */
.steps-shot { float: right; width: 44%; margin: 4px 0 12px 24px; }
.steps-shot img {
    display: block; width: 100%;
    box-shadow: 0 2px 10px rgba(40, 60, 100, 0.18); border-radius: 12px;
}
.steps-shot + ol { overflow: hidden; }
.steps::after { content: ""; display: block; clear: both; }
@media (max-width: 600px) {
    .steps { display: flex; flex-direction: column; }
    .steps-shot { order: 1; float: none; width: 100%; max-width: 290px; margin: 4px auto 14px; }
}