/* 9.3 applicable rules, with colour roles isolated for 9.4. Layout is preserved. */
#recent-work *{box-sizing: border-box;}
#recent-work .intro{display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 36px;}
#recent-work .eyebrow, #recent-work .serial{display: block; font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 600;}
#recent-work .intro .eyebrow{color: var(--muted); margin-bottom: 12px;}
 #recent-work h2, #recent-work h3{font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -0.04em; margin: 0px; line-height: 1.1;}
#recent-work .intro-mark{font-family: Georgia, serif; font-size: 24px; white-space: nowrap; padding-bottom: 4px;}
#recent-work .intro-mark em{color: var(--green);}
#recent-work .tabs{display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 38px; gap: 20px;}
#recent-work .tab{background: none; border-width: 0px 0px 3px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; text-align: left; padding: 18px 0px 15px; color: var(--muted); font: 14px / 1.4 Arial; cursor: pointer; display: flex; align-items: center; gap: 12px;}
#recent-work .tab-number{font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;}
#recent-work .tab[aria-selected="true"]{color: var(--ink); border-bottom-color: var(--green);}
#recent-work .tab[aria-selected="true"] .tab-number{color: var(--green); font-weight: 700;}
#recent-work .tab:hover{color: var(--green);}
#recent-work button:focus-visible, #recent-work .story:focus-visible{outline: 2px solid var(--green); outline-offset: 5px;}
#recent-work .story-heading{display: grid; grid-template-columns: 110px 1fr; align-items: start; gap: 18px; margin-bottom: 32px;}
#recent-work .serial{padding-top: 9px; color: var(--muted);}
#recent-work h2{font-size: 34px; max-width: 900px;}
#recent-work .spread{position: relative; display: grid; grid-template-columns: minmax(0px, 0.85fr) minmax(0px, 1.55fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
#recent-work .ask{background: var(--ask); color:var(--ask-ink); padding: 36px 38px 26px; display: flex; flex-direction: column;}
#recent-work .ask .eyebrow{color: var(--ask-label); margin-bottom: 30px;}
#recent-work h3{font-size: 40px; max-width: 330px; margin-bottom: 24px;}
#recent-work .ask p{font-size: 16px; line-height: 1.7; margin: 0px; color: var(--ask-muted);}
#recent-work .ask-foot{margin-top: auto; padding-top: 48px; color: var(--green); font-size: 11px; letter-spacing: 0.06em; display: flex; align-items: center; gap: 12px;}
#recent-work .line{display: inline-block; width: 32px; border-top: 1px solid var(--green);}
#recent-work .response{padding: 36px 40px 28px 48px;}
#recent-work .response > .eyebrow{color: var(--muted); margin-bottom: 28px;}
#recent-work .step{display: grid; grid-template-columns: 25px 1fr; gap: 16px; padding: 22px 0px; border-top: 1px solid var(--line);}
#recent-work .step:first-of-type{padding-top: 0px; border-top: 0px;}
#recent-work .step-number{font-family: Georgia, serif; color: var(--muted); font-size: 16px; line-height: 1.5;}
#recent-work h4{margin: 0px 0px 9px; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em;}
#recent-work .step p{margin: 0px; font-size: 15px; line-height: 1.65; color: var(--muted);}
#recent-work .bridge{position: absolute; left: 35.416%; top: 35px; transform: translateX(-50%); width: 34px; height: 34px; background: var(--primary); border-radius: 50%; color: var(--on-primary); display: grid; place-items: center; font-size: 21px; border: 5px solid var(--paper); box-sizing: content-box;}
#recent-work .controls{display: flex; justify-content: space-between; align-items: center; padding-top: 24px; gap: 18px;}
#recent-work .position{font-size: 12px; color: var(--muted);}
#recent-work .next{background: none; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; padding: 6px 0px; color: var(--green); font: 14px Arial; cursor: pointer; border-bottom: 1px solid var(--green);}
#recent-work .next span{padding-left: 16px;}
#recent-work .story[hidden]{display: none;}
@media (max-width: 850px){#recent-work .intro{align-items: start;}
#recent-work .intro-mark{font-size: 18px; padding-top: 6px;}
#recent-work .tabs{gap: 12px;}
#recent-work .tab{font-size: 12px; display: block;}
#recent-work .tab-number{display: block; margin-bottom: 4px;}
#recent-work .story-heading{grid-template-columns: 1fr; gap: 10px;}
#recent-work h2{font-size: 30px;}
#recent-work .serial{padding: 0px;}
#recent-work .spread{grid-template-columns: 1fr;}
#recent-work .ask{padding: 28px;}
#recent-work .ask .eyebrow{margin-bottom: 18px;}
#recent-work .ask h3{max-width: 540px; font-size: 34px;}
#recent-work .ask-foot{padding-top: 26px;}
#recent-work .bridge{inset: auto 24px auto auto; display: none;}
#recent-work .response{padding: 28px;}
#recent-work .response > .eyebrow{margin-bottom: 24px;}
#recent-work .step p{font-size: 16px;}}
@media (max-width: 480px){#recent-work .intro-mark{display: none;}
#recent-work .intro{margin-bottom: 26px;}
#recent-work .tabs{grid-template-columns: repeat(2, 1fr); gap: 0px 20px; margin-bottom: 28px;}
#recent-work .tab{display: flex; gap: 8px; padding: 13px 0px;}
#recent-work .tab-number{margin: 0px;}
#recent-work .ask, #recent-work .response{padding: 25px 22px;}
#recent-work .ask h3{font-size: 32px;}
#recent-work .step{gap: 10px;}
#recent-work h2{font-size: 28px;}
#recent-work .controls{align-items: start;}
#recent-work .next{max-width: 210px; text-align: right; line-height: 1.5;}}
@media print{#recent-work .tabs, #recent-work .controls{display: none;}
#recent-work .story[hidden]{display: block;}
#recent-work .story{break-before: page;}
#recent-work .story:first-of-type{break-before: auto;}
#recent-work .intro{margin-bottom: 20px;}
#recent-work .spread{grid-template-columns: 1fr 1.5fr;}
#recent-work .ask, #recent-work .response{padding: 20px;}
#recent-work .bridge{display: none;}
#recent-work h3{font-size: 28px;}
#recent-work .step p{font-size: 12px;}
#recent-work .ask p{font-size: 13px;}}
#recent-work .intro h2{font-size: 48px; max-width: 900px;}
#recent-work .intro-mark{display: none;}
@media (max-width: 850px){#recent-work .intro h2{font-size: 38px;}}
@media (max-width: 480px){#recent-work .intro h2{font-size: 36px;}}
#recent-work .ask{background: var(--ask);}
#recent-work .ask .eyebrow, #recent-work .response > .eyebrow{margin-bottom: 30px;}
#recent-work .ask .ask-title{padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--ask-line);}
#recent-work .ask .ask-title h3{margin-bottom: 10px;}
#recent-work .ask .ask-title .ask-followup{font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 22px; line-height: 1.3; letter-spacing: -0.025em; color: var(--story-green); margin: 0px;}
#recent-work .ask > p{font-size: 16px; line-height: 1.7; max-width: 52ch;}
#recent-work .ask-foot{display: none;}
@media (max-width: 850px){#recent-work .ask .eyebrow, #recent-work .response > .eyebrow{margin-bottom: 24px;}
#recent-work .ask .ask-title{padding-bottom: 22px; margin-bottom: 22px;}}
#recent-work .response{background:var(--response)}