/* The lower homepage, raised: How it works, About, Common questions and Contact.
   All four, and the Things we've made heading above them, now sit on the header's edge, as the hero and What we build do. How it works keeps its heading inside the
   pinned field, so the field is never an empty screen; About and Common questions share one warm white chapter, like
   What we build; Contact closes on night with the form straight on the ground. Mint is left to the devices' own screens. */
.dark-site { --lw-edge: clamp(20px, 2.4vw, 40px); --lw-gap: clamp(8px, .8vw, 14px); --lw-w: #EFECE5; --lw-ink: #000000;
  --lw-ease: cubic-bezier(.22, .61, .36, 1); --lw-in: cubic-bezier(.65, 0, .35, 1); }
.dark-site .lw-how > .wrap, .dark-site section.lw-light > .wrap, .dark-site section.contact > .wrap { max-width: none; padding-inline: var(--lw-edge); }

/* Things we've made: its heading moves to the same edge and grows to fill it; the project sheet under it is unchanged */
.dark-site .work > .work-open { max-width: none; padding-inline: var(--lw-edge); }
@media (min-width: 761px) { .dark-site .work .work-head h2 { font-size: clamp(54px, min(12.9vw, calc((100vw - 2 * var(--lw-edge)) / 8.1)), 236px); } }

/* ---------- How it works: one flat night field the height of the screen, the heading pinned with the steps ---------- */
.dark-site section.lw-how { padding-block: clamp(32px, 3vw, 56px) 0; }
.dark-site .lw-how .hw-story .hw-field { top: 0; height: 100svh; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 80px); padding: clamp(88px, 11svh, 120px) 0 clamp(40px, 7svh, 88px); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.dark-site .lw-how .lw-how-title { grid-column: 1; grid-row: 1; margin: 0 0 0 -.04em; font: 500 clamp(48px, min(5.6vw, 11svh), 112px)/.9 var(--font); letter-spacing: -.055em; color: var(--lw-w); }
.dark-site .lw-how .hw-story .hw-list { grid-column: 1; grid-row: 2; align-self: end; gap: clamp(16px, 2.4svh, 30px); }
.dark-site .lw-how .hw-story .hw-stage { grid-column: 2; grid-row: 1 / -1; }
.dark-site .lw-how .hw-story .hw-title { font-size: clamp(30px, min(3.1vw, 6svh), 60px); line-height: .98; letter-spacing: -.045em; }
.dark-site .lw-how .hw-story .hw-line { max-width: 36ch; font-size: clamp(16px, 1.05vw, 19px); }
/* the rail and its dots in warm white, not mint */
.dark-site .lw-how .hw-story .hw-list::after { background: var(--lw-w); }
.dark-site .lw-how .hw-story .hw-item::before { width: 9px; height: 9px; left: -33px; top: 6px; background: var(--lw-ink); box-shadow: 0 0 0 6px var(--lw-ink), inset 0 0 0 1.5px rgba(239, 236, 229, .34); }
.dark-site .lw-how .hw-story .hw-item.is-past::before, .dark-site .lw-how .hw-story .hw-item.is-on::before { background: var(--lw-w); box-shadow: 0 0 0 6px var(--lw-ink); }
.dark-site .lw-how .hw-story .hw-pick:focus-visible { outline-color: var(--lw-w); }
.dark-site .lw-how .hd-weeks span::before { background: var(--lw-w); }
.dark-site .lw-how .hd-pause:focus-visible { outline-color: var(--lw-w); }

/* ---------- About and Common questions: one warm white chapter ---------- */
.dark-site section.lw-light { --paper: var(--lw-w); --ink: var(--lw-ink); --ink-2: #3A423F; --muted: #5E6562; --text: var(--lw-ink); --soft: #5E6562;
  --hair: rgba(0, 0, 0, .14); --line: rgba(0, 0, 0, .12); --line-2: rgba(0, 0, 0, .22);
  margin-inline: var(--lw-gap); background: var(--lw-w); color: var(--lw-ink); }
