/* ============================================================
   «מהדורה» — storefront.css
   The shop is a front page of the same newspaper: paper.css sets
   the paper, the ink and the furniture, and nothing here adds a
   colour or a typeface. What it adds is the composition of a
   broadsheet that happens to be selling itself.
   ============================================================ */

/* ---------- The sheet ----------
   paper.css centres page chrome on --measure (44rem = one reading
   column). A front page is a whole broadsheet, so the chrome and
   the selling sections widen; the legal pages keep --measure,
   because they are read, not scanned. */
:root { --sheet: 66rem; }

.masthead,
.dateline,
.page-footer,
.lead,
.sections,
.how,
.price,
.faq,
.closer,
.rule {
  max-inline-size: var(--sheet);
  margin-inline: auto;
}

/* ---------- Nameplate ---------- */
.masthead { padding-block: .9rem .7rem; }
.masthead__title { font-size: clamp(2.6rem, 12vw, 6rem); }
.masthead__ears { font-size: .74rem; }
.masthead__tagline { margin-block-start: .3rem; font-size: .88rem; }

.dateline { font-size: .76rem; }

/* ---------- Lead story ----------
   The headline is the one loud thing on the page; everything under
   it is set quietly so the sentence lands. */
.lead { padding-block: 1.1rem .4rem; }

.lead .headline-1 {
  font-size: clamp(2.1rem, 9vw, 3.4rem);
  margin-block-end: .7rem;
}

.lead__standfirst,
.lead__body p {
  margin-block: 0 .9rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

.lead__body p:last-child { margin-block-end: 0; }
.lead__body { margin-block-end: .8rem; }

/* The product, rising from the fold: the top of a phone with a real
   edition's front page in it, cut by the double rule a broadsheet folds on.
   On a phone only the nameplate shows — her name as the paper's title is
   the whole idea — so the button stays on the first screen. */
.lead__shot { margin: 1rem 0 0; }

.lead__phone {
  inline-size: min(15.5rem, 64%);
  block-size: 11.5rem;
  margin-inline: auto;
  overflow: hidden;
  border: .45rem solid var(--ink);
  border-block-end: 0;
  border-radius: 1.9rem 1.9rem 0 0;
  background: var(--paper);
}

.lead__phone img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.lead__shot figcaption {
  border-block-start: 3px double var(--ink);
  padding-block-start: .35rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  color: var(--ink-soft);
  text-align: center;
}

.lead .btn-row { margin-block: 1rem 1.2rem; }

.lead__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--ink-soft);
}

/* ---------- Section headings ---------- */
.section-head { margin-block-end: 1rem; }
.section-head .headline-2 { margin-block-end: .2rem; }

.section-head__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--ink-soft);
}

.sections, .how, .price, .faq, .closer { padding-block: .6rem; }

/* ---------- The seven teasers ----------
   Two to a row on a phone: seven full-width photographs would turn
   the page into a scroll, and the whole point of the row is that
   you can see how much is in there at a glance. The last card is
   left ragged on purpose — a newspaper column ends where it ends. */
.teasers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.teaser { padding: .6rem .6rem .75rem; }

.teaser__shot {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 39 / 56;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  margin-block-end: .55rem;
}

.teaser .kicker { font-size: .72rem; margin-block-end: .15rem; }
.teaser .headline-3 { font-size: 1rem; }
.teaser p { font-size: .84rem; line-height: 1.5; }

/* ---------- How it works ----------
   Numbered because it genuinely is a sequence: nothing happens out
   of order, and the number is how you find your place in it. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: .8rem;
  padding-block: .9rem;
  border-block-start: 1px solid var(--rule);
}

.step:first-child { border-block-start: 0; padding-block-start: .2rem; }

.step::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gold);
}

.step .headline-3 { margin-block-end: .2rem; }

.step p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- The price box ----------
   A classified ad: ruled box, one number, and the small print that
   makes the number safe to say yes to. */
.price {
  background: var(--paper-card);
  border: 2px solid var(--ink);
  box-shadow: 3px 4px 0 rgba(26, 23, 19, .1);
  padding: 1.1rem 1rem 1.2rem;
  margin-block: 1.6rem;
}

.price__head .headline-2 { margin-block-end: .4rem; }
.price__stamp { margin: 0 0 1rem; }

.price__list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.price__list li {
  position: relative;
  padding-inline-start: 1.1rem;
  padding-block: .35rem;
  border-block-end: 1px dotted var(--rule);
  font-size: .97rem;
}

.price__list li:last-child { border-block-end: 0; }

/* A printed bullet: the same ink square the sections' rules are cut from. */
.price__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .95em;
  inline-size: .4rem;
  block-size: .4rem;
  background: var(--accent);
}

