/* Tablet and phone layer. Loaded after styles.css and demo.css, so this is the one place
   that sets layout and reading sizes below 1100px.
   From 960px down the hero stacks and text reads at fixed sizes:
   running text 16px, notes 14px, labels 11px (never below 10px). */

@media(max-width:1100px){
.container{width:calc(100% - 72px)}
.hero{gap:35px;padding-top:65px;min-height:680px}
.evidence-stage{padding-right:5px}
.section-heading{gap:60px}
.approach-grid{gap:60px}
.people-grid{gap:30px}
.person{grid-template-columns:140px 1fr;gap:20px}
.person-photo img{height:205px}
}

@media(max-width:960px){
.container{width:calc(100% - 48px)}
.header-inner{height:75px}
nav{gap:22px}
nav .nav-contact{margin-left:0;gap:16px}

.hero{display:flex;flex-direction:column;align-items:stretch;gap:44px;min-height:0;padding-top:56px;padding-bottom:64px}
.hero-copy{max-width:600px}
.hero h1{font-size:clamp(52px,8.4vw,76px)}
.hero-description{font-size:16px;line-height:1.7;max-width:560px}
.evidence-stage{align-self:flex-start;width:100%;max-width:540px;padding:0}
.stage-caption,.stage-note{font-size:13px}
.evidence-tabs button{font-size:14px}
.record-label{font-size:12px}
.record-description,.interpretation p,.source-check,.original-source{font-size:14px}
.source-check strong,.record-field{font-size:13px}
.original-source small{font-size:12px}
.evidence-card-top .micro-label,.source-badge,.record-label>span:last-child:not(.record-square),.interpretation .micro-label,.evidence-card-bottom{font-size:11px}

.context-strip .micro-label{font-size:11px}
.context-strip p{font-size:17px}

.section-space{padding-block:76px}
.section-heading{gap:36px}
.section-intro{font-size:16px}
.approach-grid{gap:40px}
.approach-intro>p:not(.eyebrow){font-size:16px}
.method-step{gap:17px}
.method-step>span{font-size:11px}
.method-step h3{font-size:19px}
.method-step p{font-size:16px;line-height:1.7}
.ai-note p{font-size:16px;line-height:1.7}

/* People: a compact portrait, role and name row, with the biography across the full width */
.people-lead{font-size:18px}
.people-grid{gap:32px}
.person{grid-template-columns:88px 1fr;column-gap:18px;row-gap:0;align-items:start}
.person-content{display:contents}
.person-photo{grid-row:1/3}
.person-photo img{height:110px;object-position:50% 22%}
.person .micro-label{grid-column:2;grid-row:1;align-self:end;margin-bottom:4px;font-size:11px}
.person h3{grid-column:2;grid-row:2}
.person p:not(.micro-label){grid-column:1/-1;font-size:16px;line-height:1.7;margin-top:16px}
.person p:not(.micro-label)+p{margin-top:10px}

.work-card p,.work-note>p:first-child{font-size:16px}
.work-card .work-dated,.work-caption{font-size:14px}
.work-note{grid-template-columns:1fr;gap:12px}

.contact-section{gap:36px}
.contact-email{font-size:22px}
.footer-top{gap:28px}
.footer-bottom{font-size:12px}

/* The worked example */
.demo-topline,.demo-bottomline{padding-inline:24px;font-size:13px}
.demo-question,.demo-panel{padding:25px}
.record-picker{padding-inline:25px}
.demo-tabs{padding-inline:25px;gap:16px}
.demo-tabs button{font-size:14px}
.record-choice span{font-size:15px}
.record-choice small{font-size:13px}
.demo-panel p{font-size:16px;line-height:1.7}
.record-context>p{font-size:15px}
.connection-line p,.demo-panel .source-location,.demo-panel .scope-note,.demo-caption{font-size:14px}
.change-steps{grid-template-columns:1fr;gap:30px;max-width:560px}
.change-step+.change-step:before{content:'↓';content:'↓'/'';left:20px;top:-26px;transform:none}
.change-step p{font-size:15px}
}

@media(max-width:760px){
html{scroll-padding-top:85px}
.container{width:calc(100% - 40px)}
.header-inner{height:70px}
.wordmark{font-size:27px}
.menu-toggle{display:flex;align-items:center;gap:13px;font-size:12px;background:none;min-height:44px;padding:0}
.site-header nav{display:none;position:absolute;left:0;top:70px;width:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:18px 20px 25px;box-shadow:0 15px 25px rgb(34 37 43 / 3%);flex-direction:column;align-items:stretch;gap:0;font-size:16px}
.site-header nav.open{display:flex}
nav>a{padding:12px 0}
.nav-contact{justify-content:space-between}
nav>a:after{display:none}

.hero{gap:36px;padding-top:44px;padding-bottom:48px}
.hero .eyebrow{margin-bottom:22px}
.hero h1{font-size:clamp(44px,13.4vw,60px);margin-left:-2px}
.hero-intro{font-size:18px;margin-top:22px}
.hero-description{margin-top:12px}
.button-dark{margin-top:24px}
.evidence-stage{max-width:none}
.evidence-card-top{padding:16px 20px}
.evidence-tabs{padding-inline:20px}
.evidence-panel{padding:22px 20px;min-height:0}
.evidence-panel h2{font-size:34px}
.source-panel h2{font-size:30px}
.evidence-card-bottom{padding-inline:20px}

.context-strip{justify-items:start;text-align:left;padding-block:20px}
.context-strip p{font-size:16px;line-height:1.4}

.section-space{padding-block:48px}
.section-heading{display:block;margin-bottom:28px}
.eyebrow{margin-bottom:18px}
.section-intro{margin-top:20px;max-width:none}
.approach-grid{display:block}
.approach-intro>p:not(.eyebrow){margin-top:20px;max-width:none}
.method-list{margin-top:32px}
.method-step{gap:16px;padding-block:16px}
.method-step:first-child{border-top:1px solid var(--line);padding-top:16px}
.method-step p{margin-top:6px}
.ai-note{gap:14px;margin-top:8px;padding-top:20px}
.ai-note strong{display:block;margin-bottom:4px}

.work-grid{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px}
.work-card{grid-row:auto;grid-template-rows:none;padding:22px 20px}

.people-lead{font-size:17px;padding-top:22px}
.people-grid{grid-template-columns:1fr;gap:36px;margin-top:24px}

.contact-section{display:block}
.contact-copy{margin-top:24px}
.contact-email{font-size:24px;margin-top:20px;max-width:100%}
.footer-top{display:grid;gap:16px;padding-block:27px}
.footer-bottom{align-items:flex-start;flex-direction:column;gap:12px;padding-block:19px}
.footer-bottom>div{flex-wrap:wrap}

.demo-section{padding-bottom:24px}
.demo-topline,.demo-bottomline{padding:15px 20px;font-size:12px}
.demo-question{padding:22px 20px}
.record-picker{gap:8px;padding:0 20px 20px}
.record-choice{min-height:0;padding:12px 14px}
.record-choice span{font-size:14px}
.record-choice small{font-size:12px}
.demo-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;padding-inline:20px}
.demo-tabs button{padding-block:13px;min-height:46px}
.demo-tabs button[aria-selected=true]:after{height:2px}
.demo-panel{padding:22px 20px;min-height:0}
.demo-panel h4{font-size:23px}
.meaning-grid{grid-template-columns:1fr;gap:22px}
.demo-panel blockquote{font-size:19px;padding-left:16px}
.demo-bottomline{justify-content:flex-start}
.hero-description,.section-intro,.approach-intro>p:not(.eyebrow),.method-step p,.ai-note p,.person p:not(.micro-label),.demo-panel p,.contact-copy>p:first-child{line-height:1.6}
}

@media(max-width:360px){
.container{width:calc(100% - 32px)}
.hero-intro{font-size:17px}
.evidence-card-top,.evidence-panel,.evidence-card-bottom,.evidence-tabs{padding-inline:16px}
.contact-email{font-size:22px}
.record-context{padding:14px}
.demo-tabs{gap:0 14px}
.demo-tabs button{font-size:13px}
.record-picker{grid-template-columns:1fr}
.person{grid-template-columns:76px 1fr;column-gap:14px}
.person-photo img{height:96px}
}