/* Frame & Fortune Puzzles: site styles
   Felt green and gold, taken from the logo. Fonts are self-hosted (no third-party requests).
   The look: a dark baize under one overhead lamp, with the books in the light. */

@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

:root {
  --felt: #0f3a22;
  --felt-deep: #0a2817;
  --felt-night: #061a0f;
  --felt-lit: #1d5c37;
  --gold: #c9a44c;
  --gold-soft: #e6cc85;
  --paper: #f4f7f2;
  --white: #ffffff;
  --ink: #13241a;
  --muted: #4d5f53;
  --line: #d3dcd3;
  --on-felt: #dbe7dd;
  /* the seven colours */
  --red: #c8102e; --yellow: #f2c200; --green: #1e8a3a; --brown: #7a4a22; --blue: #1f5fd1; --pink: #f07fae; --black: #111111;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1120px;
  --radius: 14px;
  --lift: 0 1px 2px rgba(10,40,23,.06), 0 8px 24px rgba(10,40,23,.10);
  --lift-hover: 0 2px 4px rgba(10,40,23,.08), 0 18px 40px rgba(10,40,23,.18);
  /* fine baize grain, drawn in code */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: var(--felt); text-underline-offset: 3px; }
a:hover { color: var(--felt-lit); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0 0 .5em; color: var(--felt-deep); }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.1rem); letter-spacing: -.005em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 3.8vw, 2.8rem); text-wrap: balance; }
h3 { font-size: 1.65rem; }
p { margin: 0 0 1em; max-width: 66ch; }

.eyebrow {
  font: 700 .82rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--felt-lit); margin: 0 0 .7rem;
}
.badge { display: inline-block; margin-left: .4rem; padding: .1rem .55rem; border-radius: 999px; background: var(--gold); color: var(--felt-deep); letter-spacing: .06em; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(6,26,15,.88);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(201,164,76,.55);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-block: .55rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--gold-soft); text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201,164,76,.6); }
.brand span { font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1; }
.brand:hover { color: var(--white); }
.site-nav { display: flex; gap: .25rem 1.5rem; flex-wrap: wrap; }
.site-nav a { color: var(--on-felt); text-decoration: none; font-weight: 600; font-size: 1rem; padding: .35rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold-soft); border-bottom-color: var(--gold); }

/* ---------- the felt, lit from above ---------- */
.felt {
  position: relative; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 70% at 50% -8%, rgba(255,233,170,.20), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 30%, var(--felt-lit) 0%, var(--felt) 45%, var(--felt-deep) 80%, var(--felt-night) 100%);
  color: #e9f1ea;
}
.felt::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .5; mix-blend-mode: overlay; pointer-events: none; }
.felt h1, .felt h2, .felt h3 { color: var(--gold-soft); }
.felt p { color: var(--on-felt); }
.felt .eyebrow { color: var(--gold); }
.felt a:not(.btn) { color: var(--gold-soft); }

/* gold double rule, echoing the logo's ring and the books' framed pages */
.frame { border: 2px solid var(--gold); box-shadow: inset 0 0 0 5px var(--felt), inset 0 0 0 6px var(--gold); }

