/*
Theme Name: WristFile
Theme URI: https://pdfapplewatch.com/
Author: Obzena LLC
Author URI: https://pdfapplewatch.com/
Description: Editorial theme for the WristFile Journal — brand white + #F22B25, mirroring the WristFile marketing site.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: wristfile
*/

/* ============================================================
   WristFile Blog theme — adapted from the design's Blog.html.
   Foundation tokens (type, radii, motion) come from tokens.css.
   ============================================================ */
:root{
  --brand:#F22B25; --brand-press:#C81E1A; --brand-tint:#FDEDEC;
  --ink:#15161A; --ink-2:#565A62; --ink-3:#8A8F98;
  --paper:#FFFFFF; --paper-2:#FAF9F8; --paper-3:#F4F2F0;
  --hair:rgba(21,22,26,0.08); --hair-soft:rgba(21,22,26,0.05);
  --container:1160px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-text); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:var(--lh-normal); }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--brand); color:#fff; }
.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding:0 32px; }
.display{ font-family:var(--font-display); font-weight:var(--fw-bold); line-height:1.05; letter-spacing:-0.025em; text-wrap:balance; }
.eyebrow{ font-size:13px; font-weight:var(--fw-semibold); letter-spacing:0.14em; text-transform:uppercase; color:var(--brand); }

/* App Store badge */
.appstore{ display:inline-flex; align-items:center; gap:11px; background:#000; color:#fff; border-radius:11px; padding:9px 14px; transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.appstore:hover{ transform:translateY(-1px); opacity:.9; }
.appstore svg{ width:21px; height:21px; flex:none; }
.appstore .as-txt{ display:flex; flex-direction:column; line-height:1; }
.appstore .as-sm{ font-size:10px; font-weight:500; opacity:.92; margin-bottom:3px; white-space:nowrap; }
.appstore .as-lg{ font-size:16px; font-weight:600; letter-spacing:-.01em; font-family:var(--font-display); white-space:nowrap; }

/* NAV */
header.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.82); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--hair-soft); }
.nav-inner{ display:flex; align-items:center; gap:32px; height:72px; }
.brand-lockup{ display:flex; align-items:center; gap:11px; }
.brand-lockup img{ width:34px; height:34px; border-radius:9px; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.brand-lockup .name{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:20px; letter-spacing:-.02em; }
nav.links{ display:flex; align-items:center; gap:30px; margin-left:auto; }
nav.links a{ font-size:15px; font-weight:var(--fw-medium); color:var(--ink-2); position:relative; padding:4px 0; transition:color var(--dur-fast); }
nav.links a:hover, nav.links a.active{ color:var(--ink); }
nav.links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--brand); border-radius:2px; transition:right var(--dur-base) var(--ease-out); }
nav.links a:hover::after, nav.links a.active::after{ right:0; }
.nav-cta{ margin-left:6px; }
.menu-btn{ display:none; }

