/* ───────────────────────────────────────────────────────────────
   Precy — precy.app

   The palette and the type are the app's, not the web's: every colour
   below is lifted from Precy/Assets.xcassets, and Newsreader stands in
   for New York, which is what the app sets its serif in.

   Colour is spent in one place — the shelf — and nowhere else. The rest
   of the page is ink on paper, separated by hairlines, because the app
   is hairlines and paper too.
   ─────────────────────────────────────────────────────────────── */

:root{
  --paper:#FBF7EE; --card:#FFFFFF; --ink:#141414; --mut:#5F6167;
  --rule:rgba(20,20,20,.13); --faint:rgba(20,20,20,.07); --chip:#EFEAE0;
  --green:#3FBE7C; --purple:#A583DF; --yellow:#F2C63C;
  --salmon:#F19273; --sky:#8FD3EC; --red:#E04B3B;
  --serif:"Newsreader",ui-serif,"New York",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --gutter:22px; --measure:64ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16191D; --card:#1D2228; --ink:#F1EDE3; --mut:#9CA0A8;
    --rule:rgba(241,237,227,.15); --faint:rgba(241,237,227,.08); --chip:#262C33;
    --green:#35A76B; --purple:#A184D6; --yellow:#D9AE30;
    --salmon:#D97C5F; --sky:#6FB8D4; --red:#CF4234;
  }
}
:root[data-theme="dark"]{
  --paper:#16191D; --card:#1D2228; --ink:#F1EDE3; --mut:#9CA0A8;
  --rule:rgba(241,237,227,.15); --faint:rgba(241,237,227,.08); --chip:#262C33;
  --green:#35A76B; --purple:#A184D6; --yellow:#D9AE30;
  --salmon:#D97C5F; --sky:#6FB8D4; --red:#CF4234;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

.wrap{max-width:1000px;margin:0 auto;padding-inline:var(--gutter)}
.col{max-width:var(--measure)}

h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,62px);line-height:1.03;margin:0 0 22px}
h2{font-size:clamp(25px,3.4vw,33px);line-height:1.14;margin:0 0 14px}
h3{font-size:18px;letter-spacing:-.006em;margin:0 0 5px}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}

/* Eyebrow. Used only where it names a real category, never as decoration. */
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mut);
  margin:0 0 14px;
}

/* ── masthead ─────────────────────────────────────────────────── */
.top{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding-block:20px;border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);
  font-size:22px;font-weight:600;text-decoration:none;letter-spacing:-.015em}
.top nav{display:flex;gap:22px;font-size:15px;color:var(--mut)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--ink);text-decoration:underline}

/* The mark, from the app's own path data. No tile, no border. */
.mark{width:27px;height:30px;display:block;overflow:visible}
.mark .fold,.mark .leaf{
  transform-box:view-box; transform-origin:71.45% 25.2%;
  transition:transform .62s ease-in-out, opacity .01s linear .31s;
}
.mark .fold{transform:perspective(900px) rotate3d(1,1,0,0deg);opacity:1}
.mark .leaf{transform:perspective(900px) rotate3d(1,1,0,180deg);opacity:0}
.brand:hover .mark .fold,.brand:focus-visible .mark .fold{
  transform:perspective(900px) rotate3d(1,1,0,-180deg);opacity:0}
.brand:hover .mark .leaf,.brand:focus-visible .mark .leaf{
  transform:perspective(900px) rotate3d(1,1,0,0deg);opacity:1}
