/*
 * Digital Detox — shared premium presentation layer.
 *
 * This file deliberately contains presentation only. It sits after the legacy
 * page CSS so the whole archive can share one visual language without rewriting
 * the content or rebuilding a hundred individual templates. The homepage and
 * three light decision hubs remain the reference; the Dark Side uses the same
 * spacing, type and components with dark colour tokens.
 */

@font-face{
  font-family:"Besom";
  src:url("fonts/Besom-extended.ttf") format("truetype");
  font-display:swap;
}

body.site-modern{
  --dd-ink:#17233b;
  --dd-muted:#5f6f87;
  --dd-blue:#3478e5;
  --dd-blue-dark:#245fac;
  --dd-yellow:#f1c528;
  --dd-yellow-deep:#8a6900;
  --dd-paper:#f8fafc;
  --dd-surface:#ffffff;
  --dd-soft:#f1f5f9;
  --dd-line:#e2e8f0;
  --dd-dark:#07142d;
  --dd-dark-panel:#0f2345;
  --dd-dark-line:#243c63;
  background:var(--dd-paper);
  color:var(--dd-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* These two reading experiences already have deliberate page-specific palettes. */
body.site-modern.manifesto-live{background:#071229;color:#e8edf7}
body.site-modern.philosophy-live{background:#e9eef5;color:#15223a}

body.site-modern:not(.manifesto-live):not(.philosophy-live):not(.quiz-page) h1,
body.site-modern:not(.manifesto-live):not(.philosophy-live):not(.quiz-page) h2,
body.site-modern:not(.manifesto-live):not(.philosophy-live):not(.quiz-page) h3,
body.site-modern:not(.manifesto-live):not(.philosophy-live):not(.quiz-page) h4{
  font-family:inherit;
  text-transform:none;
  letter-spacing:-.028em;
}

body.site-modern:not(.manifesto-live):not(.philosophy-live):not(.quiz-page) h1{
  font-weight:780;
  line-height:1.06;
  text-wrap:balance;
}

body.site-modern:not(.manifesto-live):not(.philosophy-live):not(.quiz-page) h2{
  font-weight:760;
  line-height:1.14;
  text-wrap:balance;
}

body.site-modern:not(.manifesto-live):not(.philosophy-live):not(.quiz-page) h3{
  font-weight:720;
  line-height:1.28;
}

body.site-modern .wrap{padding-right:28px;padding-left:28px}

/* Buttons use the homepage's quiet blue. Yellow is reserved for emphasis. */
body.site-modern:not(.manifesto-live):not(.philosophy-live) .btn,
body.site-modern:not(.manifesto-live):not(.philosophy-live) a.btn{
  min-height:52px;
  padding:14px 25px;
  border:1px solid var(--dd-blue);
  border-radius:999px;
  background:var(--dd-blue);
  box-shadow:0 9px 24px rgba(52,120,229,.20);
  color:#fff;
  font-family:inherit;
  font-size:.91rem;
  font-weight:720;
  letter-spacing:-.01em;
  line-height:1.25;
  text-transform:none;
}

body.site-modern:not(.manifesto-live):not(.philosophy-live) .btn:hover,
body.site-modern:not(.manifesto-live):not(.philosophy-live) a.btn:hover{
  border-color:var(--dd-blue-dark);
  background:var(--dd-blue-dark);
  box-shadow:0 12px 28px rgba(36,95,172,.24);
  transform:translateY(-1px);
}

body.site-modern:not(.manifesto-live):not(.philosophy-live) .btn.ghost,
body.site-modern:not(.manifesto-live):not(.philosophy-live) a.btn.ghost{
  border-color:#b7c8e2;
  background:#fff;
  box-shadow:none;
  color:var(--dd-blue-dark);
}

body.site-modern:not(.manifesto-live):not(.philosophy-live) .btn.ghost:hover,
body.site-modern:not(.manifesto-live):not(.philosophy-live) a.btn.ghost:hover{
  border-color:var(--dd-blue);
  background:#f5f8fd;
}

body.site-modern .eyebrow{
  color:var(--dd-yellow-deep);
  font-family:inherit;
  font-size:.73rem;
  font-weight:750;
  letter-spacing:.12em;
}

/* Legacy .band sections previously relied on the old dark body showing through. */
body.site-modern .band{
  background:var(--dd-dark);
  color:#fff;
}
body.site-modern .band h1,
body.site-modern .band h2,
body.site-modern .band h3,
body.site-modern .band strong{color:#fff}
body.site-modern .band p{color:#d3deed!important}

/* Existing full-bleed image heroes stay photographic, but use the new type. */
body.site-modern:not(.theme-dark):not(.home-minimal) .hero{
  min-height:430px;
  padding:78px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background-position:center!important;
  background-size:cover!important;
}

body.site-modern:not(.theme-dark):not(.home-minimal) .hero .inner{max-width:920px}

body.site-modern:not(.theme-dark):not(.home-minimal) .hero h1{
  max-width:15ch;
  margin:0 auto;
  color:#fff;
  font-size:clamp(2.8rem,6.4vw,5.2rem);
  letter-spacing:-.055em;
  line-height:1;
  text-align:center;
  text-shadow:0 2px 22px rgba(0,0,0,.22);
}

body.site-modern:not(.theme-dark):not(.home-minimal) .hero p,
body.site-modern:not(.theme-dark):not(.home-minimal) .hero .inner p{
  max-width:650px;
  margin:22px auto 0;
  color:#e8edf6;
  font-size:1.12rem;
  line-height:1.6;
  letter-spacing:0;
  text-align:center;
  text-transform:none;
}

body.site-modern:not(.theme-dark):not(.home-minimal) .hero .dash{
  width:44px;
  height:3px;
  margin:24px auto 0;
  border-radius:3px;
  background:var(--dd-yellow);
}

/* Article banners keep their photography but now read like the new site. */
body.site-modern .artbanner{
  min-height:440px;
  padding:92px 24px;
  display:flex;
  align-items:center;
  background-position:center!important;
  background-size:cover!important;
}

body.site-modern .artbanner .wrap{width:100%;max-width:930px}

body.site-modern .artbanner h1{
  max-width:18ch;
  margin:0 auto;
  color:#fff;
  font-size:clamp(2.65rem,6vw,4.65rem);
  font-weight:780;
  letter-spacing:-.052em!important;
  line-height:1.02;
  text-align:center;
  text-transform:none;
}

body.site-modern .artbanner .standfirst{
  max-width:690px;
  margin:24px auto 0;
  color:#e7edf7;
  font-family:inherit;
  font-size:clamp(1.05rem,2vw,1.28rem);
  font-style:normal;
  line-height:1.58;
  text-align:center;
}

body.site-modern .artbanner .meta{
  margin:0 auto 18px;
  color:#f5d863;
  font-family:inherit;
  font-size:.875rem;
  font-weight:750;
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
}

/* Supporting labels remain readable without competing with the page title. */
body.site-modern .stagecard .time{font-size:.9rem}
body.site-modern .minimalism-guide .personal-note .source-edit{font-size:.9rem}

/* Long-form pages: wider air, sentence-case hierarchy and gentler surfaces. */
body.site-modern .article{background:var(--dd-paper);color:var(--dd-ink)}
body.site-modern .article>.wrap{max-width:760px}
body.site-modern .article p{color:#43516a;font-size:1.12rem;line-height:1.82}
body.site-modern .article>.wrap>p:first-of-type,
body.site-modern .article .lead,
body.site-modern .article .lede{color:#2d3c56;font-size:1.23rem;line-height:1.72}
body.site-modern .article h2{
  margin-top:68px;
  color:var(--dd-ink);
  font-size:clamp(1.7rem,3vw,2.15rem);
  letter-spacing:-.035em;
}
body.site-modern .article h3{color:var(--dd-ink);letter-spacing:-.02em}
body.site-modern .article h2::before{width:76px;height:8px;background:transparent url('yellow-brush-stroke.svg') left center/100% 100% no-repeat}
body.site-modern .article img{border-radius:20px;box-shadow:0 18px 44px rgba(23,35,59,.13)}
body.site-modern .article .audiobox,
body.site-modern .article .sharebox,
body.site-modern .article .authorbox{
  border-color:var(--dd-line);
  border-radius:20px;
  box-shadow:0 12px 34px rgba(23,35,59,.07);
}

/* Generic hubs and legacy landing pages become light, readable catalogues. */
body.site-modern:not(.theme-dark) .secidx{
  padding:76px 0 94px;
  background:var(--dd-paper);
}

body.site-modern:not(.theme-dark) .secidx .wrap{max-width:1140px}

body.site-modern:not(.theme-dark) .secgrp{
  margin-bottom:32px;
  padding:42px;
  border:1px solid var(--dd-line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 38px rgba(23,35,59,.055);
}

body.site-modern:not(.theme-dark) .secgrp:nth-child(even){background:#f1f6fc}

body.site-modern:not(.theme-dark) .secgrp h3.gh,
body.site-modern:not(.theme-dark) .secidx .gh{
  margin:0 0 12px;
  padding:0;
  border:0;
  color:var(--dd-ink);
  font-size:clamp(1.65rem,3vw,2.35rem);
  letter-spacing:-.035em;
}

body.site-modern:not(.theme-dark) .secidx .gc{color:var(--dd-muted)}

body.site-modern:not(.theme-dark) .card,
body.site-modern:not(.theme-dark) .light .card{
  overflow:hidden;
  border:1px solid var(--dd-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 28px rgba(23,35,59,.07);
}

body.site-modern:not(.theme-dark) .card:hover,
body.site-modern:not(.theme-dark) .light .card:hover{
  border-color:#9db9df;
  box-shadow:0 16px 38px rgba(23,35,59,.12);
  transform:translateY(-3px);
}

body.site-modern:not(.theme-dark) .card .pad{padding:22px 22px 25px}
body.site-modern:not(.theme-dark) .card h3,
body.site-modern:not(.theme-dark) .light .card h3{
  color:var(--dd-ink);
  font-size:1.06rem;
  letter-spacing:-.018em;
  text-transform:none;
}
body.site-modern:not(.theme-dark) .card p,
body.site-modern:not(.theme-dark) .light .card p{color:var(--dd-muted);font-size:.95rem;line-height:1.62}
body.site-modern .ctag{
  border:0;
  padding:0;
  color:var(--dd-yellow-deep);
  font-size:.68rem;
  letter-spacing:.1em;
}

body.site-modern:not(.theme-dark) .secnext{
  margin-top:40px;
  padding-top:32px;
  border-color:var(--dd-line);
}
body.site-modern:not(.theme-dark) .secnext .lbl{color:var(--dd-muted);letter-spacing:.1em}
body.site-modern:not(.theme-dark) .secnext a{
  border:1px solid #b7c8e2;
  border-radius:999px;
  background:#fff;
  color:var(--dd-blue-dark);
  font-family:inherit;
  font-weight:700;
  letter-spacing:-.01em;
}

/* Light-page hero: editorial copy left, the existing image to the right. */
body.site-modern:not(.theme-dark):not(.section-light) .sechero{
  min-height:480px;
  padding:82px max(28px,calc((100vw - 1120px)/2));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  background-color:#fff!important;
  background-position:right center!important;
  background-repeat:no-repeat!important;
  background-size:48% 100%!important;
  text-align:left;
}

body.site-modern:not(.theme-dark):not(.section-light) .sechero h1{
  max-width:10.5ch;
  margin:0;
  color:var(--dd-ink);
  font-size:clamp(2.8rem,5.4vw,4.8rem);
  letter-spacing:-.052em;
  line-height:1.02;
  text-align:left;
  text-transform:none;
}

body.site-modern:not(.theme-dark):not(.section-light) .sechero p{
  max-width:40ch;
  margin:24px 0 0;
  color:var(--dd-muted);
  font-size:1.18rem;
  line-height:1.65;
  text-align:left;
}

/* The Dark Side uses the same system, with dark surfaces rather than old styling. */
body.site-modern.theme-dark{
  background:var(--dd-dark);
  color:#f6f8fc;
}

body.site-modern.theme-dark .sechero{
  min-height:480px;
  padding:92px 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background-position:center!important;
  background-size:cover!important;
  text-align:center;
}

body.site-modern.theme-dark .sechero h1{
  max-width:12ch;
  margin:0 auto;
  color:#fff;
  font-size:clamp(3rem,6.7vw,5.7rem);
  letter-spacing:-.055em;
  line-height:.98;
  text-transform:none;
}

body.site-modern.theme-dark .sechero p{
  max-width:650px;
  margin:25px auto 0;
  color:#cbd6e8;
  font-size:clamp(1.08rem,2vw,1.3rem);
  line-height:1.6;
}

body.site-modern.theme-dark .secidx{padding:76px 0 94px;background:var(--dd-dark)}
body.site-modern.theme-dark .secgrp{
  margin-bottom:32px;
  padding:42px;
  border:1px solid var(--dd-dark-line);
  border-radius:24px;
  background:rgba(15,35,69,.75);
}
body.site-modern.theme-dark .secgrp h3.gh{
  margin:0 0 15px;
  padding:0;
  border:0;
  color:#fff;
  font-size:clamp(1.7rem,3vw,2.35rem);
  letter-spacing:-.035em;
}
body.site-modern.theme-dark .secgrp .gc{color:#aebbd0}
body.site-modern.theme-dark .card{
  border:1px solid var(--dd-dark-line);
  border-radius:18px;
  background:var(--dd-dark-panel);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
body.site-modern.theme-dark .card:hover{border-color:#547ab0;box-shadow:0 18px 42px rgba(0,0,0,.26)}
body.site-modern.theme-dark .card .pad{padding:22px 22px 25px}
body.site-modern.theme-dark .card h3{color:#fff;font-size:1.06rem;letter-spacing:-.018em}
body.site-modern.theme-dark .card p{color:#aebbd0;font-size:.95rem;line-height:1.62}
body.site-modern.theme-dark .ctag{color:#f5d863}
body.site-modern.theme-dark .secnext{border-color:var(--dd-dark-line)}
body.site-modern.theme-dark .secnext a{
  border-color:#3c5b86;
  border-radius:999px;
  color:#dbe7f7;
  font-family:inherit;
  letter-spacing:-.01em;
}
body.site-modern.theme-dark .secnext a:hover{border-color:#79a3dc;color:#fff}
body.site-modern.theme-dark section:not(.light){background:var(--dd-dark)}
body.site-modern.theme-dark section:not(.light) h2,
body.site-modern.theme-dark section:not(.light) strong{color:#fff}
body.site-modern.theme-dark section:not(.light) p{color:#aebbd0}
body.site-modern.theme-dark .player{border-color:var(--dd-dark-line);border-radius:18px;background:var(--dd-dark-panel)}

@media(max-width:760px){
  body.site-modern .wrap{padding-right:21px;padding-left:21px}
  body.site-modern .artbanner{min-height:390px;padding:66px 20px}
  body.site-modern .artbanner h1{font-size:clamp(2.25rem,10vw,3.25rem)}
  body.site-modern .artbanner .standfirst{font-size:1.04rem}
  body.site-modern:not(.theme-dark):not(.home-minimal) .hero{
    min-height:350px;
    padding:62px 20px;
  }
  body.site-modern:not(.theme-dark):not(.home-minimal) .hero h1{
    font-size:clamp(2.45rem,12vw,3.7rem);
  }

  body.site-modern:not(.theme-dark):not(.section-light) .sechero{
    min-height:0;
    padding:64px 22px;
    background-image:none!important;
  }
  body.site-modern:not(.theme-dark):not(.section-light) .sechero h1{
    max-width:13ch;
    font-size:clamp(2.55rem,12vw,3.7rem);
  }
  body.site-modern:not(.theme-dark):not(.section-light) .sechero p{font-size:1.06rem}

  body.site-modern:not(.theme-dark) .secidx{padding:54px 0 72px}
  body.site-modern:not(.theme-dark) .secgrp,
  body.site-modern.theme-dark .secgrp{
    margin-right:0;
    margin-left:0;
    padding:27px 20px;
    border-radius:20px;
  }
  body.site-modern.theme-dark .sechero{min-height:390px;padding:68px 21px}
  body.site-modern.theme-dark .sechero h1{font-size:clamp(2.8rem,13vw,4.2rem)}
}

@media(prefers-reduced-motion:reduce){
  body.site-modern *,body.site-modern *::before,body.site-modern *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}
.parent-inline-photo img{width:100%;max-height:560px;object-fit:cover;object-position:center}