/* both. design-study paper: one editorial public story, not a playable recruitment UI.
   Explicit case-study diagrams use synthetic UI fragments and CSS only. */

.both-hero {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(225px,.6fr);
  gap: clamp(32px,6vw,96px);
  padding-top: clamp(85px,10vw,155px);
  padding-bottom: clamp(85px,10vw,150px);
  align-items: end;
}
.both-eyebrow, .both-section-label, .both-note-label, .both-index-label {
  color: var(--mineral);
  font-size: .73rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.both-hero h1 {
  max-width: 960px;
  margin: 20px 0 30px;
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(4rem,9vw,9rem);
  line-height: .93;
  font-weight: 400;
  letter-spacing: -.072em;
}
.both-hero h1 em { font-weight: 400; }
.both-deck {
  max-width: 730px;
  margin: 0 0 24px;
  font-size: clamp(1.16rem,2vw,1.65rem);
  line-height: 1.42;
  color: var(--ink-soft);
}
.both-hero-side {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
}
.both-hero-side strong { display: block; margin: 10px 0 14px; font: 400 clamp(1.8rem,3vw,3rem)/1.07 var(--serif); letter-spacing: -.03em; }
.both-hero-side p { margin: 0; line-height: 1.65; color: var(--ink-soft); font-size: .95rem; }
.both-hero-actions { display:flex; gap: 18px 26px; flex-wrap:wrap; align-items:center; margin-top: 35px; }
.both-hero-actions .button { min-height: 46px; }
.both-evidence-band {
  background: var(--paper-deep);
  border-block: 1px solid var(--line);
}
.both-evidence-band-inner {
  display:grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
}
.both-evidence-item {
  padding: 30px clamp(18px,2vw,38px);
  border-right: 1px solid var(--line);
}
.both-evidence-item:first-child { padding-left: 0; }
.both-evidence-item:last-child { border-right: 0; }
.both-evidence-item span { display:block; margin-bottom: 12px; color: var(--mineral); font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.both-evidence-item strong { display:block; font:400 clamp(1.13rem,1.8vw,1.55rem)/1.25 var(--serif); color:var(--ink); }
.both-toc {
  padding-top: clamp(36px,5vw,72px);
  padding-bottom: clamp(36px,5vw,72px);
  display:grid; grid-template-columns: minmax(0,.52fr) minmax(0,1fr);
  gap: 42px;
}
.both-toc h2 { margin: 0; font:400 clamp(2rem,3.5vw,3.5rem)/1.05 var(--serif); letter-spacing:-.04em; }
.both-toc-links { display: grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
.both-toc-links a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  padding: 15px 0;
  color:var(--ink);
  text-decoration: none;
}
.both-toc-links a:hover { color: var(--mineral-deep); }
.both-toc-links a::after { content:"";width:14px;height:14px;flex:0 0 14px;background:currentColor;mask:url('/assets/icons/arrow-right.svg') center/contain no-repeat;-webkit-mask:url('/assets/icons/arrow-right.svg') center/contain no-repeat; }
.both-section {
  padding-top: clamp(74px,10vw,135px);
  padding-bottom: clamp(74px,10vw,135px);
  border-top: 1px solid var(--line);
}
.both-section--shade { background: var(--paper-deep); }
.both-section-header { display:grid; grid-template-columns: minmax(160px,.35fr) minmax(0,1fr); gap:clamp(25px,5vw,85px); align-items:start; }
.both-section-label { margin: 8px 0 0; }
.both-section-content { min-width:0; }
.both-section-content h2 {
  margin: 0 0 25px;
  max-width:850px;
  font: 400 clamp(2.7rem,5.5vw,6rem)/1.035 var(--serif);
  color:var(--ink);
  letter-spacing:-.05em;
  text-wrap:balance;
}
.both-section-content h3 { margin:32px 0 14px; font:400 clamp(1.8rem,2.9vw,3rem)/1.12 var(--serif); letter-spacing:-.025em; }
.both-section-content > p, .both-section-content > .both-prose p {
  max-width:800px; font-size:clamp(1.04rem,1.55vw,1.17rem); line-height:1.73; color:var(--ink-soft); margin:0 0 22px;
}
.both-section-content strong { color: var(--ink); }
.both-quote { max-width:840px; margin:42px 0; padding:12px 0 12px 30px; border-left:3px solid var(--mineral); font:400 clamp(1.6rem,2.8vw,2.8rem)/1.25 var(--serif); letter-spacing:-.025em; }
.both-principles { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 35px;margin-top:46px; }
.both-principle { border-top:1px solid var(--line);padding-top:22px; }
.both-principle small { display:block;color:var(--mineral);font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:13px; }
.both-principle strong { font-size:1.08rem; }
.both-principle p { color:var(--ink-soft);line-height:1.6;margin:9px 0 0; }
.both-concept-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;margin:44px 0 35px; }
.both-concept {
  min-width:0; padding:0; border:1px solid var(--line);background:var(--paper-light);
}
.both-concept-head { padding:22px 24px 0; }
.both-concept-head small { display:block;font-size:.67rem;letter-spacing:.12em;color:var(--mineral);font-weight:700;text-transform:uppercase; }
.both-concept-head h3 { font:400 clamp(1.5rem,2.2vw,2.4rem)/1.1 var(--serif); margin:10px 0 0;letter-spacing:-.02em; }
.both-concept-visual { margin:20px 24px;min-height:195px;display:flex;align-items:center;gap:0;overflow:hidden;position:relative; }
.both-concept-visual p { margin:0; }
.both-concept--voices .both-concept-visual { background:#eae7ed;color:#24212c; }
.both-voice-half { flex:1;min-width:0;align-self:stretch;padding:22px 17px;display:flex;flex-direction:column;justify-content:space-between; }
.both-voice-half:first-child { background:#ff806a; }
.both-voice-half:last-child { background:#27256e;color:#fff; }
.both-voice-half small { text-transform:uppercase;font-size:.55rem;letter-spacing:.13em;font-weight:750; }
.both-voice-half strong { font-size:clamp(1.2rem,2vw,2rem);line-height:1.05;font-weight:750; }
.both-concept--dialogue .both-concept-visual { flex-direction:column;justify-content:space-around;align-items:flex-start;gap:12px;background:#ede9e1;color:#20211f;padding:22px 25px; }
.both-concept--dialogue .both-concept-visual strong { font:400 clamp(1.5rem,3vw,2.7rem)/1.03 var(--serif); }
.both-concept--dialogue .both-concept-visual span { align-self:flex-end;border-bottom:1px solid #333;padding-bottom:8px;max-width:75%;font-size:.8rem; }
.both-concept--weave .both-concept-visual { flex-direction:column;justify-content:center;gap:0; }
.both-concept--weave .both-concept-visual div { width:100%; padding:22px 25px;font-weight:750; }
.both-concept--weave .both-concept-visual div:first-child { background:#e79d83;color:#271f29;transform:translateX(-8%);width:115%; }
.both-concept--weave .both-concept-visual div:last-child { background:#574e75;color:#fff;transform:translateX(8%);width:115%;margin-top:-8px; }
.both-concept--stencil .both-concept-visual { background:#161917;color:#f3f1e8;padding:14px 22px; }
.both-concept--stencil .both-concept-visual strong {font:800 clamp(3rem,7vw,6rem)/.83 var(--sans);letter-spacing:-.1em;text-transform:uppercase;opacity:.85;transform:translateX(-.23em); }
.both-concept--stencil .both-concept-visual small {position:absolute;right:12px;bottom:18px;border:1px solid #e6e7e0;padding:6px 11px;color:#fff;letter-spacing:.08em;text-transform:uppercase; }
.both-concept-note { padding:0 24px 24px;line-height:1.55;color:var(--ink-soft);font-size:.89rem; }
.both-footnote { color:var(--mineral-deep);font-size:.83rem;line-height:1.6;max-width:840px; }
.both-archive { margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 19px; }
.both-archive li { list-style:none;border-top:1px solid var(--line);padding:14px 0;color:var(--ink-soft);font-size:.85rem;line-height:1.45; }
.both-archive ol { margin:0;padding:0; }
.both-archive li strong { display:block;color:var(--ink);margin-top:4px; }
.both-archive-index {font-size:.68rem;letter-spacing:.1em;color:var(--mineral);font-weight:750;}
.both-stages {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:45px 0 28px;}
.both-stage {padding:22px;border:1px solid var(--line);background:var(--paper-light);min-height:255px;display:flex;flex-direction:column;gap:20px;}
.both-stage small {color:var(--mineral);letter-spacing:.11em;text-transform:uppercase;font-size:.68rem;font-weight:750;}
.both-stage strong {font:400 clamp(1.65rem,2.5vw,2.6rem)/1.05 var(--serif);}
.both-stage p {margin:auto 0 0;font-size:.89rem;line-height:1.57;color:var(--ink-soft);}
.both-turn {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin:45px 0 12px;align-items:stretch;}
.both-turn > div {padding:30px;border:1px solid var(--line);background:var(--paper-light);}
.both-turn .both-turn-failed {background:var(--paper-deep);}
.both-turn small {letter-spacing:.1em;color:var(--mineral);font-size:.67rem;text-transform:uppercase;font-weight:700;}
.both-turn strong {display:block;margin:25px 0 15px;font:400 clamp(2rem,3vw,3.4rem)/1.03 var(--serif);}
.both-turn p {margin:0;color:var(--ink-soft);line-height:1.6;}
.both-conversation {margin:42px 0;display:grid;grid-template-columns: minmax(0,.42fr) minmax(0,1fr);gap:0;border:1px solid var(--line);background:var(--paper-light);}
.both-conversation-aside {padding:24px;border-right:1px solid var(--line);background:var(--paper-deep);}
.both-conversation-aside strong {display:block;font:400 2rem/1 var(--serif);margin:12px 0 30px;}
.both-conversation-aside ul {margin:0;padding:0;list-style:none;display:grid;gap:10px;}
.both-conversation-aside li {padding:10px 0;border-top:1px solid var(--line);font-size:.85rem;line-height:1.4;}
.both-conversation-aside li span {float:right;font-size:.72rem;color:var(--mineral);}
.both-conversation-content {padding:28px;min-width:0;}
.both-conversation-content .both-note-label {margin:0 0 20px;}
.both-message {padding:16px 18px;border:1px solid var(--line);margin:0 0 12px;max-width:560px;}
.both-message--candidate {background:var(--paper-deep);}
.both-message--system {border-left:3px solid var(--mineral);}
.both-message strong {display:block;font-size:.78rem;margin-bottom:9px;}
.both-message p {font-size:.88rem;line-height:1.55;margin:0;color:var(--ink-soft);}
.both-message-actions {display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 0;color:var(--ink);font-size:.75rem;font-weight:700;}
.both-message-actions span {border:1px solid var(--line);padding:7px 10px;}
.both-safeguards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;margin:40px 0 25px;}
.both-safeguards div {border-top:1px solid var(--line);padding-top:18px;}
.both-safeguards strong {display:block;margin-bottom:10px;}
.both-safeguards p {color:var(--ink-soft);line-height:1.6;margin:0;font-size:.93rem;}
.both-close {background:var(--night);color:var(--white-soft);padding:clamp(80px,10vw,150px) 0;}
.both-close-inner {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(35px,6vw,100px);align-items:end;}
.both-close h2 {font:400 clamp(3rem,5vw,5.8rem)/1.03 var(--serif);letter-spacing:-.06em;margin:0 0 24px;color:var(--white-soft);}
.both-close p {max-width:760px;color:#c6cac3;line-height:1.65;font-size:1.04rem;}
.both-close-links {display:grid;}
.both-close-links a {padding:20px 0;border-top:1px solid var(--night-line);color:var(--white-soft);text-decoration:none;display:flex;justify-content:space-between;gap:18px;align-items:center;}
.both-close-links a:last-child {border-bottom:1px solid var(--night-line);}
.both-close-links a:hover {color:var(--white-soft);opacity:.75;}
@media(max-width:1050px){
  .both-hero {grid-template-columns:1fr;}
  .both-hero-side {max-width:630px;}
  .both-section-header {grid-template-columns:160px minmax(0,1fr);}
  .both-archive {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .both-hero {padding-top:85px;padding-bottom:75px;}
  .both-hero h1 {font-size:clamp(4rem,15vw,7rem);}
  .both-evidence-band-inner {grid-template-columns:1fr;}
  .both-evidence-item,.both-evidence-item:first-child {padding:21px 0;border-right:0;border-bottom:1px solid var(--line);}
  .both-evidence-item:last-child{border-bottom:0;}
  .both-toc,.both-section-header,.both-close-inner {grid-template-columns:1fr;gap:22px;}
  .both-toc-links{grid-template-columns:1fr;}
  .both-section{padding-block:70px;}
  .both-principles,.both-concept-grid,.both-turn,.both-safeguards{grid-template-columns:1fr;}
  .both-stages{grid-template-columns:1fr;}
  .both-stage{min-height:unset;}
  .both-conversation{grid-template-columns:1fr;}
  .both-conversation-aside{border-right:0;border-bottom:1px solid var(--line);}
  .both-conversation-aside strong{margin-bottom:12px;}
  .both-conversation-aside ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 20px;}
}
@media(max-width:480px){
  .both-hero h1{font-size:clamp(3.85rem,15vw,5.25rem);}
  .both-deck{font-size:1.12rem;}
  .both-concept-visual{margin:15px;min-height:177px;}
  .both-concept-head{padding:18px 17px 0;}
  .both-concept-note{padding:0 17px 18px;}
  .both-archive{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 15px;}
  .both-archive li{font-size:.78rem;}
  .both-conversation-content{padding:17px;}
  .both-conversation-aside{padding:17px;}
  .both-message{padding:12px;}
  .both-conversation-aside ul{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){ .both-concept *{transition:none!important;animation:none!important;} }
@media print{.both-hero,.both-section{padding-block:35px;}.both-toc{display:none;}.both-concept-visual{print-color-adjust:exact;-webkit-print-color-adjust:exact;} }