/* Approved section 12 study: equal real-media frames, compact construction bridge,
   and a photographic confluence. Scoped to preserve the other chapters. */
#credentials { background:#e9e4d7; padding-block:48px; }
#credentials figure, #credentials h3 { margin:0; }
#credentials .credentials-header { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:30px; }
#credentials .section-kicker { margin:0 0 12px; color:#887349; font-size:14px; }
#credentials .section-kicker span { margin-right:16px; }
#credentials .section-title { margin:0; font-size:clamp(32px,3.8vw,54px); line-height:1.35; letter-spacing:0; }
#credentials .section-title em { color:#887349; }
#credentials .heading-aside { max-width:none; margin:0; padding-bottom:5px; color:#606257; font-size:16px; line-height:1.8; }
#credentials .record-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; align-items:start; }
#credentials .record-grid > article { min-width:0; }
#credentials .record-media { height:256px; background:#d4cdbb; overflow:hidden; }
#credentials .lecture img { display:block; width:100%; height:100%; object-fit:cover; object-position:41% 48%; }
#credentials .books { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px 18px; padding:15px 22px; background:linear-gradient(130deg,#ded8c8,#d4ccb9); }
#credentials .book { display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; }
#credentials .book img { display:block; max-width:100%; max-height:100%; width:auto; height:100%; object-fit:contain; box-shadow:2px 3px 6px #171b192a; }
#credentials .places { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:1fr; gap:3px; }
#credentials .place { position:relative; min-width:0; min-height:0; overflow:hidden; }
#credentials .place img { display:block; width:100%; height:100%; object-fit:cover; }
#credentials .place:nth-child(1) img { object-position:45% 50%; }
#credentials .place:nth-child(2) img { object-position:48% 50%; }
#credentials .place:last-child img { object-position:45% 50%; }
#credentials .place figcaption { position:absolute; bottom:0; width:100%; padding:22px 8px 10px; color:#fff; background:linear-gradient(transparent,#15201cd9); font-size:14px; line-height:1.8; text-align:center; }
#credentials .place-credit { display:block; margin-top:4px; font-size:14px; line-height:1.5; }
#credentials .record-copy { padding-top:17px; }
#credentials .record-title { display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
#credentials .credential-no { color:#887349; font-family:var(--sans); font-size:14px; font-variant-numeric:tabular-nums; }
#credentials .record-title h3 { font-size:27px; line-height:1.5; letter-spacing:0; }
#credentials .record-copy > p { min-height:3.6em; margin:0; color:#52594f; font-size:17px; line-height:1.8; text-wrap:pretty; }
#credentials .credential-detail { margin-top:12px; }
#credentials .credential-detail summary { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:7px 0; border-top:1px solid #88734955; list-style:none; color:#645630; cursor:pointer; font-size:16px; line-height:1.8; transition:color .14s ease; }
#credentials .credential-detail summary::-webkit-details-marker { display:none; }
#credentials .credential-detail summary::after { content:"＋"; flex:none; }
#credentials .credential-detail[open] > summary::after { content:"－"; }
#credentials .credential-detail summary:hover { color:#171b19; }
#credentials .credential-detail summary:focus-visible, #credentials a:focus-visible { outline:2px solid #887349; outline-offset:5px; }
#credentials .credential-detail summary:active { color:#171b19; }
#credentials .credential-detail-copy { padding:10px 0 6px; }
#credentials .credential-detail-copy p { margin:0 0 14px; color:#52594f; font-size:17px; line-height:1.85; text-wrap:pretty; }
#credentials .credential-detail-copy a { display:inline-block; min-height:44px; padding:8px 0; color:#645630; text-decoration:underline; text-underline-offset:5px; }
#credentials .credential-detail-copy strong { display:block; color:#887349; font:500 21px/1.8 var(--serif); }
#credentials .building-bridge { display:grid; grid-template-columns:236px minmax(0,1fr) auto; gap:30px; align-items:center; margin-top:30px; padding:22px 0; border-top:1px solid #88734955; border-bottom:1px solid #88734955; }
#credentials .building-bridge figure { height:154px; background:#d4cdbb; }
#credentials .building-bridge img { display:block; width:100%; height:100%; object-fit:contain; }
#credentials .building-label { color:#887349; font-size:14px; margin-bottom:3px; }
#credentials .building-bridge h3 { font-size:27px; line-height:1.5; margin-bottom:5px; letter-spacing:0; }
#credentials .building-bridge p { margin:0; color:#52594f; font-size:17px; line-height:1.8; text-wrap:pretty; }
#credentials .building-bridge > a { display:inline-block; min-height:44px; padding:10px 0; margin-right:4px; color:#645630; border-bottom:1px solid #88734988; white-space:nowrap; font-size:16px; line-height:1.8; transition:color .14s ease; }
#credentials .building-bridge > a:hover, #credentials .building-bridge > a:active { color:#171b19; }
#credentials .confluence { position:relative; min-height:400px; overflow:hidden; margin-top:36px; padding:38px 44px 36px; color:#f6f2e7; background:#14231d; isolation:isolate; }
#credentials .ceremony { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 49%; }
#credentials .confluence::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(12,28,21,.97) 0%,rgba(12,28,21,.89) 30%,rgba(12,28,21,.5) 58%,rgba(12,28,21,.12) 100%),linear-gradient(0deg,rgba(12,28,21,.45),transparent 60%); }
#credentials .lineage { display:flex; align-items:center; gap:16px; max-width:560px; margin-bottom:24px; color:#ded0a4; font-size:16px; line-height:1.8; }
#credentials .lineage i { height:1px; background:#ded0a4; opacity:.7; flex:1; }
#credentials .confluence h3 { font-size:clamp(42px,4.7vw,66px); line-height:1.35; letter-spacing:0; }
#credentials .confluence h3 span { display:block; }
#credentials .confluence h3 .wish { color:#ded0a4; }
#credentials .confluence p { max-width:600px; margin:22px 0 0; color:#f6f2e7; font-size:17px; line-height:1.9; text-wrap:pretty; }
#credentials .mission { display:inline-block; margin-top:22px; padding-bottom:4px; border-bottom:1px solid #ded0a477; color:#ded0a4; font:500 22px/1.8 var(--serif); }
#credentials .credential-lineage-detail { margin-top:18px; }
#credentials .credential-lineage-detail .credential-detail-copy { max-width:900px; }
@media (max-width:1100px) {
  #credentials .credentials-header { display:block; }
  #credentials .heading-aside { margin-top:14px; }
  #credentials .building-bridge { grid-template-columns:200px minmax(0,1fr); gap:20px; }
  #credentials .building-bridge > a { grid-column:2; justify-self:start; margin-top:-17px; }
  #credentials .building-bridge figure { grid-row:span 2; }
}
@media (max-width:900px) {
  #credentials .record-grid { gap:18px; }
  #credentials .record-media { height:218px; }
  #credentials .books { padding:13px; gap:12px 8px; }
  #credentials .record-title h3 { font-size:23px; }
  #credentials .confluence { padding:30px; }
}
@media (max-width:760px) {
  #credentials { padding-block:32px; }
  #credentials > .shell { width:calc(100% - 40px); }
  #credentials .section-title { font-size:34px; }
  #credentials .section-title em { display:block; }
  #credentials .record-grid { grid-template-columns:1fr; gap:25px; }
  #credentials .record-media { height:auto; aspect-ratio:16/10; }
  #credentials .books { padding:14px 26px; gap:12px 23px; }
  #credentials .place figcaption { padding:22px 5px 8px; }
  #credentials .record-title h3 { font-size:26px; }
  #credentials .record-copy > p { min-height:0; }
  #credentials .building-bridge { grid-template-columns:1fr; gap:15px; padding:20px 0; }
  #credentials .building-bridge figure { grid-row:auto; height:auto; aspect-ratio:800/522; }
  #credentials .building-bridge > a { grid-column:auto; margin-top:0; }
  #credentials .confluence { margin-top:28px; min-height:410px; padding:26px 22px; }
  #credentials .confluence h3 { font-size:clamp(32px,10vw,39px); }
  #credentials .confluence p { font-size:16px; }
  #credentials .ceremony { object-position:60% 50%; }
  #credentials .confluence::before { background:linear-gradient(90deg,#0c1c15e8,#0c1c1590),linear-gradient(0deg,#0c1c15bb,transparent); }
  #credentials .mission { font-size:21px; }
  #credentials .lineage { margin-bottom:26px; }
}