/* Combined: tokens, base and the website's first screen.
   Shared by site.html (the first screen on its own) and index.html (the brand sheet).
   The palette and the display type are Atelier's. The first screen is written in container units, as
   in Atelier, so the same markup sets itself at any size, including inside the sheet's frames. */

:root {
  --bone: #F2EDE4;
  --sand: #D9CCB6;
  --ink: #1C1A17;
  --oxblood: #5A1E1F;
  --taupe: #564F47;   /* secondary text; passes AA on bone and on sand */
  --stone: #9A9081;   /* hairlines on bone, captions on ink only */
  --line: rgba(28, 26, 23, .16);
  --line-strong: rgba(28, 26, 23, .32);

  --serif: "Noto Serif Display", "Didot", "Times New Roman", serif;

  /* The text face is one of three, set by data-text on <html> (js/text.js). Instrument Sans is the default (Max, 3 November;
     he found Fraunces, the first default, too close to Claude's own look).
     Every text size is multiplied by --text-scale, so the three share the default's x-height and the
     layout holds with each, and each face has its own regular and medium weights. */
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --text-scale: 1;
  --text-regular: 400;
  --text-medium: 560;

  /* One curve for everything that arrives, quick to start, with a long calm finish and no overshoot. */
  --settle: cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: clamp(16px, 3.4vw, 56px);
  --measure: 38rem;
}
/* Ysabeau Office has a small x-height, so it is set 12 per cent larger. Courier Prime is wide, so it
   is set a little smaller, and it has no medium. */
:root[data-text="b"] { --text: "Ysabeau Office", "Gill Sans", sans-serif; --text-scale: 1.12; --text-regular: 420; --text-medium: 580; }
:root[data-text="c"] { --text: "Courier Prime", "Courier New", monospace; --text-scale: .96; --text-regular: 400; --text-medium: 400; }

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute wins over any display a class gives, so a sent form or a cleared message really goes. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font: var(--text-regular) calc(16px * var(--text-scale))/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
::selection { background: var(--sand); color: var(--ink); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* In the brand sheet's frames only the first screen shows, so the page there does not scroll. */
.is-framed, .is-framed body { overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Links are words in oxblood with a 1 px rule beneath that draws in on hover. */
.tlink {
  display: inline-block;
  color: var(--oxblood);
  font: var(--text-medium) calc(14px * var(--text-scale))/1.2 var(--text);
  letter-spacing: .01em;
  padding-bottom: 6px;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .6s var(--settle);
}
.tlink:hover { background-size: 40% 1px; }
/* A quiet control, such as Pause, shares the shape of a link in the text colour. */
.tlink--quiet { color: var(--taupe); font-weight: var(--text-regular); }

/* An action is an oval label, after the oval the wordmark lies in on the rug: a true ellipse, its corners half
   the box each way, never a pill, with a second hairline just inside the first, as round a label. The words are
   upright in the text face's medium, so they read at a glance. Book a call, the one to take, is filled with
   oxblood; Enquire and the rest are drawn. Every one is at least 54px tall to tap; the bar's smaller ones have
   no inner line and keep a margin of air around them that takes the tap too. */
.act {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 54px;
  padding: 0 1.85em;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--oxblood);
  font: var(--text-medium) calc(16.5px * var(--text-scale))/1 var(--text);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .45s var(--settle), border-color .45s var(--settle), color .45s var(--settle);
}
.act::before { content: ""; position: absolute; inset: 4px; border: 1px solid currentColor; border-radius: 50%; opacity: .5; pointer-events: none; }
.act--fill { border-color: var(--oxblood); background: var(--oxblood); color: var(--bone); }
.act:hover { border-color: var(--oxblood); background: var(--oxblood); color: var(--bone); }
.act--fill:hover { border-color: var(--ink); background: var(--ink); }
/* The focus ring follows the ellipse, a little way out from it. */
.act:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.act:disabled, .act[aria-disabled="true"] { opacity: .6; cursor: progress; }
.act--s { min-height: 38px; padding: 0 1.35em; font-size: calc(14.5px * var(--text-scale)); }
.act--s::before { content: none; }
.act--s::after { content: ""; position: absolute; inset: -5px -2px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }

/* Marks are <use>s of the symbols at the top of the page and take the colour of their context. */
.wm, .mono { fill: currentColor; overflow: visible; height: auto; }

/* ---------- The first screen ---------- */

.first {
  container: first / size;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  background: var(--bone);
  color: var(--ink);
  isolation: isolate;
  touch-action: pan-y;
}

/* Without WebGL the ground is flat bone with a little sand, ending in bone where the page carries on. */
.first__ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 70% at 30% 38%, rgba(217, 204, 182, .55), rgba(217, 204, 182, 0) 70%),
    var(--bone);
}
.first__gl {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s var(--settle);
}
.first.is-gl .first__gl { opacity: 1; }