@media (prefers-reduced-motion:reduce){
  .mark .fold,.mark .leaf{transition:none}
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{padding-block:70px 46px}
.hero .lede{font-size:clamp(18px,2.1vw,20.5px);line-height:1.5;color:var(--mut);
  margin:0 0 30px;max-width:50ch}

/* The App Store badge: the one solid black object on the page. */
.store{
  display:inline-flex;align-items:center;gap:11px;
  background:#000;color:#fff;text-decoration:none;
  padding:11px 20px 12px;border-radius:11px;
}
.store{transition:transform .18s cubic-bezier(.22,.68,.3,1), box-shadow .18s ease;
  will-change:transform}
.store:hover{background:#1c1c1c;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(20,20,20,.18)}
.store:active{transform:translateY(0);box-shadow:none;transition-duration:.06s}
@media (prefers-reduced-motion:reduce){.store{transition:none}}
.store svg{width:23px;height:23px;flex:none;fill:#fff}
.store .s1{display:block;font-size:10.5px;letter-spacing:.03em;opacity:.9;line-height:1.25}
.store .s2{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.req{margin:14px 0 0;font-size:14.5px;color:var(--mut)}

/* ── the shelf: the one place colour is spent ─────────────────
   Books lie flat and stacked, seen edge-on, the way `BookSpineRow`
   draws them: a binding strip on the leading edge in the book's own
   colour, the title read left to right along the face, and rows that
   differ in height because real spines are not all one thickness.

   The app's rules hold here. Colour identifies the book and never the
   format -- format is a structural mark instead, the print rules, the
   ebook's folded corner, the magazine's masthead. One ink serves every
   fill in both themes. No wood, no tilt, no drop shadows. */
.shelf-wrap{border-top:1px solid var(--rule);padding-block:44px 50px}
.shelf{display:flex;flex-direction:column;gap:9px}

.srow{
  --fill:var(--green);
  display:flex;align-items:stretch;overflow:hidden;
  border-radius:3px;background:var(--fill);color:#141414;
  min-height:var(--h,62px);
}
.binding{
  flex:none;width:62px;position:relative;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset -1px 0 0 rgba(20,20,20,.16);
}
/* Print keeps the double rule the generated cover draws for a spine. */
.srow.print .binding::before{
  content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;
  background:rgba(20,20,20,.22);
  box-shadow:3.5px 0 0 rgba(20,20,20,.10);
}
.pos{
  font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.04em;color:rgba(20,20,20,.62);
  font-variant-numeric:tabular-nums;
}
.face{
  position:relative;flex:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:11px 16px;
}
.stitle{
  font-family:var(--serif);font-size:17px;font-weight:600;
  letter-spacing:-.012em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sauthor{
  font-size:12.5px;color:rgba(20,20,20,.62);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* A magazine leads with its masthead, as on the cover. */
.srow.magazine .face::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:rgba(20,20,20,.18);
}
/* The folded corner is the ebook's mark and nothing else's. */
.srow.ebook .face::after{
  content:"";position:absolute;top:0;right:0;width:20px;height:20px;
  background:rgba(20,20,20,.20);
  clip-path:polygon(100% 0, 100% 100%, 0 0);
}
.shelf-note{margin:18px 0 0;font-size:15px;color:var(--mut);max-width:56ch}

/* The one orchestrated moment on the page: the shelf filling, top to
   bottom, the way books are set down. Short, and over before anyone
   has finished reading the headline above it. */
@media (prefers-reduced-motion:no-preference){
  .srow{animation:setDown .44s cubic-bezier(.22,.68,.3,1) both}
  .srow:nth-child(1){animation-delay:.05s}
  .srow:nth-child(2){animation-delay:.11s}
  .srow:nth-child(3){animation-delay:.17s}
  .srow:nth-child(4){animation-delay:.23s}
  .srow:nth-child(5){animation-delay:.29s}
  .srow:nth-child(6){animation-delay:.35s}
}
@keyframes setDown{
  from{opacity:0;transform:translateY(-7px) scaleX(.985)}
  to{opacity:1;transform:none}
}

/* ── the index: features as a glossary, not a card grid ───────── */
.index{padding-block:52px;border-top:1px solid var(--rule)}
.entries{
  display:grid;gap:0 54px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:26px;
}
.entry{padding-block:19px;border-top:1px solid var(--faint)}
.entry p{color:var(--mut);font-size:15.5px;line-height:1.52;margin:0}

/* ── the lifted claim: the only panel on the page ─────────────── */
.lift{
  position:relative;background:var(--card);
  border:1px solid var(--rule);
  /* The corner is turned down, like the mark. */
  border-radius:3px 0 3px 3px;
  padding:30px 32px;margin-block:52px;
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.lift::after{
  content:"";position:absolute;top:0;right:0;
  width:34px;height:34px;background:var(--purple);
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}
.lift h2{margin-bottom:10px}
.lift p{color:var(--mut);max-width:58ch}
.lift .quote{
  font-family:var(--serif);font-size:19px;font-style:italic;
  color:var(--ink);margin:0 0 12px;
}

/* ── plain rows (privacy, sources) ────────────────────────────── */
.rows{border-top:1px solid var(--rule);margin-top:24px}
.rows>div{padding-block:18px;border-bottom:1px solid var(--faint)}
.rows p{color:var(--mut);font-size:15.5px;margin:0}
section{padding-block:52px;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.sub{color:var(--mut);margin:0 0 4px;max-width:56ch}

.note{background:var(--chip);border-radius:3px;padding:20px 22px;
  font-size:16px;color:var(--mut);margin-top:26px}
.note strong{color:var(--ink)}

/* ── prose (privacy, terms) ───────────────────────────────────── */
.prose{padding-block:38px 62px;max-width:var(--measure)}
.prose h1{font-size:clamp(32px,5vw,44px);margin-bottom:18px}
.prose h2{font-size:clamp(20px,2.7vw,24px);margin:36px 0 9px}
.prose h2:first-of-type{margin-top:26px}
.prose p,.prose li{font-size:17px;line-height:1.62}
.prose ul{padding-left:21px;margin:0 0 15px}
.prose li{margin-bottom:9px}
.updated{color:var(--mut);font-size:15px;margin-top:34px;padding-top:18px;
  border-top:1px solid var(--rule)}

/* ── footer ───────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding-block:30px 46px;
  color:var(--mut);font-size:15px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 15px;margin-bottom:9px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline;color:var(--ink)}

@media (max-width:600px){
  body{font-size:16.5px}
  .hero{padding-block:48px 38px}
  section,.index{padding-block:42px}
  .top nav{gap:16px;font-size:14px}
  .lift{padding:26px 22px;margin-block:42px}
}