.coc { font-size:.97rem; line-height:1.65; color:#2A2F3A; }
.coc-cover { text-align:center; padding:8px 0 18px; border-bottom:2px solid #B8860B; margin-bottom:18px; }
.coc-eyebrow { color:#B8860B; font-weight:600; font-size:.78rem; letter-spacing:.06em; }
.coc-cover h2 { font-family:'Cormorant Garamond',serif; color:#1B2A4A; margin:6px 0 4px; font-size:1.9rem; }
.coc-i { font-style:italic; }
.coc-p { margin:0 0 12px; }
.coc-sec > h3, .coc-sec > summary { font-family:'Cormorant Garamond',serif; color:#1B2A4A; font-weight:700; font-size:1.2rem; margin:22px 0 8px; padding-bottom:4px; border-bottom:1px solid #e3ded0; }
.coc-sec > summary { cursor:pointer; list-style:none; margin:10px 0; padding:10px 14px; background:#F5EFE0; border:1px solid #e3ded0; border-radius:10px; }
.coc-sec[open] > summary { border-radius:10px 10px 0 0; }
details.coc-sec .coc-body { padding:12px 14px; border:1px solid #e3ded0; border-top:none; border-radius:0 0 10px 10px; }
.coc-sub { color:#1B2A4A; font-size:1rem; margin:14px 0 6px; font-weight:600; }
.coc-li { display:flex; gap:10px; margin:0 0 8px; }
.coc-li > span:first-child { flex:0 0 18px; }
.coc-box { background:#F5EFE0; border-left:4px solid #B8860B; padding:10px 14px; margin:12px 0; border-radius:6px; font-size:.92rem; }
.coc-table { width:100%; border-collapse:collapse; margin:10px 0 14px; font-size:.9rem; }
.coc-table th { background:#1B2A4A; color:#fff; text-align:left; padding:8px 10px; font-size:.78rem; letter-spacing:.04em; }
.coc-table td { border:1px solid #e3ded0; padding:8px 10px; vertical-align:top; }
.coc-pledge { background:#fff; border:2px solid #1B2A4A; border-radius:10px; padding:14px 18px; margin:12px 0; }
.coc-pledge p { margin:0 0 10px; }
.coc-pledge p:last-child { margin:0; }

/* ---- 23 Oct 2026 layout: full-width desktop, Tahanan-style framed cards on mobile ---- */
.coc-wide { max-width:1480px; padding:0 40px; }
section.coc-sec { border:1px solid #e3ded0; border-radius:12px; padding:6px 22px 16px; margin:0 0 18px; background:#fff; break-inside:avoid; }
section.coc-sec > h3 { margin-top:14px; }
details.coc-sec { border:1px solid #e3ded0; border-radius:12px; margin:0 0 12px; background:#fff; overflow:hidden; }
details.coc-sec > summary { margin:0; border:none; border-radius:0; border-bottom:1px solid transparent; }
details.coc-sec[open] > summary { border-bottom-color:#e3ded0; }
details.coc-sec .coc-body { border:none; border-radius:0; padding:12px 16px 16px; }
.coc-table { display:block; overflow-x:auto; }

@media (min-width:1000px) {
  .coc-wide .coc-cover { max-width:900px; margin-left:auto; margin-right:auto; }
  /* Code of Conduct page: Articles flow in two columns, filling the screen */
  .coc-wide > #coc-root .coc { column-count:2; column-gap:28px; }
  .coc-wide > #coc-root .coc-cover { column-span:all; }
  /* Sign page: reader on the left, signing on the right */
  .sign-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; align-items:start; }
  .sign-grid > #coc-reader { position:sticky; top:84px; margin-bottom:0; }
  .sign-grid #coc-scroll { max-height:calc(100vh - 290px); min-height:360px; }
  .sign-grid #coc-root .coc-cover { padding-top:0; }
  .sign-grid #coc-root .coc { font-size:1rem; }
  .coc-wide #already-signed-note, .coc-wide .signature-note { max-width:none; }
}

@media (max-width:760px) {
  .coc-wide { padding:0 14px; }
  .declaration-box { padding:16px 16px; border-radius:12px; }
  .sign-grid { display:flex; flex-direction:column; gap:16px; }
  .sign-grid #coc-scroll { max-height:62vh; padding:10px 10px; background:#faf8f2; }
  .sign-grid #coc-root section.coc-sec { padding:4px 14px 12px; margin-bottom:12px; }
  .coc-cover h2 { font-size:1.55rem; }
  /* Phone portrait: each table row becomes one stacked card (Ramil, 24 Oct 2026) */
  .coc-table, .coc-table tbody, .coc-table tr, .coc-table td { display:block; width:100%; box-sizing:border-box; }
  .coc-table { overflow:visible; font-size:1rem; }
  .coc-table thead { display:none; }
  .coc-table tr { border:1px solid #e3ded0; border-radius:12px; margin:0 0 12px; background:#fff; overflow:hidden; }
  .coc-table td { border:0; padding:10px 14px; line-height:1.55; }
  .coc-table td:first-child { background:#F5EFE0; color:#1B2A4A; font-size:1.05rem; border-bottom:1px solid #e3ded0; }
  .coc-table td[data-label]::before { content:attr(data-label); display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#B8860B; font-weight:600; margin-bottom:3px; }
  #lookup-card { padding:18px 16px; }
  .btn-block, #lookup-btn, #download-signed-btn { width:100%; }
}

.coc-sign-cta { margin:28px auto 0; max-width:760px; text-align:center; background:#F5EFE0; border:2px solid #1B2A4A; border-radius:14px; padding:26px 24px; }
.coc-sign-cta h3 { font-family:'Cormorant Garamond',serif; color:#1B2A4A; font-size:1.7rem; margin:0 0 8px; }
.coc-sign-cta p { color:#1F2430; font-size:1.02rem; margin:0 0 16px; }
.coc-sign-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
@media (max-width:760px) { .coc-sign-actions .btn { width:100%; } }