/* STAMTREE - the one stylesheet for stamtree.com.
   Every page links this file and carries no <style> of its own, so the
   identity has exactly one source.

   DIRECTION: "the clean instrument". A light, modern, editorial page for
   adults buying a serious tool. One committed accent (the Fan Crown's own
   spruce, deepened until it carries text on paper), hairline structure
   instead of shadows and rounded cards, generous vertical rhythm, and one
   asymmetric spine: every band is anchored by a small-caps left rail whose
   hairline runs to the right edge.

   THE SIGNATURE is the ARC RULE (.arc below) - three concentric arcs and a
   proband dot, lifted from the mark's own geometry, standing where a page
   would otherwise put a straight line.

   FONTS ARE SYSTEM STACKS, deliberately: this site loads nothing from any
   third party, which is what lets the privacy page say so and mean it. The
   character is carried by the display face (a humanist flared sans that
   ships with Windows and macOS alike), the palette, and the spacing.

   LIGHT ONLY, by the owner's ruling ("modern design, light professional
   colors"). color-scheme is declared so browsers do not invert controls. */

:root {
  --paper:       #FAFAF8;
  --surface:     #FFFFFF;
  --wash:        #EEF3F0;
  --ink:         #16211C;
  --ink-soft:    #4C5A54;
  --spruce:      #1F5C42;
  --spruce-deep: #133C2B;
  --line:        #DCE1DC;
  --amber:       #8A5A12;

  --display: Optima, Candara, "Gill Sans MT", "Gill Sans", "Trebuchet MS", sans-serif;
  --text: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --measure: 68rem;
  --gap: clamp(1.1rem, 2.6vw, 2rem);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--spruce); text-underline-offset: 0.18em; }
a:hover { color: var(--spruce-deep); }

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

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 0.6rem;
  z-index: 20;
  background: var(--surface);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--spruce);
}

/* ---------- the measure ---------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(250, 250, 248, 0.94);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--line);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.brand .mark { width: 30px; height: 30px; color: var(--spruce); display: block; }

.brand b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.24rem;
  letter-spacing: 0.02em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.15rem;
  font-size: 0.94rem;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--spruce); border-bottom-color: var(--line); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--spruce); }

/* ---------- bands ---------- */

.band { padding: clamp(2.6rem, 6vw, 4.6rem) 0; }
.band--wash { background: var(--wash); }
.band--tight { padding-top: clamp(1.6rem, 3vw, 2.4rem); }

.rail {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spruce);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.4rem;
}
.rail::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 0.7rem;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.15rem, 5.4vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.16rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1rem, 1.9vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34rem;
}

.note { font-size: 0.94rem; color: var(--ink-soft); }

/* ---------- the arc rule: the mark's own geometry, standing in for a line ----------

   Three concentric fan arcs and the proband dot, flattened into a divider.
   THE RADII ARE NOT THE CHORD HALF-WIDTHS: a radius equal to half the chord
   draws a SEMICIRCLE, which rises as far as it is wide and is then clipped by
   a 22px box. Each radius is solved from the chord and the rise we want -
   r = (w^2/4 + h^2) / 2h - so the outer arc spans 106 and rises 18, the middle
   70 and 13, the inner 34 and 8, and all three fit inside the box with room
   for the stroke. Measured in a browser, not derived and trusted. */

.arc {
  height: 22px;
  margin: 2.2rem auto;
  background: center / 120px 22px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cg fill='none' stroke='%231F5C42' stroke-linecap='round' stroke-width='1.4'%3E%3Cpath d='M7,20 A87,87 0 0 1 113,20'/%3E%3Cpath d='M25,20 A54,54 0 0 1 95,20'/%3E%3Cpath d='M43,20 A22,22 0 0 1 77,20'/%3E%3C/g%3E%3Ccircle cx='60' cy='20' r='2.1' fill='%231F5C42'/%3E%3C/svg%3E");
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.6rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2.6rem, 7vw, 5.2rem) 0 clamp(2.2rem, 5vw, 3.6rem);
}

.hero .eyebrow {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spruce);
  margin: 0 0 0.9rem;
}

.hero-mark {
  background: var(--wash);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: clamp(1.4rem, 4vw, 2.6rem);
}
.hero-mark svg { width: 100%; height: auto; color: var(--spruce); }

/* ---------- buttons ---------- */

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.btn {
  font: inherit;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.015em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.72rem 1.5rem;
  border: 1.5px solid var(--spruce);
  background: var(--spruce);
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.btn:hover {
  background: var(--spruce-deep);
  border-color: var(--spruce-deep);
  color: #FFFFFF;
  /* the double edge: the mark is a stroke drawing, so the button gains a
     second stroke rather than a shadow */
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--spruce-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--spruce);
}
.btn--ghost:hover {
  background: transparent;
  color: var(--spruce-deep);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: transparent;
  border-color: var(--line);
  border-style: dashed;
  color: var(--ink-soft);
  cursor: not-allowed;
  box-shadow: none;
}

