/* Tierlume's own page (tierlume.com). Version 32.
   Ink, gold and cream from the logo; Cormorant Garamond (display) and
   Jost (text), both SIL Open Font License, served from here. No scripts. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/jost-latin-500-normal.woff2") format("woff2"); }

:root {
  --ink: #1e1626;
  --ink-deep: #150f1c;
  --gold: #c9a55c;
  --gold-dim: #8c7444;
  --cream: #f4efe6;
  --mist: #b9afc2;
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --text: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --measure: 38rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font: 400 1.0625rem/1.65 var(--text);
  font-kerning: normal;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--cream); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: 1rem; top: -4rem; padding: 0.5rem 0.9rem; background: var(--cream); color: var(--ink); z-index: 2; }
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2rem, 64rem); margin-inline: auto; }

/* --- The opening: the wordmark, one line, what it is ------------------- */
.hero { padding: clamp(4rem, 12vh, 8rem) 0 clamp(3.5rem, 9vh, 6rem); }
.hero-logo { margin: 0 0 clamp(2.5rem, 7vh, 4rem); width: min(30rem, 80vw); }
.hero-line {
  margin: 0;
  max-width: 15em;
  font: 400 clamp(2.4rem, 5.6vw, 4.25rem)/1.06 var(--display);
  letter-spacing: -0.01em;
  color: var(--cream);
}
.hero-sub { margin: 1.6rem 0 0; max-width: var(--measure); color: var(--mist); font-size: 1.125rem; }
.hero-note { margin: 2.2rem 0 0; font-size: 0.95rem; color: var(--mist); }

h2 {
  margin: 0 0 0.6rem;
  font: 500 clamp(1.9rem, 3.4vw, 2.6rem)/1.1 var(--display);
  color: var(--cream);
}
.lede { margin: 0 0 2.6rem; max-width: var(--measure); color: var(--mist); }

/* --- The modules, as the logo's tiers ----------------------------------
   Each module sits beside a gold bar cut on the slant like the mark's.
   The bars step through the mark's three lengths (long, longest,
   short), so the list reads as the logo, drawn out. */
.tiers { padding: clamp(3.5rem, 9vh, 6rem) 0; background: var(--ink-deep); }
.tier-list { list-style: none; margin: 0; padding: 0; }
.tier {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  column-gap: 2rem;
  padding: 1.35rem 0;
  border-top: 1px solid rgba(201, 165, 92, 0.18);
}
.tier:last-child { border-bottom: 1px solid rgba(201, 165, 92, 0.18); }
.tier::before {
  content: "";
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 0.62rem;
  height: 0.7rem;
  width: var(--bar, 64%);
  background: var(--gold);
  clip-path: polygon(0.45rem 0, 100% 0, 100% 100%, 0 100%);
}
.tier:nth-child(3n + 1) { --bar: 64%; }
.tier:nth-child(3n + 2) { --bar: 100%; }
.tier:nth-child(3n) { --bar: 44%; }
.tier h3 { margin: 0; font: 500 1.6rem/1.2 var(--display); color: var(--cream); }
.tier p { margin: 0.3rem 0 0; max-width: var(--measure); color: var(--mist); }

/* --- How it's built ------------------------------------------------------ */
.care { padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(3rem, 8vh, 5rem); }
.care h2 { max-width: 16em; margin-bottom: 2.2rem; }
.care-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.care-list div { padding-top: 1rem; border-top: 1px solid var(--gold-dim); }
.care-list dt { font-weight: 500; color: var(--cream); }
.care-list dd { margin: 0.35rem 0 0; color: var(--mist); }

/* --- The end ---------------------------------------------------------------- */
.foot { padding: 2.5rem 0 3rem; border-top: 1px solid rgba(201, 165, 92, 0.18); color: var(--mist); font-size: 0.95rem; }
.foot p { margin: 0 0 0.6rem; max-width: var(--measure); }
.foot-small { font-size: 0.85rem; opacity: 0.8; }

@media (max-width: 40rem) {
  .tier { grid-template-columns: 1fr; }
  .tier::before { grid-row: auto; width: calc(var(--bar) * 0.55); margin: 0 0 0.8rem; }
  .care-list { grid-template-columns: 1fr; }
}