/* Flagship series layout; global design tokens and site chrome remain shared. */
[aria-current="page"] { color:var(--accent); }
#primary-nav [aria-current="page"] { text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1px; }
.trilogy-hero { display:grid; grid-template-columns:1fr 1.1fr; gap:6%; align-items:center; padding-block:58px 62px; border-bottom:1px solid var(--line); }
.trilogy-hero h1 { font-size:clamp(46px,4.8vw,72px); margin:22px 0 26px; }
.trilogy-lead { font:400 clamp(23px,2.2vw,30px)/1.4 var(--display); max-width:500px; }
.trilogy-introduction { color:var(--muted); font-size:14px; max-width:470px; margin:23px 0 28px; }
.trilogy-hero-art { min-width:0; }
.trilogy-composition { position:relative; width:100%; max-width:600px; height:410px; margin:auto; background:radial-gradient(ellipse at 50% 65%,#9d65351d,transparent 72%); }
.trilogy-composition img { position:absolute; object-fit:contain; box-shadow:0 18px 28px #0007; }
.trilogy-cover-left { left:1%; top:62px; width:32%; transform:rotate(-5deg); }
.trilogy-cover-right { right:1%; top:62px; width:32%; transform:rotate(5deg); }
.trilogy-cover-main { left:31%; top:22px; width:38%; z-index:1; }
.trilogy-art-caption { margin-top:15px; display:flex; justify-content:center; gap:15px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.trilogy-art-caption span { color:var(--accent); }
.reading-stories { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; margin:0; padding:0; }
.reading-stories>li { border-top:1px solid var(--line); padding-top:20px; scroll-margin-top:110px; }
.reading-index { display:flex; align-items:center; gap:16px; color:var(--accent); font:400 24px var(--display); margin-bottom:22px; }
.reading-index span { color:var(--muted); font:500 9px var(--ui); text-transform:uppercase; letter-spacing:.16em; }
.reading-story { display:grid; grid-template-columns:150px minmax(0,1fr); gap:22px; align-items:start; }
.reading-story img { width:150px; aspect-ratio:5/8; object-fit:contain; box-shadow:0 12px 20px #0004; }
.reading-story h3 { font-size:27px; margin:10px 0 18px; }
.reading-story p { color:var(--muted); font-size:13px; }
.future-book { display:block; color:var(--muted); font-size:11px; margin-top:24px; }
.future-book small { display:block; font-size:9px; margin-top:5px; }
.progression { background:#1a1918; border-block:1px solid var(--line); }
.progression-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; margin:0; padding:0; }
.progression-steps li { border-top:1px solid #c7ae8455; padding-top:26px; }
.progression-steps h3 { font-size:30px; margin:15px 0 20px; }
.progression-steps li>p:last-child { color:var(--muted); font-size:14px; max-width:360px; }
.why-here { display:grid; grid-template-columns:1fr 1fr; gap:8%; border-bottom:1px solid var(--line); }
.why-here h2 { margin-top:18px; }
.why-statement { font:400 27px/1.45 var(--display); }
.why-copy { color:var(--muted); font-size:14px; margin-top:24px; }
.dynamics { border-bottom:1px solid var(--line); }
.character-pair { display:grid; grid-template-columns:1fr 1fr; gap:8%; margin-top:40px; }
.character-pair-four { row-gap:32px; }
.character-pair article { border-top:1px solid var(--line); padding-top:28px; }
.character-pair h3 { font-size:44px; margin:15px 0 20px; }
.character-pair article>p:last-child { max-width:450px; color:var(--muted); font-size:15px; }
.trilogy-statement { text-align:center; padding-block:96px; border-bottom:1px solid var(--line); }
.trilogy-statement h2 { font-size:clamp(34px,4.2vw,60px); line-height:1.16; margin-top:26px; }
.trilogy-start { display:flex; justify-content:center; align-items:center; gap:60px; }
.trilogy-start>img { width:160px; aspect-ratio:5/8; object-fit:contain; box-shadow:0 14px 24px #0006; }
.trilogy-start h2 { margin:16px 0 20px; }
.trilogy-start>div>p:not(.eyebrow):not(.start-destination) { color:var(--muted); font-size:14px; }
.start-destination { font-size:14px; color:var(--accent); margin-top:24px; }
.start-destination small { display:block; color:var(--muted); font-size:10px; margin-top:7px; }
.trilogy-start .text-link { margin-top:17px; }
@media(max-width:1100px) {
  .trilogy-hero { gap:4%; }
  .trilogy-composition { height:330px; }
  .trilogy-cover-left,.trilogy-cover-right { top:55px; }
  .trilogy-cover-main { top:20px; }
  .reading-story { grid-template-columns:110px minmax(0,1fr); gap:18px; }
  .reading-story img { width:110px; }
  .reading-story h3 { font-size:24px; }
  .reading-stories { gap:24px; }
}
@media(max-width:1023px) {
  .reading-stories { grid-template-columns:1fr; gap:28px; }
  .reading-story { grid-template-columns:110px minmax(0,1fr); gap:28px; max-width:600px; }
  .reading-story h3 { font-size:30px; }
  .progression-steps { gap:26px; }
  .progression-steps h3 { font-size:27px; }
}
@media(max-width:767px) {
  .trilogy-hero { grid-template-columns:1fr; gap:32px; padding-block:42px 36px; }
  .trilogy-hero h1 { font-size:clamp(43px,8.5vw,58px); }
  .trilogy-lead { font-size:25px; }
  .trilogy-introduction { font-size:13px; }
  .trilogy-hero-art { width:min(100%,450px); margin:auto; }
  .trilogy-composition { height:auto; aspect-ratio:1.22; }
  .trilogy-cover-left,.trilogy-cover-right { top:35px; }
  .trilogy-cover-main { top:8px; }
  .trilogy-art-caption { font-size:7px; gap:10px; }
  .reading-story { gap:24px; }
  .reading-story h3 { font-size:28px; }
  .progression-steps { grid-template-columns:1fr; gap:30px; }
  .progression-steps h3 { font-size:30px; }
  .why-here { grid-template-columns:1fr; gap:28px; }
  .why-statement { font-size:25px; }
  .character-pair { grid-template-columns:1fr; gap:32px; margin-top:30px; }
  .character-pair h3 { font-size:40px; }
  .trilogy-statement { padding-block:72px; }
  .trilogy-statement h2 { font-size:36px; }
  .trilogy-start { justify-content:start; align-items:start; gap:26px; }
  .trilogy-start>img { width:110px; flex-shrink:0; }
  .trilogy-start h2 { font-size:30px; }
}
@media(max-width:374px) {
  .trilogy-hero h1 { font-size:40px; }
  .trilogy-lead { font-size:23px; }
  .trilogy-art-caption { font-size:6px; gap:8px; }
  .reading-story { grid-template-columns:82px minmax(0,1fr); gap:20px; }
  .reading-story img { width:82px; }
  .reading-story h3 { font-size:25px; }
  .reading-story p { font-size:12px; }
  .trilogy-statement h2 { font-size:30px; }
  .trilogy-start { gap:20px; }
  .trilogy-start>img { width:82px; }
  .trilogy-start h2 { font-size:28px; }
}