@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════
   READING PAGES — loaded after style.css on text pages (work/, later
   about/ or a page per note). The homepage never loads this file.
   Colours, fonts and the nav come from style.css; this file only adds
   a calm, readable column in the same voice: mono for labels, serif
   for everything a person reads.
   ════════════════════════════════════════════════════════════════ */

body.page{background:var(--charcoal);}

.page-main{position:relative;z-index:10;max-width:720px;margin:0 auto;padding:168px 48px 120px;}

.nav-short{display:none;}

/* -- opening -- */
.page-head{animation:fadeUp 1.6s ease .2s both;}
.page-head .tag{margin-bottom:28px;}
.page-title{font-family:var(--serif);font-size:clamp(36px,5vw,58px);font-weight:300;line-height:1.08;
  letter-spacing:1px;color:var(--white);margin-bottom:40px;}
.lede{font-family:var(--serif);font-size:clamp(18px,2vw,23px);font-weight:300;line-height:1.55;
  color:var(--white);opacity:.88;margin-bottom:22px;}

/* -- sections: a hairline in gold, then a small orange label -- */
.page-section{margin-top:84px;padding-top:44px;border-top:1px solid rgba(200,164,94,0.14);}
.page-section .tag{margin-bottom:30px;}
.page .tag{font-size:11px;letter-spacing:3.5px;}
.offer dt,.work-kind{font-size:11px;}

.body{font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);font-weight:300;line-height:1.6;
  color:var(--white);opacity:.85;margin-bottom:18px;}
.aside{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.6vw,19px);font-weight:300;
  line-height:1.6;color:var(--gold);opacity:.82;margin-top:34px;}

/* -- what we help with: label in mono, text in serif -- */
.offers{display:flex;flex-direction:column;gap:26px;}
.offer{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:baseline;}
.offer dt{font-family:var(--mono);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold);opacity:.8;line-height:1.7;}
.offer dd{font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);font-weight:300;line-height:1.55;
  color:var(--white);opacity:.86;}

/* -- current work: each entry is one link -- */
.works{list-style:none;display:flex;flex-direction:column;gap:14px;}
.work{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:baseline;text-decoration:none;
  padding:18px 22px;margin:0 -22px;border:1px solid transparent;border-radius:3px;
  transition:border-color .4s ease,background .4s ease;}
.work:hover,.work:focus-visible{border-color:rgba(224,85,0,0.38);background:rgba(28,23,18,0.55);outline:none;}
.work-kind{font-family:var(--mono);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold);opacity:.8;line-height:1.7;transition:color .4s ease,opacity .4s ease;}
.work-kind::after{content:' →';opacity:.6;}
.work:hover .work-kind,.work:focus-visible .work-kind{color:var(--orange);opacity:1;}
.work-text{font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);font-weight:300;line-height:1.55;
  color:var(--white);opacity:.86;}

/* -- background: the same small gold dot the homepage lists use -- */
.points{list-style:none;display:flex;flex-direction:column;gap:14px;margin:8px 0 30px;}
.points li{font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);font-weight:300;line-height:1.55;
  color:var(--white);opacity:.85;position:relative;padding-left:22px;}
.points li::before{content:'';position:absolute;left:2px;top:.66em;width:5px;height:5px;border-radius:50%;
  background:var(--gold);opacity:.55;}

/* -- contact -- */
.page-contact .lede{margin-bottom:30px;}
.page-email{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:2px;color:var(--gold);
  text-decoration:none;padding:14px 22px;border:1px solid rgba(200,164,94,0.34);border-radius:2px;
  transition:border-color .4s ease,color .4s ease,box-shadow .4s ease;}
.page-email:hover,.page-email:focus-visible{border-color:rgba(224,85,0,0.6);color:var(--orange);
  box-shadow:0 0 26px rgba(224,85,0,0.12);outline:none;}

/* ════ NOTES — a dated page per note, and the /notes/ list ════ */
h2.tag{font-weight:400;}
.page-head time{white-space:nowrap;}
.inline{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(200,164,94,0.4);
  text-underline-offset:3px;transition:color .3s ease;}
.inline:hover,.inline:focus-visible{color:var(--orange);}

/* -- the figure: text stays in the column, the tree breaks out wider -- */
.figure{margin:64px 0 0;}
.figure-wide{width:min(1200px,calc(100vw - 96px));margin-left:50%;transform:translateX(-50%);}
.tree-box{position:relative;width:100%;overflow:hidden;border:1px solid rgba(200,164,94,0.14);border-radius:4px;
  background:var(--charcoal);}
.tree-box iframe{position:absolute;top:0;left:0;width:1200px;border:0;transform-origin:0 0;display:block;}
.tree-still-link{display:block;}
.tree-still{display:block;width:100%;height:auto;}
.tree-box.live .tree-still-link{display:none;}
.caption{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.6vw,19px);font-weight:300;
  line-height:1.6;color:var(--gold);opacity:.86;margin-top:22px;}
.figure-link{margin-top:14px;}
.figure-link a,.trees a{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);text-decoration:none;opacity:.85;transition:color .3s ease,opacity .3s ease;}
.figure-link a:hover,.figure-link a:focus-visible,.trees a:hover,.trees a:focus-visible{color:var(--orange);opacity:1;}
.trees a{text-transform:none;letter-spacing:.5px;font-size:13px;}
.trees-intro{margin-top:36px;}
.page-section .works{margin:8px 0 0;}

@media(max-width:820px){
  .nav-long{display:none;}
  .nav-short{display:inline;}
  .page-main{padding:124px 22px 88px;}
  .page-section{margin-top:64px;padding-top:36px;}
  .offer,.work{grid-template-columns:1fr;gap:8px;}
  .work{padding:16px 16px;margin:0 -16px;}
  .page-email{font-size:12px;letter-spacing:1.5px;padding:13px 16px;}
  .figure{margin-top:48px;}
  .figure-wide{width:auto;margin-left:0;transform:none;}
  .tree-box.live{height:auto!important;}
  .tree-box.live iframe{display:none;}
  .tree-box.live .tree-still-link{display:block;}
}
@media(prefers-reduced-motion:reduce){
  .page-head{animation-duration:0.01ms!important;}
  .work,.work-kind,.page-email{transition-duration:0.01ms!important;}
}