@font-face {
  font-family:Garamond;
  src:url('assets/fonts/eb-garamond.ttf') format('truetype');
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
}

@font-face {
  font-family:Garamond;
  src:url('assets/fonts/eb-garamond-italic.ttf') format('truetype');
  font-style:italic;
  font-weight:400 800;
  font-display:swap;
}

@font-face {
  font-family:OldStandard;
  src:url('assets/fonts/old-standard-regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:OldStandard;
  src:url('assets/fonts/old-standard-bold.ttf') format('truetype');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

:root {
  color-scheme:light;
  --paper:#fff;
  --ink:#59452f;
  --muted:#705e48;
  --faint:#a99d81;
  --button:#60472f;
  --button-ink:#fffaf0;
  --lace-image:url('assets/lace-light.webp');
}

@media(prefers-color-scheme:dark) {
  :root {
    color-scheme:dark;
    --paper:#000;
    --ink:#e3dcc5;
    --muted:#c3bea9;
    --faint:#726f59;
    --button:#d8c7a3;
    --button-ink:#272a20;
    --lace-image:url('assets/lace-dark.webp');
  }
}

* {
  box-sizing:border-box;
}

html {
  background:var(--paper);
  scroll-behavior:smooth;
}

body {
  margin:0;
  color:var(--ink);
  font:20px/1.5 Garamond,Georgia,serif;
  background:var(--paper);
  min-width:280px;
  -webkit-font-smoothing:antialiased;
}

button,select,a {
  -webkit-tap-highlight-color:transparent;
}

button,select {
  font:inherit;
  color:inherit;
}

button,a,select {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

a {
  color:inherit;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}

a:hover,.text-link:hover {
  color:var(--muted);
}

button:focus-visible,a:focus-visible,select:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:5px;
}

[hidden] {
  display:none!important;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  padding:8px 20px;
  background:var(--paper);
  z-index:10;
  transform:translateY(-150%);
}

.skip-link:focus {
  transform:none;
}

.title-page {
  width:min(740px,calc(100% - 48px));
  margin:16px auto 0;
}

.frontispiece {
  position:relative;
  margin:0 9px 5px;
}

.frontispiece picture,.frontispiece img {
  display:block;
  width:100%;
}

.frontispiece img {
  height:auto;
  aspect-ratio:2.45;
  object-fit:cover;
}

.cover {
  position:relative;
  padding:54px 90px 36px;
  isolation:isolate;
}

.cover::before {
  content:"";
  position:absolute;
  inset:0;
  border:solid transparent;
  border-width:32px 86px 116px;
  border-image:var(--lace-image) 86 178 210 stretch;
  pointer-events:none;
  z-index:-1;
}

.cover-content {
  text-align:center;
}

h1 {
  margin:0;
  font-weight:500;
  text-transform:uppercase;
}

.title-small {
  display:block;
  font-family:OldStandard,Georgia,serif;
  font-weight:400;
  font-size:52px;
  line-height:1.2;
  letter-spacing:.14em;
  padding-left:.14em;
}

.title-of {
  display:block;
  font-size:16px;
  line-height:1;
  margin:13px 0 7px;
  letter-spacing:.09em;
}

.title-name {
  display:block;
  font-family:OldStandard,Georgia,serif;
  font-weight:700;
  font-size:132px;
  line-height:1.03;
  letter-spacing:.035em;
  white-space:nowrap;
  /* Broad composition with condensed capitals, like the reference cover. */
  width:181.818%;
  margin-left:-40.909%;
  transform:scaleX(.55);
}

.title-wrap {
  display:none;
}

.rule {
  width:135px;
  height:1px;
  background:var(--faint);
  margin:27px auto 78px;
  position:relative;
}

.rule::after {
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ink);
  left:calc(50% - 3.5px);
  top:-3px;
}

.intro {
  font-size:20px;
  line-height:1.35;
  margin:0 -8px 24px;
  text-wrap:pretty;
}

.explore {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--button);
  color:var(--button-ink);
  border:1px solid var(--button);
  border-radius:8px;
  font-size:24px;
  line-height:1.2;
  min-height:54px;
  padding:12px 54px;
  text-decoration:none;
  transition:transform .18s,opacity .18s;
}

.explore:hover {
  transform:translateY(-2px);
  opacity:.92;
}

.availability {
  font-size:16px;
  line-height:1.4;
  margin:12px 0 18px;
  color:var(--muted);
}

.fleuret {
  display:block;
  width:43px;
  height:43px;
  margin:0 auto 24px;
}

.colophon {
  text-transform:uppercase;
  font-variant-numeric:lining-nums;
  letter-spacing:.16em;
  font-size:13px;
  line-height:1.6;
  margin:0;
}

h2 {
  font-family:OldStandard,Georgia,serif;
  font-size:clamp(44px,6.6vw,76px);
  line-height:1.08;
  font-weight:400;
  letter-spacing:-.025em;
  margin:0;
}

.product-story,
.semantic,
.closing {
  width:min(1160px,calc(100% - 64px));
  margin-inline:auto;
}

