@layer components {
  .material-video-list { display:grid; gap:24px; }
  .material-video-card { overflow:hidden; }
  .material-video-heading { flex-wrap:wrap; gap:16px; }
  .material-video-heading h2 { margin-top:6px; }
  .material-video-player { display:block; width:100%; height:auto; aspect-ratio:16/9; min-height:200px; border:0; background:#101b24; }
  .material-video-note { margin:0; padding:16px 24px; color:var(--muted); font-size:.8125rem; }
  .project-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; }
  .material-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; flex-wrap:wrap; }
  .photo-grid, .plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  .photo-card, .plan-card { min-width:0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--white); color:var(--ink); text-align:left; transition:box-shadow .2s,border-color .2s; }
  .photo-card:hover, .plan-card:hover { border-color:#9bb48c; box-shadow:0 8px 22px #1d35490d; }
  .photo-frame { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--line); }
  .photo-frame img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .3s; }
  .photo-card:hover .photo-frame img { transform:scale(1.035); }
  .photo-expand { position:absolute; bottom:13px; right:13px; width:33px; height:33px; display:grid; place-items:center; color:#1d3549; background:#ffffffeb; border:1px solid #e3e9eb; border-radius:8px; }
  .photo-caption, .plan-caption { padding:17px 19px 19px; }
  .photo-caption h3, .plan-caption h3 { font-size:.9375rem; line-height:1.4; }
  .photo-caption > span, .plan-caption > span { display:block; margin-top:8px; color:var(--muted); font-size:.75rem; }
  .plan-caption p { margin-top:5px; font-size:.8125rem; }
  .plan-preview { position:relative; height:260px; background:#fff; padding:22px; border-bottom:1px solid var(--line); }
  .plan-preview img { display:block; width:100%; height:100%; object-fit:contain; }
  .plan-version { position:absolute; top:13px; left:13px; padding:3px 8px; background:#f3f6f5; border:1px solid #e3e9eb; border-radius:5px; color:#50635a; font-size:.6875rem; font-weight:600; }
  .book-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .book-card { display:flex; min-width:0; background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .book-cover { display:flex; align-items:center; width:36%; flex-shrink:0; padding:14px; background:#edf2ef; }
  .book-cover img { width:100%; height:auto; display:block; box-shadow:0 4px 12px #1d354914; }
  .book-body { flex:1; min-width:0; padding:22px; }
  .book-body .eyebrow { font-size:.6875rem; letter-spacing:.06em; }
  .book-body h3 { line-height:1.35; margin-top:9px; }
  .book-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; }
  .document-quick-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
  .text-action { display:inline-flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:600; min-height:38px; }
  .text-action:hover { text-decoration:underline; }
  .plans-section { margin-top:38px; }
  .material-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  .material-tabs button { border:1px solid var(--line); border-radius:7px; background:var(--white); color:var(--muted); padding:9px 15px; min-height:42px; font-size:.8125rem; }
  .material-tabs button[aria-pressed="true"] { background:var(--soft); color:var(--ink); border-color:#a8c197; font-weight:600; }
  .material-tabs button:hover { border-color:#8ba577; }
  .material-count, .material-footnote { font-size:.8125rem; color:var(--muted); margin-top:20px; }
  .material-footnote { padding-top:20px; border-top:1px solid var(--line); }
  .overview-materials { display:grid; grid-template-columns:1fr 1fr; min-height:360px; background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .overview-photo { position:relative; min-height:360px; }
  .overview-photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center 38%; }
  .overview-photo span { position:absolute; left:18px; bottom:16px; font-size:.6875rem; color:white; background:#1d3549cc; padding:4px 8px; border-radius:4px; }
  .overview-materials-content { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:34px; }
  .overview-materials-content h2 { margin-top:14px; font-size:1.6rem; line-height:1.25; }
  .overview-materials-content > p { font-size:.875rem; margin-top:13px; }
  .material-totals { display:flex; flex-wrap:wrap; gap:25px; margin:25px 0; color:var(--muted); font-size:.8125rem; }
  .material-totals strong { display:block; color:var(--ink); font-size:1.4rem; font-weight:500; }
  dialog.media-viewer { width:min(1200px,calc(100vw - 32px)); max-height:94dvh; }
  .media-viewer .dialog-head { padding:17px 22px; }
  .media-viewer .dialog-head h2 { font-size:1rem; }
  .media-viewer .dialog-body { padding:0; }
  .media-stage { height:min(61dvh,720px); overflow:auto; background:#e9eef0; display:flex; justify-content:center; align-items:center; }
  .media-stage img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
  .media-stage.is-zoomed { display:block; }
  .media-stage.is-zoomed img { width:1800px; min-width:1800px; height:auto; max-width:none; max-height:none; }
  .media-source { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 15px; padding:11px 22px; font-size:.75rem; color:var(--muted); }
  .media-viewer .dialog-footer { padding:14px 22px; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:13px; }
  .media-paging { display:flex; align-items:center; gap:13px; }
  .media-paging > span { font-size:.8125rem; color:var(--muted); white-space:nowrap; }
}
@layer responsive {
  @media(max-width:1180px) {
    .photo-grid, .plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .book-card { flex-direction:column; }
    .book-cover { width:100%; height:150px; justify-content:center; }
    .book-cover img { width:auto; max-width:100%; height:auto; max-height:100%; }
    .book-body { padding:20px; }
    .overview-materials-content { padding:27px; }
  }
  @media(max-width:600px) {
    .photo-grid, .plan-grid, .book-grid, .overview-materials { grid-template-columns:1fr; }
    .photo-grid, .plan-grid { gap:18px; }
    .book-card { flex-direction:row; }
    .book-cover { width:32%; height:auto; padding:8px; }
    .book-cover img { width:100%; }
    .book-body { padding:17px; }
    .plan-preview { height:300px; }
    .overview-photo { min-height:290px; }
    .overview-materials-content { padding:26px; }
    .material-tabs { gap:7px; }
    .material-tabs button { padding:9px 12px; }
    .media-stage { height:53dvh; }
    .media-viewer .dialog-head { padding:12px 15px; gap:10px; }
    .media-viewer .dialog-head h2 { font-size:.875rem; }
    .media-source { padding:10px 15px; }
    .media-viewer .dialog-footer { padding:12px 15px; }
    .media-paging { width:100%; justify-content:space-between; }
    .media-viewer .inline-actions { width:100%; gap:7px; }
    .media-viewer .inline-actions .btn { flex:1; font-size:.75rem; padding:7px 9px; }
  }
}
@layer theme {
  [data-theme="dark"] .book-cover { background:#203541; }
  [data-theme="dark"] .media-stage { background:#0e1a24; }
  [data-theme="dark"] .material-tabs button[aria-pressed="true"] { border-color:#597548; color:#c4dfb5; }
}