.first__nav {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(18px, 3.4cqh, 34px) clamp(18px, 3.2cqw, 48px);
  font: var(--text-medium) calc(clamp(13px, .98cqw, 15px) * var(--text-scale))/1 var(--text);
  letter-spacing: .01em;
}
.first__links { display: flex; gap: clamp(16px, 2.2cqw, 34px); }
.first__nav a { text-decoration: none; }
.first__links a, .first__contact { padding: 6px 0; }
.first__links a:hover, .first__contact:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.first__mark { display: block; width: clamp(96px, 9.6cqw, 150px); color: var(--ink); }
.first__mark svg { width: 100%; }
/* The display cut from 24 px of cap height; below that, on a phone, the small cut. */
.first__mark .wm--t { display: none; }
.first__contact { justify-self: end; }

.first__body {
  position: absolute;
  z-index: 3;
  left: clamp(18px, 3.2cqw, 48px);
  right: clamp(18px, 3.2cqw, 48px);
  bottom: clamp(22px, 5.2cqh, 52px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4cqw;
  pointer-events: none;
}
.first__body a, .first__body button { pointer-events: auto; }

/* The line. Width 75 is the condensed keyword, which a canvas can also ask for, so the letters the
   water draws and these letters are the same shapes in the same places. */
.first__line {
  font: 250 13.2cqw/.84 var(--serif);
  font-stretch: condensed;
  letter-spacing: -.02em;
  margin: 0 0 -.06em -.04em;
  white-space: nowrap;
}
.first__line .ln { display: block; }
/* While WebGL draws the line into the stone, the line stays in place as text, unpainted until its font has
   come (so their arrival, which moves it a little, doesn't count as the page jumping), then painted all but
   invisibly: the canvas shows the line from then on, and fully transparent text doesn't count as shown, so
   Google's loading score waited 7 seconds for the water to settle. Once the water is still, the canvas leaves
   the letters out and the text shows in their place. */
.first.is-gl .first__line { color: transparent; }
.fonts-ready .first.is-gl .first__line { color: rgba(28, 26, 23, .01); }
.first.is-gl.is-still .first__line { color: var(--ink); }
.first.is-gl:not(.is-still) .first__line::selection { background: rgba(28, 26, 23, .14); color: transparent; }

.first__aside {
  width: min(24cqw, 340px);
  padding-bottom: .6cqh;
  font-size: calc(clamp(14px, 1.06cqw, 16px) * var(--text-scale));
  line-height: 1.5;
}
/* The page's heading, set as the lead it was. */
.first__lead { margin-bottom: 1.2em; font: inherit; }
.first__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
/* When the aside is narrow the two actions stack, and Pause keeps to the right. */
.first__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.first__acts [data-pause] { margin-left: auto; }

@container first (max-width: 700px) {
  /* On a phone the wordmark moves to the left and the three links sit together on the right, evenly
     spaced; centred between two links and one, the wordmark crowded the links. */
  .first__nav { grid-template-columns: auto 1fr auto; column-gap: 14px; padding: 18px; font-size: calc(12.5px * var(--text-scale)); }
  .first__mark { order: -1; width: 88px; }
  .first__links { gap: 14px; justify-self: end; }
  .first__mark .wm--d { display: none; }
  .first__mark .wm--t { display: block; }
  .first__body { flex-direction: column; align-items: flex-start; gap: 24px; bottom: 26px; }
  .first__line { font-size: 20.6cqw; }
  /* The lead keeps a short measure; Pause sits on the right edge, under Contact. */
  .first__aside { width: 100%; }
  .first__lead { max-width: 32ch; }
}
@container first (max-width: 350px) {
  .first__nav { padding: 16px 14px; font-size: calc(12px * var(--text-scale)); }
  .first__links { gap: 12px; }
  .first__mark { width: 84px; }
}

/* ---------- The opening ----------
   The water draws the line and settles it; the navigation and the lead follow. Until the script
   says otherwise they wait, and if it never does, a late animation shows them anyway. */
.js .first__nav,
.js .first__aside {
  opacity: 0;
  transform: translateY(8px);
  animation: first-show .01s linear 4.5s forwards;
}
/* Once the arrival has begun the script is alive, and the opening ends it. */
.js .first.is-arriving .first__nav,
.js .first.is-arriving .first__aside { animation: none; }
.js .first.is-open .first__nav,
.js .first.is-open .first__aside {
  opacity: 1;
  transform: none;
  animation: none;
  transition: opacity 1.1s var(--settle), transform 1.3s var(--settle);
}
.js .first.is-open .first__aside { transition-delay: .18s; }
/* The heading waits for the water too, unless there is none. */
.js .first:not(.is-gl):not(.no-gl) .first__line { color: transparent; animation: first-ink .01s linear 4.5s forwards; }
.first.no-gl .first__line { color: var(--ink); transition: color .8s var(--settle); }
/* Without the water nothing on the first screen moves, so it needs no pause. */
.first.no-gl [data-pause] { display: none; }
@keyframes first-show { to { opacity: 1; transform: none; } }
@keyframes first-ink { to { color: var(--ink); } }

@media (prefers-reduced-motion: reduce) {
  .js .first__nav, .js .first__aside, .js .first.is-open .first__nav, .js .first.is-open .first__aside {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .first__gl { transition: none; }
  /* Nothing moves by itself, so there is nothing to pause. */
  [data-pause] { display: none; }
}