/* ===========================================================================
   BANQED — banqed.ie
   Additions on top of style.css. Everything new to the public site lives
   here so style.css stays as close to the original as possible.
   =========================================================================== */

/* --------------------------------------------------------- Site banner ---
   Replaces the old app navigation. One job: say who this is and give the
   reader somewhere to go. Visible on every page, including the front page,
   so the ask is never more than one tap away.
   To go back to a full-bleed front page, delete the paper-fullscreen rules
   at the foot of this block.
   ------------------------------------------------------------------------ */

.sitebar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 14px clamp(16px, 3vw, 40px);
  background: var(--ink);
}

.sitebar__mark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.sitebar__mark img {
  height: 22px;
  width: auto;
  display: block;
  filter: invert(1);
}

.sitebar__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
  padding: 0;
  background: none;
}

.sitebar__nav a {
  color: rgba(234, 232, 226, 0.72);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.sitebar__nav a:hover {
  color: var(--cream);
}

.sitebar__cta {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 10px 18px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.sitebar__cta:hover {
  background: transparent;
  color: var(--cream);
}

@media (max-width: 860px) {
  .sitebar__nav { display: none; }
}

@media (max-width: 520px) {
  .sitebar { gap: 12px; padding: 12px 14px; }
  .sitebar__mark img { height: 18px; }
  .sitebar__cta { padding: 9px 12px; font-size: 10px; letter-spacing: 0.08em; }
}

/* The front page owns the screen. The banner arrives on the first turn and
   stays for the rest of the visit, which is her stylesheet's original
   behaviour and the reason .paper-fullscreen exists. */
body.paper-fullscreen .sitebar { display: none; }
body.paper-fullscreen .paper__nav { display: flex; }

main { padding: 0; }
.paper { padding-bottom: 96px; }

/* --------------------------------------------------- Front page addition --
   The wardrobe is where this starts, not where it stops. One line, under
   the contents, so the reader knows without being told twice.
   ------------------------------------------------------------------------ */

.paper__firstbanq {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--paper-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-55);
}

/* ------------------------------------------------------ P.04, the photo ---
   Cropped out of the original artwork so the page keeps the same picture
   without carrying a 2914 pixel slide.
   ------------------------------------------------------------------------ */

.decision__photo {
  display: block;
  width: clamp(160px, 23vw, 300px);
  height: auto;
  margin: 0 auto 14px;
}

/* The t-shirt was cut from artwork on #121212, so the dark page matches it
   exactly and the crop leaves no visible edge. */
.paper.is-dark { background: #121212; }

/* Her stylesheet darkens the mark and folio on a dark page but not the
   strapline, which was invisible because page four used to be an image. */
.spread--dark .spread__continued { color: rgba(234, 232, 226, 0.55); }

@media (max-width: 900px) {
  .decision {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 0 36px;
  }
  .decision,
  .decision__side--right { text-align: center; }
  .decision__photo { width: clamp(150px, 46vw, 230px); }
}

/* ---------------------------------------------------- Interior pages ------
   Contact, privacy, terms. Same paper, set as one column of reading.
   ------------------------------------------------------------------------ */

.sheet {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) clamp(18px, 4vw, 40px) 90px;
}

.sheet__kicker {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.sheet h1 {
  margin: 0;
  font-family: var(--paper-serif);
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.sheet__stamp {
  margin: 16px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.sheet__lede {
  margin: 22px 0 0;
  font-family: var(--paper-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.45;
  color: var(--ink-55);
}

.sheet h2 {
  margin: 42px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sheet__body > h2:first-child { margin-top: 34px; }

.sheet p,
.sheet li {
  font-family: var(--paper-serif);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 1em;
}

.sheet ul { padding-left: 20px; }
.sheet li { margin-bottom: 0.6em; }

.sheet a {
  color: var(--ink);
  text-underline-offset: 3px;
  font-weight: 700;
}

/* ---------------------------------------------------------- Footer --------- */

.sitefoot {
  background: var(--ink);
  color: rgba(234, 232, 226, 0.6);
  padding: 30px clamp(16px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.sitefoot a {
  color: rgba(234, 232, 226, 0.6);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sitefoot a:hover { color: var(--cream); }

.sitefoot__mark {
  color: var(--cream);
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 13px;
  margin-right: auto;
}

/* ---------------------------------------------- The mission, page 02 ------
   The site explains the mechanics for six pages and never says why any of
   it matters. One line at the foot of "how it works", where the reader has
   just learned what the thing does and is ready to be told what it is for.
   ------------------------------------------------------------------------ */

.mission {
  margin: 44px 0 0;
  padding-top: 22px;
  border-top: 2px solid var(--ink);
  font-family: var(--paper-serif);
  font-size: clamp(21px, 2.6vw, 31px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 34ch;
}

.mission span {
  display: block;
  margin-top: 10px;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.45;
  color: var(--ink-55);
  max-width: 46ch;
}

/* ------------------------------------------- Where version one sits, P.03 --
   Was a line dangling under the page. Now a two-column block with its own
   rule, so it reads as a section rather than an afterthought.
   ------------------------------------------------------------------------ */

.sits {
  margin-top: clamp(28px, 3.5vw, 46px);
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.sits__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  margin-top: 6px;
}

.sits__claim {
  margin: 0;
  font-family: var(--paper-serif);
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sits__pair {
  margin: 0;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--border);
}

.sits__pair dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze, #8C6F43);
}

.sits__pair dd {
  margin: 4px 0 14px;
  font-family: var(--paper-serif);
  font-size: 16.5px;
  line-height: 1.45;
}

.sits__pair dd:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .sits__grid { grid-template-columns: 1fr; gap: 20px; }
  .sits__pair { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 16px; }
}

/* ------------------------------------------------- P.02 / P.05 standfirst -- */

.paper__standfirst--wide {
  max-width: 50ch;
  margin-top: 18px;
}

/* ------------------------------------------------------- P.07, the ad ------
   The back page of a newspaper is where the full-page advertisement goes,
   so this is one: a ruled frame, the sale on the left, the wanted notice
   in a tinted panel on the right.
   ------------------------------------------------------------------------ */

.offer {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  margin-top: clamp(16px, 4vh, 48px);
  border: 2px solid var(--ink);
}

.offer__buy {
  padding: clamp(26px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.offer__wanted {
  padding: clamp(26px, 3.4vw, 46px);
  background: var(--cream);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.offer__rule {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.offer__headline {
  margin: 0;
  font-family: var(--paper-serif);
  font-size: clamp(36px, 4.8vw, 66px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.offer__head {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.offer__title {
  margin: 0;
  font-family: var(--paper-serif);
  font-size: clamp(25px, 2.9vw, 36px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.offer__body {
  margin: 16px 0 24px;
  font-family: var(--paper-serif);
  font-size: 16.5px;
  line-height: 1.5;
  max-width: 38ch;
}

.offer__action {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.offer__action:hover { background: var(--ink); color: var(--paper); }

.offer__action--primary {
  background: var(--ink);
  color: var(--paper);
  padding: 18px 28px;
  font-size: 12.5px;
}

.offer__action--primary:hover { background: transparent; color: var(--ink); }

.offer__action--primary span {
  font-family: var(--paper-serif);
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  border-left: 1px solid rgba(234, 232, 226, 0.4);
  padding-left: 14px;
}

.offer__action--primary:hover span { border-left-color: rgba(26, 26, 26, 0.3); }

.offer__foot {
  margin: 14px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}

@media (max-width: 820px) {
  .offer { grid-template-columns: 1fr; }
  .offer__wanted { border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 480px) {
  .offer__action--primary { width: 100%; justify-content: center; }
  .offer__body { margin-bottom: 20px; }
}

/* Third tier. A footnote, and it looks like one. */

.notice {
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
  font-size: 14.5px;
  color: var(--ink-55);
}

.notice a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}

.notice a:hover { color: var(--ink-55); border-bottom-color: var(--ink-55); }

/* The t-shirt plate carries its own generous margin now, so it can sit
   larger without the sleeves reading as clipped. */

.decision__photo {
  display: block;
  width: clamp(190px, 27vw, 340px);
  height: auto;
  margin: 0 auto 6px;
}

@media (max-width: 900px) {
  .decision,
  .decision__side--right { text-align: center; }
  .decision__photo { width: clamp(190px, 56vw, 280px); }
}

/* A full-width Didone headline over nine definitions was too much page.
   This size lets the glossary be the subject and the line be the frame. */
.paper__headline--sm {
  font-size: clamp(26px, 3.4vw, 44px);
  max-width: 24ch;
}


/* ------------------------------------------------- P.03, the product ------
   The Sheet itself, filmed. Autoplays muted and loops, so nobody has to
   press anything, and it is the only page that shows what is being sold.
   ------------------------------------------------------------------------ */

.demo {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(16px, 3vh, 36px);
}

.demo__headline {
  margin: 0;
  font-family: var(--paper-serif);
  font-size: clamp(25px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.demo__note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-55);
}

.demo__screen { margin: 0; }

.demo__screen video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink);
  background: var(--cream);
}

.demo__screen figcaption {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
}

@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; gap: 20px; }
}

/* P.05 standalone: the before / after pair gets the whole page */

.sits__pair--page {
  margin-top: clamp(22px, 3vw, 38px);
  padding-left: 0;
  border-left: 0;
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px clamp(24px, 4vw, 56px);
  max-width: 60ch;
}

.sits__pair--page dt { padding-top: 4px; }
.sits__pair--page dd { margin: 0 0 6px; font-size: 17.5px; }

@media (max-width: 640px) {
  .sits__pair--page { grid-template-columns: 1fr; gap: 4px; }
  .sits__pair--page dd { margin-bottom: 18px; }
}

/* The site banner already carries the wordmark, so the page head is now
   just a folio and a strapline on one rule. */
.spread__head { grid-template-columns: auto 1fr; }

/* ------------------------------------------- Front page order on mobile ---
   Her stylesheet floats the contents list to the top once the columns
   stack, so a phone opened on the headline's table of contents. The
   headline should come first, then the figures, then what is also inside.
   ------------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .paper__col--lead { order: 1; }
  .paper__col--figures { order: 2; }
  .paper__col--contents {
    order: 3;
    border-bottom: 0;
    border-top: 1px solid var(--border);
    padding: 26px 0 0;
    margin: 26px 0 0;
  }
}

/* ------------------------------------------------ Page turner on mobile ---
   Nine dots plus two arrows was wide enough to wrap on a phone. Smaller
   dots, tighter gaps, and it sits closer to the bottom edge.
   ------------------------------------------------------------------------ */

@media (max-width: 760px) {
  .paper__nav {
    gap: 10px;
    padding: 6px 12px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    flex-wrap: nowrap;
  }
  .paper__dots { gap: 6px; }
  .paper__dot { width: 6px; height: 6px; }
  .paper__arrow { font-size: 14px; padding: 2px 4px; }
  .paper__hint { bottom: 54px; font-size: 9px; letter-spacing: 0.14em; }
  .paper { padding-bottom: 76px; }
}