.btn--wide { width: 100%; }

.held {
  font-size: 0.9rem;
  color: var(--amber);
  margin: 0.55rem 0 0;
}

/* ---------- the price cards ---------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0 0 1.6rem;
}

.tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--spruce);
  padding: 1.5rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
}

.tier h2 {
  font-size: 1.32rem;
  margin: 0 0 0.15rem;
}

.tier .eyebrow {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.tier .pris {
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.4vw, 2.3rem);
  font-weight: 600;
  line-height: 1;
  margin: 0 0 0.2rem;
}

.tier .per {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.tier ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: 0.95rem;
  flex: 1;
}
.tier li {
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.45rem;
  color: var(--ink-soft);
}
.tier li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-left: 1.5px solid var(--spruce);
  border-bottom: 1.5px solid var(--spruce);
  transform: rotate(-45deg);
}

/* ---------- the add-on cards ---------- */

.addons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.addon {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.25rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
}

.addon .addon-with {
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spruce);
  margin: 0 0 0.5rem;
}

.addon h3 { margin: 0 0 0.5rem; }

.addon .addon-pris {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 0.15rem;
}

.addon .per {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}

.addon .addon-note {
  font-size: 0.93rem;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
  flex: 1;
}
.addon .addon-note:last-child { margin-bottom: 0; }

/* A cell the owner did not price is stated, not hidden: the card stands in
   its row and says the extension is not sold with that edition. */
.addon--empty {
  background: transparent;
  border-style: dashed;
}

/* ---------- the price table ---------- */

.table-scroll { overflow-x: auto; }

table.prices {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  background: var(--surface);
  border: 1px solid var(--line);
}

table.prices caption {
  caption-side: bottom;
  text-align: left;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding-top: 0.7rem;
}

table.prices th,
table.prices td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
}

table.prices thead th {
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spruce);
  border-bottom: 1px solid var(--line);
}

table.prices tbody th { color: var(--ink); }
table.prices tbody tr:last-child th,
table.prices tbody tr:last-child td { border-bottom: 0; }
table.prices td { font-family: var(--display); font-weight: 600; }
table.prices td.dash {
  font-family: var(--text);
  font-weight: 400;
  color: var(--ink-soft);
}

/* ---------- prose pages ---------- */

.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.4rem; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin-top: 1.6rem; }
.prose ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose .lead { max-width: none; margin-bottom: 2rem; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--spruce);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.4rem;
}
.panel :last-child { margin-bottom: 0; }

/* ---------- feature rows ---------- */

.rooms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.room h3 { margin: 0 0 0.35rem; }
.room p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.room .n {
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--spruce);
  display: block;
  margin-bottom: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- figures and the gallery ---------- */

figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.6rem 0.6rem 0;
}
figure img { display: block; width: 100%; }
figcaption {
  padding: 0.85rem 0.3rem 1rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
figcaption b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spruce);
  margin-bottom: 0.3rem;
}

.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}
.shots--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shots--one { grid-template-columns: minmax(0, 30rem); justify-content: center; }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 2.4rem 0 3rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.foot-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: baseline;
  margin-bottom: 1rem;
}
.foot-rows a { color: var(--spruce); text-decoration: none; }
.foot-rows a:hover { text-decoration: underline; }

.seller {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* ---------- one quiet arrival ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1, .hero .lead, .hero .cta, .hero-mark {
    opacity: 0;
    animation: settle 700ms cubic-bezier(0.22, 0.61, 0.24, 1) forwards;
  }
  .hero h1    { animation-delay: 70ms; }
  .hero .lead { animation-delay: 140ms; }
  .hero .cta  { animation-delay: 210ms; }
  .hero-mark  { animation-delay: 120ms; }
  @keyframes settle {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- narrow ---------- */

@media (max-width: 60rem) {
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 46rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-mark { max-width: 15rem; }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .addons { grid-template-columns: minmax(0, 1fr); }
  .rooms { grid-template-columns: minmax(0, 1fr); }
  .shots, .shots--four { grid-template-columns: minmax(0, 1fr); }
  .site-head .wrap { flex-wrap: wrap; min-height: 0; padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .brand { margin-right: 0; width: 100%; }
}

@media print {
  .site-head, .cta, .arc { display: none; }
  body { background: #FFFFFF; }
}