/* Tesoro — gettesoro.app — Direction B, "the ledger"
   No web fonts, no CDN, no third-party requests of any kind.
   The serif stack resolves to New York on Apple devices, which is
   the same face the app itself uses.

   The argument this page makes is precision. No blur, no glass, no
   shadow. Hairlines, a strict measure, and figures set in tabular
   numerals, because the app is a record and a record should look
   like one. */

:root {
  color-scheme: light;

  --paper:   #faf9f6;
  --paper-2: #f2f0ea;
  --ink:     #14140f;
  --ink-2:   #4b4b45;
  --ink-3:   #6e6e65;
  --rule:    rgba(20, 20, 15, 0.14);
  --rule-2:  rgba(20, 20, 15, 0.07);
  --coin:    #9a7112;

  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.75rem;
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.7rem 1.1rem;
  z-index: 100;
}
.skip:focus { left: 0; }

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------- masthead ---------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); }
.brand img { width: 30px; height: 30px; border-radius: 7px; display: block; }

/* The masthead mark is larger than the footer's: it is the first thing on the
   page and it carries the new icon, which has detail to show. */
.masthead .brand img { width: 40px; height: 40px; border-radius: 9px; }
.masthead .brand span { font-size: 1.16rem; }
.brand span {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Baseline, not centre. The two groups are set at different sizes, so centring
   their boxes leaves their baselines 1.2px apart and the language codes ride
   high. Aligning baselines is what the eye is actually reading. */
.headtools { display: flex; align-items: baseline; gap: 1.35rem; }

/* Document links and language switcher are unrelated controls that happened to
   sit next to each other. A hairline says so. */
.headtools .langs {
  padding-left: 1.35rem;
  border-left: 1px solid var(--rule);
}

.navlinks {
  display: flex;
  gap: 1.15rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
.navlinks a { text-decoration: none; color: var(--ink-2); }

/* The nav and language links are 15px of text. Padding the hit area and pulling
   the same amount back off the margin gives a 42px target without moving
   anything on screen. */
.navlinks a, .langs a, .foot-links a {
  padding-block: 0.85rem;
  margin-block: -0.85rem;
}
.navlinks a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.doclinks a { color: var(--ink); }

.langs {
  display: flex;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.langs a { color: var(--ink-3); text-decoration: none; }
.langs a:hover { color: var(--ink); }
/* Drawn as a shadow, not a border. A border adds a pixel to the link's box, and
   because these sit in a centre-aligned row that pixel pushes the whole
   switcher half a pixel off the baseline of everything beside it. */
.langs a[aria-current="true"] {
  color: var(--ink);
  box-shadow: 0 1px 0 var(--coin);
}

@media (max-width: 1000px) {
  .masthead-inner > .navlinks:not(.doclinks) { display: none; }
}

/* ---------------- type ---------------- */

.kicker {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: none;
}
.kicker { gap: 0.55rem; }

/* A glyph on the eyebrow line, set to the optical weight of the tracked
   capitals beside it so it reads as part of the label rather than as an
   icon. Drawn for this site: Apple's licence limits SF Symbols to user
   interfaces of software running on Apple platforms. */
.kicker-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke-width: 1.8;
  color: var(--ink-3);
}

/* Sized to sit just above `h2.big`, not far above it. The hero has a kicker, a
   full-width rule and a lot of air around it, so it does not need scale to read
   as the entry point, and at 5.6rem it was shouting. */
h1 {
  font-size: clamp(2.25rem, 5.8vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.032em;
  font-weight: 600;
  margin: 0 0 2.4rem;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
  font-weight: 600;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
h2.big {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  margin-bottom: 2rem;
  max-width: 18ch;
}

h3 {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

p { margin: 0 0 1.15rem; max-width: 58ch; }
p:last-child { margin-bottom: 0; }

.stand {
  font-size: clamp(1.12rem, 1.7vw, 1.3rem);
  line-height: 1.44;
  letter-spacing: -0.008em;
  max-width: 44ch;
}
.micro {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 60ch;
}

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--coin); }

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

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

.hero {
  padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) 300px;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
}

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .hero-grid .plate--hero { grid-column: 1 / -1; }
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-top: 2rem; }

/* Both buttons are the same object at the same height, so the pair reads as a
   choice rather than as a button next to a link. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  font-family: var(--sans);
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  padding: 0.85rem 1.55rem;
  border-radius: 7px;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 180ms var(--ease), background 180ms var(--ease),
              border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.btn--solid {
  background: var(--ink);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 6px 16px -10px rgba(20, 20, 15, 0.7);
}
.btn--solid:hover {
  transform: translateY(-1px);
  background: #23231b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 22px -12px rgba(20, 20, 15, 0.75);
}
.btn--solid:active { transform: translateY(0); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn--outline:hover {
  transform: translateY(-1px);
  background: var(--paper-2);
  border-color: rgba(20, 20, 15, 0.28);
}
.btn--outline:active { transform: translateY(0); }

.btn-arrow {
  margin-left: 0.5rem;
  transition: transform 220ms var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------------- the ledger table ---------------- */

.ledger { margin: 0; }
.ledger > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--rule-2);
}
.ledger > div:first-child { border-top: 1px solid var(--rule); }
.ledger dt {
  font-family: var(--sans);
  font-size: 0.79rem;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.ledger dd {
  margin: 0;
  font-size: 1rem;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
.ledger--wide dd { font-family: var(--sans); font-size: 0.79rem; color: var(--ink-2); }

/* ---------------- chapters ---------------- */

.chapter {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  border-top: 1px solid var(--rule);
}
.chapter--mark { background: var(--paper-2); }
.chapter--beta { border-top: 1px solid var(--ink); }

.chapter-head {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.num {
  /* The accent at #9a7112 measures 3.88:1 on the marked chapters. The rules and
     borders drawn in it are decorative and can stay, but this is small text. */
  color: #8f6607;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0.5rem 0 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.chapter-head .kicker { margin-bottom: 0.7rem; }

@media (max-width: 720px) {
  .chapter-head { grid-template-columns: 1fr; gap: 0.3rem; }
  .num { margin-top: 0; }
}

/* ---------------- column sets ---------------- */

.columns {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.columns--thirds { grid-template-columns: repeat(3, 1fr); }

.feature {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.feature--flip { grid-template-columns: 0.75fr 1.25fr; }
.feature--flip .plate { order: -1; }

/* ---------------- plates ---------------- */

.plate { margin: 0; }
.plate img {
  display: block;
  width: 100%;
  max-width: min(300px, 100%);
  height: auto;
  /* No shadow here, deliberately. This page's whole argument is that nothing
     is faked, and Apple's bezel is already an object on the page. */
}
.plate figcaption {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 300px;
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
}
.plate figcaption b { color: var(--ink-2); font-weight: 600; }

.plate--hero { margin-top: -0.4rem; }
.plate--hero img { max-width: min(300px, 100%); }
.plate--hero figcaption { max-width: 300px; }

@media (max-width: 1080px) {
  .plate--hero {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
  }
  .plate--hero figcaption {
    max-width: 34ch;
    font-size: 0.88rem;
    border-top: 0;
    padding-top: 0;
    margin: 0 0 0.6rem;
  }
}
@media (max-width: 620px) {
  .plate--hero { grid-template-columns: 1fr; }
  .plate--hero figcaption { margin: 1rem 0 0; }
}

.plates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.plates .plate img { max-width: 100%; }
.plates .plate figcaption { max-width: none; }

/* ---------------- pull quote ---------------- */

.pull {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 40ch;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--coin);
}
.pull--inline {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
  margin-top: 1.6rem;
}

/* ---------------- spec table ---------------- */

.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8rem 0;
  text-align: left;
}
.spec caption {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ink);
}
.spec th, .spec td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: baseline;
  font-weight: 400;
}
.spec th {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  width: 8.5rem;
  padding-right: 1.5rem;
}
.spec td { font-size: 0.94rem; color: var(--ink-2); }

/* ---------------- numbered steps ---------------- */

.steps {
  list-style: none;
  counter-reset: s;
  padding: 0;
  margin: 0;
}
.steps li {
  counter-increment: s;
  position: relative;
  padding: 0.9rem 0 0.9rem 2.6rem;
  border-top: 1px solid var(--rule-2);
  font-size: 0.93rem;
  color: var(--ink-2);
  max-width: 46ch;
}
.steps li:first-child { border-top: 1px solid var(--rule); }
.steps li:last-child { border-bottom: 1px solid var(--rule-2); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.95rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--coin);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------------- marks list ---------------- */

.marks { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.marks li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule-2);
  font-size: 0.93rem;
  color: var(--ink-2);
  max-width: 52ch;
}
.marks li:first-child { border-top: 1px solid var(--rule); }
.marks li b {
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

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

footer {
  border-top: 1px solid var(--ink);
  padding: 2.5rem 0 4rem;
}
.foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.foot-links {
  display: flex;
  gap: 1.3rem;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 0.8rem;
}
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }

/* Same size as the links it sits beside. Equal font size in a centre-aligned
   row is what puts two runs of text on the same baseline; the masthead pair
   are different sizes and need `align-items: baseline` instead. */
footer .langs { font-size: 0.8rem; }
footer .micro { margin-bottom: 0.9rem; }

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

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .columns, .columns--thirds,
  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature--flip .plate { order: 0; }
  .plate--hero { grid-template-columns: 1fr; }
  .plate--hero figcaption { margin-bottom: 0; margin-top: 1rem; }
  .plates { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .plates { grid-template-columns: 1fr; max-width: 320px; }
}

/* ---------------- legal pages ---------------- */

/* The reviewed pages were written against the old stylesheet's names. Rather
   than edit legal text to rename a class, the two names it uses are aliased
   onto this page's equivalents. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.1rem;
}
.lede {
  font-size: clamp(1.12rem, 1.7vw, 1.3rem);
  line-height: 1.44;
  letter-spacing: -0.008em;
}

/* privacy.html and terms.html carry reviewed text, so they keep their own
   markup and borrow the page furniture above. Only the reading column below
   is theirs. */

.band { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }

.legal { max-width: 68ch; }
.legal h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 1.6rem;
}
.legal h2 {
  font-size: 1.32rem;
  line-height: 1.25;
  margin: 2.8rem 0 0.9rem;
  max-width: 100%;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.legal h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  text-transform: none;
  color: var(--ink);
  margin: 1.8rem 0 0.5rem;
  padding-bottom: 0;
  border-bottom: 0;
}
.legal p { font-size: 0.98rem; max-width: 68ch; }
.legal ul { padding-left: 1.15rem; margin: 0 0 1.15rem; }
.legal li { margin-bottom: 0.5rem; font-size: 0.97rem; }
.legal a { text-decoration-color: var(--coin); }

.small { font-size: 0.9rem; color: var(--ink-2); }

.toc {
  font-family: var(--sans);
  font-size: 0.86rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.3rem 1.5rem 1.3rem 0.6rem;
  margin: 2rem 0;
  background: var(--paper-2);
}
.toc ol { padding-left: 1.6rem; margin: 0; }
.toc li { margin-bottom: 0.3rem; font-size: 0.86rem; }
.toc a { text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }