/* Reset, element defaults and the few utilities every page uses. Layer order is declared once, in tokens.css. */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  /* A see-through select (the sort menu) leaves its open list to the system, which paints it white under
     dark mode's light text. Give the list the theme's own colours. */
  option, optgroup { background-color: var(--bp-paper); color: var(--bp-ink); }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  fieldset { border: 0; padding: 0; min-width: 0; }
  legend { padding: 0; }
}

@layer base {
  /* The canvas: warm primed white, a fine dot grain and a faint weave. */
  body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--bp-ink);
    background-color: var(--bp-paper);
    background-image:
      radial-gradient(var(--bp-texture) 1px, transparent 1px),
      repeating-linear-gradient(0deg, var(--bp-weave) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(90deg, var(--bp-weave) 0 1px, transparent 1px 5px);
    background-size: 7px 7px, auto, auto;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--dur), color var(--dur);
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-optical-sizing: auto;
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
    text-wrap: balance;
    color: var(--bp-heading);
  }

  h1 { font-size: var(--fs-display); letter-spacing: -.02em; }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }

  /* An italic word in a heading is the painted accent: "Recently <em>sold</em>". */
  h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; }

  a { color: var(--bp-brand-600); text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a:hover { color: var(--bp-brand-800); }

  :focus-visible {
    outline: 2px solid var(--bp-focus);
    outline-offset: 3px;
  }

  ::selection { background: var(--bp-brand-100); color: var(--bp-ink); }

  /* Material Symbols Rounded, loaded from Google Fonts with only the icons we use (see _Layout).
     In the base layer so components can size and fill icons in context; the modifiers below
     (utilities) still win over both. Outlined and light, so icons read as line drawings. */
  .icon {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    flex: none;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .icon--filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
  .icon--sm { font-size: 18px; }
  .icon--lg { font-size: 26px; }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: -100%;
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-xs);
    background: var(--bp-brand-600);
    color: var(--bp-on-primary);
    font-weight: 600;
  }

  .skip-link:focus { inset-block-start: var(--space-4); }

  /* A gallery label: small capitals, spaced out. */
  .eyebrow {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--bp-ink-2);
  }

  .eyebrow--accent { color: var(--bp-brand-600); }

  /* A painted brush stroke under a word or phrase. The stroke is a mask, so it takes the theme's red. */
  .brush {
    position: relative;
    display: inline-block;
    isolation: isolate;
  }

  .brush::after {
    content: "";
    position: absolute;
    inset-inline: -4% -6%;
    bottom: -.02em;
    z-index: -1;
    height: .34em;
    background: var(--bp-brand-600);
    opacity: .85;
    -webkit-mask: url("/img/brush/swash.svg") no-repeat center / 100% 100%;
    mask: url("/img/brush/swash.svg") no-repeat center / 100% 100%;
    transform: rotate(-1.2deg);
  }

  .brush--ochre::after { background: var(--bp-ochre-500); opacity: .7; }

  /* A short brush stroke on its own line, under a page title. */
  .brush-rule {
    display: block;
    width: 132px;
    height: 12px;
    margin-block: 2px 4px;
    background: var(--bp-brand-600);
    -webkit-mask: url("/img/brush/swash-2.svg") no-repeat center / 100% 100%;
    mask: url("/img/brush/swash-2.svg") no-repeat center / 100% 100%;
  }

  .brush-rule--short { width: 88px; }

  /* The red dot a gallery sticks beside a sold work. */
  .sold-dot {
    display: inline-block;
    flex: none;
    width: .8em;
    height: .8em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .35), transparent 45%), var(--bp-brand-600);
    box-shadow: 0 1px 1px rgb(0 0 0 / .25);
    vertical-align: -.05em;
  }

  /* A handwritten note, used sparingly: "sold 3 days ago". */
  .hand {
    font-family: var(--font-hand);
    font-size: 1.35em;
    font-weight: 500;
    line-height: 1;
  }

  /* A link that reads as a sentence with an arrow; the underline draws in on hover. */
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 4px;
    color: var(--bp-ink);
    font-family: var(--font-ui);
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
    transition: background-size var(--dur-slow) var(--ease), color var(--dur);
  }

  .text-link:hover { color: var(--bp-brand-600); background-size: 100% 1px; }
  .text-link .icon { font-size: 20px; transition: transform var(--dur) var(--ease); }
  .text-link:hover .icon { transform: translateX(4px); }
}

@layer overrides {
  /* The only layer where !important is allowed. */
  [hidden] { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}