/* The Designer Glasses — design layer, Option D "Frame & Lens".
 *
 * The organising idea, which every rule below serves: a pair of glasses is TWO PURCHASES FUSED.
 * BRASS is always the frame (taste). STEEL is always the lens (physics). The colour carries the
 * split so the headings do not have to repeat it.
 *
 * Owner's two revisions to the approved option, 2026-08-03:
 *   1. the masthead is a LIGHT band, so the page is not dark end to end (footer matches, to bookend);
 *   2. the hero overlay starts much further down, so most of the photograph survives.
 */
:root{
  --bg:#0B0D10; --panel:#12151A; --raise:#181C22; --line:#252B33; --hair:#333B45;
  --ink:#F3F1ED; --mid:#B4B9C0; --muted:#7C848E;
  --band:#F4F1EA; --band-line:#DCD5C7; --band-ink:#17130F; --band-mid:#4C443A; --band-accent:#8A6A28;
  --brass:#C9A45C; --steel:#7FB0CC; --neg:#D97A66;
  --display:"Cormorant Garamond",Garamond,Georgia,serif;
  --ui:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.68 var(--ui);
  -webkit-font-smoothing:antialiased}
.dg-wrap{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}
h1,h2,h3{margin:0}
img{max-width:100%}

/* ============================================================ GENERATEPRESS INTEGRATION
 * GP supplies the header, nav and footer. The layer restyles them rather than replacing them, so
 * the mobile toggle, menu markup and accessibility behaviour all stay GP's.
 */
.site-content{padding:0}
.inside-article,.entry-content{max-width:none}

/* --- the masthead: a LIGHT band on a dark page (owner's revision 1) --- */
.site-header{background:var(--band);border-bottom:1px solid var(--band-line);padding:0}
.site-header .inside-header{max-width:1200px;margin:0 auto;padding:0 24px;min-height:78px;
  display:flex;align-items:center;gap:24px}
.site-header .site-branding{padding:0;flex:0 1 auto;min-width:0}
.site-header .main-title{margin:0;font:400 27px/1 var(--display);letter-spacing:.01em;white-space:nowrap}
.site-header .main-title a{color:var(--band-ink);text-decoration:none}
.site-header .site-description{margin:5px 0 0;font:400 9.5px/1.5 var(--ui);letter-spacing:.3em;
  text-transform:uppercase;color:var(--band-mid);white-space:normal;overflow-wrap:anywhere}
.main-navigation{background:transparent}
.main-navigation .inside-navigation{padding:0;max-width:none}
.main-navigation .main-nav ul li a{padding:0;line-height:1;font:500 12.5px/1 var(--ui);
  letter-spacing:.04em;color:var(--band-mid);background:transparent}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a{color:var(--band-accent);background:transparent}
.main-navigation .menu-toggle{color:var(--band-ink);background:transparent;font-family:var(--ui)}
@media(min-width:769px){
  /* justify-content:flex-end overflows to the LEFT when the content is wider than the box, which
     puts the first menu item underneath the wordmark. margin-left:auto does not. */
  .site-header #site-navigation{flex:1 1 auto;margin-left:auto;min-width:0}
  .main-navigation .main-nav>ul{display:flex;gap:17px;flex-wrap:wrap;justify-content:flex-end;
    padding:14px 0}
  .main-navigation .main-nav>ul>li{margin:0}
}
@media(max-width:768px){
  .site-header .inside-header{min-height:0;flex-wrap:wrap;padding:12px 20px}
  .site-header #site-navigation{order:2;flex:0 0 auto;margin:0;width:auto}
  .site-header .menu-toggle{display:block;padding:8px 4px;font:600 14px/1 var(--ui)}
  .site-header .main-nav>ul{display:none}
  .site-header #site-navigation.toggled{order:3;flex:1 1 100%;width:100%}
  .site-header #site-navigation.toggled .main-nav>ul{display:block;width:100%;padding:8px 0 4px}
  .site-header #site-navigation.toggled .main-nav>ul>li>a{display:block;padding:11px 0;
    font-size:15px;border-bottom:1px solid var(--band-line)}
}
/* --- the front page runs full bleed --- */
.home .entry-header,.home .page-header,.home .entry-title{display:none}
.home #page,.home #page.container,.home #page.grid-container{max-width:none;padding:0;margin:0}
.home .site-content,.home .content-area,.home .site-main{max-width:none;width:100%;padding:0;margin:0}
.home .site-content .inside-article,.home article.page{padding:0;margin:0;border:0;background:transparent}
.home #page,.home article.page,.home .inside-article,.home .entry-content{background:transparent}
.home .entry-content>p:empty{display:none}