.product-story {
  padding:160px 0 180px;
}

.section-intro {
  max-width:780px;
  margin:0 auto 110px;
  text-align:center;
}

.section-intro>p:last-child {
  max-width:650px;
  margin:34px auto 0;
  color:var(--muted);
  font-size:22px;
  line-height:1.5;
}

.eyebrow {
  margin:0 0 22px;
  font:600 12px/1.2 Garamond,Georgia,serif;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.screen-story {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:clamp(30px,4.5vw,64px);
  padding:12px 18px 0;
}

.phone-shot {
  margin:0;
  min-width:0;
}

.phone-frame {
  position:relative;
  padding:6px;
  border:1px solid color-mix(in srgb,#fff 48%,#171816);
  border-radius:clamp(36px,3.7vw,50px);
  background:
    linear-gradient(135deg,#8b8d88 0%,#30322f 16%,#0d0e0d 48%,#393b38 82%,#949691 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(0,0,0,.7),
    0 28px 68px color-mix(in srgb,var(--ink) 18%,transparent),
    0 7px 18px rgba(0,0,0,.16);
}

.phone-frame::before {
  content:"";
  position:absolute;
  z-index:2;
  top:clamp(13px,1.5vw,18px);
  left:50%;
  width:clamp(66px,29%,94px);
  height:clamp(17px,1.8vw,23px);
  border-radius:999px;
  background:#050505;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 1px 3px rgba(0,0,0,.35);
  transform:translateX(-50%);
  pointer-events:none;
}

.phone-frame::after {
  content:"";
  position:absolute;
  top:24%;
  right:-4px;
  width:3px;
  height:15%;
  border-radius:0 3px 3px 0;
  background:linear-gradient(#3d3f3c,#777974 48%,#2b2d2a);
  box-shadow:0 1px 0 rgba(255,255,255,.3);
}

.phone-frame picture {
  display:block;
  overflow:hidden;
  border-radius:clamp(30px,3.3vw,44px);
  background:#000;
}

.phone-frame img {
  display:block;
  width:100%;
  height:auto;
  border:0;
  border-radius:clamp(30px,3.3vw,44px);
  background:#fff;
}

.phone-shot figcaption {
  margin-top:30px;
  padding-inline:12px;
  color:var(--muted);
  font-size:17px;
  line-height:1.45;
}

.phone-shot figcaption strong {
  display:block;
  color:var(--ink);
  font-size:24px;
  font-weight:500;
  line-height:1.2;
  margin-bottom:8px;
}

.semantic {
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(480px,1.18fr);
  gap:clamp(60px,8vw,120px);
  align-items:start;
  padding:170px 0;
  border-top:1px solid var(--faint);
}

.semantic-copy {
  position:sticky;
  top:80px;
}

.semantic-copy h2 {
  font-size:clamp(43px,5.4vw,68px);
}

.semantic-copy>p:not(.eyebrow) {
  margin:32px 0 0;
  color:var(--muted);
  font-size:21px;
  line-height:1.52;
}

.semantic-copy a {
  color:var(--ink);
  font-weight:600;
}

.semantic-copy .semantic-note {
  font-size:16px;
  border-left:1px solid var(--faint);
  padding-left:20px;
}

.score-demo {
  padding:0;
}

.example-heading span,
.reference-answer>span,
.example-note {
  display:block;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.example-heading strong {
  display:block;
  margin-top:7px;
  font-size:36px;
  font-weight:500;
  line-height:1.1;
}

.example-heading {
  margin-bottom:28px;
}

.reference-answer {
  margin:28px 0 34px;
  padding:24px 0;
}

.reference-answer p {
  margin:10px 0 0;
  font-size:17px;
  line-height:1.45;
  color:var(--muted);
}

.answer-scores {
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.answer-scores li {
  --score:.5;
  position:relative;
  overflow:hidden;
  padding:18px 20px 20px;
  border:1px solid color-mix(in srgb,var(--ink) 23%,transparent);
  background:color-mix(in srgb,var(--paper) 96%,var(--ink));
}

.answer-scores li::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  width:calc(var(--score) * 100%);
  height:3px;
  background:currentColor;
  opacity:.72;
}

.answer-scores .score-exact { --score:1; }
.answer-scores .score-high { --score:.96; }
.answer-scores .score-good { --score:.86; }
.answer-scores .score-partial { --score:.76; }
.answer-scores .score-review { --score:.34; }

.score-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:baseline;
}

.score-top span {
  color:var(--muted);
  font-size:15px;
}

.score-top strong {
  font-family:OldStandard,Georgia,serif;
  font-size:30px;
  font-variant-numeric:tabular-nums;
  font-weight:700;
}

.answer-scores p {
  margin:8px 0 0;
  font-size:17px;
  line-height:1.35;
}

.example-note {
  margin:22px 0 0;
  line-height:1.5;
  text-transform:none;
  letter-spacing:.04em;
}

.closing {
  max-width:860px;
  padding:150px 0 170px;
  text-align:center;
  border-top:1px solid var(--faint);
}

.closing .fleuret {
  margin-bottom:34px;
}

.closing h2 {
  margin-inline:auto;
}

.closing>p:last-child {
  margin:30px 0 0;
  color:var(--muted);
}

.site-footer {
  width:min(1160px,calc(100% - 64px));
  margin:auto;
  padding:28px 0 36px;
  border-top:1px solid var(--faint);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  color:var(--muted);
  font-size:14px;
}

.footer-links { display:flex; flex-wrap:wrap; gap:12px 24px; }
.footer-links a { padding:8px 0; text-underline-offset:3px; }

.site-footer>a {
  color:var(--ink);
  font-weight:600;
  letter-spacing:.18em;
  text-decoration:none;
}

.has-js .reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease,transform .7s ease;
}

.has-js .reveal.is-visible {
  opacity:1;
  transform:none;
}

@media(min-width:1200px) and (max-height:960px) {
  .title-page {
    width:620px;
    margin-top:14px;
  }
  .cover {
    padding:42px 72px 36px;
  }
  .cover::before {
    border-width:27px 70px 95px;
  }
  .title-small {
    font-size:44px;
  }
  .title-name {
    font-size:112px;
  }
  .rule {
    margin:18px auto 64px;
  }
  .intro {
    font-size:18px;
    margin-bottom:19px;
  }
  .explore {
    font-size:21px;
    min-height:49px;
    padding:10px 32px;
  }
  .availability {
    margin:10px 0 12px;
  }
  .fleuret {
    width:33px;
    height:33px;
    margin-bottom:18px;
  }
  .colophon {
    font-size:11px;
  }
  .site-footer {
    padding-top:5px;
  }
}

@media(max-width:1100px) {
  .title-page {
    margin-top:14px;
  }

  .product-story {
    padding-block:130px 150px;
  }

  .semantic {
    grid-template-columns:1fr;
    gap:70px;
    padding-block:130px;
  }

  .semantic-copy {
    position:static;
    max-width:760px;
  }

  .score-demo {
    max-width:760px;
    margin-left:auto;
  }
}

@media(max-width:820px) {
  .title-name {
    font-size:clamp(84px,14.5vw,118px);
  }

  .rule {
    margin-bottom:20px;
  }
}

@media(max-width:760px) {
  .product-story,.semantic,.closing,.site-footer {
    width:calc(100% - 40px);
  }

  .product-story {
    padding-block:110px 120px;
  }

  .section-intro {
    margin-bottom:70px;
  }

  .section-intro>p:last-child {
    font-size:20px;
  }

  .screen-story {
    grid-template-columns:1fr;
    gap:68px;
    width:100%;
    margin:0;
    overflow:visible;
    padding:0 clamp(24px,10vw,54px);
  }

  .phone-shot {
    margin-top:0;
  }

  .semantic {
    padding-block:110px;
  }

  .score-demo {
    margin:0;
  }

  .closing {
    padding-block:110px 125px;
  }
}

@media(max-width:600px) {
  .title-page {
    width:100%;
    margin:0;
  }
  .frontispiece {
    padding:2px;
    margin:0 0 3px;
  }
  .cover {
    padding:38px 28px 44px;
    overflow:clip;
  }
  .cover::before {
    /* Bleed the artwork's transparent side gutters beyond the screen edge. */
    inset:0 -3px;
    border-width:18px 30px 70px;
    border-image-slice:86 178 210;
    border-image-repeat:stretch round;
  }
  .title-small {
    font-size:clamp(25px,7.5vw,44px);
    letter-spacing:.1em;
  }
  .title-of {
    font-size:12px;
    margin:13px 0 9px;
  }
  .title-name {
    font-size:clamp(50px,18vw,108px);
    letter-spacing:.035em;
    width:172.414%;
    margin-left:-36.207%;
    transform:scaleX(.58);
  }
  .rule {
    width:85px;
    margin:21px auto 20px;
  }
  .intro {
    font-size:18px;
    line-height:1.4;
    margin:0 3px 24px;
  }
  .explore {
    font-size:20px;
    min-height:49px;
    padding:11px 23px;
  }
  .availability {
    font-size:14px;
    margin:13px -4px 21px;
  }
  .fleuret {
    width:34px;
    height:34px;
    margin-bottom:21px;
  }
  .colophon {
    font-size:10px;
    letter-spacing:.12em;
    max-width:190px;
    margin:auto;
  }

  h2 {
    font-size:clamp(40px,12vw,58px);
  }

  .semantic-copy h2 {
    font-size:clamp(40px,11vw,54px);
  }

  .semantic-copy>p:not(.eyebrow) {
    font-size:19px;
  }

  .example-heading strong {
    font-size:31px;
  }

  .reference-answer p,.answer-scores p {
    font-size:16px;
  }

  .score-top strong {
    font-size:26px;
  }

  .site-footer {
    flex-direction:column;
    align-items:flex-start;
    padding-block:24px 30px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
  }

  .has-js .reveal {
    opacity:1;
    transform:none;
  }
}