/* ---------- the ball rail: seven colours, used as the brand divider ---------- */
.rail { display: flex; gap: .45rem; align-items: center; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.rail li { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset -2px -3px 4px rgba(0,0,0,.35), inset 2px 2px 3px rgba(255,255,255,.35); }
.rail li:nth-child(1) { background: var(--red); }
.rail li:nth-child(2) { background: var(--yellow); }
.rail li:nth-child(3) { background: var(--green); }
.rail li:nth-child(4) { background: var(--brown); }
.rail li:nth-child(5) { background: var(--blue); }
.rail li:nth-child(6) { background: var(--pink); }
.rail li:nth-child(7) { background: var(--black); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.4rem;
  font: 700 1.05rem/1.2 var(--body); text-decoration: none; text-align: center;
  border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: var(--felt-deep); border-color: var(--gold); box-shadow: 0 6px 18px rgba(201,164,76,.28); }
.btn-gold:hover { background: var(--gold-soft); color: var(--felt-deep); }
.btn-line { background: rgba(6,26,15,.25); color: var(--gold-soft); border-color: var(--gold); }
.btn-line:hover { background: rgba(201,164,76,.15); color: var(--white); }
.btn-felt { background: var(--felt); color: var(--white); border-color: var(--felt); }
.btn-felt:hover { background: var(--felt-lit); border-color: var(--felt-lit); color: var(--white); }
.btn-plain { background: var(--white); color: var(--felt); border-color: var(--felt); }
.btn-plain:hover { background: #e8f0e9; color: var(--felt-deep); }

/* ---------- the book mockup: real cover face-on, real spine strip and a page edge drawn
   as flat 2D shapes receding up and to the left. No perspective or 3D transforms, so every
   browser (including iPhone Safari) draws the whole book at every size. ---------- */
.book3d { --w: 220px; --t: calc(var(--w) * .06); display: block; position: relative; isolation: isolate; width: calc(var(--w) + var(--t)); padding: var(--t) 0 0 var(--t); }
.book3d-hero { --w: min(340px, 60vw); }
.book3d::after { /* shadow on the table */
  content: ""; position: absolute; left: 6%; right: -4%; bottom: -4%; height: 8%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%); filter: blur(6px); z-index: -1;
}
.book3d-inner { display: block; position: relative; width: var(--w); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.book3d-cover { display: block; position: relative; z-index: 1; border-radius: 0 3px 3px 0; overflow: hidden; box-shadow: 6px 14px 30px rgba(0,0,0,.45); }
.book3d-cover img { width: 100%; }
.book3d-cover::after { /* soft light across the laminate and a hinge line; the cover itself is untouched */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.30) 0, rgba(255,255,255,.16) 1.4%, rgba(0,0,0,.06) 3.2%, transparent 6%),
    linear-gradient(120deg, rgba(255,255,255,.12) 0%, transparent 40%, transparent 72%, rgba(0,0,0,.10) 100%);
}
.book3d-spine {
  position: absolute; top: 0; left: calc(var(--t) * -1); width: var(--t); height: 100%;
  background-color: #111; background-size: 100% 100%;
  transform-origin: right top; transform: skewY(45deg); filter: brightness(.7);
}
.book3d-top { /* the page block seen along the top edge */
  position: absolute; left: 0; top: calc(var(--t) * -1); width: 100%; height: var(--t);
  transform-origin: left bottom; transform: skewX(45deg);
  background: repeating-linear-gradient(0deg, #efe9da 0 1px, #d9d1bd 1px 2px), #e9e2d0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
a:hover > .book3d .book3d-inner, a:focus-visible > .book3d .book3d-inner { transform: translateY(-4px); }

/* ---------- homepage hero ---------- */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero .lede { font-size: 1.25rem; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-book { display: flex; justify-content: center; position: relative; }
.hero-book::before { /* the pool of lamp light the book sits in */
  content: ""; position: absolute; inset: -12% -20%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,233,170,.20), transparent);
}
.featured-book { display: block; text-decoration: none; }
.hero-note { font-size: .98rem; margin-top: 1.4rem; }
.hero-note strong { color: var(--gold-soft); }

/* ---------- sections ---------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section.flush { padding-top: 0; }
.rail.center { justify-content: center; }
.section-intro { margin-bottom: 2.2rem; }
.section-intro.center { text-align: center; }
.section-intro.center p { margin-inline: auto; }

/* ---------- inside pages ---------- */
.pages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.page-thumb { display: block; text-decoration: none; color: var(--muted); }
.page-thumb img {
  width: 100%; background: var(--white); border-radius: 3px;
  box-shadow: var(--lift); transition: transform .2s, box-shadow .2s;
}
.page-thumb:hover img, .page-thumb:focus-visible img { transform: translateY(-4px); box-shadow: var(--lift-hover); }
.page-cap { display: block; margin-top: .7rem; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.page-thumb:hover .page-cap { color: var(--felt); }

.pages-strip {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem 1.25rem 1.5rem; margin-inline: -1.25rem; scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
}
.pages-strip li { flex: 0 0 min(240px, 62vw); scroll-snap-align: start; }
.strip-hint { font-size: .95rem; color: var(--muted); margin: .25rem 0 0; }

/* ---------- shelf ---------- */
.shelf { display: grid; gap: 1.5rem; }
.shelf-card {
  display: grid; grid-template-columns: minmax(260px, 38%) 1fr; align-items: stretch;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--lift); overflow: hidden;
}
.shelf-cover {
  display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, var(--felt-lit), var(--felt) 55%, var(--felt-deep));
}
.shelf-body { padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem); align-self: center; }
.shelf-body h3 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: .5rem; }
.shelf-body h3 a { color: var(--felt-deep); text-decoration: none; }
.shelf-body h3 a:hover { color: var(--felt-lit); }
.shelf-formats { color: var(--muted); font-size: 1rem; font-style: italic; }
.shelf-card .actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.25rem; }
.shelf-note { color: var(--muted); font-style: italic; margin-top: 1.5rem; }

