/* ============================================================================
   The members upgrade of 18 Oct 2026 (loaded only while v2_on(), on top of
   app.css). Daniel: "we can massively improve the members area, especially the
   login". Her system stays exactly as app.css describes it; this layer does
   three things:
     1. READING COMFORT. Body 16px -> 18px (17px on a phone), the size her
        website moved to the same day, and the small grey lines up to 15-16px.
        Her members are mostly 50 to 75.
     2. THE SIGN-IN PAGES (.si): one card, one field, big targets, the two
        ways in said plainly, and this month's picture beside the form.
     3. THE MONTH ON A PHONE: a jump bar under the masthead, a shorter
        masthead, and Linda's photograph beside her name rather than above it.
   Same colours, same one radius (12px), same fonts.
   ========================================================================= */

/* ---- 0. the preview label (only while ui.v2 is 'preview') ---- */
.v2-flag {
  position: fixed; left: 16px; bottom: 16px; z-index: 999; margin: 0;
  background: var(--dark); color: #F3EBDD; border-radius: var(--radius);
  font: 700 13px/1.2 'Manrope', sans-serif; letter-spacing: .04em;
  padding: 11px 14px; box-shadow: 0 10px 30px -12px rgba(28,26,21,.6);
}
.v2-flag a { color: var(--gold); margin-left: 10px; }
@media (max-width: 560px) { .v2-flag { left: auto; right: 10px; bottom: 10px; font-size: 11.5px; padding: 8px 10px; } }
@media print { .v2-flag { display: none; } }

