/* ===========================================================================
   forluly.com — /flyer
   ---------------------------------------------------------------------------
   A print stylesheet with a screen preview bolted on, rather than the other
   way round. Every dimension is in inches or points so what you see is what
   comes out of the printer.

   Two rules govern everything here:

     1. It has to survive a black-and-white office printer. The terracotta is
        decoration — no information depends on colour. Check any change by
        printing it in grayscale before deciding it works.

     2. It has to work from six feet away. That is what sets the headline
        size, the QR size, and the ruthlessness of the word count.

   Contents
     1. Tokens
     2. Page & sheet
     3. Screen chrome (controls, preview backdrop)
     4. Flyer layout
     5. Tear-off tabs
     6. Variants
     7. Print
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS  — deliberately a subset of the site's, so the flyer looks
   like it came from the same place without importing 1500 lines of CSS.
   ------------------------------------------------------------------------ */
:root {
  --ink:          #2c2320;
  --ink-2:        #574a44;
  --ink-3:        #8a7a72;
  --sand:         #ede0d1;
  --rule:         #b4b2a9;
  --terracotta:   #b3543f;
  --white:        #ffffff;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Set by flyer.js from the paper-size control. */
  --sheet-w: 8.5in;
  --sheet-h: 11in;
  --sheet-pad: 0.45in;
}

/* ---------------------------------------------------------------------------
   2. PAGE & SHEET
   ------------------------------------------------------------------------ */

/* The @page margin is zero and the sheet supplies its own padding. That keeps
   one number in charge of the printable edge instead of two that have to
   agree. flyer.js writes the matching `size` declaration. */
@page { margin: 0; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: #ffffff;
}

.sheet {
  width: var(--sheet-w);
  /* One point short of the page. A sheet sized to exactly the paper height
     rounds over the edge in some renderers and emits a blank second page;
     1pt is invisible and makes the single-page guarantee deterministic. */
  height: calc(var(--sheet-h) - 1pt);
  padding: var(--sheet-pad);
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* a flyer that spills onto page two is a bug */
  page-break-after: always;
  break-after: page;
}
.sheet:last-child { page-break-after: auto; break-after: auto; }

/* ---------------------------------------------------------------------------
   3. SCREEN CHROME
   ------------------------------------------------------------------------ */
@media screen {
  body {
    background: #f2efea;
    padding: 0 0 3rem;
  }

  .controls {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--white);
    border-bottom: 1px solid #e2dcd4;
    padding: 0.85rem 1.25rem;
  }
  .controls-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    max-width: 68rem;
    margin: 0 auto;
  }
  .control { display: flex; flex-direction: column; gap: 0.25rem; }
  .control label {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .control select,
  .control input {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #d8d1c8;
    border-radius: 6px;
    background: var(--white);
    color: var(--ink);
    min-width: 10rem;
  }
  .control-label input { min-width: 14rem; }
  .control-print {
    font: inherit;
    font-weight: 500;
    padding: 0.55rem 1.4rem;
    border: 0;
    border-radius: 6px;
    background: var(--terracotta);
    color: var(--white);
    cursor: pointer;
  }
  .control-print:hover { background: #93412f; }

  /* Secondary to Print, because printing is what this page is for and the
     download is the alternative — same size and baseline, quieter fill. */
  .control-download {
    font: inherit;
    font-weight: 500;
    padding: 0.55rem 1.4rem;
    border: 1px solid var(--terracotta);
    border-radius: 6px;
    background: var(--white);
    color: var(--terracotta);
    cursor: pointer;
  }
  .control-download:hover { background: #f6ece8; }
  /* Rendering takes a second or two on a phone. The button says so and stops
     accepting clicks, so nobody queues up four PDFs waiting for the first. */
  .control-download[disabled] {
    opacity: 0.6;
    cursor: progress;
  }
  .control-download[disabled]:hover { background: var(--white); }

  .controls-notes {
    max-width: 68rem;
    margin: 0.7rem auto 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-3);
  }
  .controls-notes p { margin: 0; }
  .controls-notes p + p { margin-top: 0.25rem; }
  .controls-warn { color: #93412f; font-weight: 500; }

  #sheets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1rem 0;
  }
  .sheet {
    box-shadow: 0 1px 3px rgba(44, 35, 32, .12), 0 12px 40px rgba(44, 35, 32, .12);
    /* Scales the preview down on narrow screens without touching the print
       geometry, which is why this is a transform rather than a width. */
    transform: scale(var(--preview-scale, 1));
    transform-origin: top center;
  }

  .noscript {
    max-width: 34rem;
    margin: 4rem auto;
    padding: 0 1.25rem;
    line-height: 1.6;
  }
}

/* ---------------------------------------------------------------------------
   4. FLYER LAYOUT
   ------------------------------------------------------------------------ */

.f-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 3pt solid var(--terracotta);
  padding-bottom: 5pt;
  flex: none;
}
.f-eyebrow {
  font-family: var(--font-display);
  font-size: 26pt;
  font-weight: 600;
  color: var(--terracotta);
  line-height: 1;
}
.f-domain {
  font-size: 13pt;
  font-weight: 500;
  color: var(--ink-3);
}