/* ---------- three ways to play ---------- */
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.format {
  display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: rgba(6,26,15,.45); border: 1px solid rgba(201,164,76,.35);
}
.format-visual {
  display: flex; align-items: center; justify-content: center; height: 290px; padding: 1.75rem 1.25rem; overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 50% 30%, rgba(255,233,170,.14), transparent 70%);
}
.format-visual .book3d { --w: 150px; }
.format-visual .device-tablet { width: 164px; }
.format-visual .device-phone { width: 118px; }
.format-body { padding: 1.4rem 1.6rem 1.7rem; border-top: 1px solid rgba(201,164,76,.35); }
.format h3 { font-size: 1.6rem; margin-bottom: .4rem; }
.format p { font-size: 1.04rem; margin: 0; }

/* devices, drawn in code around real pages and screenshots */
/* each frame is shown whole, centred in its box; widths are set per box so the full height always fits */
.device { display: block; flex: none; background: #121614; box-shadow: 0 0 0 1px #2c3530, 0 14px 28px rgba(0,0,0,.45); }
.device img { width: 100%; background: var(--white); }
.device-tablet { padding: 10px; border-radius: 16px; }
.device-tablet img { border-radius: 4px; }
.device-phone { padding: 7px; border-radius: 22px; }
.device-phone img { border-radius: 15px; }

/* ---------- book page ---------- */
.book-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.book-hero-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.book-hero .series { color: var(--gold); }
.book-hero .byline { color: var(--on-felt); font-style: italic; }
.contents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(201,164,76,.45); margin-top: 1.8rem; border: 1px solid rgba(201,164,76,.45); border-radius: 10px; overflow: hidden; }
.contents div { background: rgba(10,40,23,.92); padding: 1rem 1.1rem; }
.contents strong { display: block; font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--gold-soft); }
.contents span { font-size: .96rem; color: var(--on-felt); line-height: 1.35; display: block; margin-top: .3rem; }
.jump { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.editions { display: grid; gap: 1.5rem; }
.edition {
  display: grid; grid-template-columns: 240px 1fr minmax(220px, 260px); gap: 1.25rem 2.5rem; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 2rem 1.75rem 1.75rem; box-shadow: var(--lift);
}
.edition-visual {
  align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 270px; padding: 1.5rem; overflow: hidden;
  border-radius: 10px; background: radial-gradient(ellipse 90% 90% at 50% 15%, var(--felt-lit), var(--felt) 55%, var(--felt-deep));
}
.edition-visual .book3d { --w: 140px; }
.edition-visual .device-tablet { width: 152px; }
.edition-visual .device-phone { width: 110px; }
.edition h3 { margin-bottom: .3rem; }
.edition .for { color: var(--muted); font-weight: 600; margin-bottom: .8rem; }
.edition ul { margin: 0; padding-left: 1.2rem; }
.edition li { margin-bottom: .35rem; max-width: 60ch; }
.buy { display: flex; flex-direction: column; gap: .6rem; }
.buy .small { font-size: .92rem; color: var(--muted); margin: .2rem 0 0; text-align: center; }

.sample-band { margin-top: 3rem; padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--radius); }
.sample-band .inner { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; }
.sample-band h2 { margin-bottom: .3rem; }
.sample-band p { margin: 0; }