.dark-site section.lw-light { --sel-bg: var(--lw-ink); --sel-fg: var(--lw-w); }
.dark-site section.lw-light--top { margin-top: clamp(56px, 6vw, 112px); padding-top: clamp(96px, 9vw, 168px); border-radius: 10px 10px 0 0; }
.dark-site section.lw-light--end { padding-bottom: clamp(96px, 9vw, 168px); border-radius: 0 0 10px 10px; }
.dark-site section.lw-light > .wrap { padding-inline: calc(var(--lw-edge) - var(--lw-gap)); }
.dark-site section.lw-light .eyebrow { color: var(--muted); }
.dark-site section.lw-light :focus-visible { outline-color: var(--lw-ink); }

/* About: Alex large and hard edged on the left, the words and the page's own test on the right */
.dark-site .lw-light .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 80px); }
.dark-site .lw-light .about-id { top: 88px; }
.dark-site .lw-light .about-id .portrait { width: 100%; max-height: calc(100svh - 176px); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 6px; box-shadow: none; }
.dark-site .lw-light .about-id p { margin-top: 14px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line-2); }
.dark-site .lw-light .about-id p b { font-size: 15px; font-weight: 500; color: var(--lw-ink); }
.dark-site .lw-light .about-id p span { font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.dark-site .lw-light .about-copy { padding-top: clamp(8px, 2vw, 40px); }
.dark-site .lw-light .about-copy h2 { margin: 18px 0 clamp(24px, 2.4vw, 40px) -.04em; max-width: 11em; font-size: clamp(48px, 5.4vw, 104px); line-height: .92; letter-spacing: -.055em; color: var(--lw-ink); }
.dark-site .lw-light .about-copy > p { max-width: 40ch; font-size: clamp(18px, 1.35vw, 24px); line-height: 1.42; color: var(--ink-2); }

/* the page's test, as hairline rows on the paper: no panel, no glow, no mint */
.dark-site .lw-light .tests { --mint: var(--lw-ink); margin-top: clamp(48px, 5vw, 88px); border-radius: 0; background: none; box-shadow: none; color: var(--lw-ink); overflow: visible; }
.dark-site .lw-light .tests::before { content: none; }
.dark-site .lw-light .tests-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--line-2); box-shadow: none; }
.dark-site .lw-light .tests-title b { font-size: clamp(17px, 1.2vw, 21px); font-weight: 500; color: var(--lw-ink); }
.dark-site .lw-light .tests-title span { font-size: 15px; color: var(--muted); }
.dark-site .lw-light .tests-score { gap: 8px; }
.dark-site .lw-light .tests-score b { font: 500 clamp(64px, 6vw, 112px)/.8 var(--font); letter-spacing: -.06em; color: var(--lw-ink); }
.dark-site .lw-light .tests-score span { font-size: 15px; color: var(--muted); }
.dark-site .lw-light .tests-meter { left: 0; right: 0; bottom: -1px; height: 1px; gap: 0; }
.dark-site .lw-light .tests-meter b { border-radius: 0; background: transparent; }
.dark-site .lw-light .test-list { padding: 0; }
.dark-site .lw-light .test { gap: 16px; padding: 17px 0 18px; font-size: clamp(16px, 1.1vw, 19px); color: rgba(0, 0, 0, .4); box-shadow: none; border-bottom: 1px solid var(--line); transition: color .5s var(--lw-ease); }
.dark-site .lw-light .test::after { margin-left: auto; font-size: 15px; color: var(--muted); white-space: nowrap; }
.dark-site .lw-light .test.is-running::after { content: "Checking"; }
.dark-site .lw-light .test.is-pass::after { content: "Passed"; }
.dark-site .lw-light .test.is-fail::after { content: "Look again"; color: var(--danger); }
.dark-site .lw-light .test.is-running, .dark-site .lw-light .test.is-pass { color: var(--lw-ink); }
.dark-site .lw-light .t-mark { width: 18px; height: 18px; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .28); }
.dark-site .lw-light .test.is-running .t-mark { border: 1.5px solid var(--lw-ink); border-top-color: transparent; box-shadow: none; }
.dark-site .lw-light .test.is-pass .t-mark { box-shadow: none; background: var(--lw-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2l2 2 4.4-4.6' fill='none' stroke='%23EFECE5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.dark-site .lw-light .tests-foot { padding: 18px 0 0; border: 0; box-shadow: none; }
.dark-site .lw-light .tests-summary { font-size: 15px; color: var(--muted); }
.dark-site .lw-light .tests .run-tests { padding: 0 0 2px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: none; box-shadow: none; color: var(--lw-ink); font: 500 15px/1.4 var(--font-text, "Geist", sans-serif); cursor: pointer; transition: opacity .3s var(--lw-ease); }
.dark-site .lw-light .tests .run-tests:hover { background: none; opacity: .6; }
.dark-site .lw-light .tests .run-tests:disabled { opacity: .35; cursor: default; }

/* Common questions: the heading holds on the left, the questions are large hairline rows that open smoothly */
.dark-site section.faq.lw-light { padding-top: clamp(72px, 7vw, 136px); }
.dark-site .lw-light .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 80px); }
.dark-site .lw-light.faq .section-head { top: 88px; padding-top: 0; }
.dark-site .lw-light.faq .section-head h2 { margin: 18px 0 0 -.04em; max-width: 6.5em; font-size: clamp(48px, 5.4vw, 104px); line-height: .92; letter-spacing: -.055em; color: var(--lw-ink); }
.dark-site .lw-light .faq-list { interpolate-size: allow-keywords; border-bottom: 1px solid var(--line-2); }
.dark-site .lw-light .qa { border-top: 1px solid var(--line-2); }
.dark-site .lw-light.faq .qa summary { gap: 32px; padding-block: clamp(26px, 2.2vw, 36px); font-size: clamp(22px, 2vw, 36px); line-height: 1.1; letter-spacing: -.035em; color: var(--lw-ink); transition: opacity .4s var(--lw-ease); }
@media (hover: hover) {
  .dark-site .lw-light .faq-list:hover .qa:not([open]) summary { opacity: .5; }
  .dark-site .lw-light .faq-list .qa:hover summary { opacity: 1; }
}
/* a thin plus that turns to a cross, with no box round it */
.dark-site .lw-light .qa summary::after { content: ""; width: 20px; height: 20px; border-radius: 0; box-shadow: none;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .7s var(--lw-in); }
.dark-site .lw-light .qa summary:hover::after { background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; }
.dark-site .lw-light .qa[open] summary::after { transform: rotate(135deg); box-shadow: none; color: var(--lw-ink); background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; }
.dark-site .lw-light .qa::details-content { block-size: 0; overflow: hidden; transition: block-size .7s var(--lw-in), content-visibility .7s allow-discrete; }
.dark-site .lw-light .qa[open]::details-content { block-size: auto; }
.dark-site .lw-light .qa p { padding: 0 0 clamp(28px, 2.6vw, 40px); max-width: 52ch; font-size: clamp(17px, 1.2vw, 21px); line-height: 1.5; color: var(--ink-2); }