/* ---- 1. reading comfort ---- */
body.v2 { font-size: 18px; line-height: 1.65; }
@media (max-width: 560px) { body.v2 { font-size: 17px; } }
.v2 .small { font-size: 16px; }
.v2 .caption { font-size: 16px; }
.v2 .section-head p { font-size: 18px; }
.v2 .sheet-what { font-size: 15.5px; }
.v2 .past-months .region { font-size: 16px; }
.v2 .film-recipe { font-size: 18px; }
.v2 .error-note, .v2 .notice { font-size: 16px; }
.v2 .footer-brand p { font-size: 16px; }
.v2 .footer-col a, .v2 .footer-col span { font-size: 16px; }
.v2 .footer-bottom { font-size: 15px; color: #C9C1B0; }
.v2 .footer-bottom a { color: #C9C1B0; }
@media (max-width: 560px) { .v2 .sheet-what { font-size: 15px; } }

/* the menu: larger words, same layout (phone nav keeps its measured 11.5px:
   Linda's admin row of five only fits on one line at that size) */
@media (min-width: 561px) { .v2 .site-nav a { font-size: 14px; } }

/* buttons and fields: bigger words, bigger targets */
.v2 .btn { font-size: 15px; padding: 16px 30px; min-height: 52px; }
.v2 label { font-size: 14px; }
.v2 input[type="email"], .v2 input[type="text"] {
  font-size: 18px; min-height: 58px; padding: 15px 18px; border-width: 2px;
}
.v2 input[type="email"]:focus, .v2 input[type="text"]:focus { border-color: var(--sage); outline: none; box-shadow: 0 0 0 4px rgba(85,116,74,.18); }

/* ---- 2. the sign-in pages ---- */
.si { background: var(--cream); padding: 56px 28px 80px; }
.si-shell {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(28,26,21,.35);
}
.si-shell.si-one { max-width: 720px; grid-template-columns: minmax(0, 1fr); }
.si-card { padding: 52px 56px 48px; }
.si-card .script { margin-bottom: 12px; }
.si-lede { font-size: 19px; margin: 0 0 26px; }
.si-addr { word-break: break-all; }
.si-form { margin: 0 0 6px; }
.si-form label { margin-bottom: 8px; }
.si-go { display: block; width: 100%; margin-top: 16px; text-align: center; min-height: 58px; font-size: 16px; }
.si-center { text-align: center; }
.si-center .si-go { max-width: 360px; margin: 18px auto 0; }

.si-help { margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.si-help p { margin: 0 0 10px; font-size: 16px; color: var(--muted); }
.si-help strong { color: var(--ink); }
.si-help-line { margin: 18px 0 0; font-size: 16px; color: var(--muted); }
.si a[href^="tel:"] { white-space: nowrap; }
.si-join { margin: 18px 0 0; font-size: 16px; }

/* this month, beside the form: her photograph, the month in her script */
.si-month {
  position: relative; min-height: 560px; display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
}
.si-month::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,26,21,0) 30%, rgba(28,26,21,.55) 62%, rgba(28,26,21,.92) 100%);
}
.si-month-words { position: relative; padding: 34px 40px; }
.si-month .kicker { color: #fff; margin-bottom: 4px; }
.si-month .script { color: #fff; font-size: clamp(34px, 3.4vw, 46px); margin: 0 0 6px; }
.si-month-meta { margin: 0; color: #F1EBDF; font-size: 16px; }

/* "check your email": the two ways in, numbered */
.si-mailapp { margin: -8px 0 26px; }
.si-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.si-ways li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; }
.si-way-no {
  width: 38px; height: 38px; border-radius: 50%; background: var(--sage); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 16px/1 'Manrope', sans-serif;
}
.si-code { margin-top: 16px; }
.si-code .error-note { margin: 0 0 12px; }
.si-code-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.v2 .si-code input[type="text"] {
  width: 220px; max-width: 100%; text-align: center;
  font: 700 28px/1 'Manrope', sans-serif; letter-spacing: .22em; min-height: 62px;
}
.si-code-row .btn { min-height: 62px; padding-left: 34px; padding-right: 34px; }

.si-trouble { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.si-trouble h2 { font: 600 22px/1.3 'Josefin Sans', sans-serif; margin: 0 0 10px; }
.si-trouble ul { margin: 0 0 18px; padding-left: 20px; }
.si-trouble li { margin: 0 0 8px; }
.si-resend { margin: 0; }

@media (max-width: 819px) {
  .si { padding: 0 0 48px; }
  .si-shell { grid-template-columns: minmax(0, 1fr); border-radius: 0; box-shadow: none; }
  .si-shell.si-one { background: transparent; }
  .si-month { order: -1; min-height: 210px; }
  .si-month-words { padding: 22px 20px; }
  .si-month .script { font-size: 32px; }
  .si-card { padding: 30px 20px 34px; }
  .si-one .si-card { background: var(--white); margin: 16px; border-radius: var(--radius); }
  .si-lede { font-size: 18px; }
  .si-code-row .btn { flex: 1 1 auto; }
  .v2 .si-code input[type="text"] { width: 100%; }
}

/* ---- 3. the month, especially on a phone ---- */
.month-jump {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250,245,235,.97); border-bottom: 1px solid var(--line);
}
.month-jump-inner {
  max-width: var(--shell); margin: 0 auto; padding: 10px 28px;
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
}
.month-jump-inner::-webkit-scrollbar { display: none; }
.month-jump a {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px; border-radius: var(--radius);
  background: var(--white); border: 1.5px solid var(--sage); color: var(--sage-dark);
  font: 800 13px/1 'Manrope', sans-serif; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; touch-action: manipulation;
}
@media (hover: hover) { .month-jump a:hover { background: var(--sage); color: #fff; } }
#films, #menu, #sheets { scroll-margin-top: 72px; }

@media (max-width: 560px) {
  .month-jump-inner { padding: 8px 16px; gap: 8px; }
  .month-jump a { flex: 1 1 auto; padding: 0 12px; font-size: 12px; letter-spacing: .05em; }
  .month-jump a.jump-print { display: none; }
  .v2 .masthead { min-height: min(46vh, 420px); padding-top: 48px; }
}

/* Linda beside her name on a phone: still her 4:5 photograph, never a circle
   (app.css: "Not an avatar"), just small enough that her words start on the
   first screen instead of after a 240px picture. */
@media (max-width: 719px) {
  .v2 .chef-inner { grid-template-columns: 112px minmax(0, 1fr); gap: 4px 18px; align-items: end; }
  .v2 .chef-photo { width: 112px; grid-row: 1 / span 2; }
  .v2 .chef-photo::before { left: 7px; top: 7px; right: -7px; bottom: -7px; }
  .v2 .chef-words { display: contents; }
  .v2 .chef-words .kicker { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 13px; }
  .v2 .chef-name { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 34px; }
  .v2 .chef-lede { grid-column: 1 / -1; margin-top: 18px; }
}

/* ---- 4. the top of every page, finished (7 Nov 2026) ----
   Daniel, looking at November: "the buttons at the top of the page look squashed on
   and the menu at the top bar looks not finished". Two fixes, same brand:
     - the header sits on the same 1080px column as the page, the logo is larger,
       and each menu item is a proper target with a soft cream state instead of a
       bare word with an underline.
     - the jump bar is one white card that overlaps the bottom of the photograph,
       four equal buttons inside it, rather than small pills squeezed into a strip.
       It still sticks to the top while she scrolls. */
.v2 .site-header {
  padding: 14px max(28px, calc((100% - var(--shell)) / 2));
  column-gap: 28px;
}
.v2 .site-header .logo img { height: 58px; }
.v2 .site-nav { gap: 4px; }
.v2 .site-nav a {
  min-height: 46px; padding: 0 14px; border-radius: var(--radius);
  border-bottom: 0; transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) { .v2 .site-nav a:hover { background: var(--cream); color: var(--sage-dark); } }
.v2 .site-nav a.current { background: var(--cream); color: var(--sage-dark); }
.v2 .site-nav a.to-site { border: 1.5px solid var(--sage); margin-left: 8px; }
@media (hover: hover) { .v2 .site-nav a.to-site:hover { background: var(--sage); color: #fff; } }
.v2 .site-nav a[href="/logout"] { color: var(--muted); }

/* the masthead leaves room under the title for the card to overlap */
.v2 .masthead { min-height: min(54vh, 500px); padding-bottom: 76px; }
.v2 .masthead .kicker { margin-bottom: 10px; letter-spacing: .16em; }
.v2 .masthead .script { margin: 0; line-height: 1.02; text-shadow: 0 2px 18px rgba(28,26,21,.35); }

.v2 .month-jump {
  margin-top: -38px; padding: 0 28px; background: transparent; border-bottom: 0;
}
.v2 .month-jump-inner {
  padding: 8px; gap: 8px; background: var(--white); border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(28,26,21,.55), 0 0 0 1px rgba(28,26,21,.06);
}
.v2 .month-jump a {
  flex: 1 1 0; min-height: 56px; padding: 0 18px; border: 0; background: var(--cream);
  font-size: 13.5px; letter-spacing: .08em; transition: background-color .15s ease, color .15s ease;
}
.v2 .month-jump a.jump-print { flex: 0 0 auto; background: var(--sage); color: #fff; }
@media (hover: hover) {
  .v2 .month-jump a:hover { background: var(--sage); color: #fff; }
  .v2 .month-jump a.jump-print:hover { background: var(--sage-dark); }
}
.v2 .month-jump a:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.v2 .month-jump + .chef { padding-top: 40px; }
.v2 #films, .v2 #menu, .v2 #sheets { scroll-margin-top: 96px; }

@media (max-width: 560px) {
  .v2 .site-header { padding: 10px 16px; }
  .v2 .site-header .logo img { height: 44px; }
  .v2 .site-nav { gap: 2px; }
  .v2 .site-nav a { min-height: 44px; padding: 0 7px; }
  .v2 .site-nav a.to-site { margin-left: 2px; padding: 0 8px; }
  .v2 .masthead { padding-bottom: 64px; }
  .v2 .month-jump { margin-top: -32px; padding: 0 12px; }
  .v2 .month-jump-inner { padding: 6px; gap: 6px; }
  .v2 .month-jump a { min-height: 50px; padding: 0 8px; font-size: 12px; letter-spacing: .05em; }
  .v2 .month-jump + .chef { padding-top: 30px; }
}