/* James Peters — Apple-flavoured layout
   Apple's modular tile architecture, James Peters palette & type */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lora:ital,wght@0,400;0,500;0,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
  --black:#0A0A0A; --ink:#161616; --white:#FFFFFF; --warm:#F5F4F0;
  --page:#ECEAE4;            /* Apple's #f5f5f7, warmed */
  --tile:#FBFAF7;            /* near-white tile */
  --red:#C41E1E; --red-hover:#A01818;
  --g900:#1C1C1C; --g700:#3A3A3A; --g500:#6B6566; --g400:#86817d; --g300:#B5B0AB; --g200:#D8D4CC; --g100:#E8E5DF;
  --display:'Bebas Neue','Arial Narrow',sans-serif;
  --editorial:'Playfair Display',Georgia,serif;
  --body:'Lora',Georgia,serif;
  --ui:'DM Sans',system-ui,-apple-system,sans-serif;
  --radius:20px;            /* Apple roundness — toggled to 0 via Tweak */
  --radius-sm:14px;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--page);font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--red);color:var(--white);}
::-webkit-scrollbar{height:0;width:0;}

/* ── section header: Apple two-tone "Title. Subtitle." ── */
.sec-head{font-family:var(--ui);font-weight:600;font-size:clamp(26px,3.4vw,40px);letter-spacing:-0.02em;line-height:1.1;}
.sec-head .dim{color:var(--g400);}
.wrap{max-width:1024px;margin:0 auto;padding:0 22px;}
.wrap-wide{max-width:1240px;margin:0 auto;padding:0 22px;}

/* ── tiles ── */
.tile{background:var(--tile);border-radius:var(--radius);overflow:hidden;position:relative;border:1px solid rgba(0,0,0,0.04);}
.tile-dark{background:var(--black);color:var(--warm);}
.tile-red{background:var(--red);color:var(--white);}

/* ── pill link (Apple blue → brand red) ── */
.plink{color:var(--red);font-weight:500;font-size:clamp(15px,1.5vw,18px);display:inline-flex;align-items:center;gap:5px;transition:opacity .2s;}
.plink:hover{opacity:.7;}
.plink .chev{font-size:0.9em;transition:transform .2s var(--ease);}
.plink:hover .chev{transform:translateX(2px);}

/* ── round CTA buttons (Apple capsule) ── */
.cta{font-family:var(--ui);font-weight:500;font-size:15px;border-radius:980px;padding:11px 22px;border:none;cursor:pointer;transition:background .2s, color .2s, border-color .2s;display:inline-flex;align-items:center;gap:7px;}
.cta-red{background:var(--red);color:var(--white);}
.cta-red:hover{background:var(--red-hover);}
.cta-ink{background:var(--ink);color:var(--warm);}
.cta-ink:hover{background:#000;}
.cta-ghost{background:transparent;color:var(--red);border:1.5px solid var(--red);}
.cta-ghost:hover{background:var(--red);color:var(--white);}
.cta-ghost-light{background:transparent;color:var(--warm);border:1.5px solid rgba(245,244,240,.4);}
.cta-ghost-light:hover{border-color:var(--warm);}

/* ── horizontal scroll rail (Apple "the latest") ── */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 22px 8px;scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.rail > *{scroll-snap-align:start;flex:0 0 auto;}
.rail-pad{max-width:1240px;margin:0 auto;}

/* ── reveal: static, always visible (entrance handled per-element, no global anim) ── */
.reveal{opacity:1;}

.pt-bw{filter:grayscale(1) contrast(1.05) brightness(.97);}

/* ── responsive ── */
@media (max-width:760px){
  .grid-2{grid-template-columns:1fr !important;}
  .grid-3{grid-template-columns:1fr !important;}
  .nav-mid{display:none !important;}
  .nav-burger{display:flex !important;}
}