/* aulay.co site. Proposed additions to the Aulay Co design system (rounds two and three),
   kept in one file so they can be lifted into tokens.json and components/bundle.css as they are,
   then this file deleted. Loaded after tokens.css and components/bundle.css.
   Only system tokens and the proposed tokens below. */

:root {
  --track-main: 600px;        /* text track when the right margin is in use, from 1040px */
  --track-margin: 400px;      /* right margin for the photo and exhibits, from 1040px */
  --page-width: calc(var(--track-main) + var(--space-16) + var(--track-margin)); /* 1064px */
  --exhibit-portrait: 300px;  /* portrait artefacts, cropped to 4:5 at most */
  --stroke-double: 3px;       /* the double rule under a document head */
  /* Pen candidates. One of them becomes --pen. */
  --pen-biro-blue: #1f47b0;
  --pen-blue-black: #24325c;
  --pen-bottle-green: #1e5a3c;
  --pen-mixer-teal: #2e6e66;
  --pen-correction-red: #cc1a24;
}

/* Proposed type style "price", replacing the mono "figure". Serif, tabular lining figures. */
.price {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
@media (min-width: 1120px) { .price { font-size: 40px; line-height: 48px; } }   /* from 1120 the retainer figure fits one line at 40px */

/* ---------- Show and hide at the desktop step ---------- */
.ac-show-wide { display: none; }
@media (min-width: 1040px) {
  .ac-show-wide { display: block; }
  .ac-hide-wide { display: none; }
}

/* ---------- The page grid from 1040px: text track, gutter, right margin ---------- */
@media (min-width: 1040px) {
  .ac-header { max-width: var(--page-width); }
  .ac-rule, .ac-rule--wide { max-width: var(--page-width); }
  .ac-exhibit--break { max-width: var(--page-width); }
}

/* ---------- Hero: two lines, loud at desktop, the photo in the margin ---------- */
.ac-hero__lines { text-wrap: balance; }
.ac-hero__setup {   /* line one is the chatbot talking, so it is set as a quote and line two is the headline */
  display: block; font-style: italic; font-weight: 400; color: var(--ink-soft);
  font-size: 22px; line-height: 31px; margin-bottom: var(--space-3);
}
@media (max-width: 719.98px) {
  .ac-hero .ac-hero__lines { font-size: 34px; line-height: 40px; }   /* phone headline sits above the 28px lead and the 32px price figures */
}
.ac-hero__photo .ac-photo { aspect-ratio: 4 / 5; object-position: 50% 30%; }
@media (min-width: 720px) {
  .ac-hero p.hero { font-size: 28px; line-height: 36px; }
  .ac-hero__setup { font-size: 28px; line-height: 36px; }   /* the lead stays at hero so the price is the second-biggest type */
}
@media (min-width: 1040px) {
  .ac-hero {
    display: grid;
    grid-template-columns: minmax(var(--measure), var(--track-main)) minmax(var(--exhibit-margin), var(--track-margin));
    column-gap: var(--space-16);
    align-items: start;
    max-width: var(--page-width);
  }
  .ac-hero .ac-hero__lines { font-size: 56px; line-height: 62px; }   /* proposed type style hero-xl */
  .ac-hero__setup { font-size: 32px; line-height: 40px; margin-bottom: var(--space-3); }
  .ac-hero__photo { margin-top: var(--space-3); }
}

/* ---------- Plain list with hairlines (Sound familiar) ---------- */
.ac-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
  border-top: var(--stroke-hair) solid var(--rule);
}
.ac-list > li { padding: var(--space-4) 0; border-bottom: var(--stroke-hair) solid var(--rule); }
.ac-list + p { margin-top: var(--space-6); max-width: var(--measure); }

/* ---------- Price block: two equal prices and a Terms link ---------- */
/* Two up only from 1040, where both figures sit on one line; below that they stack, so neither looks heavier. */
@media (min-width: 720px) and (max-width: 1039.98px) { .ac-price__items { grid-template-columns: 1fr; gap: var(--space-10); } }
@media (min-width: 1040px) {
  .ac-price { max-width: var(--page-width); }
  .ac-price__items { column-gap: var(--space-10); }
  .ac-price__terms { max-width: var(--page-width); }
}

/* ---------- Document block as a sheet ---------- */
.ac-doc--sheet { padding: var(--space-6) var(--space-6) var(--space-10); }
@media (min-width: 720px) { .ac-doc--sheet { padding: var(--space-16); } }
.ac-doc--sheet .ac-doc__head { padding-bottom: var(--space-4); border-bottom: var(--stroke-double) double var(--rule-ink); }
.ac-doc__letterhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-6); }
.ac-doc__date { color: var(--ink); white-space: nowrap; }
.ac-doc__title { margin: 0; }
.ac-doc--sheet .ac-doc__meta { margin-top: var(--space-1); }

/* Pen job one, drawn. Cut items wrap normally; a script reads each rendered line
   (getClientRects on the item's text) and draws one slightly uneven 2px path per line
   into the item's overlay. Until it has drawn, or without script, a plain line-through in the pen colour. */
.ac-doc__list--cut > li { position: relative; }
.ac-doc__list--cut:not(.is-drawn) .ac-cut {
  text-decoration-line: line-through;
  text-decoration-thickness: var(--stroke-strike);
  text-decoration-skip-ink: none;
}
.ac-cut__layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ac-cut__layer path {
  fill: none;
  stroke-width: var(--stroke-strike);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Exhibits beside their claims, in the right margin from 1040px ---------- */
.ac-exhibit--aside { max-width: var(--measure); }
.ac-exhibit--portrait { max-width: var(--exhibit-portrait); }
/* Portrait artefacts are cropped to 4:5 at most; the image links to the full frame. */
.ac-exhibit--portrait .ac-exhibit__img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
.ac-exhibit__full { display: block; cursor: zoom-in; }
.ac-claim--side > .ac-exhibit--aside { margin-top: var(--space-6); }
@media (min-width: 1040px) {
  .ac-claim--side {
    grid-template-columns: minmax(var(--measure), var(--track-main)) minmax(var(--exhibit-margin), var(--track-margin));
    column-gap: var(--space-16);
    max-width: var(--page-width);
  }
  .ac-claim--side > .ac-claim__text { max-width: var(--measure); }
  .ac-claim--side > .ac-exhibit--margin,
  .ac-claim--side > .ac-exhibit--aside { margin-top: var(--space-1); max-width: var(--track-margin); }
  .ac-claim--side > .ac-exhibit--portrait { max-width: var(--exhibit-portrait); }
}

/* ---------- Booking (copy v1.8): two calls to action ---------- */
/* "Book a day" is the one button; "Talk it through" is a text link beside it. */
.ac-bar__actions { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.ac-bar__link { display: none; white-space: nowrap; }   /* dropped on phones, where it can't sit beside the button cleanly */
@media (min-width: 600px) { .ac-bar__link { display: inline; } }