.f-top {
  display: flex;
  gap: 20pt;
  padding-top: 13pt;
  flex: none;
}
.f-top-text { flex: 1 1 auto; min-width: 0; }

.f-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 31pt;
  line-height: 1.16;
  margin: 0;
  letter-spacing: -0.01em;
}
.f-headline span { display: block; }

.f-body {
  font-size: 13pt;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 12pt 0 0;
}

.f-photo {
  flex: none;
  object-fit: cover;
  border-radius: 3pt;
  background: var(--sand);
}
.f-photo-main { width: 2.55in; height: 2.6in; object-position: 50% 26%; }
.f-photo-second { width: 2.05in; height: 2.45in; object-position: 50% 50%; }

.f-qrband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18pt;
  margin-top: 10pt;
  padding: 10pt 0;
  border-top: 0.75pt solid var(--sand);
  border-bottom: 0.75pt solid var(--sand);
  flex: none;
}
.f-qr-caption { width: 2.05in; flex: none; }
.f-qr-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20pt;
  line-height: 1.2;
  margin: 0 0 5pt;
}
.f-qr-body {
  font-size: 12pt;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}

/* The QR block is the point of the page, so it sits dead centre of the band
   with equal-width blocks either side of it. */
.f-qr-block { flex: none; text-align: center; }
.f-qr-block svg {
  display: block;
  width: 2.6in;
  height: 2.6in;
}
/* Shown in place of the code when the URL is too long to encode. It is meant
   to be impossible to mistake for a printable flyer. */
.f-qr-failed {
  width: 2.6in;
  height: 2.6in;
  border: 2pt dashed var(--terracotta);
  border-radius: 3pt;
  padding: 14pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6pt;
  font-size: 10pt;
  line-height: 1.35;
  color: var(--terracotta);
  text-align: left;
}

.f-qr-url {
  display: inline-block;
  margin-top: 6pt;
  font-size: 15pt;
  font-weight: 500;
  color: var(--white);
  background: var(--terracotta);
  padding: 3pt 12pt;
  border-radius: 3pt;
}

.f-stats {
  display: grid;
  /* Column count is written in by flyer.js from the number of stats. */
  grid-template-columns: repeat(4, 1fr);
  gap: 12pt;
  padding: 11pt 0 0;
  flex: none;
}
.f-stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19pt;
  color: var(--terracotta);
  line-height: 1.1;
}
.f-stat-label {
  font-size: 10pt;
  line-height: 1.35;
  color: var(--ink-2);
  margin-top: 2pt;
}

.f-foot {
  font-size: 11pt;
  line-height: 1.4;
  color: var(--ink-3);
  padding-top: 8pt;
  flex: none;
}
.f-foot a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------------------
   5. TEAR-OFF TABS
   ---------------------------------------------------------------------------
   `margin-top: auto` pins the strip to the bottom edge whatever the content
   above it does, so a longer paragraph eats the whitespace rather than
   pushing the tabs onto a second page.
   ------------------------------------------------------------------------ */