/* ============================================================ HERO */
.dg-hero{position:relative;overflow:hidden;background:#07090B;display:flex;align-items:flex-end;
  min-height:clamp(480px,58vw,760px)}
.dg-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 52%;z-index:0}
/* margin-top RESERVES photograph. A band sized only by its own content grows until the picture is
   gone — that has happened on two sibling builds. Owner's revision 2 raised this to 390px. */
.dg-hero .band{position:relative;z-index:2;width:100%;margin-top:390px;padding-top:104px;
  background:linear-gradient(180deg,rgba(7,9,11,0) 0%,rgba(7,9,11,.26) 15%,
    rgba(7,9,11,.84) 44%,rgba(7,9,11,.97) 100%)}
.dg-hero .dg-wrap{padding-bottom:36px}
.dg-hero .kick{margin:0 0 16px;font:500 10.5px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase}
.dg-hero .kick i{font-style:normal;color:var(--brass)}
.dg-hero .kick u{text-decoration:none;color:var(--muted);padding:0 9px}
.dg-hero .kick s{text-decoration:none;color:var(--steel)}
.dg-hero h1{font:400 clamp(31px,4.9vw,58px)/1.08 var(--display);color:#FFFDF8;max-width:18ch}
.dg-hero .sf{margin:17px 0 0;max-width:62ch;font-size:17.5px;line-height:1.6;color:#CFD4DA}
@media(max-width:768px){.dg-hero .band{margin-top:230px;padding-top:70px}}
.dg-credit{margin:0;padding:9px 0 0;font:400 11.5px/1.4 var(--ui);color:#4A525C}

/* ============================================================ SECTION FURNITURE */
.dg-sec{padding:60px 0}
.dg-k{font:500 10.5px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  margin:0 0 13px}
.dg-t{font:400 clamp(27px,3.5vw,41px)/1.13 var(--display);color:#FFFDF8}
.dg-l{margin:14px 0 0;max-width:70ch;color:var(--mid);font-size:17px}

/* ---- THE SPINE: the signature. Two halves, two colours, one rule down the middle. ---- */
.spine{display:grid;grid-template-columns:1fr 1px 1fr;margin-top:40px;background:var(--panel);
  border:1px solid var(--line)}
.spine .rule{background:var(--line)}
.half{padding:clamp(24px,2.6vw,34px)}
.half>.hh{display:flex;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:2px solid}
.half .lab{font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.half h3{font:400 clamp(24px,2.8vw,33px)/1 var(--display)}
.half>p{margin:16px 0 0;font-size:15.5px;line-height:1.62;color:var(--mid)}
.half.f .hh{border-color:var(--brass)} .half.f .lab{color:var(--brass)} .half.f h3{color:var(--brass)}
.half.n .hh{border-color:var(--steel)} .half.n .lab{color:var(--steel)} .half.n h3{color:var(--steel)}
.half .rows{list-style:none;margin:22px 0 0;padding:0}
.half .rows li{border-top:1px solid var(--line)}
.half .rows a{display:block;padding:15px 0;text-decoration:none}
.half .rows b{display:block;font:600 15.5px/1.3 var(--ui)}
.half .rows span{display:block;margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.half.f .rows b{color:#E8D6AE} .half.n .rows b{color:#C2DCEB}
.half .rows a:hover b{color:#fff}
@media(max-width:840px){.spine{grid-template-columns:1fr}.spine .rule{height:1px}}
/* the seam — where the money hides */
.seam{background:var(--raise);border:1px solid var(--line);border-top:0;padding:clamp(24px,2.6vw,34px)}
.seam h3{font:400 clamp(22px,2.5vw,29px)/1.2 var(--display);color:#FFFDF8}
.seam p{margin:14px 0 0;max-width:78ch;font-size:16px;line-height:1.66;color:var(--mid)}
.seam .bar{display:flex;margin-top:24px;height:44px;border:1px solid var(--hair);overflow:hidden}
.seam .bar div{display:flex;align-items:center;justify-content:center;font:500 11px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:#0B0D10}
.seam .bar .bf{background:var(--brass);flex:1 1 62%}
.seam .bar .bn{background:var(--steel);flex:1 1 38%}
.seam .barnote{margin:12px 0 0;font-size:13.5px;color:var(--muted)}

/* ---- the repeated unit: claim / what it tells you / what it does NOT ---- */
.units{display:grid;gap:1px;margin-top:36px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(3,1fr)}
.unit{background:var(--panel);padding:22px 22px 24px;border-top:3px solid var(--steel)}
.unit .cl{font:500 15px/1.3 var(--mono);color:var(--steel)}
.unit .a{display:block;margin-top:14px;font-size:15px;line-height:1.55;color:var(--mid)}
.unit .no{display:block;margin-top:14px;padding-top:14px;border-top:1px dashed var(--hair);
  font-size:15px;line-height:1.55;color:var(--neg)}
.unit .no i{display:block;font-style:normal;font:500 9.5px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--neg);margin-bottom:7px;opacity:.85}
@media(max-width:960px){.units{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.units{grid-template-columns:1fr}}

/* ---- the two honesty lines ---- */
.hon{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:36px;background:var(--line);
  border:1px solid var(--line)}
.hon>div{background:var(--panel);padding:26px 24px 28px}
.hon q{display:block;font:400 clamp(20px,2.2vw,26px)/1.28 var(--display);quotes:none;color:#FFFDF8}
.hon p{margin:13px 0 0;font-size:15.5px;color:var(--mid);line-height:1.6}
@media(max-width:820px){.hon{grid-template-columns:1fr}}

/* ---- latest: the dot says which half of the purchase the article is about ---- */
.reads{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
.reads li{border-bottom:1px solid var(--line)}
.reads a{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;
  padding:18px 2px;text-decoration:none;color:var(--ink)}
.reads a:hover b{color:var(--brass)}
.reads .dot{width:7px;height:7px;border-radius:50%;align-self:center;flex:none}
.reads b{font:400 20px/1.34 var(--display);font-weight:400;color:var(--ink)}
.reads em{font-style:normal;font:500 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
@media(max-width:640px){.reads a{grid-template-columns:auto 1fr;gap:12px}.reads em{display:none}}

/* ---- categories ---- */
.cg{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:36px;background:var(--line);
  border:1px solid var(--line)}
.cg a{background:var(--panel);padding:22px 20px;text-decoration:none;color:inherit;
  border-top:2px solid transparent}
.cg a:hover{background:var(--raise);border-top-color:var(--brass)}
.cg b{display:block;font:400 20px/1.2 var(--display);color:#FFFDF8}
.cg span{display:block;margin-top:7px;font-size:14px;line-height:1.5;color:var(--muted)}
@media(max-width:1000px){.cg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cg{grid-template-columns:1fr}}

/* ---- where this site stops ---- */
.dg-stop{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:56px 0}
.dg-stop h2{font:400 clamp(25px,3.1vw,34px)/1.16 var(--display);color:#FFFDF8}
.dg-stop>.dg-wrap>p{margin:15px 0 0;max-width:70ch;color:var(--mid);font-size:17px}
.dg-stop .sl{list-style:none;margin:32px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.dg-stop .sl li{background:var(--bg);padding:21px 21px 23px;border-left:3px solid var(--neg)}
.dg-stop .sl b{display:block;font:600 16px/1.3 var(--ui);color:#FFFDF8}
.dg-stop .sl span{display:block;margin-top:8px;font-size:14.5px;line-height:1.56;color:var(--muted)}
@media(max-width:760px){.dg-stop .sl{grid-template-columns:1fr}}

/* ---- ads ---- */
.adzone{padding:36px 0;background:var(--bg)}

/* ============================================================ ARTICLES + ARCHIVES */
body.single .inside-article,body.page:not(.home) .inside-article{max-width:790px;margin:0 auto;
  padding:40px 0 48px;background:transparent;border:0}
body.single .entry-title,body.page:not(.home) .entry-title{
  font:400 clamp(29px,4.2vw,45px)/1.12 var(--display);color:#FFFDF8}
.entry-meta,.entry-meta a{color:var(--muted);font:500 10.5px/1.6 var(--ui);letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none}
.entry-content{font:400 17px/1.72 var(--ui);color:var(--mid)}
.entry-content p{margin:0 0 17px}
.entry-content h2{font:400 clamp(22px,2.6vw,28px)/1.2 var(--display);color:#FFFDF8;margin:34px 0 12px}
.entry-content h3{font:600 18px/1.3 var(--ui);color:var(--ink);margin:26px 0 10px}
.entry-content ul,.entry-content ol{margin:0 0 18px;padding-left:22px}
.entry-content li{margin:0 0 9px}
.entry-content img{height:auto;max-width:100%}
.entry-content figure{margin:28px 0}
.entry-content figure img{border:1px solid var(--line)}
.entry-content figcaption{margin-top:9px;font:400 12.5px/1.5 var(--ui);color:var(--muted);text-align:left}
.entry-content blockquote{margin:26px 0;padding:16px 20px;border:0;border-left:3px solid var(--steel);
  background:var(--panel);color:var(--ink)}
.entry-content blockquote p:last-child{margin:0}
.entry-content table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15.5px}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.entry-content th{background:var(--panel);font-weight:600;color:var(--ink)}
.entry-content .wp-block-table,.entry-content pre{overflow-x:auto;max-width:100%}
.archive .inside-article,.blog .inside-article{background:var(--panel);border:1px solid var(--line);
  padding:24px;margin:0 0 18px}
.archive .entry-title a,.blog .entry-title a{color:#FFFDF8;text-decoration:none;
  font:400 24px/1.25 var(--display)}
.page-header,.archive .page-title{color:#FFFDF8}

/* --- The front page's shortcode output lives INSIDE .entry-content, so a blanket link-underline
   rule reaches every tile, row and card in the design layer. Scope it to prose only. --- */
.entry-content a{color:var(--brass);text-decoration:none}
.entry-content p > a,
.entry-content li > a,
.entry-content blockquote a{text-decoration:underline;text-underline-offset:2px}
.dg-hero a,.dg-sec a,.dg-stop a,.spine a,.seam a,.units a,.hon a,.cg a,.reads a,
.entry-content .reads li > a,.entry-content .half .rows li > a{text-decoration:none}

/* --- footer: the same light band as the masthead, so the page is bookended rather than merely
   brightened at the top (owner's revision 1) --- */
.site-footer,.site-info{background:var(--band);border-top:1px solid var(--band-line);
  color:var(--band-mid)}
.site-info{max-width:1200px;margin:0 auto;padding:26px 24px 30px;font:400 14.5px/1.6 var(--ui)}
.site-info a{color:var(--band-mid)}
.site-info a:hover{color:var(--band-accent)}

/* --- image credits under sourced photography (a licence condition, not a nicety) --- */
.entry-content .dg-credit-line{margin-top:26px;padding-top:12px;border-top:1px solid var(--line);
  font:400 12px/1.5 var(--ui);color:var(--muted)}

/* ---- footer band content (see the generate_copyright filter in sc-dg-layer.php) ---- */
.site-info .dg-foot-links{display:block;font-size:13.5px}
.site-info .dg-foot-links a{color:var(--band-mid);text-decoration:none}
.site-info .dg-foot-links a:hover{color:var(--band-accent);text-decoration:underline}
.site-info .dg-foot-links i{font-style:normal;color:var(--band-line);padding:0 4px}
.site-info .dg-foot-copy{display:block;margin-top:9px;font-size:12.5px;color:#6E665A}