/* Combined: what the brand sheet and the home page share below the first screen. Type roles,
   grounds, sections and the long gradients between grounds, blocks that arrive as they come into
   view (js/reveal.js), the bar that appears once the first screen has gone (js/bar.js), pictures and
   the end of the page (js/rug.js). Needs site.css first, for the tokens. */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--bone); padding: 8px 12px; }
.skip:focus { top: 12px; }

/* ---------- Type roles ---------- */
.caption { font-size: calc(12.5px * var(--text-scale)); line-height: 1.45; color: var(--taupe); letter-spacing: .01em; }
.on-ink .caption, .on-ox .caption { color: var(--stone); }
.on-ox .caption { color: var(--sand); }
.title { font: 300 clamp(26px, 2.5vw, 40px)/1.08 var(--serif); font-stretch: 90%; letter-spacing: -.005em; }
.text { max-width: var(--measure); color: var(--taupe); }
.text + .text { margin-top: .8em; }

.on-ink { background: var(--ink); color: var(--bone); }
.on-sand { background: var(--sand); }
.on-ox { background: var(--oxblood); color: var(--bone); }

/* ---------- Sections ---------- */
.sec { position: relative; padding: clamp(88px, 12vw, 176px) var(--gutter) clamp(56px, 7vw, 112px); }
.sec__head { display: grid; gap: 14px 24px; margin-bottom: clamp(44px, 6vw, 96px); align-items: end; }
.sec__no { font: var(--text-regular) calc(clamp(14px, 1.1vw, 16px) * var(--text-scale))/1 var(--text); letter-spacing: .02em; color: var(--taupe); font-variant-numeric: tabular-nums; }
.sec__title { font: 280 clamp(44px, 7vw, 120px)/.92 var(--serif); font-stretch: 80%; letter-spacing: -.015em; }
.sec__lede { max-width: 34rem; color: var(--taupe); font-size: calc(clamp(16px, 1.2vw, 18px) * var(--text-scale)); }
@media (min-width: 1000px) {
  .sec__head { grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr); }
  .sec__no { align-self: start; padding-top: .9em; }
}
.sub { margin-top: clamp(64px, 9vw, 140px); }
.sub__head { display: grid; gap: 10px 24px; margin-bottom: clamp(24px, 3vw, 44px); }
@media (min-width: 1000px) { .sub__head { grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); } }
.sub__label { font: var(--text-medium) calc(13px * var(--text-scale))/1.4 var(--text); color: var(--taupe); }
.sub__title { font: 300 clamp(30px, 3.4vw, 54px)/1 var(--serif); font-stretch: 86%; letter-spacing: -.01em; }
.sub__text { max-width: var(--measure); margin-top: 14px; color: var(--taupe); }
.sub__text + .sub__text { margin-top: .7em; }

/* Where one ground becomes another, a long gradient takes the place of an edge. */
.tide { height: clamp(64px, 9vw, 140px); background: linear-gradient(180deg, var(--from), var(--to)); }

/* ---------- Arrivals ----------
   Blocks rise into focus; section titles settle (settle.js). Without the script, everything shows. */
.reveal-ready [data-reveal] {
  transition: opacity .8s var(--settle) var(--d, 0ms), transform 1s var(--settle) var(--d, 0ms), filter .9s var(--settle) var(--d, 0ms);
}
.reveal-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(20px); }
.reveal-ready .sec__lede[data-reveal]:not(.is-in), .reveal-ready [data-reveal="soft"]:not(.is-in) { filter: blur(8px); }
.reveal-ready [data-settle]:not(.is-settled):not(.is-settling) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal], .reveal-ready [data-reveal]:not(.is-in) { transition: none; opacity: 1; transform: none; filter: none; }
}

/* ---------- The bar, for finding the way once the first screen has passed ---------- */
.bar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  padding: 12px var(--gutter);
  /* Solid bone, so iPhone Safari, which tints its own bars from what's fixed at the screen's edges, tints them bone. */
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  font: var(--text-medium) calc(13px * var(--text-scale))/1 var(--text);
  transform: translateY(-101%);
  transition: transform .8s var(--settle);
}
.bar.is-shown, .bar:focus-within { transform: none; }
.bar a { text-decoration: none; }
.bar__home { display: flex; align-items: center; gap: 14px; margin-right: auto; min-width: 0; }
.bar__home .wm { width: 84px; flex: none; }
.bar__links { display: flex; gap: clamp(12px, 1.6vw, 24px); }
.bar__links a { color: var(--taupe); padding: 6px 0; }
.bar__links a:hover, .bar__links a[aria-current="true"] { color: var(--ink); }
/* The two actions ride in the bar on wider screens; on a phone they have a bar of their own along the
   bottom of the screen (home.css). */
.bar__acts { display: flex; align-items: center; gap: 8px; margin: 0; flex: none; }
@media (max-width: 759px) { .bar__acts { display: none; } }

/* ---------- Pictures ---------- */
.pic { background: var(--sand); }
.pic img { width: 100%; height: auto; }

/* ---------- The end of the page (js/rug.js) ----------
   A photograph of a real carpet, lying a little crooked as a rug does. Its height is held before
   the picture arrives, so the page does not jump. */
.rug { display: grid; place-items: center; padding: clamp(24px, 5vw, 72px) var(--gutter) clamp(36px, 6vw, 88px); overflow: hidden; }
.rug::before { content: ""; grid-area: 1 / 1; width: min(100%, 960px); aspect-ratio: 2013 / 1400; }
.rug img { grid-area: 1 / 1; width: min(100%, 960px); height: auto; transform: rotate(-1.4deg);
  filter: drop-shadow(0 1px .5px rgba(28, 26, 23, .25)) drop-shadow(0 14px 22px rgba(28, 26, 23, .12)); }