/* Document-page composition; type roles live in typography.css. */
.documents-page { --documents-columns:repeat(2,minmax(0,1fr)); --documents-column-gap:72px; }

.documents-opening { display:grid; grid-template-columns:var(--documents-columns); gap:28px var(--documents-column-gap); padding-block:58px 0; }
.documents-opening > .eyebrow { grid-column:1/-1; margin:0; }

.documents-opening h1 em { display:inline-block; color:var(--sage); margin-top:6px; }
.documents-lead { max-width:450px; align-self:center; }
.documents-promise { margin-bottom:20px; }
.documents-index { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); margin-top:27px; border-block:1px solid var(--line); }
.documents-index a { display:flex; gap:20px; align-items:center; min-height:74px; padding:18px 28px; border-right:1px solid var(--line); }
.documents-index a:first-child { padding-left:0; }
.documents-index a:last-child { border:0; padding-right:0; }
.documents-index a>span { color:var(--muted); }
.documents-index .arrow { margin-left:auto; width:18px; }
.documents-index a:hover .arrow { transform:translate(3px,3px); }
.documents-index .arrow { transform:rotate(90deg); transition:transform .2s; }
.document-workbench { padding-block:66px 64px; }
.workbench-heading { display:grid; grid-template-columns:var(--documents-columns); gap:var(--documents-column-gap); align-items:end; margin-bottom:38px; }
.workbench-heading .copy { max-width:400px; }
.document-tabs { display:flex; gap:0; margin-bottom:0; position:relative; z-index:1; }
.document-tabs button { padding:16px 24px; border:1px solid var(--line); border-bottom:0; min-height:52px; }
.document-tabs button+button { border-left:0; }
.document-tabs button[aria-selected=true] { background:#dce6c4; box-shadow:inset 0 2px var(--ink); border-color:#c2ccb0; }
.document-tabs button:not([aria-selected=true]):hover { background:#e9eade; }
.document-tabs button:focus-visible { outline:2px solid var(--ink); outline-offset:-5px; }
.document-panel { display:grid; grid-template-columns:1.75fr 1fr; align-items:stretch; }
.document-panel + .document-panel { margin-top:40px; }
.js .document-panel + .document-panel { margin-top:0; }
.document-board { margin:0; padding:32px; background:#dce6c4; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.document-board .picture-link { padding:12px; background:#fff; box-shadow:0 9px 24px #263b3517; }
.document-board img { aspect-ratio:1755/1240; object-fit:contain; }
.document-board .picture-link:hover img { transform:scale(1.015); }
.document-board .zoom-label { right:24px; bottom:24px; background:var(--coral); }
.document-board figcaption { display:flex; gap:20px; justify-content:space-between; padding-top:22px; color:var(--ink); }
.document-board figcaption span:last-child { text-align:right; }
.document-reading { padding:28px 0 20px 48px; background:var(--paper); }
.reading-label { color:var(--muted); text-transform:uppercase; margin-bottom:14px; }
.document-reading h3 { margin-bottom:18px; }
.reading-intro { color:var(--muted); margin-bottom:22px; }
.document-reading dl { margin:0; }
.document-reading dl>div { border-top:1px solid var(--line); padding-block:17px; }

.document-reading dd { color:var(--muted); margin:8px 0 0; }
.reading-note { color:var(--muted); margin-top:8px; }
.document-context { display:grid; grid-template-columns:var(--documents-columns); gap:var(--documents-column-gap); align-items:center; }
.documents-page .document-context { padding-top:0; padding-bottom:var(--subsection-space); }
.context-copy { color:var(--muted); }
.context-copy .text-link { color:var(--ink); }
.document-samples { border-top:1px solid var(--line); padding-block:var(--subsection-space); }
.samples-heading { display:grid; grid-template-columns:var(--documents-columns); gap:var(--documents-column-gap); align-items:end; margin-bottom:44px; }
.sample-pair { display:grid; grid-template-columns:var(--documents-columns); gap:var(--documents-column-gap); }
.sample-title { display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-block:22px; }
.sample-title>span { order:1; color:var(--muted); text-align:right; }

.sample-sheet { margin:0; padding:24px 24px 0; background:#ebe7dd; }
.sample-sheet .picture-link { height:370px; background:#fff; }
.sample-sheet img { width:100%; height:auto; object-fit:initial; }
.sample-sheet .picture-link:hover img { transform:scale(1.02); }
.sample-sheet .zoom-label { background:var(--coral); }
.sample-sheet figcaption { display:flex; align-items:center; justify-content:space-between; padding-block:16px; color:var(--muted); }
.sample-sheet figcaption .arrow { height:17px; width:17px; }
.sample-item>p { margin-top:23px; color:var(--muted); max-width:570px; }
.samples-foot { display:flex; justify-content:space-between; align-items:center; gap:70px; margin-top:30px; }
.samples-foot>p { max-width:540px; color:var(--muted); }
.documents-page .samples-foot .text-link { margin:0; flex:none; }
.documents-page .document-use { border-top:1px solid var(--line); display:grid; grid-template-columns:var(--documents-columns); gap:var(--documents-column-gap); }
.use-intro>.copy { margin-top:28px; max-width:450px; }
.use-notes>article { display:grid; grid-template-columns:38px 1fr; gap:20px; border-top:1px solid var(--line); padding-block:26px; }
.use-number { display:grid; place-items:center; align-self:start; width:32px; height:32px; border-radius:50%; background:var(--coral); }
.use-notes h3 { margin-bottom:13px; }
.use-notes article p { color:var(--muted); }
.document-scope { display:flex; gap:22px; align-items:center; padding:23px; margin-top:6px; background:#e6e9dc; }
.document-scope .link-leaf { flex:none; color:var(--sage); width:26px; height:32px; }

.documents-faq { display:grid; grid-template-columns:var(--documents-columns); gap:var(--documents-column-gap); padding-bottom:80px; }

.documents-contact { background:#eaaa8c; padding-block:62px; }
.documents-contact>.wrap { display:grid; grid-template-columns:var(--documents-columns); gap:var(--documents-column-gap); align-items:center; }
.documents-contact h2 em { color:var(--ink); }

.documents-contact p:not(.eyebrow) { max-width:370px; }
.documents-contact .button { background:var(--ink); color:var(--paper); margin-top:22px; }
@media(min-width:1600px) {
  .sample-sheet .picture-link { height:420px; }
  .document-reading { padding-left:54px; }
}
@media(max-width:1100px) {
  .documents-page { --documents-column-gap:40px; }
  .documents-opening { padding-top:44px; }

  .document-panel { grid-template-columns:1.5fr 1fr; }
  .document-board { padding:22px; }
  .document-reading { padding:22px 0 12px 30px; }

  .sample-sheet { padding:16px 16px 0; }
  .sample-sheet .picture-link { height:290px; }
  .sample-title { display:block; }
  .sample-title>span { display:block; text-align:left; margin-bottom:9px; }
  .samples-foot { gap:40px; }
}
@media(max-width:800px) {
  .documents-opening { grid-template-columns:1fr; gap:26px; padding-top:36px; }

  .documents-lead { max-width:570px; }

  .documents-index { margin-top:8px; }
  .documents-index a { flex-wrap:wrap; gap:10px; padding:16px 15px; min-height:95px; }
  .documents-index a>span { width:100%; }
  .documents-index .arrow { width:15px; }
  .document-workbench { padding-block:50px; }
  .workbench-heading { grid-template-columns:1fr; gap:25px; margin-bottom:30px; }
  .workbench-heading .copy { max-width:520px; }
  .document-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .document-tabs button { padding:13px 14px; }
  .document-tabs button:nth-child(odd) { border-left:1px solid var(--line); }
  .document-tabs button:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .document-tabs button:nth-child(n+3) { border-top:0; }
  .document-panel { grid-template-columns:1fr; }
  .document-board { padding:20px; }
  .document-board figcaption { gap:12px; padding-top:17px; }
  .document-board .picture-link { padding:8px; }
  .document-board .zoom-label { bottom:13px; right:13px; }
  .document-reading { padding:30px 0 0; }

  .document-reading dl { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

  .document-context,.samples-heading { grid-template-columns:1fr; gap:27px; }
  .sample-pair { gap:35px; grid-template-columns:1fr; }
  .sample-title { display:flex; }
  .sample-title>span { margin:0; }
  .sample-sheet { padding:22px 22px 0; }
  .sample-sheet .picture-link { height:390px; }
  .sample-item>p { margin-top:20px; }
  .samples-foot { display:block; margin-top:27px; }
  .documents-page .samples-foot .text-link { margin-top:16px; }
  .documents-page .document-use { grid-template-columns:1fr; gap:36px; }
  .use-notes>article { gap:15px; }
  .documents-faq { grid-template-columns:1fr; gap:30px; padding-bottom:52px; }
  .documents-contact { padding-block:48px; }
  .documents-contact>.wrap { grid-template-columns:1fr; gap:30px; }
}
@media(max-width:450px) {

  .documents-index a { padding-inline:12px; }
  .documents-index a:first-child { padding-left:0; }
  .documents-index .arrow { display:none; }
  .document-board { padding:16px; }
  .document-board figcaption { flex-direction:column; gap:4px; }
  .document-board figcaption span:last-child { text-align:left; }
  .document-reading dl { grid-template-columns:1fr; gap:0; }

  .sample-title { display:block; }
  .sample-title>span { margin-bottom:8px; }
  .sample-sheet { padding:16px 16px 0; }
  .sample-sheet .picture-link { height:265px; }

}