/* ---------- Contact: a hairline head like Things we've made, the form straight on the night ---------- */
.dark-site section.contact { padding-top: clamp(120px, 11vw, 200px); }
.dark-site .contact .lw-contact-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; margin: 0 0 clamp(56px, 6vw, 104px); padding: 18px 0 0; border-top: 1px solid var(--line-2); }
.dark-site .contact .lw-contact-head .eyebrow { grid-column: 1; margin: 0; }
.dark-site .contact .lw-call { grid-column: 2; padding-bottom: 2px; color: var(--lw-w); font-size: 15px; font-weight: 500; }
.dark-site .contact .lw-contact-head h2 { grid-column: 1 / -1; margin: clamp(36px, 4.4vw, 72px) 0 0 -.04em; max-width: none; color: var(--lw-w);
  font-size: clamp(48px, calc((100vw - 2 * var(--lw-edge)) / 10), 210px); line-height: .88; letter-spacing: -.06em; }
.dark-site .contact .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 80px); }
.dark-site .contact .contact-aside p { max-width: 30ch; font-size: clamp(17px, 1.25vw, 22px); line-height: 1.45; }
.dark-site .contact .contact-aside .price-line { color: var(--lw-w); font-weight: 500; }
.dark-site .contact .contact-aside .direct { padding-top: 20px; border-top: 1px solid var(--line-2); }
.dark-site .contact #enquiry { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.dark-site .contact #enquiry::before { content: none; }
.dark-site .contact .field label { font-size: 15px; color: rgba(239, 236, 229, .62); }
.dark-site .contact .field input, .dark-site .contact .field textarea { font-size: clamp(20px, 1.5vw, 26px); border-bottom-color: rgba(239, 236, 229, .22); transition: border-color .4s var(--lw-ease); }
.dark-site .contact .field input:focus, .dark-site .contact .field textarea:focus { border-color: var(--lw-w); }
.dark-site .contact .chips span { padding: 12px 20px; font-size: 16px; box-shadow: inset 0 0 0 1px rgba(239, 236, 229, .22); transition: background-color .4s var(--lw-ease), color .4s var(--lw-ease), box-shadow .4s var(--lw-ease); }
.dark-site .contact .chips label:hover span { box-shadow: inset 0 0 0 1px rgba(239, 236, 229, .6); }
.dark-site .contact .chips input:checked + span { background: var(--lw-w); color: var(--lw-ink); box-shadow: none; font-weight: 500; }
.dark-site .contact .chips input:focus-visible + span { outline-color: var(--lw-w); }
/* a plain warm white button, no mint and no boxed arrow */
.dark-site .contact form .btn.lw-send { gap: 14px; height: 54px; padding: 0 24px; border-radius: 3px; background: var(--lw-w); color: var(--lw-ink); box-shadow: none; line-height: 54px; transition: background-color .4s var(--lw-ease); }
.dark-site .contact form .btn.lw-send:hover { background: #FFFFFF; }
.dark-site .contact form .btn.lw-send .arrow { display: inline-block; width: auto; height: auto; margin: 0; border: 0; background: none; color: inherit; transition: transform .5s var(--lw-ease); }
.dark-site .contact form .btn.lw-send:hover .arrow { background: none; color: inherit; transform: translateX(4px); }
.dark-site .contact form .btn.lw-send:focus-visible { outline: 2px solid var(--lw-w); outline-offset: 4px; }

/* ---------- laptops and tablets ---------- */
@media (max-width: 1100px) {
  .dark-site .contact .lw-contact-head h2 { font-size: clamp(44px, 8.4vw, 96px); }
}
@media (max-width: 900px) {
  .dark-site .lw-light .about-grid, .dark-site .lw-light .faq-grid, .dark-site .contact .contact-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .dark-site .lw-light .about-id .portrait { max-height: none; aspect-ratio: 4 / 4.2; }
  .dark-site .lw-light .about-copy { padding-top: 0; }
  .dark-site .lw-light.faq .section-head { position: static; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .dark-site .lw-how .hw-story .hw-field { top: var(--top); height: calc(100svh - var(--top) - 92px); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; row-gap: 16px; padding: 8px 0 22px; overflow: hidden; }
  .dark-site .lw-how .lw-how-title { grid-row: 1; font-size: 40px; }
  .dark-site .lw-how .hw-story .hw-bar { grid-row: 2; }
  .dark-site .lw-how .hw-story .hw-bar::before { background: linear-gradient(var(--lw-w), var(--lw-w)) 0 0 / calc(var(--fill, 0) * 100%) 100% no-repeat, var(--rail); }
  .dark-site .lw-how .hw-story .hw-stage { grid-column: 1; grid-row: 3; }
  .dark-site .lw-how .hw-story .hw-list { grid-row: 4; }
  .dark-site .lw-how .hw-story .hw-title { font-size: 32px; }
  .dark-site .lw-how > .wrap > .hw-story { margin-inline: 0; }
  .dark-site section.lw-light--top { padding-top: 72px; }
  .dark-site section.lw-light--end { padding-bottom: 72px; }
  .dark-site section.faq.lw-light { padding-top: 96px; }
  .dark-site .lw-light .about-copy h2, .dark-site .lw-light.faq .section-head h2 { font-size: clamp(40px, 11vw, 52px); }
  .dark-site .lw-light .tests-score b { font-size: 56px; }
  .dark-site .lw-light.faq .qa summary { font-size: 21px; gap: 20px; }
  .dark-site .lw-light .qa summary::after { width: 16px; height: 16px; }
  .dark-site section.contact { padding-top: 96px; }
  .dark-site .contact .lw-contact-head h2 { font-size: clamp(40px, 11.4vw, 56px); line-height: .92; }
}

@media (prefers-reduced-motion: reduce) {
  .dark-site .lw-light .test.is-running .t-mark { animation: none; }
}

/* Phones: the How it works screen holds a fixed height (how.js --hw-vh, see how.css) so Instagram's browser bar
   coming and going doesn't resize it under the finger */
@media (max-width: 760px) {
  .dark-site .lw-how .hw-story .hw-field { height: calc(var(--hw-vh, 1svh) * 100 - var(--top) - 92px); }
}