.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.6em; }

/* ---------- lightbox ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 760px); max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(6,26,15,.88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox figure { margin: 0; }
.lightbox img { max-height: 82vh; width: auto; margin-inline: auto; background: var(--white); border-radius: 4px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.lightbox figcaption { color: var(--gold-soft); text-align: center; margin-top: .8rem; font-weight: 600; }
.lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--gold);
  background: var(--felt-deep); color: var(--gold-soft); font: 700 1.5rem/1 var(--body); cursor: pointer;
  display: grid; place-items: center;
}
.lb-btn:hover { background: var(--felt-lit); }
.lb-close { top: -14px; right: -14px; }
.lb-prev, .lb-next { top: 41vh; }
.lb-prev { left: -64px; }
.lb-next { right: -64px; }

/* ---------- footer ---------- */
.site-footer { background: var(--felt-night); color: #c9d8cc; padding-block: 3rem 2.5rem; font-size: 1rem; border-top: 1px solid rgba(201,164,76,.55); }
.site-footer a { color: var(--gold-soft); }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.footer-grid p { margin: 0 0 .5rem; }
.footer-brand { display: flex; gap: .9rem; align-items: flex-start; }
.footer-brand img { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.disclosure { max-width: none; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(201,164,76,.3); font-size: .95rem; }

/* ---------- smaller screens ---------- */
@media (max-width: 980px) {
  .edition { grid-template-columns: 200px 1fr; }
  .edition .buy { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .edition .buy .btn { flex: 1 1 200px; }
  .formats { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .format { display: grid; grid-template-columns: 200px 1fr; }
  .format-visual { height: auto; min-height: 270px; }
  .format-visual .device-tablet { width: 156px; }
  .format-body { border-top: 0; border-left: 1px solid rgba(201,164,76,.35); align-self: center; }
}
@media (max-width: 820px) {
  .hero-grid, .book-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-book { order: -1; }
  .hero .lede, .book-hero p { margin-inline: auto; }
  .hero-actions, .jump, .rail { justify-content: center; }
  .contents { grid-template-columns: repeat(2, 1fr); text-align: left; }
  .book3d-hero { --w: min(280px, 50vw); }
  .book-hero .book3d-hero { margin-inline: auto; }
  .shelf-card { grid-template-columns: 1fr; text-align: center; }
  .shelf-body p { margin-inline: auto; }
  .shelf-card .actions { justify-content: center; }
  .pages { grid-template-columns: repeat(2, 1fr); }
  .site-header .wrap { justify-content: center; }
  .lb-prev, .lb-next { top: auto; bottom: -64px; }
  .lb-prev { left: calc(50% - 60px); }
  .lb-next { right: calc(50% - 60px); }
  .lb-close { right: 0; top: -58px; }
  .lightbox img { max-height: 72vh; }
}
@media (max-width: 560px) {
  .edition { grid-template-columns: 1fr; padding: 1.25rem; }
  .format { grid-template-columns: 1fr; }
  .format-body { border-left: 0; border-top: 1px solid rgba(201,164,76,.35); }
}
@media (max-width: 420px) {
  body { font-size: 1.06rem; }
  .brand span { font-size: 1.2rem; }
  .brand img { width: 38px; height: 38px; }
  .site-nav { gap: .25rem 1.1rem; }
  .hero-actions .btn, .jump .btn, .sample-band .btn, .shelf-card .actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  a:hover > .book3d .book3d-inner { transform: none; }
  .btn:hover, .page-thumb:hover img { transform: none; }
}