.price__guarantee {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .86rem;
  color: var(--ink-soft);
}

.price .btn-row { margin-block: 1.1rem 0; }

/* ---------- Questions and answers ---------- */
.qa { margin: 0; }

.qa dt {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  padding-block-start: .85rem;
}

.qa dd {
  margin: 0;
  padding-block: .25rem .85rem;
  border-block-end: 1px solid var(--rule);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.qa dd:last-of-type { border-block-end: 0; }

/* ---------- Closing call ---------- */
/* One rule above it, and the footer's own rule closes it from below —
   stacking a second double rule here just made two of the same device. */
.closer {
  text-align: center;
  border-block-start: 3px double var(--ink);
  padding-block: 1.5rem .6rem;
  margin-block: 1.8rem 0;
}

.closer .headline-2 { margin-block-end: .3rem; }
.closer p { margin: 0; color: var(--ink-soft); }
.closer .btn-row { justify-content: center; margin-block-end: 0; }

/* ---------- The order form ----------
   Not a wizard and not a checkout: the counter at a newspaper office where you
   hand in your copy. Each section is a filed docket — a thick ink rule on top,
   a lettered ordinal beside its name, and one line saying what the section is
   for. The paper's own furniture does the rest; nothing here invents a colour.
   The measure stays narrow even on a wide screen, because a form is read one
   question at a time. */
.order {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-block: 1rem;
}

.order__standfirst {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-block: .5rem .7rem;
}

.order__meta {
  margin: 0 0 1.4rem;
  padding-block-end: .9rem;
  border-block-end: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--ink-soft);
}

/* A <section> with a heading rather than a <fieldset> with a <legend>: the
   sections are navigational, not a group of controls that share one label, and
   a heading is what a screen reader jumps between in a form this long. (A
   legend would also be read out before every field inside it.) The real
   fieldsets are further down, around the radio groups, where they belong. */
.field-group {
  margin: 0 0 1.6rem;
  padding: .9rem .9rem 1.1rem;
  border: 1px solid var(--rule);
  border-block-start: 3px solid var(--ink);
  background: var(--paper-card);
  box-shadow: 1px 2px 0 rgba(26, 23, 19, .08);
}

.field-group__legend {
  margin: 0 0 .1rem;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.25;
}

.field-group__ord {
  color: var(--gold);
  font-size: 1.5rem;
  padding-inline-end: .15em;
}