.f-tabs {
  margin-top: auto;
  display: grid;
  height: 0.8in;
  border-top: 1pt dashed var(--rule);
  flex: none;
}
/* The label is set horizontally rather than rotated. Rotation is the usual
   look for a tear-off, but at eight tabs across a letter sheet each column is
   nearly an inch wide — the domain fits flat — and rotated text depends on
   transform handling that print paths get wrong often enough to matter. */
.f-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 3pt;
  border-right: 1pt dashed var(--rule);
}
.f-tab:last-child { border-right: 0; }
.f-tab-primary {
  font-size: 9.5pt;
  font-weight: 500;
  color: var(--terracotta);
  line-height: 1.2;
}
.f-tab-secondary {
  font-size: 7pt;
  color: var(--ink-3);
  line-height: 1.25;
  margin-top: 1.5pt;
}

/* ---------------------------------------------------------------------------
   6. VARIANTS
   ------------------------------------------------------------------------ */

/* Clean bottom edge — for an office wall, where tear-off tabs look scruffy.
   The bottom whitespace is left alone rather than redistributed: a flyer with
   air around it reads as considered, and a stretched one reads as a poster. */
.v-clean .f-tabs { display: none; }

/* QR-dominant — for a window or a corridor, read at a distance and at speed.
   Everything that isn't the headline, the code and the domain comes off. */
.v-qr .f-body,
.v-qr .f-stats,
.v-qr .f-tabs,
.v-qr .f-photo-second,
.v-qr .f-qr-caption { display: none; }
.v-qr .f-foot { margin-top: auto; }
.v-qr .f-headline { font-size: 37pt; }
.v-qr .f-photo-main { width: 2.9in; height: 3.8in; }
.v-qr .f-qrband { justify-content: center; margin-top: 22pt; padding: 22pt 0; }
.v-qr .f-qr-block svg { width: 3.6in; height: 3.6in; }
.v-qr .f-qr-url { font-size: 17pt; margin-top: 9pt; padding: 4pt 14pt; }

/* Two half-sheets on one page — for handing out rather than pinning up.
   Each half is its own flyer, cut down: no stats, no second photograph, no
   tear-off strip. The QR is reordered ahead of its caption so the band sits
   flush under the text column instead of stranding the code in a corner. */
.sheet-half { padding: 0; }
.sheet-half .f-half {
  height: 50%;
  padding: 0.28in 0.4in;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sheet-half .f-half:first-child { border-bottom: 1pt dashed var(--rule); }
.sheet-half .f-tabs,
.sheet-half .f-stats,
.sheet-half .f-photo-second { display: none; }

.sheet-half .f-eyebrow { font-size: 17pt; }
.sheet-half .f-domain { font-size: 10pt; }
.sheet-half .f-headline { font-size: 23pt; }
.sheet-half .f-body { font-size: 10pt; margin-top: 7pt; }
.sheet-half .f-top { padding-top: 10pt; gap: 14pt; }
.sheet-half .f-photo-main { width: 1.6in; height: 1.98in; }

.sheet-half .f-qrband {
  margin-top: 10pt;
  padding: 10pt 0;
  justify-content: flex-start;
  gap: 16pt;
}
.sheet-half .f-qr-block { order: -1; }
.sheet-half .f-qr-block svg { width: 1.3in; height: 1.3in; }
.sheet-half .f-qr-url { font-size: 10pt; margin-top: 4pt; padding: 2pt 8pt; }
.sheet-half .f-qr-caption { width: auto; flex: 0 1 auto; }
.sheet-half .f-qr-heading { font-size: 13pt; margin-bottom: 3pt; }
.sheet-half .f-qr-body { font-size: 9pt; }

.sheet-half .f-foot { font-size: 7.5pt; padding-top: 8pt; margin-top: auto; }

/* ---------------------------------------------------------------------------
   7. PRINT
   ------------------------------------------------------------------------ */
@media print {
  .controls, .noscript { display: none !important; }

  body { background: #ffffff; }
  #sheets { display: block; padding: 0; }
  .sheet { box-shadow: none; transform: none; }

  /* Without this most browsers drop the photographs and the terracotta rule,
     on the reasonable-sounding but wrong assumption that backgrounds are
     decoration the reader would rather not spend ink on. */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}