/* gildreader.com: the app's own paper, navy and gilt, and its own three typefaces. */
@font-face{font-family:'Newsreader';src:url('/app/fonts/newsreader-latin-opsz-normal.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/app/fonts/newsreader-latin-opsz-italic.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'Literata';src:url('/app/fonts/literata-latin-opsz-normal.woff2') format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Figtree';src:url('/app/fonts/figtree-latin-wght-normal.woff2') format('woff2');font-weight:300 900;font-display:swap}

:root{
  --paper:#F3F4F1; --ink:#1E2329; --muted:#5A636B; --navy:#35557A; --gilt:#E3C277; --gilt-deep:#B8913F; --night:#1F3047;
  --serif:'Newsreader', Georgia, serif; --book:'Literata', Georgia, serif; --sans:'Figtree', system-ui, sans-serif;
  --edge:12px; --gutter:clamp(20px, 5vw, 56px); --max:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:400 1.0625rem/1.6 var(--sans); padding-right:var(--edge); overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:var(--navy); text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:4px}

/* The gilded fore-edge: fine gold page lines down the right side, like the edge of a fine book. */
.edge{position:fixed; top:0; right:0; bottom:0; width:var(--edge); z-index:5; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(60,40,0,.28), rgba(255,255,255,0) 35%, rgba(255,248,225,.45) 62%, rgba(60,40,0,.18)),
    repeating-linear-gradient(180deg, #E8CB82 0 1px, #C9A14E 1px 2px, #F2DFA8 2px 3px, #D5B163 3px 4px);
  box-shadow:inset 1px 0 0 rgba(0,0,0,.18)}

.top, main, .foot{max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter)}
.top{display:flex; align-items:center; justify-content:space-between; padding-top:22px; padding-bottom:10px}
.mark{font-family:var(--serif); font-size:1.6rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.mark i{color:var(--navy)}
.mark.small{font-size:1.25rem; margin:0}
.toplink{font-weight:600; font-size:.95rem; text-decoration:none; padding:8px 2px}
.toplink:hover{text-decoration:underline}

/* Hero */
.hero{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,6vw,88px); align-items:center; padding:clamp(28px,7vw,88px) 0 clamp(40px,7vw,96px)}
h1{font-family:var(--serif); font-weight:400; font-size:clamp(2.5rem, 6.2vw, 4.6rem); line-height:1.02; letter-spacing:-.022em; margin:0 0 .45em; max-width:14ch; text-wrap:balance}
.lede{font-size:clamp(1.1rem,1.6vw,1.25rem); max-width:34em; color:var(--ink); margin:0 0 1.6em}
.actions{margin:0 0 .9em}
.btn{display:inline-block; background:var(--navy); color:#fff; font-weight:600; text-decoration:none; padding:15px 26px; border-radius:999px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.btn:hover{background:#2C4868}
.aside{color:var(--muted); font-size:.95rem; margin:0; max-width:30em}

.phone{margin:0}
.phone img{border-radius:22px; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 18px 40px -18px rgba(30,40,55,.45); background:#fff}
.hero-shot{justify-self:center; width:min(340px, 100%); position:relative}
/* the screenshot sits on a gilt-edged page, echoing the fore-edge */
.hero-shot::before{content:''; position:absolute; inset:18px -14px -14px 18px; border-radius:24px; background:repeating-linear-gradient(180deg,#E8CB82 0 1px,#C9A14E 1px 2px,#F2DFA8 2px 3px); z-index:-1; opacity:.9}

/* Screenshots */
.shots{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,3vw,40px); padding:clamp(8px,2vw,24px) 0 clamp(48px,8vw,104px); border-top:1px solid rgba(30,35,41,.12)}
.shots .phone{padding-top:clamp(28px,5vw,56px)}
.shots .phone:nth-child(2){padding-top:clamp(0px,2vw,16px)}
figcaption{font-family:var(--book); font-size:.98rem; line-height:1.5; color:var(--muted); margin-top:14px; max-width:22em}

/* What it does */
.what{padding:0 0 clamp(56px,9vw,120px)}
h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.1; letter-spacing:-.015em; margin:0 0 .8em}
dl{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px clamp(28px,5vw,72px); margin:0; max-width:980px}
dt{font-family:var(--book); font-weight:600; font-size:1.12rem; margin-bottom:6px}
dd{margin:0; color:var(--muted); max-width:34em}

/* The device teaser */
.device{background:var(--night); color:#E9ECEF; border-radius:28px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,80px); align-items:center; padding:clamp(36px,6vw,80px) clamp(24px,6vw,80px); margin:0 0 clamp(56px,8vw,96px); scroll-margin-top:24px}
.device h2{color:#fff; max-width:17ch}
.device p{color:#C3CCD6; max-width:34em}
.device-art{display:flex; justify-content:center}
.body{width:min(250px, 70vw); background:linear-gradient(160deg,#3A4048,#24292F); border-radius:26px; padding:14px 14px 0; box-shadow:0 30px 60px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08)}
.screen{background:#E6E4DE; border-radius:6px; aspect-ratio:3/4; padding:14px 14px 10px; color:#2A2A2A; font-family:var(--book); font-size:9.5px; line-height:1.5; display:flex; flex-direction:column; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.screen p{color:#2A2A2A; margin:0 0 .5em; text-indent:1.2em; hyphens:auto}
.screen .run{font-family:var(--sans); font-size:7px; color:#77746D; text-align:center; text-indent:0; margin-bottom:1.1em}
.screen .ch{font-size:13px; text-indent:0; margin-bottom:.8em}
.screen .folio{margin-top:auto; font-family:var(--sans); font-size:7px; color:#77746D; text-align:center; text-indent:0}
.chin{height:44px; display:flex; align-items:center; justify-content:center}
.chin span{font-family:var(--serif); font-style:italic; font-size:18px; color:var(--gilt); opacity:.85}

.join{margin-top:28px; max-width:520px}
.join label{display:block; font-weight:600; font-size:.95rem; color:#fff; margin-bottom:8px}
.row{display:flex; gap:10px; flex-wrap:wrap}
.join input{flex:1 1 220px; min-width:0; font:inherit; color:var(--ink); background:#fff; border:0; border-radius:999px; padding:14px 20px}
.join input::placeholder{color:#8A939B}
.join button{font:inherit; font-weight:600; background:var(--gilt); color:#2B2414; border:0; border-radius:999px; padding:14px 24px; cursor:pointer}
.join button:hover{background:#ECD08E}
.join button:disabled{opacity:.6; cursor:default}
.join :focus-visible{outline-color:var(--gilt)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.status{min-height:1.6em; margin:12px 0 0; font-weight:500}
.status[data-kind="ok"]{color:var(--gilt)}
.status[data-kind="bad"]{color:#F2B8A8}
.fine{font-size:.85rem; line-height:1.55; color:#9AA6B3 !important; margin:6px 0 0}
.fine a{color:#DCE4EC}

/* Footer */
.foot{padding-top:8px; padding-bottom:48px; display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 32px}
.foot nav{display:flex; flex-wrap:wrap; gap:8px 22px}
.foot nav a{text-decoration:none; font-size:.95rem}
.foot nav a:hover{text-decoration:underline}
.legal{flex-basis:100%; margin:6px 0 0; color:var(--muted); font-size:.85rem}

@media (max-width: 820px){
  :root{--edge:7px}
  .hero{grid-template-columns:1fr}
  .hero-shot{width:min(300px, 78%); margin-left:4%}
  .shots{grid-template-columns:repeat(3, minmax(220px, 1fr)); overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(-1 * var(--gutter)); padding-left:var(--gutter); padding-right:var(--gutter); border-top:0}
  .shots .phone, .shots .phone:nth-child(2){padding-top:0; scroll-snap-align:start}
  dl{grid-template-columns:1fr}
  .device{grid-template-columns:1fr; border-radius:22px}
  .device-art{order:2}
}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto !important}}