.subpage { background:var(--cream); }
.subpage .site-header { background:rgba(32,36,33,.96); color:#fff; border-bottom:1px solid rgba(255,255,255,.12); }
.subpage .site-nav a.is-current { color:#e2bd6d; }
.subpage .header-action b { font-size:16px; }

.sub-hero { position:relative; overflow:hidden; min-height:650px; background:#29332e; color:#fff; display:flex; align-items:flex-end; padding:150px 0 88px; }
.sub-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(22,28,25,.95),rgba(22,28,25,.43)); }
.sub-hero-inner { position:relative; z-index:2; }
.sub-hero .eyebrow { color:#dfb962; }
.sub-hero h1 { max-width:950px; margin:10px 0 24px; font-family:var(--serif); font-size:clamp(54px,7.2vw,96px); line-height:1.08; font-weight:500; letter-spacing:-.045em; }
.sub-hero h1 em { color:#e2c27c; font-style:normal; }
.sub-hero-inner > p:not(.eyebrow) { max-width:700px; font-size:17px; line-height:1.9; color:rgba(255,255,255,.72); }
.sub-hero-route { position:absolute; z-index:1; width:70vw; height:70vw; right:-22vw; bottom:-47vw; border:3px dashed rgba(224,185,98,.47); border-radius:50%; box-shadow:0 0 0 80px rgba(255,255,255,.02),0 0 0 160px rgba(255,255,255,.018); }
.dimension-key { display:flex; flex-wrap:wrap; gap:8px; margin-top:42px; }
.dimension-key span { padding:10px 14px; border:1px solid rgba(255,255,255,.22); font-size:12px; }
.dimension-key b { color:#e2bd6d; margin-right:8px; }

.library-section { padding:95px 0 120px; }
.library-layout { display:grid; grid-template-columns:300px 1fr; gap:55px; align-items:start; }
.filter-panel { position:sticky; top:105px; }
.filter-panel-head { position:relative; padding-bottom:22px; border-bottom:1px solid var(--line); }
.filter-panel-head h2 { margin:5px 0 0; font-family:var(--serif); font-size:34px; font-weight:500; }
.filter-panel-head button { position:absolute; right:0; bottom:27px; border:0; background:none; padding:0; color:var(--brick); cursor:pointer; font-size:11px; }
.library-search { display:block; margin:22px 0; }
.library-search span { display:block; margin-bottom:8px; font-size:11px; color:#74695d; }
.library-search input { width:100%; height:44px; border:1px solid rgba(47,42,37,.22); background:rgba(255,255,255,.35); padding:0 12px; color:var(--ink); outline:none; }
.library-search input:focus { border-color:var(--brick); box-shadow:0 0 0 2px rgba(182,83,51,.1); }
.filter-group { border:0; padding:20px 0; margin:0; border-top:1px solid var(--line); }
.filter-group.is-focused { margin:0 -12px; padding:20px 12px; background:rgba(182,83,51,.07); }
.filter-group legend { padding:0; font-family:var(--serif); font-size:17px; }
.filter-group legend span { color:var(--brick); margin-right:7px; font-family:var(--sans); font-size:9px; }
.filter-options { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.filter-options button { border:1px solid rgba(47,42,37,.17); background:transparent; padding:7px 9px; color:#71675d; cursor:pointer; font-size:11px; }
.filter-options button:hover,.filter-options button.is-active { background:var(--ink); border-color:var(--ink); color:#fff; }
.results-head { min-height:50px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); margin-bottom:26px; }
.results-head p { margin:0; font-family:var(--serif); font-size:20px; }
.results-head strong { color:var(--brick); font-size:30px; font-weight:500; }
.results-head > span { color:#786e63; font-size:11px; }
.project-list { display:grid; gap:18px; }
.project-item { display:grid; grid-template-columns:270px 1fr; min-height:310px; border:1px solid rgba(47,42,37,.16); background:rgba(255,255,255,.23); transition:transform .25s ease,box-shadow .25s ease; }
.project-item:hover { transform:translateY(-3px); box-shadow:0 18px 45px rgba(47,42,37,.09); }
.project-item.is-hidden { display:none; }
.project-cover { position:relative; overflow:hidden; padding:23px; display:flex; flex-direction:column; color:#fff; background:#42584f; }
.project-cover::before,.project-cover::after { content:""; position:absolute; width:190px; height:190px; border:1px solid rgba(255,255,255,.18); border-radius:50%; right:-70px; bottom:-80px; }
.project-cover::after { width:120px; height:120px; right:-35px; bottom:-40px; }
.project-cover > span { position:relative; z-index:1; font-size:9px; letter-spacing:.13em; opacity:.7; }
.project-cover strong { position:relative; z-index:1; margin:auto 0; font-family:var(--serif); font-size:36px; line-height:1.18; font-weight:500; }
.project-cover i { position:relative; z-index:1; align-self:flex-start; padding:6px 8px; background:#e3bc68; color:#28312d; font-style:normal; font-size:9px; }
.tone-sand .project-cover { background:#9b7850; }.tone-dark .project-cover { background:#263d38; }.tone-brick .project-cover { background:#8e4835; }.tone-gold .project-cover { background:#ae7b38; }.tone-earth .project-cover { background:#765b43; }.tone-teal .project-cover { background:#35645e; }.tone-river .project-cover { background:#527a77; }.tone-night .project-cover { background:#2f3540; }.tone-clay .project-cover { background:#a65f43; }
.project-body { padding:28px 30px; display:flex; flex-direction:column; }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; }
.project-tags span { padding:5px 7px; border:1px solid rgba(47,42,37,.15); color:#75685c; font-size:9px; }
.project-body h3 { margin:15px 0 8px; font-family:var(--serif); font-size:28px; font-weight:500; }
.project-body > p { margin:0; color:#6d6359; line-height:1.75; font-size:13px; }
.project-body dl { display:grid; grid-template-columns:repeat(3,1fr); margin:auto 0 0; padding-top:20px; }
.project-body dl div { padding-right:12px; }
.project-body dt { color:#8a7f72; font-size:9px; }
.project-body dd { margin:4px 0 0; font-size:11px; }
.project-status { align-self:flex-start; margin-top:18px; color:var(--brick); font-size:10px; letter-spacing:.06em; }
.empty-state { padding:80px 20px; text-align:center; border:1px dashed rgba(47,42,37,.25); }
.empty-state strong { font-family:var(--serif); font-size:28px; font-weight:500; }
.empty-state p { color:#786d61; }

.period-archive { padding:110px 0; background:#d7c69e; }
.period-intro { display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:end; margin-bottom:45px; }
.period-intro h2 { margin:7px 0 0; font-family:var(--serif); font-size:clamp(38px,4.5vw,60px); font-weight:500; }
.period-intro > p { color:#655b50; line-height:1.8; }
.period-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.period-grid button { min-height:210px; padding:26px; text-align:left; display:flex; flex-direction:column; border:1px solid rgba(47,42,37,.22); background:transparent; color:var(--ink); cursor:pointer; transition:.25s ease; }
.period-grid button:hover { transform:translateY(-4px); background:rgba(255,255,255,.26); }
.period-grid span { color:var(--brick); font-size:11px; letter-spacing:.12em; }
.period-grid strong { margin:auto 0 7px; font-family:var(--serif); font-size:24px; font-weight:500; }
.period-grid small { color:#6f6559; }

.guide-path { position:absolute; z-index:1; right:6vw; bottom:6vw; width:min(44vw,610px); height:210px; border-bottom:4px dotted rgba(224,185,98,.55); transform:rotate(-8deg); }
.guide-path i { position:absolute; bottom:-12px; width:24px; height:24px; border:5px solid #dfb962; background:#29332e; border-radius:50%; }
.guide-path i:nth-child(1){left:4%}.guide-path i:nth-child(2){left:38%;bottom:22px}.guide-path i:nth-child(3){left:69%;bottom:-2px}.guide-path i:nth-child(4){right:0;bottom:40px}
.hero-guide-actions { display:flex; gap:10px; margin-top:32px; }
.journey-section { padding:115px 0; background:#efe5cf; }
.journey-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:90px; }
.journey-title { position:sticky; top:120px; align-self:start; }
.journey-title h2,.station-guide-layout h2 { margin:8px 0 18px; font-family:var(--serif); font-size:clamp(38px,4vw,56px); line-height:1.2; font-weight:500; }
.journey-title > p:last-child,.station-guide-layout > div > p:last-child { color:#6e6459; line-height:1.8; }
.journey-steps { list-style:none; padding:0; margin:0; }
.journey-steps li { display:grid; grid-template-columns:58px 1fr auto; gap:18px; align-items:start; padding:34px 0; border-top:1px solid rgba(47,42,37,.2); }
.journey-steps li:last-child { border-bottom:1px solid rgba(47,42,37,.2); }
.journey-steps li > span { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:10px; }
.journey-steps small { color:var(--brick); font-size:8px; letter-spacing:.12em; }
.journey-steps h3 { margin:5px 0 7px; font-family:var(--serif); font-size:25px; font-weight:500; }
.journey-steps p { margin:0; color:#6b6258; line-height:1.7; font-size:13px; }
.journey-steps li > b { padding-top:24px; color:#8a7d6f; font-size:9px; font-weight:500; }
.two-ways-section { padding:110px 0; background:#d7c69e; }
.two-ways-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.two-ways-grid article { min-height:420px; padding:42px; border:1px solid rgba(47,42,37,.2); display:flex; flex-direction:column; }
.two-ways-grid article > span { color:var(--brick); font-size:10px; letter-spacing:.12em; }
.two-ways-grid h3 { margin:45px 0 8px; font-family:var(--serif); font-size:40px; font-weight:500; }
.two-ways-grid p { color:#695f54; }
.two-ways-grid ol { margin:18px 0; padding-left:20px; line-height:2; color:#574f47; }
.two-ways-grid a { margin-top:auto; color:var(--brick); font-size:12px; }
.station-guide-section { padding:115px 0; background:#f3e9d4; }
.station-guide-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }
.station-unlocks { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid rgba(47,42,37,.16); }
.station-unlocks article { min-height:230px; padding:28px; border-right:1px solid rgba(47,42,37,.16); border-bottom:1px solid rgba(47,42,37,.16); }
.station-unlocks article:nth-child(2n) { border-right:0; }.station-unlocks article:nth-child(n+3) { border-bottom:0; }
.station-unlocks span { color:var(--brick); font-size:10px; }
.station-unlocks h3 { margin:42px 0 7px; font-family:var(--serif); font-size:22px; font-weight:500; }
.station-unlocks p { margin:0; color:#6f665c; font-size:12px; line-height:1.7; }
.guide-cta { padding:110px 0; background:#2c342f; color:#fff; }
.guide-cta p { color:#dfb962; font-size:11px; letter-spacing:.12em; }
.guide-cta h2 { max-width:850px; margin:8px 0 35px; font-family:var(--serif); font-size:clamp(43px,5.5vw,72px); line-height:1.15; font-weight:500; }
.guide-cta > .wrap > div { display:flex; gap:10px; }

@media (max-width:980px){
  .library-layout,.journey-layout,.station-guide-layout { grid-template-columns:1fr; }
  .filter-panel,.journey-title { position:static; }
  .filter-panel { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
  .filter-panel-head,.library-search { grid-column:1/-1; }
  .project-item { grid-template-columns:220px 1fr; }
  .period-intro { grid-template-columns:1fr; gap:15px; }
}

@media (max-width:680px){
  .sub-hero { min-height:670px; padding:125px 0 65px; }
  .sub-hero h1 { font-size:48px; }
  .dimension-key { display:grid; grid-template-columns:repeat(2,1fr); }
  .library-section,.journey-section,.two-ways-section,.station-guide-section,.period-archive { padding:75px 0; }
  .library-layout { gap:38px; }
  .filter-panel { display:block; }
  .project-item { grid-template-columns:1fr; }
  .project-cover { min-height:245px; }
  .project-body { padding:24px 20px; }
  .project-body dl { grid-template-columns:1fr; gap:10px; margin-top:20px; }
  .results-head { flex-direction:column; gap:6px; }
  .period-grid,.two-ways-grid { grid-template-columns:1fr; }
  .journey-steps li { grid-template-columns:46px 1fr; }
  .journey-steps li > b { display:none; }
  .station-unlocks { grid-template-columns:1fr; }
  .station-unlocks article { border-right:0; border-bottom:1px solid rgba(47,42,37,.16)!important; }
  .station-unlocks article:last-child { border-bottom:0!important; }
  .hero-guide-actions,.guide-cta > .wrap > div { flex-direction:column; align-items:stretch; }
  .hero-guide-actions .button,.guide-cta .button { width:100%; }
  .two-ways-grid article { min-height:380px; padding:30px 24px; }
}