:root {
  --paper: #f3eddf;
  --ink: #242e27;
  --green: #405649;
  --leaf: #c4c9a4;
  --rule: #a8ac99;
  --serif: "Spectral",Georgia,serif;
  --sans: "Work Sans","Segoe UI",sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-wrap: anywhere;
  background: var(--paper);
  color: var(--ink);
  font: 1.05rem/1.6 var(--serif);
}
a {
  color: inherit;
  text-underline-offset: .19em;
}
h1,h2,h3,p {
  margin: 0;
}
h1,h2,h3 {
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.047em;
}
.wrap {
  width: min(100% - 3rem,68rem);
  margin: auto;
}
.bar {
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 3.6rem;
  font: 750 .79rem var(--sans);
}
.mast {
  text-align: center;
}
.mark {
  font-size: clamp(3.15rem,13vw,10rem);
  letter-spacing: -.09em;
  line-height: .92;
  margin-top: .13em;
}
.strap,.kicker {
  font: 750 .72rem/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.strap {
  margin-top: .75rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ink);
}
.feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(1rem,4vw,3rem);
  padding-block: 2rem;
  border-bottom: 1px solid var(--rule);
}
.engraving {
  min-height: 16rem;
  background: repeating-radial-gradient(ellipse at 72% 105%,var(--green) 0 2px,transparent 2px 8px),repeating-linear-gradient(145deg,#809075 0 1px,var(--leaf) 2px 5px);
  border: 1px solid var(--green);
}
h1 {
  font-size: clamp(2.75rem,7vw,5.8rem);
  margin: .15em 0 .2em;
}
h2 {
  font-size: clamp(2.3rem,5vw,3.7rem);
}
h3 {
  font-size: 1.55rem;
  margin: .35em 0;
}
.read {
  display: inline-block;
  font: 750 .86rem var(--sans);
  margin-top: 1.1rem;
}
.section {
  padding-block: 2.2rem;
  border-bottom: 1px solid var(--rule);
}
.stories {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.2rem;
  margin-top: 1.2rem;
}
.stories article {
  border-top: 1px solid var(--rule);
  padding-top: .75rem;
}
.about p {
  margin-top: .6rem;
}
.article {
  max-width: 44rem;
  margin: 3rem auto;
}
.article p:not(.kicker) {
  margin-top: 1.1rem;
}
.article .dek {
  font-size: 1.3rem;
}
.article .engraving,.article h2 {
  margin-top: 1.5rem;
}
.skip:not(:focus) {
  position: absolute;
  clip-path: inset(50%);
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
@media(forced-colors:active) {
  :focus-visible { outline-color: Highlight; }
}
@media(max-width:635px) {
  .wrap {
    width: calc(100% - 2rem);
  }
  .feature,.stories {
    grid-template-columns: 1fr;
  }
  .engraving {
    min-height: 11rem;
  }
  .strap,.kicker {
    font-size: .65rem;
  }
}

.demo-notice { padding: 1rem; background: #fff; color: #202a19; border-bottom: 2px solid currentColor; font: 1rem/1.5 "Segoe UI", sans-serif; }
.demo-notice a { display: inline-block; margin-top: .4rem; text-decoration: underline; }