/* BLOG HEADER */
.blog-head{ padding:72px 0 40px; border-bottom:1px solid var(--hair-soft); }
.blog-head .eyebrow{ margin-bottom:16px; }
.blog-head h1{ font-size:52px; margin-bottom:18px; }
.blog-head p{ color:var(--ink-2); font-size:20px; max-width:560px; line-height:1.5; text-wrap:pretty; }
.cats{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:24px 0 4px; }
.cat{ font-size:14px; font-weight:var(--fw-medium); color:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-pill); padding:8px 16px; cursor:pointer; transition:all var(--dur-fast); background:#fff; }
.cat:hover{ border-color:var(--brand); color:var(--brand); }
.cat.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* FEATURED */
.featured{ padding:48px 0 8px; }
.feature-card{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:44px; align-items:center; }
.feature-media{ border-radius:var(--r-3xl); aspect-ratio:4/3; position:relative; overflow:hidden; background:linear-gradient(150deg,#15161A,#2a2c31); display:flex; align-items:center; justify-content:center; }
.feature-media img.cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature-media .glow{ position:absolute; inset:0; background:radial-gradient(circle at 64% 38%, rgba(242,43,37,0.30), rgba(242,43,37,0) 58%); }
.feature-media .tag{ position:absolute; top:20px; left:20px; background:var(--brand); color:#fff; font-size:12px; font-weight:var(--fw-semibold); letter-spacing:.08em; text-transform:uppercase; padding:7px 13px; border-radius:var(--r-pill); z-index:2; }
.mini-watch{ width:150px; height:182px; background:linear-gradient(150deg,#3a3c40,#1d1e21 60%); border-radius:42px; padding:12px 11px; position:relative; z-index:1; }
.mini-watch .scr{ width:100%; height:100%; background:#000; border-radius:32px; display:flex; flex-direction:column; padding:12px 11px; }
.mini-watch .scr .t{ color:#fff; font-size:11px; font-weight:var(--fw-bold); margin-bottom:8px; }
.mini-watch .scr .ln{ height:6px; border-radius:3px; background:rgba(255,255,255,.16); margin-bottom:7px; }
.mini-watch .scr .ln.s{ width:62%; }
.mini-watch .scr .ln.r{ background:rgba(242,43,37,.7); width:44%; }
.feature-body .meta{ display:flex; align-items:center; gap:10px; color:var(--ink-3); font-size:13px; margin-bottom:16px; flex-wrap:wrap; }
.feature-body .meta .pill{ color:var(--brand); font-weight:var(--fw-semibold); letter-spacing:.06em; text-transform:uppercase; }
.feature-body .meta .d{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); }
.feature-body h2{ font-size:34px; margin-bottom:16px; }
.feature-body h2 a:hover{ color:var(--brand); }
.feature-body p{ color:var(--ink-2); font-size:17px; line-height:1.6; margin-bottom:22px; max-width:480px; text-wrap:pretty; }
.readmore{ display:inline-flex; align-items:center; gap:8px; font-weight:var(--fw-semibold); color:var(--brand); font-size:15px; }
.readmore svg{ width:17px; height:17px; transition:transform var(--dur-base) var(--ease-out); }
.readmore:hover svg{ transform:translateX(4px); }
.byline{ display:flex; align-items:center; gap:11px; margin-top:26px; }
.byline .av{ width:38px; height:38px; border-radius:50%; background:var(--brand-tint); color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:var(--fw-bold); font-size:14px; }
.byline .who b{ display:block; font-size:14px; }
.byline .who span{ font-size:12px; color:var(--ink-3); }

/* POST GRID */
.grid-sec{ padding:64px 0 96px; }
.grid-sec h3.section-title{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:28px; }
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.post{ display:flex; flex-direction:column; }
.post .thumb{ border-radius:var(--r-xl); aspect-ratio:3/2; overflow:hidden; position:relative; margin-bottom:18px; }
.post .thumb img.cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.post .thumb .g{ position:absolute; inset:0; }
.post .thumb .pill{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,.92); color:var(--ink); font-size:11px; font-weight:var(--fw-semibold); letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap; z-index:2; }
.post .meta{ color:var(--ink-3); font-size:13px; margin-bottom:9px; }
.post h4{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:20px; letter-spacing:-.01em; line-height:1.25; margin-bottom:10px; }
.post h4 a:hover{ color:var(--brand); }
.post p{ color:var(--ink-2); font-size:15px; line-height:1.55; text-wrap:pretty; }

/* thumbnail gradient variants */
.g-1{ background:linear-gradient(140deg,#F22B25,#9E1611); }
.g-2{ background:linear-gradient(140deg,#15161A,#34373d); }
.g-3{ background:linear-gradient(140deg,#FDEDEC,#F7C9C7); }
.g-4{ background:linear-gradient(140deg,#1d1e21,#3a2a2a); }
.g-5{ background:linear-gradient(140deg,#FAF9F8,#E9E5E1); }
.g-6{ background:linear-gradient(140deg,#C81E1A,#15161A); }
.thumb .mark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.thumb .mark svg{ width:46px; height:46px; opacity:.9; color:#fff; }
.thumb.light .mark svg{ color:var(--brand); }

/* SINGLE / PAGE */
.article-head{ padding:64px 0 32px; border-bottom:1px solid var(--hair-soft); }
.article-head .meta{ display:flex; align-items:center; gap:10px; color:var(--ink-3); font-size:13px; margin-bottom:18px; flex-wrap:wrap; }
.article-head .meta .pill{ color:var(--brand); font-weight:var(--fw-semibold); letter-spacing:.06em; text-transform:uppercase; }
.article-head .meta .d{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); }
.article-head h1{ font-size:46px; margin-bottom:18px; max-width:820px; }
.article-head .dek{ color:var(--ink-2); font-size:20px; max-width:680px; line-height:1.5; }
.article-hero{ margin:40px auto 0; max-width:var(--container); padding:0 32px; }
.article-hero img{ width:100%; border-radius:var(--r-3xl); aspect-ratio:16/9; object-fit:cover; }
.article-body{ max-width:720px; margin:48px auto 0; padding:0 32px 80px; }
.article-body > *{ margin-bottom:24px; }
.article-body h2{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:30px; letter-spacing:-.02em; margin:44px 0 4px; }
.article-body h3{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:23px; letter-spacing:-.01em; margin:32px 0 2px; }
.article-body p{ font-size:18px; line-height:1.7; color:#26282d; }
.article-body a{ color:var(--brand); text-decoration:underline; text-underline-offset:2px; }
.article-body ul, .article-body ol{ padding-left:24px; font-size:18px; line-height:1.7; color:#26282d; }
.article-body li{ margin-bottom:8px; }
.article-body blockquote{ border-left:3px solid var(--brand); padding:4px 0 4px 22px; color:var(--ink-2); font-size:20px; font-style:italic; }
.article-body img{ border-radius:var(--r-xl); }
.article-body code{ font-family:var(--font-mono); font-size:15px; background:var(--paper-3); padding:2px 6px; border-radius:6px; }
.article-body pre{ background:var(--ink); color:#e8e9ea; padding:20px; border-radius:var(--r-lg); overflow:auto; font-family:var(--font-mono); font-size:14px; }
.article-body pre code{ background:none; padding:0; }
.post-foot{ max-width:720px; margin:0 auto; padding:0 32px 64px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-weight:var(--fw-semibold); color:var(--brand); font-size:15px; }
.back-link svg{ width:17px; height:17px; }

/* pagination */
.pagination{ display:flex; gap:10px; justify-content:center; padding:8px 0 0; flex-wrap:wrap; }
.pagination .page-numbers{ font-size:15px; font-weight:var(--fw-medium); color:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-pill); padding:8px 16px; background:#fff; transition:all var(--dur-fast); }
.pagination .page-numbers:hover{ border-color:var(--brand); color:var(--brand); }
.pagination .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* CTA STRIP */
.cta-strip{ background:var(--paper-2); border-top:1px solid var(--hair-soft); border-bottom:1px solid var(--hair-soft); }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; padding:48px 0; flex-wrap:wrap; }
.cta-inner h3{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:28px; letter-spacing:-.02em; margin-bottom:8px; }
.cta-inner p{ color:var(--ink-2); font-size:16px; }

/* FOOTER */
footer.site{ padding:56px 0 48px; }
.foot-grid{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot-brand{ max-width:280px; }
.foot-brand .brand-lockup{ margin-bottom:14px; }
.foot-brand p{ color:var(--ink-3); font-size:14px; line-height:1.55; }
.foot-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.foot-col h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; font-weight:var(--fw-semibold); }
.foot-col a{ display:block; color:var(--ink-2); font-size:15px; margin-bottom:11px; transition:color var(--dur-fast); }
.foot-col a:hover{ color:var(--brand); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:26px; border-top:1px solid var(--hair-soft); }
.foot-bottom p{ color:var(--ink-3); font-size:13px; }

.empty{ padding:80px 0 96px; text-align:center; color:var(--ink-2); font-size:18px; }

@media (max-width:980px){
  .feature-card{ grid-template-columns:1fr; gap:28px; }
  .post-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .wrap{ padding:0 22px; }
  nav.links, .nav-cta{ display:none; }
  .menu-btn{ display:flex; margin-left:auto; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--hair); border-radius:11px; background:#fff; }
  .menu-btn svg{ width:22px; height:22px; }
  .blog-head h1{ font-size:38px; }
  .feature-body h2{ font-size:27px; }
  .article-head h1{ font-size:32px; }
  .post-grid{ grid-template-columns:1fr; }
}