/* ============================================================================
   Item pages: guides and tools.

   The gate covers the reader only. Everything above it is public — and since
   2026-08-06 the gate is a MODAL, so the public copy no longer shares a column
   with a signup form at all.

   LAYOUT (rebuilt 2026-08-06). The old head was a single 70ch column: on a
   1560px container that put the eyebrow, title, subtitle, description, date and
   cover in the left third with two thirds of the page empty. It is now a real
   masthead — the cover beside the type, both sized like they mean it, on the
   same gold-rule signage the shelves use.
   ========================================================================== */

.item { padding-block: 64px 96px; position: relative; }

/* A guide page is a READING page, not a browsing one. The shelf container is
   1560px because it fills that width with books; a cover and a paragraph never
   will, and stretching the measure to match would be worse than the problem it
   fixes. So the guide gets its own narrower measure, and the masthead fills it.
   Tools keep the full width: their embed genuinely uses it. */
.page-item--guide .item { --container: 1280px; }

/* ---------------------------------------------------------------- MASTHEAD -- */

.item__head {
  display: grid;
  gap: 44px 76px;
  align-items: start;
}

/* Cover left, type right. The cover is the object the page is about, so it is
   sized as one rather than as a thumbnail under the text. */
.item__head--guide { grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); }

/* A tool carries cover:null in the manifest by design, so there is no artwork
   to balance against. The type splits instead — title block against
   description — rather than leaving a cover-shaped hole on the left. */
.item__head--tool {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1280px;
}

.item__intro, .item__titleblock { min-width: 0; }

/* THE COVER NEEDS A GROUND, and this is why. The approved cover set is cream
   with a gold rule, and the library page is cream: on the shelf that is fine
   because the books stand on wood, but drop one onto the item page and it
   dissolves into the background — verified on the served page, where the cover
   read as a white rectangle until you looked closely. The covers are approved
   and closed, so the fix belongs here: give it the same plank it stands on
   everywhere else. Geometry copied from .shelf__board — an 18px plank with the
   book sitting 6px into it. */
.item__cover {
  position: relative;
  padding-bottom: 12px;      /* plank height 18 minus the 6px book drop */
}

.item__cover::after {
  content: '';
  position: absolute;
  left: -24px;
  right: -24px;
  bottom: 0;
  height: 18px;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    var(--wood-light) 0, var(--wood-light) 2px,          /* lit top edge */
    var(--wood-mid) 2px, var(--wood-deep) 14px,          /* the face */
    rgba(46, 34, 22, 0.85) 14px, rgba(46, 34, 22, 0.35) 100%   /* underside */
  );
}

.item__cover-art { display: block; position: relative; z-index: 1; }
.item__cover-art img {
  width: 100%;
  height: auto;
  /* The same two-part contact shadow the books carry on the shelf: a tight dark
     line where it meets the plank, and a wide soft one behind it. */
  box-shadow: 0 3px 4px rgba(46, 30, 18, 0.34), 0 18px 40px rgba(46, 30, 18, 0.24);
}

.item__shelf {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.item__shelf a { color: var(--gold); text-decoration: none; }
.item__shelf a:hover, .item__shelf a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.item__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(38px, 3.6vw, 54px);
  line-height: 1.1;
  color: var(--brown);
}

/* The gold rule under the title block is the shelf signage, reused: it is what
   makes this read as the same shop as the page it was reached from. */
.item__subtitle {
  margin: 12px 0 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gold);
  font-family: var(--font-head);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.35;
  color: var(--ink-soft);
}

.item__description {
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  max-width: 62ch;
}

/* On a tool head the description opens its own column, so it aligns with the
   eyebrow across the gap rather than hanging 26px below it. */
.item__head--tool .item__description { margin-top: 0; }

.item__published {
  margin: 20px 0 0;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
}

.item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.item .freshness { margin-top: 44px; }