.field-group__note {
  margin: 0 0 1.1rem;
  padding-block-end: .7rem;
  border-block-end: 1px dotted var(--rule);
  font-family: var(--font-sans);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.field-group--closing .field-group__legend { margin-block-end: .9rem; }

.field { margin-block-end: 1.15rem; border: 0; padding: 0; min-inline-size: 0; }
.field:last-child { margin-block-end: 0; }

/* Two answers that belong to one fact (the date and the number of candles on
   it) sit together once there is room, and stack when there is not. */
.field-row { display: grid; gap: 1.15rem; margin-block-end: 1.15rem; }
.field-row .field { margin-block-end: 0; }
.field-row:last-child { margin-block-end: 0; }

.field__label {
  display: block;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .95rem;
}

.field__optional {
  font-weight: 400;
  font-size: .76rem;
  color: var(--ink-soft);
}

.field__optional::before { content: "· "; }

/* The examples are half the product: they are what tells someone what kind of
   detail actually makes the paper funny. */
.field__help {
  margin: .15rem 0 .4rem;
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.field__input {
  display: block;
  inline-size: 100%;
  min-height: 44px;
  padding: .5rem .6rem;
  font-family: var(--font-sans);
  font-size: 1rem;              /* 16px: anything smaller zooms iOS on focus */
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.field__input:focus { border-color: var(--ink); }
.field__input--long { resize: vertical; font-family: var(--font-serif); line-height: 1.65; }

.field__input[aria-invalid="true"] { border-color: var(--accent); border-inline-start-width: 3px; }

/* «0 / 4000» is one left-to-right run. Left to the bidi algorithm in an RTL
   line it becomes two numbers in Hebrew order and reads «4000 / 0», which says
   the opposite of what the counter counts. Isolated and set ltr, it stays
   itself; text-align: end then still puts it on the RTL column's own edge. */
.field__count {
  margin: .2rem 0 0;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: end;
  font-family: var(--font-sans);
  font-size: .72rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.field__count.is-full { color: var(--accent); }

/* Errors are printed in the margin the moment they exist and take no room
   before that — an empty live region that appears with its own text is the
   classic way to lose the announcement. */
.field__error,
.form-error { margin: .3rem 0 0; font-family: var(--font-sans); font-size: .82rem; color: var(--accent); }
/* A field error is described by the field it hangs under, not a live region:
   the control's own aria-invalid + aria-describedby is what carries it, so it
   may leave the tree entirely while it is empty. */
.field__error:empty { display: none; }

.form-error {
  margin: 0 0 1.2rem;
  padding: .6rem .7rem;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
}

/* The summary is role="alert", and a live region that arrives in the
   accessibility tree already carrying its text announces nothing — the same
   defect the cake toast was ruled on for. `display: none` would do exactly
   that, so the empty summary stays rendered and merely takes no room: with no
   padding and no border an empty <p> is zero pixels tall, background and all.
   A 500 or an offline send is the case that needs it, because that message has
   no field to land on and this box is the only thing that says anything. */
.form-error:empty {
  margin: 0;
  padding: 0;
  border-width: 0;
}

/* ---------- Choices ---------- */
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-row--stack { flex-direction: column; align-items: stretch; }

.choice {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .3rem .8rem .3rem .6rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: .95rem;
  cursor: pointer;
}

.choice input { accent-color: var(--accent); inline-size: 1.05rem; block-size: 1.05rem; }
.choice:has(input:checked) { border-color: var(--ink); background: var(--paper-deep); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The label is the checkbox's hit area — the box itself is 18px square and
   nobody aims at it — so the label has to be a comfortable target on its own.
   On a phone the sentence wraps to three lines and is tall anyway; on a wide
   screen it fits on one, and without a floor here the whole consent control
   collapses to the height of a single line of text. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  min-block-size: 44px;
  padding-block: .35rem;
  font-family: var(--font-sans);
  font-size: .88rem;
  line-height: 1.55;
  cursor: pointer;
}

.consent input {
  accent-color: var(--accent);
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: .15rem;
  flex: none;
}

/* Invisible, unreachable by tab and hidden from the accessibility tree: only a
   robot filling every input it finds will ever put anything in it. Clipped in
   place rather than parked off-page — in RTL an inset-inline-start of -9999px
   is 9999px to the *right*, which is the whole document's width plus a form. */
.field--honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Photographs ---------- */
.photo-grid { display: grid; gap: 1.4rem; }
.photo-slot { min-inline-size: 0; }
.photo-slot:last-child .field__error { margin-block-end: 0; }

/* The browser's own file control labels itself «Choose File» in the browser's
   UI language, which on a Hebrew page is simply the wrong language and cannot
   be restyled. So the input is hidden — visually, not from the keyboard: it
   keeps its place in the tab order, Space still opens the picker, and the
   label beside it wears the focus ring on its behalf. */
.photo-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
}

.photo-picker__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.photo-picker__button { font-size: .9rem; }

/* The label is the input's own next sibling, so the ring needs no :has() and
   no browser that might not have it. */
.photo-picker__input:focus-visible + .photo-picker__button { outline: 2px solid var(--accent); outline-offset: 2px; }

.photo-picker__name {
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* The one place the form allows itself a flourish: the moment a photograph is
   chosen it is already mounted like a press print — white board, hairline
   rule, a degree off square. What you see is exactly the crop the paper gets. */
/* The `display: block` below beats the browser's own `[hidden]` rule, so the
   frame needs it put back explicitly — without this the empty figure stands
   under both pickers from the moment the form loads, showing a broken-image
   icon and the alt text of a photograph nobody has chosen yet. Same reasoning,
   and the same one-line remedy, as .cake-controls[hidden] and .letter[hidden]. */
.photo-slot__frame[hidden] { display: none; }

.photo-slot__frame {
  display: block;
  max-inline-size: 14rem;
  margin: .8rem auto .2rem;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 2px 3px 0 rgba(26, 23, 19, .12);
  transform: rotate(-.7deg);
}

.photo-slot__img { display: block; inline-size: 100%; }

.photo-slot__caption {
  padding: .4em .1em .1em;
  font-family: var(--font-sans);
  font-size: .72rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.order-form__send { inline-size: 100%; margin-block-start: .4rem; }
.order-form__send[disabled] { opacity: .6; cursor: progress; }

.order-form__note {
  margin: .7rem 0 0;
  font-family: var(--font-sans);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- The thanks page ---------- */
.thanks {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-block: 1.6rem .5rem;
}

.thanks__standfirst {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-block: .5rem 1.3rem;
}

/* The docket number, set as a printed reference rather than a headline: it is
   a thing to read back to us, so it is spaced to be read aloud. */
.thanks__docket {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  margin: 0;
  padding: .7rem .9rem;
  border: 2px solid var(--ink);
  background: var(--paper-card);
  box-shadow: 3px 4px 0 rgba(26, 23, 19, .1);
}

.thanks__docket-label {
  font-family: var(--font-sans);
  font-size: .78rem;
  color: var(--ink-soft);
}

.thanks__docket-id {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: .06em;
  line-height: 1.1;
}

.thanks__secondary {
  margin: -.4rem 0 1.1rem;
  font-family: var(--font-sans);
  font-size: .85rem;
}

/* The alternative to the big mail button, and the only other way off this page
   for someone whose mail lives in a browser tab. It sits on its own line, so
   it is a target in its own right rather than a word inside a sentence, and a
   line of 14px text is 20px of it. inline-flex so the box grows without the
   underline stretching across the whole column. */
.thanks__secondary a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

.thanks__address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-family: var(--font-sans);
  font-size: .88rem;
  color: var(--ink-soft);
}

.thanks__email { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.thanks__copy { min-height: 44px; padding: .2em .8em; font-size: .82rem; }
.thanks__copied { color: var(--accent); font-size: .82rem; }
.thanks__next { padding-block: .4rem 1rem; }
.thanks__next .headline-2 { margin-block-end: .9rem; }

/* ---------- Legal pages ---------- */
.legal .headline-1 { font-size: clamp(1.8rem, 6.5vw, 2.4rem); }

.legal__standfirst {
  font-size: 1.02rem;
  color: var(--ink-soft);
  border-block-end: 1px solid var(--rule);
  padding-block-end: .9rem;
  margin-block-end: 1.2rem;
}

.legal .headline-2 {
  font-size: 1.2rem;
  margin-block: 1.6rem .4rem;
}

/* The no-script order path's list of what to fix. */
.order-errors {
  margin: 0 0 1.2rem;
  padding-inline-start: 1.2rem;
  line-height: 1.7;
  color: var(--accent);
}

/* ---------- 404 ---------- */
.missing {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-block: 2.5rem 1rem;
}

.missing .headline-1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.missing p { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.shop-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem 1.1rem;
  margin-block-end: .5rem;
}

/* 44px of hit area without 44px of visible strip. */
.shop-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -.7rem;
}

.shop-footer__colophon { margin: 0; }

/* ---------- Utility ----------
   The same rule puzzle.css carries: text for a screen reader and for nothing
   else. Used on the consent links, which open in a new tab — a fact a sighted
   reader infers from the tab strip and nobody else is told at all. */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Wider paper ---------- */
@media (min-width: 640px) {
  .teasers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
  .teaser { padding: .75rem .8rem .9rem; }
  .price { padding: 1.5rem 1.6rem 1.6rem; }

  .field-group { padding: 1.1rem 1.3rem 1.3rem; }
  .field-row { grid-template-columns: 1.5fr 1fr; column-gap: 1.1rem; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .order-form__send { inline-size: auto; min-inline-size: 16rem; }
}

@media (min-width: 900px) {
  /* The story on the right, the phone beside it on the left, standing on
     the same fold. */
  .lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    /* The phone is taller than the story: the last row takes the slack, so
       the story stays packed together and the note sits under it. */
    grid-template-rows: repeat(5, auto) 1fr;
    column-gap: 3rem;
    align-content: start;
    padding-block: 1.6rem .6rem;
  }

  .lead > * { grid-column: 1; }
  .lead > .lead__shot { grid-column: 2; grid-row: 1 / span 6; align-self: start; margin: 0; }
  .lead > .lead__note { align-self: start; }
  .lead__phone { inline-size: 100%; block-size: 34rem; }

  .teasers { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* A display ad rather than a full-width strip: the number and the promise on
     one side of the box, what you get on the other. */
  .price {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    grid-template-areas: "head list" "guarantee list" "cta list";
    align-content: start;
    column-gap: 2.6rem;
  }

  .price__head { grid-area: head; }
  .price__list { grid-area: list; align-self: center; margin-block-end: 0; }
  .price__guarantee { grid-area: guarantee; }
  .price .btn-row { grid-area: cta; margin-block: 1rem 0; }

  /* Three columns with a rule cut between them, as a broadsheet sets them. */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2.6rem; }
  .step { border-block-start: 0; padding-block: .2rem 0; }
  .step:not(:last-child) { border-inline-end: 1px solid var(--rule); padding-inline-end: 1.3rem; }

  /* The glossary shape: question on the right, answer beside it. */
  .qa {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 2.1fr;
    column-gap: 1.8rem;
  }

  .qa dt { padding-block: .85rem .85rem; border-block-end: 1px solid var(--rule); }
  .qa dd { padding-block: .85rem; }
  .qa dt:last-of-type { border-block-end: 0; }
}