/* Natura-1 widgets: one type scale, one card anatomy, and in-row expansion for the three 2×3 galleries
   (3.2 workflows, 3.3 cases, 3.4 observations). Loads last, after natura-widgets.css and natura-article.css.
   Cards sit directly on the paper; the open panel is a rounded sheet with a notch under the selected card. */

/* ---------- Type scale inside widgets ---------- */
.natura-article .performance-section>h3{font:600 26px/1.2 var(--sans);letter-spacing:-.016em}
.natura-article .performance-thesis{font:400 20px/1.5 var(--serif)}
.natura-article .performance-copy{max-width:none;font-size:var(--text);line-height:1.6;margin-bottom:32px}
.natura-article .performance-copy p{margin:0 0 1em}
.natura-article .performance-copy p:last-child{margin-bottom:0}
.natura-article .open-prompt-copy{font:400 var(--text)/1.6 var(--serif)}
.natura-article .open-prompt-copy p{margin:0 0 1em}
.natura-article .study-intent>p{font:italic 400 18px/1.5 var(--serif);margin:10px 0 18px}
.natura-article :is(.study-observation h4,.study-observation h5,.demo-narrative h4,.observation-heading h4,.open-case-caption>h4,.benchmark-overall h4,.performance-subheading,.benchmark-placeholder h3,.archive-card h4,.case-placeholder p){font:600 21px/1.25 var(--sans);letter-spacing:-.012em;text-wrap:balance}
.natura-article .demo-narrative h4{margin:0 0 18px}
.natura-article .open-case-caption>h4{margin:12px 0 18px}
.natura-article .performance-subheading{margin:28px 0 18px}
.natura-article :is(.film-heading h4,.film-heading h5,.benchmark-category h4,.open-step-title){font:600 18px/1.3 var(--sans);letter-spacing:-.01em}
.natura-article .open-step-title>span{font:400 10.5px/1.5 var(--mono);color:var(--muted);letter-spacing:.04em}
.natura-article .training-example h5{font:500 15px/1.35 var(--sans)}
.natura-article .frame-label{font:italic 400 24px/1.1 var(--serif)}
.natura-article :is(.study-observation,.case-analysis,.case-note,.comparison-copy,.open-case-copy,.open-step-copy,.observation-copy,.demo-narrative) p,
.natura-article .open-case-caption>p{font:400 16px/1.6 var(--serif);max-width:none}
.natura-article .demo-narrative{max-width:760px;margin-inline:auto;font:400 16px/1.6 var(--serif)}
.natura-article .demo-narrative p{margin:0 0 1em}
.natura-article .demo-narrative p:last-child{margin-bottom:0}
.natura-article .observation-copy{font:400 16px/1.6 var(--serif)}
.natura-article .observation-copy p{max-width:none;margin:0 0 1em}
.natura-article .study-observation p{margin-bottom:.8em}
.natura-article .study-observation .study-significance{font:400 13px/1.5 var(--sans);color:var(--muted)}
.natura-article :is(.thumb-subtitle,.case-tab-summary,.case-tab-status){font:400 12px/1.45 var(--sans);color:var(--muted);letter-spacing:0}
.natura-article :is(.thumb-title,.observation-index strong,.open-case-browser .observation-index strong){display:block;font:500 15px/1.3 var(--sans);letter-spacing:-.005em;min-height:0;margin:12px 0 3px;color:var(--ink);transition:color .2s}
.natura-article :is(.thumb-number,.thumb-duration,.case-tab-number){font:400 10.5px/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.natura-article .chapter{font:400 12px/1.5 var(--sans)}
.natura-article .chapter span{font:400 10px/1.6 var(--mono)}
.natura-article .constraint-tags span{font:400 10px/1.5 var(--mono);letter-spacing:.03em;border-radius:999px;padding:4px 9px}
.natura-article .constraint-tags{gap:8px}
.natura-article .comparison-constraints{padding:18px 22px 0;gap:6px}
.natura-article .comparison-constraints span{padding:4px 7px}
.natura-article .instruction-comparison{padding-top:22px}
.natura-article .execution-protocol{font:400 10.5px/1.6 var(--mono)}
.natura-article .open-step-request{font:400 12px/1.6 var(--mono)}
.natura-article .open-case-request>p{font:400 13px/1.7 var(--mono);max-width:none}
.natura-article .open-related-case{font:400 13px/1.6 var(--sans)}
.natura-article :is(.training-example p,.training-additional,.recording-context,.film-note){font:400 12.5px/1.55 var(--sans)}
.natura-article .playback-status{font:400 12px/1.6 var(--sans)}
.natura-article .scaling-tooltip-title{font:400 11px/1.5 var(--sans)}

/* ---------- Card anatomy shared by every gallery ---------- */
.natura-article .study-thumb{flex-basis:auto;opacity:1;color:var(--ink);border:0;border-bottom:0;padding:0;background:none;transition:none}
.natura-article .thumb-image{display:block;position:relative;overflow:hidden;background:#e4e5df;aspect-ratio:16/9;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(36,37,37,.08);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1)}
.natura-article :is(.demo-grid,.observation-gallery,.instruction-paired,.observation-index) .thumb-image img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center top;border-radius:10px;opacity:.94;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .3s}
.natura-article :is(.study-thumb,.observation-index button):hover .thumb-image{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(36,37,37,.1),0 14px 28px -16px rgba(36,37,37,.35)}
.natura-article :is(.study-thumb,.observation-index button):hover .thumb-image img{transform:scale(1.035);opacity:1}
.natura-article :is(.study-thumb,.observation-index button):is([aria-selected=true]:not([aria-expanded]),[aria-expanded=true]) .thumb-image{transform:none;box-shadow:0 0 0 1.5px var(--ink),0 0 0 4px var(--paper)}
.natura-article :is(.study-thumb,.observation-index button):is([aria-selected=true]:not([aria-expanded]),[aria-expanded=true]) .thumb-image img{opacity:1}
.natura-article :is(.study-thumb,.observation-index button):focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:12px}
.natura-article :is(.thumb-number,.case-tab-number,.thumb-duration){position:absolute;margin:0;padding:5px 8px;color:#fff;background:rgba(20,21,20,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px}
.natura-article :is(.thumb-number,.case-tab-number){left:10px;top:10px;bottom:auto}
.natura-article .thumb-duration{right:10px;bottom:10px}
/* Galleries nested in 3.4 keep a boxed container, now with soft corners. */
.natura-article .case-study{border-radius:14px}
.natura-article :is(.benchmark-results,.teacher-scaling){border-radius:14px}
.natura-article .observation-gallery .study-selector{padding:18px 24px 22px}
.natura-article .observation-gallery .study-thumbs{gap:16px}
.natura-article .observation-gallery .study-thumb{opacity:1}
.natura-article .study-selector .study-controls button{width:34px;height:30px;border:1px solid rgba(36,37,37,.18);border-radius:999px;background:transparent;transition:background .15s,color .15s,border-color .15s}
.natura-article .study-selector .study-controls button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- In-row expansion: the active panel opens directly under the card's own row ---------- */
.natura-article .demo-grid,
.natura-article .instruction-paired,
.natura-article [data-case-browser]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;align-items:stretch;padding:0;margin:32px 0 24px;border:0;border-radius:0;background:none}
.natura-article .demo-grid{margin-top:0}
.natura-article .instruction-paired{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px;margin-top:32px;overflow:visible}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector,
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs,
.natura-article [data-case-browser]>.observation-index{display:contents}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.selector-heading{grid-column:1/-1;order:-10;display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 20px;padding:0 0 14px;background:none;border-bottom:1px solid var(--line)}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb,
.natura-article [data-case-browser]>.observation-index>button:nth-child(n){position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;order:var(--card-order,100);min-width:0;margin:0;padding:0 0 26px;border:0;background:none;color:var(--ink);text-align:left;opacity:1;cursor:pointer;scroll-margin-top:96px}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:nth-child(1),.natura-article [data-case-browser]>.observation-index>button:nth-child(1){--card-order:10}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:nth-child(2),.natura-article [data-case-browser]>.observation-index>button:nth-child(2){--card-order:20}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:nth-child(3),.natura-article [data-case-browser]>.observation-index>button:nth-child(3){--card-order:30}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:nth-child(4),.natura-article [data-case-browser]>.observation-index>button:nth-child(4){--card-order:40}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:nth-child(5),.natura-article [data-case-browser]>.observation-index>button:nth-child(5){--card-order:50}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:nth-child(6),.natura-article [data-case-browser]>.observation-index>button:nth-child(6){--card-order:60}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:nth-child(7),.natura-article [data-case-browser]>.observation-index>button:nth-child(7){--card-order:70}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:nth-child(8),.natura-article [data-case-browser]>.observation-index>button:nth-child(8){--card-order:80}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:nth-child(9),.natura-article [data-case-browser]>.observation-index>button:nth-child(9){--card-order:90}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:hover,
.natura-article [data-case-browser]>.observation-index>button:nth-child(n):hover{background:none}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb[aria-selected=true],
.natura-article [data-case-browser]>.observation-index>button:nth-child(n)[aria-selected=true]{background:none;border:0}
.natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb:focus-visible,
.natura-article [data-case-browser]>.observation-index>button:nth-child(n):focus-visible{outline-offset:-2px;border-radius:12px}
.natura-article :is(:is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb,[data-case-browser]>.observation-index>button) :is(.thumb-subtitle,.case-tab-summary,.case-tab-status){color:var(--muted)}
@keyframes natura-notch{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.natura-article :is(.demo-grid,.instruction-paired)>.study-panel:not([hidden]),
.natura-article [data-case-browser]>[role=tabpanel]:not([hidden]){display:block;position:relative;grid-column:1/-1;order:var(--panel-order,1000);min-width:0;max-width:none;width:auto;margin:0 0 28px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.natura-article .sheet-inner{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(36,37,37,.04),0 18px 40px -28px rgba(36,37,37,.25);overflow:hidden}
.natura-article .sheet-inner>.observation-gallery:first-child{border-top:0}
/* Notch: the sheet's own top rule opens and rises toward the selected card. Two stacked triangles: line-coloured outline, white core. */
.natura-article :is(.demo-grid,.instruction-paired)>.study-panel:not([hidden])::before,
.natura-article :is(.demo-grid,.instruction-paired)>.study-panel:not([hidden])::after,
.natura-article [data-case-browser]>[role=tabpanel]:not([hidden])::before,
.natura-article [data-case-browser]>[role=tabpanel]:not([hidden])::after{content:'';position:absolute;left:var(--notch-x,50%);width:0;height:0;border-style:solid;border-color:transparent;pointer-events:none;animation:natura-notch .28s cubic-bezier(.2,.7,.2,1) both}
.natura-article :is(.demo-grid,.instruction-paired)>.study-panel:not([hidden])::before,
.natura-article [data-case-browser]>[role=tabpanel]:not([hidden])::before{top:-9px;margin-left:-9px;border-width:0 9px 9px 9px;border-bottom-color:var(--line)}
.natura-article :is(.demo-grid,.instruction-paired)>.study-panel:not([hidden])::after,
.natura-article [data-case-browser]>[role=tabpanel]:not([hidden])::after{top:-8px;margin-left:-8px;border-width:0 8px 10px 8px;border-bottom-color:#fff;z-index:1}
/* Every sheet is white where the notch meets it. */
.natura-article .sheet-inner .observation-gallery,
.natura-article .sheet-inner .observation-gallery .study-selector,
.natura-article .sheet-inner .film-heading{background:#fff}
.natura-article .is-closing::before,
.natura-article .is-closing::after{display:none}
.natura-article :is(.demo-grid,.instruction-paired)[data-panel-last=true]>.study-panel:not([hidden]),
.natura-article [data-case-browser][data-panel-last=true]>[role=tabpanel]:not([hidden]){margin-bottom:0}
.natura-article :is(.demo-grid,.instruction-paired) .film-heading{padding:16px 22px;background:#fff;border-bottom:1px solid var(--line)}
.natura-article .demo-grid .study-film{background:#111}
.natura-article .demo-grid .demo-caption{padding:30px 40px 34px;background:#fff}
.natura-article .observation-heading{padding:24px 22px 0;margin-bottom:14px}
.natura-article .observation-copy{padding:0 22px;margin-bottom:22px}
.natura-article [data-case-browser]>[role=tabpanel] .observation-gallery{border-radius:0;border-top:1px solid var(--line)}
.natura-article [data-case-browser]>[role=tabpanel] .observation-gallery .study-selector{border-radius:0}
.natura-article .observation-browser{margin:32px 0 24px}
.natura-article .open-sequence{padding:22px 22px 0}
/* Inside a sheet, a film that sits on the white mat is inset and softly rounded; films that run edge to edge stay square. */
.natura-article .open-single{padding:22px 22px 0}
.natura-article :is(.open-sequence,.open-single,.comparison-player) .study-film{border-radius:8px;overflow:hidden}
.natura-article .open-case-caption{padding:26px 22px 28px}

@media(max-width:800px){
  .natura-article .demo-grid,
  .natura-article .instruction-paired,
  .natura-article [data-case-browser]{gap:0 14px;margin-left:0;margin-right:0}
  .natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb,
  .natura-article [data-case-browser]>.observation-index>button:nth-child(n){padding-bottom:22px}
  .natura-article :is(.demo-grid,.instruction-paired)>.study-panel:not([hidden]),
  .natura-article [data-case-browser]>[role=tabpanel]:not([hidden]){margin-bottom:22px}
  .natura-article .sheet-inner{border-radius:12px}
  .natura-article .demo-grid .demo-caption{padding:26px 24px 30px}
  .natura-article .case-study{border-radius:12px}
}
@media(max-width:600px){
  .natura-article .demo-grid,
  .natura-article .instruction-paired,
  .natura-article [data-case-browser]{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
  .natura-article :is(.demo-grid,.instruction-paired)>.study-selector>.study-thumbs>.study-thumb,
  .natura-article [data-case-browser]>.observation-index>button:nth-child(n){padding-bottom:18px}
  .natura-article :is(.demo-grid,.instruction-paired)>.study-panel:not([hidden]),
  .natura-article [data-case-browser]>[role=tabpanel]:not([hidden]){margin-bottom:18px}
  .natura-article .sheet-inner{border-radius:10px}
  .natura-article :is(.thumb-title,.observation-index strong,.open-case-browser .observation-index strong){font-size:14px;margin-top:10px}
  .natura-article :is(.thumb-subtitle,.case-tab-summary,.case-tab-status){font-size:11.5px}
  .natura-article .thumb-image,
  .natura-article :is(.demo-grid,.observation-gallery,.instruction-paired,.observation-index) .thumb-image img{border-radius:8px}
  .natura-article :is(.thumb-number,.case-tab-number,.thumb-duration){padding:4px 7px;font-size:10px}
  .natura-article :is(.thumb-number,.case-tab-number){left:8px;top:8px}
  .natura-article .thumb-duration{right:8px;bottom:8px}
  .natura-article .demo-grid .demo-caption{padding:22px 18px 26px}
  .natura-article .demo-grid .film-heading{padding:14px 18px}
  .natura-article .observation-heading{padding:20px 18px 0}
  .natura-article .observation-copy{padding:0 18px}
  .natura-article .open-sequence,
  .natura-article .open-single{padding:18px 18px 0}
  .natura-article .comparison-constraints{padding:16px 18px 0}
  .natura-article .open-case-caption{padding:22px 18px 24px}
}
@media print{
  .natura-article .demo-grid,
  .natura-article .instruction-paired,
  .natura-article [data-case-browser]{display:block}
  .natura-article :is(.demo-grid,.instruction-paired)>.study-selector,
  .natura-article [data-case-browser]>.observation-index{display:none}
  .natura-article .sheet-inner{box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  .natura-article .thumb-image,
  .natura-article :is(.demo-grid,.observation-gallery,.instruction-paired,.observation-index) .thumb-image img{transition:none}
  .natura-article :is(.study-thumb,.observation-index button):hover .thumb-image{transform:none}
  .natura-article :is(.study-thumb,.observation-index button):hover .thumb-image img{transform:none}
  .natura-article :is(.demo-grid,.instruction-paired)>.study-panel:not([hidden])::before,
  .natura-article :is(.demo-grid,.instruction-paired)>.study-panel:not([hidden])::after,
  .natura-article [data-case-browser]>[role=tabpanel]:not([hidden])::before,
  .natura-article [data-case-browser]>[role=tabpanel]:not([hidden])::after{animation:none}
}