.item__back {
  margin: 56px 0 0;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.item__back a { color: var(--brown); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.item__back a:hover, .item__back a:focus-visible { color: var(--gold); }

/* ------------------------------------------------------------------ READER --
   The frame only. The poster is the masthead cover now, and the gate is a
   modal, so nothing else is left in here.
   -------------------------------------------------------------------------- */

.reader__frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 420px;
  margin-top: 44px;
  background: var(--brown-deep);
}
.reader__frame[hidden] { display: none; }
.reader__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.reader__open, .reader__full, .reader__nojs {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 2.72px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 16px;
  border: 0;
  cursor: pointer;
  background: var(--gold);
  color: #fff;
  transition: background-color 0.2s var(--ease);
}
/* An author `display` beats the UA stylesheet's [hidden] rule, so setting one
   above silently un-hides anything carrying the attribute. It did: "Full
   screen" shipped visible next to "Read it here" on the draft, before the
   flipbook existed to go full screen. Any display declaration on these buttons
   needs this line next to it. */
.reader__open[hidden], .reader__full[hidden], .reader__nojs[hidden] { display: none; }

.reader__open:hover, .reader__full:hover, .reader__nojs:hover,
.reader__open:focus-visible, .reader__full:focus-visible, .reader__nojs:focus-visible { background: var(--brown); color: #fff; }
.reader__full { background: transparent; color: var(--brown); border: 1px solid var(--hairline); }
.reader__full:hover, .reader__full:focus-visible { background: var(--brown); color: #fff; }

/* ======================================================================== GATE
   The soft gate is Flodesk's own POPUP form (6a748fab15d401f691b5d925), mounted
   by gate.js into .gate-host at the moment someone presses "Read it here".

   >>> THERE IS ALMOST NOTHING TO STYLE HERE, ON PURPOSE. <<<

   The panel, the scrim, the close button and every field are Flodesk's, laid
   out by their builder at 512px. That is the whole reason this form replaced the
   inline one: the inline form's headline broke mid-word — "Rea d our who le
   libr ary!" — when it was squeezed into our page column, because it does not
   reflow below the width it was designed at. Restyling it here would walk
   straight back into that. So this block adds only what their popup lacks:
   somewhere to live, a scroll lock, and room on a phone.
   -------------------------------------------------------------------------- */

/* Their modal is position:fixed and lifts itself to z-index 1040 when open,
   which already clears the site header at 1001. The host must not create a
   containing block (no transform, no filter, no contain) or that fixed
   positioning would be trapped inside it. */
.gate-host { position: static; }

/* ------------------------------------------------------------ SCROLL LOCK --
   Their popup does not stop the page behind it from scrolling. On a phone that
   is the difference between a form and a mess. */
html.gate-is-open, html.gate-is-open body { overflow: hidden; }

/* --------------------------------------------------------------- ON A PHONE --
   Their dialog sits at width:calc(100% - 60px) with 30px margins, so on a 375px
   handset the form gets 315px. This hands it the full width instead — a sheet
   rather than a card. Note the DIRECTION: this only ever gives the form MORE
   room, never less, so it cannot reintroduce the breaking it was brought in to
   fix. It is also the only rule in this file that reaches into their markup,
   and it deliberately touches the dialog box alone, never a field.

   [class] is there to out-specify their own injected stylesheet, which loads
   after this one. */
@media (max-width: 600px) {
  .gate-host [data-ff-el="root"][class] .fd-modal__dialog {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 100%;
  }
}

/* ------------------------------------------------------------------- TOOLS --
   The imported scorecards. Their own CSS is scoped to .tool-embed by
   tools/import-tools.js, so it cannot reach the site chrome.
   -------------------------------------------------------------------------- */

.tool-embed {
  margin-top: 44px;
  background: #fff;
  border-top: 2px solid var(--gold);
  padding: 34px 30px 40px;
  color: var(--ink);
}
.tool-embed img { display: inline-block; }

/* ------------------------------------------------------------------- NARROW -- */

@media (max-width: 899px) {
  .item__head--guide, .item__head--tool { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .item__cover { width: 220px; }
}

@media (max-width: 767px) {
  .item { padding-block: 44px 64px; }
  .item__cover { width: 180px; }
  .item__description { font-size: 15px; }
  .reader__frame { min-height: 320px; }
  .tool-embed { padding: 24px 18px 30px; }
}