.ng-root{
  --paper:#F7F1E3;
  --paper-deep:#EFE5CE;
  --ink:#3B3626;
  --ink-soft:#6B6450;
  --sage:#82835A;
  --sage-deep:#5C5D3C;
  --sage-light:#C9CBA6;
  --sage-pale:#EDEAD9;
  --rose:#C6968C;
  --line:#DFD3B7;
  --serif: 'Shippori Mincho', serif;
  --script: 'Cormorant Garamond', serif;
  --sans: 'Zen Kaku Gothic New', sans-serif;
}
.ng-root *{box-sizing:border-box;}
.ng-root{margin:0;padding:0;}
.ng-root{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
.ng-root img{max-width:100%; display:block;}
.ng-root a{ color:inherit; text-decoration:none; }

.ng-root .wrap{ max-width:820px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .ng-root .wrap{ padding:0 20px; } }
.ng-root .wrap-wide{ max-width:1080px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .ng-root .wrap-wide{ padding:0 20px; } }

.ng-root h1, .ng-root h2, .ng-root h3{ font-family:var(--serif); font-weight:600; margin:0; color:var(--ink); }

/* -------- site header (shared across column pages) -------- */
.ng-root .site-header{
  padding:28px 0;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.ng-root .site-header img{ height:68px; width:auto; margin:0 auto; }
.ng-root .site-header .back{
  display:block; margin-top:16px;
  font-family:var(--sans); font-size:22px; letter-spacing:.1em; color:var(--sage-deep);
  text-transform:uppercase;
}

/* -------- eyebrow / meta -------- */
.ng-root .eyebrow{
  font-family:var(--sans); font-size:11px; letter-spacing:.32em; color:var(--sage-deep);
  font-weight:500; display:flex; align-items:center; gap:10px; text-transform:uppercase;
}
.ng-root .eyebrow::before{ content:""; width:26px; height:1px; background:var(--sage-deep); display:inline-block; }
.ng-root .meta{ display:flex; gap:12px; align-items:center; font-size:11px; letter-spacing:.08em; color:var(--sage-deep); text-transform:uppercase; }
.ng-root .meta .dot{ width:3px;height:3px;border-radius:50%;background:var(--line); }

/* -------- back link -------- */
.ng-root .back-link{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.08em;
  color:var(--sage-deep); font-weight:500;
}

/* -------- media frame -------- */
.ng-root .media{
  position:relative; overflow:hidden;
  background:var(--sage-pale);
  border:1px solid var(--line);
  padding:8px;
}
.ng-root .media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* -------- filter navigator -------- */
.ng-root .col-nav{ display:flex; justify-content:center; gap:24px; flex-wrap:nowrap; overflow-x:auto; padding:0 4px 40px; }
.ng-root .nav-pill{
  font-family:var(--sans); font-size:19.5px; padding:10.5px 21px; border:1px solid var(--line);
  border-radius:100px; color:var(--ink-soft); background:var(--paper); cursor:pointer;
  white-space:nowrap; flex:0 0 auto;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ng-root .nav-pill.active{ background:var(--sage-deep); border-color:var(--sage-deep); color:#fff; }

/* -------- category sections (list page) -------- */
.ng-root .cat-section{ padding:44px 0; border-top:1px solid var(--line); }
.ng-root .cat-section:first-of-type{ border-top:none; }
.ng-root .cat-head{ display:flex; align-items:center; gap:20px; margin-bottom:8px; }
.ng-root .cat-head .cat-icon{
  width:80px; height:80px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--sage-deep);
  border:1px solid var(--line); flex:0 0 auto;
}
.ng-root .cat-head .cat-icon svg{ width:40px; height:40px; }
.ng-root .cat-head h2{ font-size:35px; }
.ng-root .cat-head .cat-sub{ font-family:var(--sans); font-size:10px; letter-spacing:.16em; color:var(--sage-deep); text-transform:uppercase; }

.ng-root .col-list-item{
  display:flex; align-items:center; gap:16px; padding:14px 0;
  border-top:1px solid var(--line); color:inherit; text-decoration:none;
}
.ng-root .cat-section .col-list-item:first-of-type{ border-top:none; }
.ng-root .col-thumb{ width:120px; height:120px; flex:0 0 auto; overflow:hidden; border:1px solid var(--line); background:var(--sage-pale); }
.ng-root .col-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ng-root .col-list-text h3{ font-size:25px; font-weight:600; margin-bottom:4px; }
.ng-root .col-list-text .meta{ font-size:10.5px; }

/* -------- list page -------- */
.ng-root .col-list-head{ text-align:center; padding:56px 0 40px; }
.ng-root .col-list-head h1{ font-size:clamp(34px,4.4vw,48px); margin-top:14px; }
.ng-root .col-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; padding-bottom:80px; }
@media (max-width:860px){ .ng-root .col-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .ng-root .col-grid{ grid-template-columns:1fr; } }
.ng-root .col-card .media{ aspect-ratio:4/3; margin-bottom:16px; }
.ng-root .col-card h3{ font-size:17px; line-height:1.5; margin-bottom:8px; }
.ng-root .col-card .excerpt{ font-size:13.5px; color:var(--ink-soft); }
.ng-root .col-card .readmore{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12px;
  letter-spacing:.08em; color:var(--sage-deep); font-weight:500;
}

/* -------- article page -------- */
.ng-root .art-head{ text-align:center; padding:56px 0 8px; }
.ng-root .art-head .meta{ justify-content:center; margin-bottom:14px; }
.ng-root .art-head h1{ font-size:clamp(28px,4vw,40px); }
.ng-root .art-hero{ max-width:960px; margin:36px auto; aspect-ratio:16/9; }
.ng-root .art-body{ max-width:680px; margin:0 auto; padding-bottom:90px; }
.ng-root .art-body p{ margin:0 0 18px; color:var(--ink-soft); font-size:15.5px; }
.ng-root .art-body .caption-quote{
  margin:32px 0; padding-left:18px; border-left:2px solid var(--sage-light);
  font-family:var(--script); font-style:italic; font-size:19px; color:var(--ink);
}
.ng-root .art-nav{ padding:36px 0 90px; border-top:1px solid var(--line); margin-top:20px; }
.ng-root .art-nav .back-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border:1px solid var(--line); border-radius:100px;
  font-size:13px; background:var(--paper);
  transition:background .15s ease, border-color .15s ease;
}
.ng-root .art-nav .back-link:hover{ background:var(--sage-pale); border-color:var(--sage-light); }
.ng-root .art-nav a[href^="../"]{ background:var(--sage-deep); border-color:var(--sage-deep); color:#fff; }
.ng-root .art-nav a[href^="../"]:hover{ background:var(--sage); }
.ng-root .art-nav .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }

/* -------- footer -------- */
.ng-root footer{ background:var(--ink); color:var(--paper); padding:44px 0; text-align:center; }
.ng-root footer img{ height:24px; margin:0 auto 14px; filter:brightness(0) invert(1); opacity:.9; }
.ng-root footer .foot-note{ font-size:11.5px; letter-spacing:.05em; color:rgba(245,241,231,.55); }