/* Two cards laid on a forest-green study cloth. Scope every rule to this desk. */
body[data-page="combination-study"] .article-hero h1 { max-width: 23ch; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.18; letter-spacing: 0; }
body[data-page="combination-study"] .combination-skip { position: fixed; top: 8px; left: 12px; z-index: 9999; transform: translateY(-180%); padding: 12px 16px; background: #eee5cf; color: #132d24; }
body[data-page="combination-study"] .combination-skip:focus { transform: translateY(0); }
body[data-page="combination-study"] .combination-worked-example { margin-block: 32px; padding-block: 25px; border-block: 1px solid #40574a; scroll-margin-top: 110px; }
body[data-page="combination-study"] .combination-worked-example h3 { margin-top: 0; text-transform: none; letter-spacing: 0; }
body[data-page="combination-study"] .combination-worked-example dt { color: #d2bc85; font-size: .95rem; font-weight: 500; margin-top: 18px; }
body[data-page="combination-study"] .combination-worked-example dd { margin: 7px 0 18px; color: #c0cdbf; font-size: 1rem; line-height: 1.8; }
body[data-page="combination-study"] #combination-study { scroll-margin-top: 105px; }
.combination-study { --combination-ink: #f0eadb; --combination-muted: #c0cdbf; --combination-brass: #d2bc85; --combination-line: #526b58; margin: 2.5rem 0; padding: clamp(20px, 4vw, 34px); color: var(--combination-ink); background: #12271e; border: 1px solid var(--combination-line); border-radius: 12px; }
.combination-study [hidden] { display: none !important; }
.combination-study :is(h2, h3, h4) { margin: 0 0 14px; color: var(--combination-ink); text-transform: none; letter-spacing: 0; line-height: 1.35; }
.combination-study h2 { font-size: clamp(1.55rem, 3.3vw, 2rem); max-width: 24ch; }
.combination-study h3 { font-size: 1.25rem; }
.combination-study h4 { font: 600 .91rem/1.5 Montserrat, sans-serif; margin-top: 22px; }
.combination-study p, .combination-study li { color: var(--combination-muted); font-size: .91rem; line-height: 1.75; max-width: 72ch; }
.combination-study p { margin: 0 0 15px; }
.combination-study a { color: var(--combination-brass); text-decoration: underline; text-underline-offset: .2em; }
.combination-study :is(button, a, select, input, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #ecdaa4; outline-offset: 4px; }
.combination-study label { display: block; color: var(--combination-ink); font-size: .85rem; font-weight: 500; margin-bottom: 9px; }
.combination-study select, .combination-study textarea { display: block; width: 100%; box-sizing: border-box; background: #0c1a13; color: var(--combination-ink); border: 1px solid #82957c; border-radius: 5px; font: 400 1rem/1.55 Montserrat, sans-serif; padding: 11px 12px; }
.combination-study select { min-height: 48px; padding-right: 22px; }
.combination-study option, .combination-study optgroup { color: #f0eadb; background: #0c1a13; }
.combination-study textarea { resize: vertical; min-height: 106px; }
.combination-study button { cursor: pointer; }
.combination-study button:disabled { opacity: .55; cursor: default; }
.combination-study .combination-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 15px; border: 1px solid #82957c; border-radius: 5px; background: transparent; color: var(--combination-ink); font: 500 .82rem/1.5 Montserrat, sans-serif; text-align: center; }
.combination-study .combination-button:hover:not(:disabled) { background: #294734; border-color: var(--combination-brass); }
.combination-study .combination-primary { background: var(--combination-brass); border-color: var(--combination-brass); color: #13271c; }
.combination-study .combination-primary:hover:not(:disabled) { background: #e2cea0; color: #13271c; }
.combination-study .combination-small { font-size: .78rem; line-height: 1.75; }
.combination-heading { margin-bottom: 25px; }
.combination-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.combination-study fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.combination-study .combination-choice { border-top: 1px solid var(--combination-line); padding-top: 12px; }
.combination-choice legend { padding-right: 12px; font: 500 1.05rem/1.6 Cinzel, serif; color: var(--combination-brass); }
.combination-study .combination-check { display: flex; align-items: center; gap: 11px; min-height: 44px; margin: 8px 0 5px; font-size: .79rem; font-weight: 400; cursor: pointer; }
.combination-check input { width: 19px; height: 19px; accent-color: var(--combination-brass); }
.combination-layout-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; margin-top: 12px; }
.combination-layout-row > button { min-height: 48px !important; }
.combination-study #combination-selection-status { margin-top: 14px; }
.combination-study details { border: 0; border-top: 1px solid var(--combination-line); border-radius: 0; padding: 15px 0; background: none; margin: 8px 0 0; }
.combination-study summary { cursor: pointer; color: var(--combination-brass); font-size: .86rem; min-height: 30px; padding: 5px 0; }
.combination-study details[open] summary { margin-bottom: 15px; }
.combination-example-buttons, .combination-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.combination-example-buttons .combination-button { text-align: left; justify-content: flex-start; flex: 1 1 240px; font-size: .77rem; }
.combination-result { border-top: 1px solid var(--combination-line); margin-top: 18px; padding-top: 27px; }
.combination-study #combination-result-title { scroll-margin-top: 110px; }
.combination-study .combination-current-pair { color: var(--combination-brass); font-size: .81rem; margin-bottom: 22px; }
.combination-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.combination-card { min-width: 0; }
.combination-card-top { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 17px; }
.combination-card img { display: block; width: 84px; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid #9a875b; border-radius: 5px; background: #0b1811; }
.combination-card img.is-reversed { transform: rotate(180deg); }
.combination-study .combination-card h4 { font: 500 .99rem/1.5 Cinzel, serif; margin: 0 0 6px; }
.combination-study .combination-card p { font-size: .81rem; line-height: 1.75; }
.combination-study .combination-card-role { color: var(--combination-brass); font-size: .76rem; margin-bottom: 4px; }
.combination-study .combination-card-orientation { font-size: .72rem; margin: 0; }
.combination-study .combination-card-keywords { color: #dfddc7; font-size: .73rem; margin-bottom: 10px; }
.combination-study .combination-card-link { font-size: .75rem; }
.combination-study .combination-reading ul, .combination-study .combination-reading ol { padding-left: 21px; margin: 0 0 19px; }
.combination-study .combination-reading li { font-size: .83rem; margin-bottom: 12px; }
.combination-reading strong { color: var(--combination-ink); font-weight: 500; }
.combination-study .combination-example-reading { padding: 16px 18px; margin-block: 22px; border: 1px solid var(--combination-line); border-radius: 6px; background: #1c3427; }
.combination-example-reading dt { color: var(--combination-brass); font-size: .78rem; margin-top: 15px; }
.combination-example-reading dd { margin: 5px 0 0; color: var(--combination-muted); font-size: .84rem; line-height: 1.75; }
.combination-notebook { padding-top: 27px; margin-top: 25px; border-top: 1px solid var(--combination-line); }
.combination-study .combination-count { display: block; text-align: right; font-size: .68rem; color: var(--combination-muted); margin: 7px 0 23px; }
.combination-study .combination-notice { padding: 15px 17px; border-left: 3px solid var(--combination-brass); background: #243c2d; color: #ede8d9; font-size: .83rem; line-height: 1.75; margin: 0 0 22px; }
.combination-study .combination-notice p { font-size: .83rem; }
.combination-study #combination-save-status { margin-top: 14px; }
.combination-study .combination-downloads { margin-top: 22px; }
.combination-study #combination-restore > .combination-actions { margin-bottom: 18px; }
.combination-study #combination-export-preview { margin-top: 22px; }
.combination-study #combination-export-preview .combination-actions { margin-top: 10px; }
.combination-study #combination-export-status { margin-top: 12px; }
.combination-study #combination-import-file { display: block; width: 100%; max-width: 100%; padding-block: 10px; color: var(--combination-ink); font-size: .85rem; }
.combination-study #combination-import-file::file-selector-button { padding: 10px 12px; margin-right: 9px; background: #d2bc85; color: #13271c; border: 0; border-radius: 4px; font: inherit; cursor: pointer; }
.combination-study #combination-import-preview { padding: 19px; border: 1px solid var(--combination-line); border-radius: 6px; }
.combination-study #combination-import-preview dt { color: var(--combination-brass); font-size: .8rem; margin-top: 14px; }
.combination-study #combination-import-preview dd { margin: 5px 0 17px; color: var(--combination-muted); font-size: .82rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 210px; overflow: auto; }
.combination-study #combination-import-preview .combination-small { margin: 14px 0 0; }
.combination-saved-controls { display: flex; flex-wrap: wrap; gap: 5px 20px; }
.combination-study .combination-text-button { min-height: 44px; padding: 6px 0; font: 400 .78rem/1.5 Montserrat, sans-serif; color: var(--combination-brass); text-decoration: underline; text-underline-offset: .2em; border: 0; background: none; }
.combination-next { border-top: 1px solid var(--combination-line); padding-top: 23px; margin-top: 23px; }
.combination-study .combination-next h3 { font-size: 1.1rem; }
.combination-study .combination-next p { font-size: .82rem; }
.combination-study .combination-next p:last-child { margin-bottom: 0; }
.combination-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Keep sustained reading and controls comfortably legible inside the narrow article. */
.combination-study :is(.combination-small, .combination-card p, .combination-reading li, .combination-next p, .combination-notice, .combination-notice p) { font-size: .94rem; }
.combination-study :is(label, summary, .combination-button, .combination-example-buttons .combination-button, .combination-check, .combination-text-button) { font-size: .9rem; }
.combination-study :is(.combination-card-link, .combination-example-reading dd, #combination-import-preview dd) { font-size: .94rem; }
.combination-study .combination-confirm-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100svh - 40px); overflow: auto; box-sizing: border-box; margin: auto; padding: 27px; background: #172f23; color: #f0eadb; border: 1px solid #d2bc85; border-radius: 10px; }
.combination-study .combination-confirm-dialog::backdrop { background: rgba(3, 10, 6, .8); }
.combination-study .combination-confirm-dialog p { font-size: .95rem; margin-block: 18px 24px; }
@media (max-width: 600px) {
  .combination-study { padding: 21px 18px; }
  .combination-choices { gap: 15px; grid-template-columns: minmax(0, 1fr); }
  .combination-layout-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .combination-layout-row > button { width: 100%; }
  .combination-cards { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .combination-card + .combination-card { border-top: 1px solid var(--combination-line); padding-top: 22px; }
  .combination-card-top { grid-template-columns: 76px minmax(0, 1fr); }
  .combination-card img { width: 76px; }
  .combination-card-top + p { margin-bottom: 12px; }
  .combination-study .combination-example-reading { padding-inline: 14px; }
  .combination-actions .combination-button { flex: 1 1 150px; }
}
@media (prefers-reduced-motion: reduce) { .combination-study *, .combination-study *::before, .combination-study *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }