/* THE RECORD · shared storefront components. Needs record-tokens.css loaded first (tokens + the laws). */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{background:var(--ground);color:var(--text);font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;}
.rule{height:1px;background:var(--line);max-width:var(--maxw);margin:0 auto;}

/* type jobs */
.h-hook,.h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,13.2vw,68px);line-height:1.02;letter-spacing:-.012em;color:var(--text);}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,8.8vw,44px);line-height:1.04;letter-spacing:-.02em;color:var(--text);}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,6.4vw,30px);line-height:1.1;letter-spacing:-.01em;color:var(--text);}
.h-hook em,.h1 em,.h2 em,.h3 em{font-style:italic;}
em.red{color:var(--red);}
.kicker{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);}
.kicker.gold{color:var(--gold);}
.label{font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);}
.body{font-size:17px;line-height:1.55;color:var(--text-2);}
.body b,.body strong{color:var(--text);font-weight:600;}
.fine{font-size:12.5px;line-height:1.5;color:var(--text-3);}
.num{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;color:var(--text);}

/* the action (the red of its view) */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:400px;min-height:56px;margin:0 auto;
  padding:16px 26px;border:none;border-radius:var(--r-pill);background:var(--next);color:var(--on-next);
  font-family:var(--sans);font-weight:600;font-size:14.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;text-align:center;
  cursor:pointer;transition:transform .16s var(--ease),filter .16s var(--ease);}
.btn:hover{filter:brightness(1.06);}
.btn:active{transform:scale(.96);}
/* quiet action: paper on dark, ink on paper. Used for the sticky bar and any second action in a view */
.btn.quiet{background:var(--text);color:var(--ground);}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong);}

/* pills: signature, counter, BEFORE / AFTER */
.pill-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(20,19,18,.94);
  color:#F3EEE3;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;}

/* surfaces: no borders, the surface colour is the edge */
.card{background:var(--surface);border-radius:var(--r-card);padding:18px;}
.card.done{background:var(--surface-done);}

/* record line: a tell on the left, a serif fact on the right, over a hairline */
.record{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--line-strong);}
.record .fact{font-family:var(--serif);font-size:22px;line-height:1.1;color:var(--text);text-align:right;}

/* photos: one grade, full colour */
.ph{filter:saturate(.95) contrast(1.06) sepia(.06);}
.ph.after{filter:saturate(1.1) contrast(1.06) sepia(.06);}

/* tick mark in the text colour (never green) */
.tick{display:inline-flex;width:16px;height:16px;flex:none;}
.tick svg{width:16px;height:16px;fill:currentColor;}

/* nav + menu + footer shared by every storefront page */
.nav{position:sticky;top:0;z-index:30;background:var(--veil);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.nav .row{max-width:920px;margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand img{width:28px;height:28px;}
.brand b{font-family:var(--sans);font-weight:500;letter-spacing:.2em;font-size:12.5px;color:var(--text);text-transform:uppercase;}
.menu-btn{background:transparent;border:none;color:var(--text);width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.menu{position:fixed;top:68px;left:0;right:0;z-index:25;background:var(--veil-solid);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);max-height:0;overflow:hidden;transition:max-height .32s var(--ease);}
.menu.open{max-height:calc(100dvh - 68px);overflow-y:auto;}
.menu .inner{max-width:920px;margin:0 auto;padding:6px var(--pad) 22px;display:flex;flex-direction:column;}
.menu a,.menu button{padding:14px 2px;color:var(--text);text-decoration:none;font-family:var(--serif);font-size:24px;line-height:1.1;border:none;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;}
.menu button.theme{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);padding:18px 2px;border-bottom:none;}

.foot{text-align:center;padding:44px var(--pad) 120px;position:relative;}
.foot .fmark{width:34px;height:34px;margin:0 auto 12px;}
.foot .fb{font-family:var(--sans);font-weight:500;letter-spacing:.2em;font-size:12.5px;color:var(--text);text-transform:uppercase;}
.foot .line{font-family:var(--sans);font-weight:500;letter-spacing:.18em;font-size:10.5px;color:var(--text-2);text-transform:uppercase;margin-top:8px;}
.foot .fnav{margin-top:18px;}
.foot .fnav a{display:inline-block;color:var(--text-2);text-decoration:none;padding:13px 8px;white-space:nowrap;font-size:13px;}
.foot .meta{margin-top:16px;line-height:1.9;font-size:12px;color:var(--text-3);}
.foot .meta a{display:inline-block;color:var(--text-2);text-decoration:none;padding:12px 2px;}

/* sticky action bar: always the quiet button */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--veil-0),var(--veil-1) 34%);transform:translateY(120%);transition:transform .3s var(--ease);}
.sticky.on{transform:translateY(0);}
.sticky .btn{max-width:520px;box-shadow:var(--shadow-float);}

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