/* FinalCutHub CUT Editorial 2.0: photographs, a sequence, and the work between shots. */
:root {
    color-scheme: light;
    --bg: #c4e1ea;
    --paper: #f4fafb;
    --panel: #deedf1;
    --text: #080e12;
    --muted: #3e565f;
    --accent: #2144d0;
    --line: #87a3ad;
    --yellow: #f7e79d;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; color: var(--text); background: var(--paper); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
a:hover { color: var(--accent); }
button, input, select { font: inherit; }
button, a, input, select, summary { touch-action: manipulation; }
button { cursor: pointer; }
:is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 650; line-height: 1.08; letter-spacing: -.045em; }
h1 { font-size: clamp(46px, 5.7vw, 76px); }
h2 { font-size: clamp(36px, 4vw, 56px); }
h3 { font-size: 28px; }
p { color: var(--muted); }
[hidden] { display: none !important; }
.wrap { width: calc(100% - 88px); max-width: 1450px; margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; top: -100px; left: 20px; z-index: 100; background: var(--accent); color: #fff; padding: 12px 20px; }
.skip:focus { top: 10px; }
.site-header { background: var(--bg); }
.header { min-height: 80px; display: flex; align-items: center; gap: 30px; position: relative; }
.logo { display: inline-flex; flex-shrink: 0; align-items: center; gap: 13px; color: var(--text); font-size: 23px; line-height: 1.2; letter-spacing: -.035em; font-weight: 650; }
.logo:hover { color: var(--text); }
.brand-mark { flex-shrink: 0; color: var(--text); }
.logo img { width: auto; max-width: 220px; max-height: 46px; object-fit: contain; }
.header nav { margin-left: auto; margin-right: auto; font-size: 14px; }
.header .nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 28px; margin: 0; padding: 0; list-style: none; }
.header .nav a { display: block; padding: 15px 0; }
.header .nav-current a { color: var(--accent); text-decoration: underline; }
.search-link { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.search-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu-button { display: none; }
.underlined-link { color: var(--accent); text-decoration: underline; }
.underlined-link:hover { color: var(--text); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 1px solid var(--text); border-radius: 0; background: var(--yellow); color: var(--text); font-size: 15px; font-weight: 600; }
.button:hover { background: #eddb89; color: var(--text); }
.button.outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.button.outline:hover { background: var(--panel); }
.cut-home { background: var(--bg); }
.cut-intro { padding-top: 4px; }
.cut-montage { position: relative; min-height: 0; height: min(47vw, 725px); }
.cut-intro-copy { position: absolute; left: .5%; top: 8%; width: 23%; z-index: 5; }
.cut-intro-copy > h1 { font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
.cut-intro-copy > p { max-width: 26ch; font-size: 14px; line-height: 1.5; margin-top: 8px; }
.cut-first-project { display: block; margin-top: 22px; position: relative; }
.cut-first-project > span { display: block; font-size: 13px; margin-bottom: 6px; }
.cut-first-project h2 { font-size: clamp(24px, 2vw, 31px); font-weight: 650; line-height: 1.03; letter-spacing: -.035em; }
.cut-first-project p { color: var(--text); font-size: 13px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--text); }
.cut-first-project::before { content: ''; position: absolute; right: 5%; bottom: -66px; height: 70px; width: 1px; background: var(--text); transform: rotate(-20deg); transform-origin: top; }
.cut-first-project::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--text); right: -3%; bottom: -71px; }
.cut-photo { position: absolute; overflow: hidden; background: #a8b6bb; }
.cut-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.cut-hall { left: 29.5%; top: 0; width: 50%; height: 45%; }
.cut-hall img { object-position: center 45%; }
.cut-portrait { left: 6.3%; top: 39%; width: 16.3%; height: 51%; z-index: 3; }
.cut-portrait img { object-position: center 34%; }
.cut-detail { right: 0; top: 5%; width: 16.2%; height: 35%; }
.cut-detail img { object-position: center; }
.cut-word { position: absolute; z-index: 2; left: 19.2%; top: 22.8%; color: var(--accent); font-family: Arial, Helvetica, var(--sans); font-size: clamp(180px, 29.8vw, 455px); font-weight: 900; line-height: .78; letter-spacing: -.092em; pointer-events: none; user-select: none; }
.cut-callout { position: relative; z-index: 5; }
.cut-callout h2 { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.04; letter-spacing: -.03em; }
.cut-editing-callout { position: absolute; right: 0; top: 54%; width: 18.5%; }
.cut-editing-callout > span { display: inline-block; margin-top: 13px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: 16px; }
.cut-editing-callout::before { content: ''; position: absolute; height: 1px; width: 150px; left: -168px; top: 42px; background: var(--text); transform: rotate(-41deg); transform-origin: right; }
.cut-editing-callout::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--text); left: -22px; top: 38px; }
.cut-sequence { position: absolute; z-index: 4; pointer-events: none; left: 23.5%; top: 79.5%; width: 69%; height: 11%; }
.sequence-line { position: absolute; left: -1.5%; right: -3%; top: 52%; height: 2px; background: var(--text); }
.sequence-frames { height: 100%; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 26px; overflow: hidden; }
.sequence-frames img { position: relative; z-index: 1; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.sequence-frames .frame-hall-wide { object-position: 50% 45%; }
.sequence-frames .frame-portrait-close { object-position: 50% 22%; }
.sequence-frames .frame-hall-detail { object-position: 50% 90%; }
.sequence-frames .frame-notebook { object-position: 50% 50%; }
.sequence-frames .frame-hall-end { object-position: 56% 52%; }
.sequence-playhead { position: absolute; z-index: 3; top: -13px; left: 59%; height: calc(100% + 27px); width: 2px; background: var(--accent); }
.sequence-playhead::before { content: ''; display: block; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.cut-sound { display: grid; grid-template-columns: 190px minmax(0, 1fr) 105px; gap: 35px; align-items: center; padding: 3px 6px 24px; }
.cut-sound h2 { font-size: 25px; }
.cut-audio-callout::after { content: ''; position: absolute; top: 25px; right: -40px; width: 40px; height: 1px; background: var(--text); transform: rotate(-22deg); transform-origin: right; }
.cut-waveform { min-width: 0; }
.cut-waveform img { width: 100%; height: auto; object-fit: contain; }
.cut-export-callout h2 { font-size: 17px; line-height: 1.15; font-weight: 500; }
.cut-export-callout::before { content: ''; position: absolute; top: -36px; left: 0; width: 1px; height: 28px; background: var(--text); transform: rotate(-24deg); }
.cut-export-callout::after { content: ''; position: absolute; top: -40px; left: -11px; width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
.cut-search { display: grid; grid-template-columns: minmax(0, 2.8fr) minmax(250px, 1fr); gap: 39px; align-items: center; padding: 33px 0 53px; max-width: 1160px; }
.cut-search > p { border-left: 1px solid var(--text); padding-left: 38px; color: var(--text); font-size: 28px; line-height: 1.05; letter-spacing: -.035em; }
.search-form { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--text); padding: 0; background: transparent; }
.search-form > svg { flex-shrink: 0; width: 27px; height: 27px; }
.search-form input { min-width: 0; flex: 1; width: 100%; padding: 14px 4px; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 18px; line-height: 1.4; }
.search-form input::placeholder { color: var(--muted); opacity: 1; }
.search-form input:focus-visible { outline-offset: 0; }
.search-form button { min-height: 51px; flex-shrink: 0; padding: 10px 29px; border: 0; border-radius: 0; background: var(--yellow); color: var(--text); font-size: 16px; }
.search-form button:hover { background: #eddb89; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 25px; margin-bottom: 30px; }
.section-head .underlined-link { flex-shrink: 0; font-size: 15px; }
.latest-section { border-top: 1px solid var(--line); padding-block: 43px 54px; }
.latest-section h2 { font-size: 42px; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 28px; }
.guide-card, .search-result { min-width: 0; }
.card-link, .result-link { display: block; height: 100%; }
.art { aspect-ratio: 3/2; overflow: hidden; border: 1px solid #a4bdc5; border-radius: 0; background: var(--bg); }
.art img { width: 100%; height: 100%; object-fit: contain; }
.type-tile { display: grid; align-content: center; aspect-ratio: 3/2; padding: 28px; background: var(--panel); color: var(--accent); font-size: 40px; line-height: 1.1; letter-spacing: -.04em; }
.card-copy, .result-copy { padding-top: 17px; }
.card-topic { display: block; margin-bottom: 8px; color: var(--accent); font-size: 13px; }
.card-copy h3, .result-copy h2 { font-size: 26px; line-height: 1.16; letter-spacing: -.035em; overflow-wrap: anywhere; }
.card-copy p, .result-copy p { margin-top: 12px; font-size: 15px; line-height: 1.6; }
.card-link:hover :is(h3, h2), .result-link:hover h2 { color: var(--accent); }
.card-type { display: block; margin-top: 14px; color: var(--muted); font-size: 12px; }
.topics-section { padding-block: 5px 50px; }
.topics-section h2 { margin-bottom: 25px; font-size: 32px; }
.topic-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 35px; }
.topic-directory a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); padding-block: 17px; }
.topic-directory a > span { font-size: 18px; line-height: 1.3; }
.topic-directory small { white-space: nowrap; color: var(--muted); font-size: 12px; }
.site-footer { background: var(--bg); }
.footer { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-block: 25px 23px; border-top: 1px solid var(--line); }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; }
.footer .logo { font-size: 19px; }
.footer .brand-mark { width: 24px; height: 24px; }
.footer-brand p { font-size: 13px; }
.footer > nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 24px; font-size: 13px; }
.footer nav a { padding-block: 8px; }
.footer-bottom { grid-column: 1/-1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 25px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 11px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }
.breadcrumb { padding-block: 26px 35px; color: var(--muted); font-size: 12px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 7px 0; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: baseline; min-width: 0; }
.breadcrumb li + li::before { content: '/'; display: inline-block; padding-inline: 11px; color: #5d7680; }
.breadcrumb li[aria-current] { max-width: 68ch; }
.page-label { margin-bottom: 14px; color: var(--accent); font-size: 15px; }
.hub-main { padding-bottom: 35px; }
.hub-heading { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: end; gap: 70px; padding-bottom: 43px; }
.hub-heading h1 { max-width: 800px; font-size: clamp(46px, 5.3vw, 72px); }
.hub-heading > div > p:not(.page-label) { margin-top: 22px; max-width: 68ch; font-size: 19px; line-height: 1.6; }
.hub-aside { border-left: 1px solid var(--line); padding-left: 27px; }
.hub-aside h2 { margin-bottom: 13px; font-size: 19px; line-height: 1.3; letter-spacing: -.025em; }
.hub-aside p { font-size: 15px; line-height: 1.55; }
.hub-aside > .underlined-link { display: inline-block; margin-top: 14px; font-size: 14px; }
.hub-neighbors { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; }
.results-meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 23px; color: var(--muted); font-size: 13px; }
.results-meta > a { font-size: 13px; }
.hub-grid { padding-block: 5px 40px; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-block: 25px 35px; color: var(--muted); font-size: 14px; }
.pagination a { color: var(--accent); padding-block: 10px; }
.catalog-heading { max-width: 850px; padding-bottom: 20px; }
.catalog-heading h1 { font-size: clamp(46px, 5.1vw, 72px); }
.catalog-heading > p { max-width: 65ch; margin-top: 21px; font-size: 19px; }
.catalog-heading .search-form { max-width: 670px; margin-top: 27px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px 19px; padding-bottom: 25px; color: var(--muted); font-size: 13px; }
.suggestions a { color: var(--accent); text-decoration: underline; }
.sort-label { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sort-label select { max-width: 180px; padding: 9px 25px 9px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--text); font-size: 13px; }
.catalog-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; border-top: 1px solid var(--line); }
.catalog-controls select { min-height: 44px; }
.topic-filter select { max-width: 220px; }
.search-status { font-size: 14px; }
.search-status:empty { display: none; }
.search-grid { padding-bottom: 65px; }
.search-main { padding-bottom: 30px; }
.empty { max-width: 650px; padding-block: 43px; }
.card-grid > .empty { grid-column: 1/-1; }
.empty h2 { font-size: 34px; }
.empty p { margin-block: 18px 23px; }
.noscript-note { padding-bottom: 30px; font-size: 15px; }
.noscript-note a { color: var(--accent); text-decoration: underline; }
.article-main { max-width: 1240px; }
.article-heading { max-width: 1050px; padding-bottom: 36px; }
.article-heading h1 { font-size: clamp(43px, 5vw, 70px); line-height: 1.08; overflow-wrap: anywhere; }
.article-heading > p { margin-top: 25px; max-width: 75ch; font-size: 21px; line-height: 1.55; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-size: 15px; }
.byline a { color: var(--accent); }
.byline a:hover { color: var(--text); }
.byline small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.reading-grid { display: block; }
.article-body { min-width: 0; width: 100%; max-width: 800px; margin-inline: auto; }
.post-cover { margin-bottom: 36px; }
.post-cover img, .page-cover img { width: 100%; height: auto; border: 1px solid #a4bdc5; border-radius: 0; }
figcaption { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.toc { position: sticky; top: 30px; align-self: start; max-height: calc(100dvh - 60px); overflow-y: auto; padding-right: 12px; font-size: 13px; }
.toc h2 { margin-bottom: 15px; font-size: 17px; line-height: 1.4; letter-spacing: -.025em; }
.toc nav { display: flex; flex-direction: column; gap: 13px; }
.toc a { padding: 3px 0; color: var(--muted); line-height: 1.4; }
.toc a:hover { color: var(--accent); }
.gh-content { color: #172c34; font-size: 19px; line-height: 1.75; overflow-wrap: break-word; }
.gh-content > * + * { margin-top: 25px; }
.gh-content p { color: inherit; font: inherit; }
.gh-content :is(h2, h3, h4) { color: var(--text); scroll-margin-top: 30px; }
.gh-content h2 { margin-top: 50px; font-size: 36px; line-height: 1.18; letter-spacing: -.035em; }
.gh-content h3 { margin-top: 34px; font-size: 27px; line-height: 1.25; letter-spacing: -.03em; }
.gh-content h4 { margin-top: 29px; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.gh-content > :first-child { margin-top: 0; }
.gh-content :is(ul, ol) { padding-left: 26px; }
.gh-content li + li { margin-top: 10px; }
.gh-content li > :is(ul, ol) { margin-top: 10px; }
.gh-content a { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; }
.gh-content a:hover { color: var(--text); }
.gh-content strong { color: var(--text); font-weight: 650; }
.gh-content blockquote { margin-inline: 0; padding: 18px 24px; border-left: 3px solid var(--accent); background: var(--panel); }
.gh-content blockquote > * + * { margin-top: 18px; }
.gh-content pre { overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); font-size: 14px; line-height: 1.65; }
.gh-content code { padding: 2px 4px; border-radius: 0; background: var(--panel); font: .8em/1.6 var(--mono); }
.gh-content pre code { padding: 0; background: transparent; white-space: pre; }
.gh-content hr { border: 0; border-top: 1px solid var(--line); margin-block: 38px; }
.gh-content table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.gh-content :is(th, td) { padding: 13px 15px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.gh-content th { background: var(--panel); color: var(--text); font-weight: 600; }
.frame-table-scroll { max-width: 100%; overflow-x: auto; margin-block: 30px; }
.gh-content details { padding: 17px 20px; border: 1px solid var(--line); border-radius: 0; }
.gh-content summary { cursor: pointer; color: var(--text); font-size: 18px; font-weight: 600; }
.gh-content details > :not(summary) { margin-top: 16px; }
.gh-content .kg-card { max-width: 100%; margin-block: 35px; }
.gh-content :is(.kg-width-wide, .kg-width-full) { width: 100%; }
.gh-content img { height: auto; margin-inline: auto; }
.gh-content :is(video, iframe) { max-width: 100%; }
.gh-content iframe { border: 0; }
.gh-content .kg-embed-card iframe { width: 100%; }
.gh-content .kg-image-card img { display: block; width: 100%; border: 1px solid #a4bdc5; border-radius: 0; }
.gh-content figcaption { color: var(--muted); font: 13px/1.6 var(--sans); }
.gh-content figcaption a { color: var(--accent); }
.gh-content .kg-gallery-container { display: flex; flex-direction: column; gap: 12px; }
.gh-content .kg-gallery-row { display: flex; gap: 12px; }
.gh-content .kg-gallery-image { min-width: 0; flex: 1; }
.gh-content .kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.gh-content .kg-bookmark-container { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 0; color: var(--text); text-decoration: none; }
.kg-bookmark-content { min-width: 0; flex: 1; padding: 22px; }
.kg-bookmark-title { font: 600 17px/1.4 var(--sans); }
.kg-bookmark-description { margin-top: 11px; color: var(--muted); font: 14px/1.6 var(--sans); }
.kg-bookmark-thumbnail { flex-shrink: 0; width: 30%; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.kg-bookmark-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 13px; font: 12px/1.5 var(--sans); }
.kg-bookmark-icon { width: 18px; height: 18px !important; margin: 0 !important; }
.gh-content .kg-toggle-card { background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.gh-content .kg-callout-card { border-left: 3px solid var(--accent); background: var(--panel); color: var(--text); }
.gh-content .kg-button-card .kg-btn { border-radius: 0; background: var(--accent); color: #fff; font-family: var(--sans); text-decoration: none; }
.gh-content :is(.kg-file-card, .kg-audio-card) { background: var(--panel); color: var(--text); }
.frame-zoom { display: block; width: 100%; max-width: 100%; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; cursor: zoom-in; }
.frame-zoom img { width: 100%; }
.frame-lightbox { width: calc(100% - 48px); max-width: 1600px; max-height: 94dvh; padding: 16px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--text); }
.frame-lightbox::backdrop { background: #000c; }
.dialog-close { display: block; min-height: 44px; margin: 0 0 14px auto; padding: 8px 16px; border: 1px solid var(--text); border-radius: 0; background: var(--yellow); color: var(--text); font-size: 14px; }
.dialog-close:hover { background: #eddb89; }
.frame-lightbox img { width: auto; max-height: 74dvh; object-fit: contain; margin: auto; }
.frame-lightbox p { max-width: 100ch; margin: 12px auto 0; font-size: 13px; line-height: 1.5; }
.access-message { padding: 30px; border: 1px solid var(--line); background: var(--panel); }
.access-message h2 { font-size: 30px; }
.access-message p { margin-block: 18px; }
.related { margin-top: 55px; border-top: 1px solid var(--line); padding-block: 60px; }
.related h2 { font-size: 40px; }
.page-main { padding-bottom: 65px; }
.page-main .article-heading { max-width: 900px; }
.page-body { margin-left: 0; }
.page-cover { max-width: 900px; margin-bottom: 35px; }
.author-heading { display: flex; align-items: flex-start; gap: 35px; max-width: 950px; padding-block: 10px 40px; }
.author-photo { flex-shrink: 0; width: 112px; height: 112px; object-fit: cover; border-radius: 0; }
.author-heading h1 { font-size: clamp(46px, 5.1vw, 70px); }
.author-heading p { margin-top: 20px; font-size: 19px; }
.author-heading .underlined-link { display: inline-block; margin-top: 18px; font-size: 14px; }
.missing-page { max-width: 1000px; padding-block: 75px; }
.missing-page > p:not(.page-label) { max-width: 65ch; margin-top: 24px; font-size: 19px; }
.missing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px; margin-block: 30px; }
.missing-page .search-form { max-width: 650px; }
@media (min-width: 1101px) {
    .reading-grid:has(.toc:not([hidden])) { display: grid; grid-template-columns: 220px minmax(0, 800px); justify-content: start; gap: 50px; }
    .reading-grid:has(.toc:not([hidden])) .article-body { margin-inline: 0; }
}
@media (min-width: 1600px) { .cut-word { font-size: 455px; } }
@media (max-width: 1200px) {
    .header { gap: 20px; }
    .header .nav { gap: 5px 20px; }
    .logo { font-size: 21px; gap: 10px; }
    .cut-montage { height: 52vw; }
    .cut-intro-copy { top: 4%; width: 28%; }
    .cut-portrait { top: 43%; height: 47%; }
    .cut-intro-copy > p { font-size: 12px; }
    .cut-first-project { margin-top: 20px; }
    .cut-first-project > span { font-size: 12px; }
    .cut-first-project h2 { font-size: 27px; }
    .cut-first-project p { font-size: 12px; margin-top: 9px; }
    .cut-first-project::before, .cut-first-project::after { display: none; }
    .cut-editing-callout h2 { font-size: 23px; }
    .cut-editing-callout > span { font-size: 14px; }
    .cut-editing-callout::before { width: 110px; left: -128px; }
    .sequence-frames { gap: 18px; }
    .cut-sound { grid-template-columns: 170px minmax(0, 1fr) 100px; gap: 25px; }
    .cut-sound h2 { font-size: 22px; }
    .cut-export-callout h2 { font-size: 16px; }
    .cut-search { grid-template-columns: minmax(0, 2.4fr) minmax(230px, 1fr); gap: 30px; }
    .cut-search > p { font-size: 25px; padding-left: 28px; }
    .cut-search .search-form input { font-size: 16px; }
}
@media (max-width: 1100px) {
    .wrap { width: calc(100% - 64px); }
    .header nav { font-size: 13px; }
    .cut-word { top: 26%; }
    .cut-editing-callout { top: 57%; }
    .cut-editing-callout h2 { font-size: 20px; }
    .cut-first-project h2 { font-size: 24px; }
    .cut-first-project p { padding-top: 5px; }
    .cut-intro-copy > h1 { font-size: 15px; }
    .cut-search { padding-block: 25px 44px; }
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
    .topic-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hub-heading { grid-template-columns: minmax(0, 1fr) 220px; gap: 35px; }
    .hub-heading > div > p:not(.page-label) { font-size: 18px; }
    .toc { position: static; max-height: none; overflow: visible; border-block: 1px solid var(--line); padding: 22px 0; margin-bottom: 30px; }
    .toc nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 25px; }
    .toc h2 { margin-bottom: 16px; }
    .footer { grid-template-columns: 1fr; }
    .footer > nav { justify-content: flex-start; }
}
@media (max-width: 850px) {
    .header { min-height: 74px; gap: 14px; flex-wrap: wrap; }
    .header nav { display: block; order: 3; flex-basis: 100%; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
    .header .search-link { margin-left: auto; }
    .frame-menu-ready .header { flex-wrap: nowrap; }
    .menu-button { align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); font-size: 13px; }
    .frame-menu-ready .menu-button { display: inline-flex; }
    .frame-menu-ready .header nav { display: none; position: absolute; z-index: 30; top: calc(100% - 1px); left: -20px; right: -20px; margin: 0; padding: 15px 20px; border: 1px solid var(--line); background: var(--paper); }
    .frame-menu-ready .header nav.open { display: block; }
    .frame-menu-ready .header .search-link { margin-left: 0; }
    .header .nav { display: block; }
    .header .nav a { padding: 12px; font-size: 16px; }
    .cut-intro { padding-top: 12px; }
    .cut-montage { height: 570px; }
    .cut-intro-copy { position: relative; top: auto; left: auto; width: 100%; max-width: 550px; padding-block: 0 24px; }
    .cut-intro-copy > h1 { font-size: 40px; font-weight: 650; line-height: 1.04; letter-spacing: -.045em; }
    .cut-intro-copy > p { max-width: none; font-size: 16px; margin-top: 12px; }
    .cut-first-project { margin-top: 19px; max-width: 440px; }
    .cut-first-project > span { display: none; }
    .cut-first-project h2 { display: inline; font-size: 19px; font-weight: 600; line-height: 1.4; color: var(--accent); border-bottom: 1px solid currentColor; }
    .cut-first-project h2 br { display: none; }
    .cut-first-project p { margin-top: 6px; border: 0; padding: 0; font-size: 14px; }
    .cut-hall { top: 24%; left: 27%; width: 56%; height: 30%; }
    .cut-portrait { top: 44%; left: 0; width: 23%; height: 33%; }
    .cut-detail { top: 28%; width: 14%; height: 22%; }
    .cut-word { top: 40%; left: 16%; font-size: 30vw; }
    .cut-sequence { top: 78%; left: 26%; width: 74%; height: 8%; }
    .cut-editing-callout { top: auto; bottom: 0; right: 0; width: 100%; padding-top: 17px; border-top: 1px solid var(--line); }
    .cut-editing-callout h2 { display: inline; font-size: 21px; }
    .cut-editing-callout h2 br { display: none; }
    .cut-editing-callout > span { display: inline-block; margin: 0 0 0 15px; font-size: 14px; }
    .cut-editing-callout::before, .cut-editing-callout::after { display: none; }
    .cut-sound { grid-template-columns: 160px minmax(0, 1fr) 100px; gap: 20px; padding-top: 24px; }
    .cut-sound h2 { font-size: 20px; }
    .cut-audio-callout::after, .cut-export-callout::before, .cut-export-callout::after { display: none; }
    .cut-export-callout h2 { font-size: 16px; }
    .cut-search { grid-template-columns: 1fr; gap: 20px; padding-block: 20px 38px; }
    .cut-search > p { border: 0; padding: 0; font-size: 24px; }
    .cut-search > p br { display: none; }
    .hub-heading { grid-template-columns: 1fr; gap: 26px; padding-bottom: 28px; }
    .hub-aside { padding-left: 0; border: 0; }
    .hub-neighbors { flex-direction: row; flex-wrap: wrap; gap: 10px 23px; }
}
@media (max-width: 700px) {
    body { font-size: 16px; }
    .wrap { width: calc(100% - 40px); }
    .header { gap: 8px; }
    .logo { font-size: 20px; gap: 10px; }
    .brand-mark { width: 25px; height: 25px; }
    .logo img { max-width: 165px; max-height: 38px; }
    .menu-button { padding-inline: 10px; font-size: 12px; }
    .search-link { min-width: 36px; }
    .cut-montage { height: 520px; }
    .cut-intro-copy > h1 { max-width: 350px; font-size: 39px; }
    .cut-intro-copy > p { font-size: 15px; max-width: 350px; }
    .cut-first-project h2 { font-size: 18px; }
    .cut-first-project p { font-size: 13px; }
    .cut-hall { top: 32%; left: 22%; width: 61%; height: 25%; }
    .cut-portrait { top: 53%; width: 24%; height: 28%; }
    .cut-detail { top: 35%; width: 14%; height: 18%; }
    .cut-word { top: 47%; left: 15%; font-size: 30.5vw; }
    .cut-sequence { top: 75%; left: 27%; width: 73%; height: 7%; }
    .sequence-frames { gap: 9px; }
    .sequence-playhead { top: -8px; height: calc(100% + 17px); }
    .sequence-playhead::before { width: 7px; height: 7px; left: -2.5px; top: -3px; }
    .cut-editing-callout { padding-top: 16px; }
    .cut-editing-callout h2 { display: block; font-size: 23px; }
    .cut-editing-callout > span { margin: 8px 0 0; font-size: 14px; }
    .cut-sound { grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 0 0; }
    .cut-audio-callout h2, .cut-export-callout h2 { font-size: 20px; line-height: 1.15; }
    .cut-audio-callout h2 br, .cut-export-callout h2 br { display: none; }
    .cut-waveform { grid-column: 1/-1; grid-row: 1; }
    .cut-export-callout { padding-left: 18px; border-left: 1px solid var(--line); }
    .cut-search { padding-block: 30px 35px; gap: 20px; }
    .search-form { gap: 10px; }
    .search-form > svg { width: 22px; height: 22px; }
    .search-form input, .cut-search .search-form input { padding-block: 13px; font-size: 16px; }
    .search-form button { min-height: 48px; padding-inline: 15px; font-size: 14px; }
    .cut-search > p { font-size: 24px; }
    .latest-section { padding-block: 30px 38px; }
    .latest-section h2 { font-size: 36px; }
    .section-head { display: block; margin-bottom: 24px; }
    .section-head > .underlined-link { display: inline-block; margin-top: 15px; font-size: 14px; }
    .card-grid { grid-template-columns: 1fr; gap: 34px; }
    .card-copy h3, .result-copy h2 { font-size: 27px; }
    .card-copy p, .result-copy p { font-size: 15px; }
    .card-copy, .result-copy { padding-top: 15px; }
    .topics-section { padding-block: 5px 38px; }
    .topics-section h2 { margin-bottom: 20px; font-size: 30px; }
    .topic-directory { grid-template-columns: 1fr; }
    .topic-directory a { padding-block: 16px; }
    .topic-directory a > span { font-size: 18px; }
    .footer { padding-block: 24px 22px; gap: 20px; }
    .footer-brand { flex-direction: column; align-items: flex-start; gap: 14px; }
    .footer > nav { gap: 8px 20px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 11px; }
    .footer-bottom nav { gap: 18px; }
    .breadcrumb { padding-block: 24px 29px; font-size: 11px; }
    .breadcrumb li[aria-current] { max-width: none; }
    .breadcrumb li + li::before { padding-inline: 8px; }
    .hub-heading h1, .catalog-heading h1 { font-size: 45px; }
    .hub-heading > div > p:not(.page-label), .catalog-heading > p { font-size: 17px; margin-top: 17px; }
    .page-label { font-size: 13px; margin-bottom: 12px; }
    .hub-aside h2 { font-size: 17px; }
    .hub-neighbors { font-size: 14px; }
    .results-meta { align-items: flex-start; gap: 12px; font-size: 12px; padding-block: 20px; }
    .results-meta > a { font-size: 12px; }
    .sort-label { gap: 7px; font-size: 12px; }
    .sort-label select { font-size: 12px; padding: 8px; max-width: 130px; }
    .catalog-controls { grid-template-columns: minmax(0, 1fr) auto; }
    .catalog-controls #result-count { grid-column: 1 / -1; }
    .catalog-controls .sort-label { display: grid; gap: 5px; }
    .catalog-controls select { width: 100%; max-width: 100%; }
    .catalog-heading { padding-bottom: 17px; }
    .catalog-heading .search-form { margin-top: 23px; }
    .suggestions { gap: 8px 17px; font-size: 12px; padding-bottom: 22px; }
    .search-grid { padding-bottom: 40px; }
    .hub-grid { padding-bottom: 15px; }
    .pagination { gap: 10px; font-size: 12px; padding-block: 23px; }
    .empty { padding-block: 30px; }
    .empty h2 { font-size: 29px; }
    .article-heading { padding-bottom: 28px; }
    .article-heading h1 { font-size: 43px; letter-spacing: -.04em; }
    .article-heading > p { font-size: 18px; margin-top: 20px; }
    .byline { margin-top: 22px; font-size: 14px; }
    .byline small { font-size: 12px; }
    .toc { padding-block: 19px; margin-bottom: 28px; }
    .toc h2 { font-size: 16px; }
    .toc nav { grid-template-columns: 1fr; gap: 10px; }
    .toc a { font-size: 13px; }
    .post-cover { margin-bottom: 30px; }
    .gh-content { font-size: 18px; line-height: 1.75; }
    .gh-content > * + * { margin-top: 23px; }
    .gh-content h2 { font-size: 31px; margin-top: 39px; }
    .gh-content h3 { font-size: 25px; margin-top: 30px; }
    .gh-content h4 { font-size: 21px; }
    .gh-content :is(ul, ol) { padding-left: 23px; }
    .gh-content .kg-card { margin-block: 30px; }
    .gh-content figcaption { font-size: 12px; }
    .gh-content :is(th, td) { padding: 11px; }
    .gh-content table { font-size: 14px; }
    .kg-bookmark-content { padding: 15px; }
    .kg-bookmark-title { font-size: 15px; }
    .kg-bookmark-description { font-size: 12px; }
    .kg-bookmark-thumbnail { width: 25%; }
    .frame-lightbox { width: calc(100% - 20px); padding: 10px; }
    .frame-lightbox img { max-height: 70dvh; }
    .frame-lightbox p { font-size: 12px; }
    .related { margin-top: 40px; padding-block: 36px 40px; }
    .related h2 { font-size: 33px; }
    .page-main { padding-bottom: 43px; }
    .author-heading { flex-direction: column; gap: 23px; padding-top: 0; }
    .author-photo { width: 95px; height: 95px; }
    .author-heading h1 { font-size: 44px; }
    .author-heading p { margin-top: 17px; font-size: 17px; }
    .missing-page { padding-block: 43px; }
    .missing-page h1 { font-size: 48px; }
    .missing-page > p:not(.page-label) { font-size: 17px; }
    .missing-actions { gap: 20px; }
}
@media (max-width: 370px) {
    .logo { font-size: 18px; gap: 7px; }
    .menu-button { padding-inline: 8px; }
    .menu-button svg { display: none; }
    .cut-montage { height: 530px; }
    .cut-intro-copy > h1 { font-size: 36px; }
    .cut-intro-copy > p { font-size: 14px; }
    .cut-first-project h2 { font-size: 17px; }
    .cut-hall { top: 35%; }
    .cut-portrait { top: 55%; }
    .cut-detail { top: 38%; }
    .cut-word { top: 50%; }
    .cut-sequence { top: 77%; }
    .search-form { gap: 8px; }
    .search-form button { padding-inline: 12px; }
    .article-heading h1 { font-size: 39px; }
    .hub-heading h1, .catalog-heading h1 { font-size: 41px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
    body { background: #fff; color: #111; }
    .site-header, .site-footer, .toc, .related, .skip { display: none !important; }
    .wrap { width: 100%; max-width: none; }
    .reading-grid { display: block !important; }
    .article-body { max-width: none; }
    .article-heading h1 { color: #111; font-size: 42px; }
    .gh-content, .gh-content p, .gh-content li, .gh-content strong, .gh-content :is(h2, h3, h4), .article-heading > p, .byline, figcaption { color: #111; }
    .gh-content a { color: #333; }
    .gh-content h2 { font-size: 29px; }
    .post-cover { max-width: 650px; }
}

/* Topic editorial bodies: scoped to the taxonomy and tutorial-library sections. */
.hub-editorial { margin-top: 28px; padding-block: 52px 35px; border-top: 2px solid var(--text); color: var(--text); font-size: 18px; line-height: 1.75; overflow-wrap: break-word; }
.hub-editorial > * + * { margin-top: 44px; }
.hub-editorial :is(h2, h3, h4) { color: var(--text); scroll-margin-top: 30px; }
.hub-editorial h2 { max-width: 24ch; font-size: clamp(32px, 3.25vw, 48px); line-height: 1.1; letter-spacing: -.04em; }
.hub-editorial h3 { max-width: 32ch; font-size: 25px; line-height: 1.2; letter-spacing: -.025em; }
.hub-editorial h4 { font-size: 20px; line-height: 1.3; letter-spacing: -.02em; }
.hub-editorial p { max-width: 72ch; color: var(--text); }
.hub-editorial a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.hub-editorial a:hover { color: var(--text); }
.hub-editorial-heading { max-width: 980px; }
.hub-editorial-heading > p { max-width: 70ch; margin-top: 22px; font-size: 20px; line-height: 1.65; }
.hub-editorial-section { padding-top: 34px; border-top: 1px solid var(--line); }
.hub-editorial-section > * + *, .hub-route > * + *, .hub-notice > * + * { margin-top: 16px; }
.hub-editorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 48px; align-items: start; }
.hub-editorial-grid > * { min-width: 0; }
.hub-editorial-grid > section > * + *, .hub-editorial-grid > div > * + * { margin-top: 16px; }
.hub-editorial :is(ul, ol) { margin-block: 20px 0; padding-left: 25px; }
.hub-editorial li + li { margin-top: 12px; }
.hub-editorial li > :is(ul, ol) { margin-top: 12px; }
.hub-editorial .hub-routes { margin-block: 26px 0; padding-left: 35px; }
.hub-routes > li { padding-left: 13px; }
.hub-routes > li::marker { color: var(--accent); font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hub-routes > li + li { margin-top: 27px; }
.hub-routes > li > * + * { margin-top: 10px; }
.hub-editorial .hub-checks { max-width: 72ch; }
.hub-notice { max-width: 980px; padding: 24px 28px; border-left: 3px solid var(--accent); background: var(--panel); }
.hub-notice p { max-width: 70ch; }
.hub-table-wrap { max-width: 100%; margin-top: 24px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.hub-editorial table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.6; }
.hub-editorial :is(th, td) { min-width: 150px; padding: 16px 18px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.hub-editorial th { background: var(--panel); color: var(--text); font-weight: 650; }
.hub-editorial caption { margin-bottom: 13px; color: var(--text); font-weight: 600; text-align: left; }
.hub-editorial details { max-width: 980px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.hub-editorial summary { cursor: pointer; font-size: 20px; font-weight: 600; line-height: 1.5; }
.hub-editorial details > :not(summary) { margin-top: 14px; }
.catalog-learning-path { margin-top: 0; }
@media (max-width: 960px) {
    .hub-editorial { padding-block: 42px 28px; }
    .hub-editorial-grid { grid-template-columns: minmax(0, 1fr); gap: 27px; }
    .hub-editorial-heading > p { font-size: 19px; }
}
@media (max-width: 600px) {
    .hub-editorial { margin-top: 18px; padding-top: 32px; font-size: 17px; line-height: 1.7; }
    .hub-editorial > * + * { margin-top: 32px; }
    .hub-editorial h2 { font-size: 32px; }
    .hub-editorial h3 { font-size: 23px; }
    .hub-editorial-heading > p { margin-top: 18px; font-size: 18px; }
    .hub-editorial-section { padding-top: 27px; }
    .hub-editorial .hub-routes { padding-left: 28px; }
    .hub-routes > li { padding-left: 7px; }
    .hub-routes > li::marker { font-size: 21px; }
    .hub-notice { padding: 19px 20px; }
    .hub-editorial :is(th, td) { min-width: 145px; padding: 12px 14px; }
    .catalog-learning-path { margin-top: 0; }
}
@media print {
    .hub-editorial { border-color: #111; padding-top: 25px; color: #111; }
    .hub-editorial :is(p, a, h2, h3, h4) { color: #111; }
    .hub-editorial-grid { display: block; }
    .hub-editorial-grid > * + * { margin-top: 20px; }
    .hub-table-wrap { overflow: visible; }
}