/* Time Kept landing: almanac style. Cream paper, navy ink, gold rules. Built for older readers (20px body). */
:root{
  --paper:#EFE7D6; --paper-2:#E7DCC4; --card:#F4EEE1; --ink:#14202E; --ink-soft:#3E4A57; --muted:#6B6457;
  --gold:#8F6E26; --gold-lt:#C9A24A; --line:#CDBF9F; --night:#101820; --cream:#F1EADB;
  --display:"Playfair Display",Georgia,serif; --serif:"Newsreader",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 20px/1.6 var(--serif);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.mono{font:500 .74rem/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{text-wrap:pretty}
h1{font-size:clamp(2.5rem,4.6vw,3.8rem);line-height:1.08}
h2{font-size:clamp(2.1rem,4.2vw,3.5rem);line-height:1.1}
h3{font-size:1.45rem;line-height:1.25}
em.accent{font-style:italic;color:var(--gold);padding-bottom:4px}
p{margin:0 0 1em}

/* top nav */
.topnav{position:sticky;top:0;z-index:10;background:rgba(239,231,214,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.wordmark{font:italic 700 1.55rem/1 var(--display);text-decoration:none;color:var(--ink);white-space:nowrap}
@media(max-width:520px){.topnav .btn{width:auto;padding:0 16px}.topnav .wrap{height:64px}}
.topnav nav{display:flex;gap:30px}
.topnav nav a{text-decoration:none;font-size:1.02rem;color:var(--ink-soft)}
.topnav nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){.topnav nav{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 30px;font:600 1.08rem/1 var(--serif);text-decoration:none;white-space:nowrap;border:1.5px solid var(--ink);border-radius:2px;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.btn-sm{min-height:46px;padding:0 20px;font-size:1rem}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--ink);color:var(--cream)}
.btn-solid:hover{background:#243447}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-cream:hover{background:#fff}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px}
@media(max-width:520px){.btn{width:100%;white-space:normal;text-align:center;padding:14px 20px}}

/* hero */
.hero{padding:64px 0 76px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.byline{display:flex;align-items:center;gap:18px;margin-bottom:26px;color:var(--gold)}
.byline .rule{flex:1;height:1px;background:var(--line)}
.byline .soft{color:var(--muted)}
.hero h1{margin-bottom:28px}
.dropcap::first-letter{float:left;font:italic 700 4.6rem/.8 var(--display);color:var(--gold);padding:8px 10px 0 0}
.hero p.lead{font-size:1.18rem;color:var(--ink-soft);max-width:34em;margin-bottom:34px}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:18px 8px 16px}
.stat+.stat{border-left:1px solid var(--line);padding-left:22px}
.stat b{display:block;font:italic 700 2.2rem/1.15 var(--display);color:var(--gold)}
.stat small{color:var(--muted);font-size:.95rem}
.frame{position:relative;margin:0;padding:14px;border:1px solid var(--line);background:var(--card);box-shadow:0 30px 60px -30px rgba(20,32,46,.45)}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* branding over the hero photo (sits on the dark top of the image) */
.brand-plate{position:absolute;top:14px;left:14px;right:14px;padding:30px 30px 70px;display:flex;flex-direction:column;align-items:flex-start;
  background:linear-gradient(180deg,rgba(10,14,18,.88) 0%,rgba(10,14,18,.6) 55%,rgba(10,14,18,0) 100%);color:var(--cream);pointer-events:none}
.plate-kicker{font:500 .72rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt)}
.plate-title{font:700 clamp(1.7rem,2.6vw,2.3rem)/1.08 var(--display);margin-top:12px;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.plate-rule{width:64px;height:2px;background:var(--gold-lt);margin:16px 0 12px}
.plate-sub{font:italic 1.05rem/1.4 var(--serif);color:#E3DCCB;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.quote-card{position:absolute;left:-44px;bottom:-40px;max-width:340px;background:var(--card);padding:24px 26px 18px;box-shadow:0 20px 40px -20px rgba(20,32,46,.45)}
.quote-card::before{content:"\201C";position:absolute;top:-30px;left:20px;font:700 4rem/1 var(--display);color:var(--gold)}
.quote-card p{font:italic 1.1rem/1.45 var(--serif);margin:0 0 10px}

@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:70px}.quote-card{left:12px;right:12px;bottom:-54px;max-width:none}.hero{padding:48px 0 100px}}
@media(max-width:520px){.stats{grid-template-columns:1fr}.stat+.stat{border-left:0;border-top:1px solid var(--line);padding-left:8px}}

/* numbered sections */
section.part{padding:110px 0}
section.alt{background:var(--paper-2)}
.part-head{display:grid;grid-template-columns:150px 1fr;gap:20px;margin-bottom:56px}
.num{font:italic 700 5rem/.95 var(--display);color:var(--gold)}
.part-head h2{margin-top:8px}
.about-head{grid-template-columns:90px 1fr;margin-bottom:26px}
.about-head .num{font-size:4rem}
.part-head p{font-size:1.15rem;color:var(--ink-soft);max-width:36em;margin-top:22px}
@media(max-width:760px){section.part{padding:76px 0}.part-head{grid-template-columns:1fr;gap:0;margin-bottom:40px}.num{font-size:3.6rem;margin-bottom:6px}}

/* book block */
.book{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.book-cover{padding:14px;background:var(--card);box-shadow:0 34px 60px -30px rgba(20,32,46,.55)}
.book h3{font-size:1.9rem;margin:14px 0 14px}
.book .meta{color:var(--gold);font-size:1rem;margin:0}
.price-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px;padding:22px 0;margin:26px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price-line b{font:italic 700 3.6rem/1 var(--display)}
.price-line span{color:var(--muted);font-size:1.05rem}
.gets-title{font-weight:600;margin:6px 0 0}
.gets{list-style:none;padding:0;margin:14px 0 30px}
.gets li{padding:15px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:28px 1fr;gap:10px}
.gets li::before{content:"";width:10px;height:10px;margin-top:.6em;background:var(--gold-lt);transform:rotate(45deg)}
.gets b{font-weight:600}
.small-note{margin-top:16px;color:var(--muted);font-size:1rem}
.text-link{color:var(--gold);font-weight:600;text-underline-offset:5px}
@media(max-width:900px){.book{grid-template-columns:1fr;gap:40px}.book-cover{max-width:420px}}

/* proof (dark) */
section.night{background:var(--night);color:var(--cream)}
section.night .num,section.night .part-head .mono{color:var(--gold-lt)}
section.night .part-head p{color:#C9C2B3}
.proof-photo{margin:0 0 64px;border:1px solid #2A3643;padding:10px;background:#0C131A}
.proof-photo img{width:100%;aspect-ratio:21/8;object-fit:cover;object-position:center 60%}
@media(max-width:760px){.proof-photo{margin-bottom:44px}.proof-photo img{aspect-ratio:16/10}}
.proof{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.proof h3{color:var(--cream);font-size:1.4rem;padding-bottom:14px;border-bottom:1px solid #33404D}
.row{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px dashed #33404D}
.row small{display:block;color:#9AA0A5;font-size:.85rem}
.row span:last-child{font:700 1.22rem var(--display);white-space:nowrap}
.col-paid .row span:last-child{color:#E9B9A6}
.col-fair .row span:last-child{color:var(--gold-lt)}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:2px solid var(--gold-lt);margin-top:22px;padding-top:18px}
.total span{color:#C9C2B3;font-size:1rem}
.total b{font:italic 700 2.5rem var(--display)}
.col-paid .total b{color:#E9B9A6}
.col-fair .total b{color:var(--gold-lt)}
.src{font-size:.92rem;color:#9AA0A5;margin-top:12px}
.callout{margin:64px 0 0 170px;max-width:720px;border-left:3px solid var(--gold-lt);padding:8px 0 8px 28px;font:italic 1.35rem/1.5 var(--serif)}
@media(max-width:900px){.proof{grid-template-columns:1fr;gap:48px}.callout{margin-left:0}}

/* inside cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.card{background:var(--card);border:1px solid var(--line);padding:32px 34px}
.card-kicker{color:var(--gold);font-weight:600;font-size:.98rem;margin:0}
.card h3{font-size:1.3rem;margin:12px 0 14px}
.card ol{list-style:none;counter-reset:n;padding:0;margin:0}
.card li{counter-increment:n;display:grid;grid-template-columns:44px 1fr;padding:11px 0;border-bottom:1px dotted var(--line);font-size:1.02rem}
.card li:last-child{border-bottom:0}
.card li::before{content:counter(n,decimal-leading-zero);font:500 .8rem/2 var(--mono);color:var(--gold)}
@media(max-width:900px){.cards{grid-template-columns:1fr}.card{padding:26px 22px}}

/* gallery */
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,310px);gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 28px 26px;margin:0 -28px}
.gallery figure{margin:0;scroll-snap-align:start}
.gallery button{all:unset;cursor:zoom-in;display:block}
.gallery img{border:1px solid var(--line);box-shadow:0 18px 36px -22px rgba(20,32,46,.55)}
.gallery figcaption{margin-top:12px;font-size:1rem}
.gallery figcaption b{display:block}
.hint{color:var(--muted);font-size:1rem}
dialog.zoom{border:0;padding:0;background:transparent;max-width:min(92vw,900px)}
dialog.zoom::backdrop{background:rgba(10,14,18,.86)}
dialog.zoom img{max-height:88vh;width:auto;margin:0 auto}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.about blockquote{margin:30px 0;padding:22px 28px;border-left:3px solid var(--gold-lt);background:var(--paper-2);font:italic 1.2rem/1.5 var(--serif)}
@media(max-width:900px){.about{grid-template-columns:1fr;gap:40px}.about .frame{max-width:420px}}

/* faq */
.faq{max-width:860px;margin-left:170px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 50px 26px 0;position:relative;font:700 1.3rem/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font:400 1.8rem var(--serif);color:var(--gold);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{color:var(--ink-soft);padding-bottom:24px;max-width:40em}
@media(max-width:760px){.faq{margin-left:0}}

/* last call + footer */
.last{background:linear-gradient(90deg,rgba(12,18,26,.94) 0%,rgba(12,18,26,.82) 55%,rgba(12,18,26,.55) 100%),url("desk-wide.jpg") center/cover,var(--night);color:var(--cream);text-align:center;padding:120px 0}
.last h2{max-width:14em;margin:22px auto 24px}
.last p{max-width:34em;margin:0 auto 38px;color:#C9C2B3}
footer{background:var(--night);color:#9AA3AB;border-top:1px solid #26313C;padding:44px 0 36px;font-size:.95rem}
footer .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px;padding-bottom:24px;border-bottom:1px solid #26313C;margin-bottom:22px}
footer .brand{font:italic 700 1.5rem var(--display);color:var(--cream)}
footer .brand span{color:var(--gold-lt)}
footer nav{display:flex;flex-wrap:wrap;gap:22px}
footer nav a{text-decoration:none;color:var(--cream)}

/* exit popup */
dialog.exit{border:1px solid var(--line);background:var(--card);padding:48px 40px 40px;max-width:470px;width:calc(100% - 32px);text-align:center;color:var(--ink)}
dialog.exit::backdrop{background:rgba(16,24,32,.72)}
dialog.exit img{width:150px;margin:0 auto 22px;box-shadow:0 18px 30px -16px rgba(20,32,46,.6)}
dialog.exit h3{font-size:1.9rem;margin:12px 0}
dialog.exit p{color:var(--ink-soft);font-size:1.05rem}
dialog.exit .x{position:absolute;top:8px;right:8px;background:none;border:0;font-size:1.8rem;cursor:pointer;color:var(--muted);width:48px;height:48px}
dialog.exit .or{display:block;margin-top:18px;color:var(--muted)}

/* gentle reveal */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  .js .reveal.in{opacity:1;transform:none}
}

/* ---------- phone tuning ---------- */
.proof-mobile{display:none}
@media(max-width:760px){
  body{font-size:19px}
  .wrap{padding:0 20px}
  .gallery{margin:0 -20px;padding:6px 20px 26px;grid-auto-columns:minmax(240px,78vw)}
  .wordmark{padding:10px 0}
  .hero{padding:36px 0 96px}
  .hero h1{margin-bottom:20px}
  .dropcap::first-letter{font-size:3.8rem}
  .stats{grid-template-columns:repeat(3,1fr);margin-top:34px}
  .stat,.stat+.stat{padding:14px 6px 12px;border-top:0}
  .stat+.stat{border-left:1px solid var(--line);padding-left:12px}
  .stat b{font-size:1.6rem}
  .stat small{font-size:.82rem;line-height:1.3;display:block}
  .plate-kicker{font-size:.74rem}
  .brand-plate{padding:22px 22px 60px}
  .quote-card p{font-size:1.02rem}
  /* real sales: one card per watch so the two prices sit together */
  .proof{display:none}
  .proof-mobile{display:block}
  .pm{background:#16202A;border:1px solid #2A3643;padding:18px 18px 16px;margin-bottom:14px}
  .pm b{display:block;font:700 1.2rem/1.3 var(--display);color:var(--cream)}
  .pm small{display:block;color:#9AA0A5;font-size:.9rem;margin:2px 0 12px}
  .pm span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;color:#C9C2B3;font-size:1rem}
  .pm span+span{border-top:1px dashed #33404D}
  .pm em{font:italic 700 1.35rem var(--display);color:#E9B9A6}
  .pm strong{font:700 1.08rem var(--display);color:var(--gold-lt);text-align:right}
  .row small{font-size:.95rem}
  .callout{font-size:1.2rem;padding-left:20px}
  footer .brand span{display:block;font-size:1.05rem;margin-top:6px}
  footer nav{gap:4px 22px}
  footer nav a{display:inline-block;padding:10px 0}
  footer small{font-size:.9rem;line-height:1.6}
  .text-link{display:inline-block;padding:12px 0}
  .faq summary{font-size:1.18rem;padding:22px 44px 22px 0}
  .last{padding:88px 0}
}
@media(max-width:380px){.stat small{font-size:.76rem}.stat b{font-size:1.4rem}}

/* ---------- honest money line ---------- */
.math{margin:-2px 0 18px;padding:12px 16px;background:var(--paper-2);border-left:3px solid var(--gold-lt);font-size:1rem;color:var(--ink-soft)}

/* ---------- price lookup ---------- */
.lookup{background:var(--paper-2)}
.lookup-box{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;background:var(--card);border:1px solid var(--line);padding:40px;box-shadow:0 30px 60px -40px rgba(20,32,46,.45)}
.lk-label{display:block;font-weight:600;margin-bottom:10px}
.lk-select{width:100%;min-height:58px;padding:0 48px 0 16px;font:400 1.1rem var(--serif);color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2314202E' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 18px center;border:1.5px solid var(--ink);border-radius:2px;-webkit-appearance:none;appearance:none;cursor:pointer}
.lk-select:focus-visible{outline:3px solid var(--gold-lt);outline-offset:2px}
.lk-card{margin-top:22px}
.lk-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lk-grid>div{padding:16px 0}
.lk-grid>div+div{border-left:1px solid var(--line);padding-left:20px}
.lk-grid small{display:block;color:var(--muted);font-size:.95rem}
.lk-grid b{font:700 1.7rem/1.2 var(--display);color:var(--ink)}
.lk-grid div+div b{color:var(--gold)}
.lk-flag{margin:16px 0 6px;font-size:1.02rem}
.lk-flag strong{color:#8E3B2C}
.lk-src{font-size:.92rem;color:var(--muted);margin:0}
.lookup-cta p{font:italic 1.25rem/1.45 var(--serif);margin-bottom:22px}
@media(max-width:900px){.lookup-box{grid-template-columns:1fr;gap:28px;padding:26px 20px}.lk-grid b{font-size:1.35rem}}

/* ---------- exit popup, redesigned ---------- */
dialog.exit{border:1px solid rgba(201,162,74,.55);background:var(--night);color:var(--cream);padding:0;max-width:820px;width:calc(100% - 32px);text-align:left;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
dialog.exit[open]{animation:pop .35s cubic-bezier(.16,1,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}}
@media (prefers-reduced-motion:reduce){dialog.exit[open]{animation:none}}
dialog.exit::backdrop{background:rgba(10,14,18,.72);backdrop-filter:blur(3px)}
.exit-grid{display:grid;grid-template-columns:.8fr 1.2fr}
.exit-cover{background:radial-gradient(circle at 50% 40%,#233447 0%,#0E151C 75%);display:grid;place-items:center;padding:40px 30px}
.exit-cover img{width:78%;margin:0;transform:rotate(-4deg);box-shadow:0 30px 50px -18px rgba(0,0,0,.8)}
.exit-body{padding:44px 40px 34px}
.exit-kicker{font:italic 1.05rem var(--serif);color:var(--gold-lt);margin:0}
dialog.exit h3{font-size:2rem;color:var(--cream);margin:6px 0 18px}
dialog.exit .lk-label{color:#C9C2B3;font-weight:400;font-size:.98rem}
dialog.exit .lk-select{background-color:var(--cream)}
dialog.exit .lk-grid{border-color:#33404D}
dialog.exit .lk-grid>div+div{border-color:#33404D}
dialog.exit .lk-grid small{color:#9AA0A5}
dialog.exit .lk-grid b{color:var(--cream);font-size:1.45rem}
dialog.exit .lk-grid div+div b{color:var(--gold-lt)}
dialog.exit .lk-flag{color:#C9C2B3;font-size:.98rem;margin-bottom:22px}
dialog.exit .lk-flag strong{color:#E9B9A6}
dialog.exit .btn{width:100%}
dialog.exit .x{color:#9AA0A5;z-index:1}
dialog.exit .or{display:block;margin:14px auto 0;background:none;border:0;color:#9AA0A5;font:1rem var(--serif);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:8px}
@media(max-width:700px){.exit-grid{grid-template-columns:1fr}.exit-cover{display:none}.exit-body{padding:40px 22px 26px}}

/* ---------- phone buy bar ---------- */
.buybar{display:none}
@media(max-width:760px){
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--night);color:var(--cream);border-top:1px solid rgba(201,162,74,.5);transform:translateY(110%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .buybar.show{transform:none}
  .buybar span{font-size:.95rem;line-height:1.25}
  .buybar b{font:italic 700 1.4rem var(--display);color:var(--gold-lt);margin-right:6px}
  .buybar .btn{width:auto;flex:none}
  footer{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){.buybar{transition:none}}