@charset "UTF-8";
/* ギュられる。 design system.
   One vocabulary for every page: paper background, ink rules, serif headings, white cards with a hairline border,
   pill-shaped labels, one corner radius, and a small set of accent colours that always mean the same thing.
   Order: tokens → base → layout (masthead, main, footer) → primitives (buttons, labels, cards, tables, figures) → pages → breakpoints. */

:root{
  /* Colour. Accents keep one meaning across the site. */
  --ink:#1b1e1c;--ink-soft:#3f4542;--muted:#5f6662;--line:#deddd6;--paper:#fafaf7;--tint:#f0f0eb;--white:#fff;
  --deep:#244b3d;                                                /* site green: labels, focus, kickers */
  --alert:#b3392b;--alert-tint:#f8e4e0;--alert-soft:#f2bfb3;    /* cuts, observed use, few openings */
  --blue:#3d5a80;--blue-tint:#e2ebf5;--blue-soft:#c3d5ea;        /* public statistics, many openings */
  --purple:#4b4380;--purple-tint:#e7e3f4;--purple-line:#8a80b8;  /* moves and re-skilling, reports, self-check */
  --amber:#6b5626;--amber-tint:#f7eac7;                          /* surveys, placeholders */
  /* Type */
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --fs-h1:38px;--fs-h2:22px;--fs-h2-lg:26px;--fs-title:20px;--fs-body:16px;--fs-small:14px;--fs-meta:13px;--fs-label:12px;
  /* Shape and rhythm */
  --r:6px;--r-pill:999px;
  --shadow-float:0 10px 30px rgba(27,30,28,.18),0 0 0 1px rgba(27,30,28,.06);
  --w-main:1216px;--w-wide:1040px;--w-read:820px;
  --gutter:32px;--space-section:48px;--space-block:24px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.8;font-size:var(--fs-body)}
a{color:inherit;text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input{touch-action:manipulation}
button{cursor:pointer}
button:disabled{opacity:.4;cursor:not-allowed}
:focus-visible{outline:3px solid var(--deep);outline-offset:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.5;letter-spacing:.01em;font-family:var(--serif);font-weight:700;word-break:auto-phrase;text-wrap:pretty}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-title)}
p{color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}
img,svg{max-width:100%}
input[type=checkbox],input[type=radio]{accent-color:var(--deep);width:16px;height:16px;vertical-align:middle;margin:0 6px 0 0}
.skip{position:absolute;left:10px;top:-100px;background:var(--white);padding:10px;z-index:9}
.skip:focus{top:10px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Layout ---------- */
.logo{display:inline-block;font-size:28px;line-height:1.1;font-weight:900;letter-spacing:.02em;white-space:nowrap;font-family:var(--serif)}
.logo span{color:var(--deep)}
.masthead{background:var(--paper)}
.mast-inner{max-width:1280px;margin:auto;padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0 24px;border-bottom:1px solid var(--ink)}
.mast-title{padding:12px 0}
.mast-title p{display:none}
.section-nav{grid-column:2;display:flex;justify-content:center;font-size:var(--fs-small);font-weight:600}
.section-nav a{padding:20px 18px;white-space:nowrap;text-decoration:none!important}
.section-nav a:hover{background:var(--tint)}
.section-nav a[aria-current=page]{color:var(--deep);box-shadow:inset 0 -3px 0 var(--deep)}

main{max-width:var(--w-main);min-height:60vh;margin:auto;padding:0 0 80px;outline:none!important}
section{margin-top:var(--space-section)}

footer{background:var(--ink);color:#e6e6e0;padding:45px max(var(--gutter),calc((100vw - var(--w-main))/2)) 28px}
footer p{color:#b8bbb6;font-size:var(--fs-meta);margin:18px 0 30px}
footer>div{display:flex;gap:24px;border-top:1px solid #ffffff24;padding-top:20px;font-size:var(--fs-label)}
footer>div span{margin-left:auto}

/* Page head: label, title, lead. Used by every page except the top and the occupation page, which use their own head. */
.page-top{margin-top:40px;padding:0 0 28px}
.page-top h1{margin:8px 0 12px}
.page-top h1 .phrase{display:inline-block}
.page-top p{font-size:15px;max-width:var(--w-read)}
.page-top .kicker{font-size:var(--fs-meta)}

/* Reading column: prose pages (about, for companies, 404, the question page) and the body of occupation pages. */
.reading{max-width:var(--w-read);margin:0 auto 35px}
.news h1{margin:4px 0 16px}
.news-company{margin:14px 0 4px;font-weight:700;color:var(--ink);font-size:var(--fs-small)}
.news-summary{color:var(--ink-soft);line-height:1.9}
.news-source{margin:28px 0 8px;padding:18px 20px 16px;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.news-source h2{margin:0 0 10px;font-family:var(--sans);font-size:var(--fs-small);letter-spacing:.04em;color:var(--deep)}
.news-source ul{margin:0;padding:0}
.news-source li{margin:0 0 14px;list-style:none}
.news-source li:last-child{margin-bottom:0}
.news-source-url{margin:2px 0 0;font-size:var(--fs-small);line-height:1.5;word-break:break-all}
.news-source-url a{font-weight:400;color:var(--muted)}
.news-occ{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.reading h2{margin:40px 0 14px}
.reading h3{font-family:var(--sans);font-size:var(--fs-small);margin:22px 0 8px;color:var(--muted)}
.reading p{margin-bottom:16px}
.reading .page-top p{margin-bottom:0}
.reading.occ{max-width:var(--w-wide)}
.back{display:block;max-width:var(--w-read);margin:25px auto 0;font-size:var(--fs-meta)}

/* ---------- Primitives ---------- */
/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:16px 22px;border:1px solid transparent;font-weight:650;line-height:1.5;border-radius:var(--r);font-size:var(--fs-small);text-decoration:none!important}
.button:hover{filter:brightness(.93)}
.dark{background:var(--ink);color:var(--white)}
.outline{background:transparent;border-color:var(--ink)}
.small{padding:11px 16px;font-size:var(--fs-meta);gap:10px}
.text-link{font-weight:650;font-size:var(--fs-small)}
.link-button{background:none;border:0;text-decoration:underline;text-underline-offset:3px;font-size:var(--fs-label);padding:6px;color:inherit}
.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:18px 0}

/* The head row of an entry (top card, research item, occupation lists): flag, date, kind pills, source. */
.entry-head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:var(--fs-meta);font-weight:700;color:var(--deep)}
.entry-head time{white-space:nowrap}
.entry-head a{font-weight:400;color:var(--muted);text-decoration:underline}
.entry-flag{display:inline-block;width:20px;height:14px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px var(--line);line-height:0}
.entry-flag svg{display:block;width:100%;height:100%}
/* Labels: the kicker (date, section, group), and pills for kinds and links. */
.kicker{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;font-size:var(--fs-meta);font-weight:700;color:var(--deep)}
.kicker span{padding-left:10px;border-left:1px solid var(--line);font-weight:400;color:var(--muted)}
.tag{display:inline-block;background:var(--tint);color:var(--deep);padding:2px 10px;font-size:var(--fs-label);font-weight:600;border-radius:var(--r-pill);white-space:nowrap;line-height:1.8}
.tag.amber{background:var(--amber-tint);color:var(--amber)}
.tag.ai-rel{background:none;border:1px solid var(--line);color:var(--muted);font-weight:400;line-height:1.6}
.tag.ai-rel.is-replace{border-color:var(--alert);color:var(--alert);font-weight:600}
.tag.ai-rel.is-tech{border-color:var(--line);color:var(--ink-soft)}
/* Research kinds share one colour on the pill and on the research page's thumb. */
.tag.k-paper{background:var(--deep);color:var(--white)}
.tag.k-public{background:var(--blue);color:var(--white)}
.tag.k-report{background:var(--purple);color:var(--white)}
.tag.k-survey{background:var(--amber-tint);color:var(--amber)}
.placeholder{color:var(--amber);background:var(--amber-tint);padding:1px 6px;border-radius:var(--r);font-size:var(--fs-meta)}
.subtle{color:var(--muted);font-size:var(--fs-label)!important}
/* Pill links (occupation chips, research tags) share one look. */
.occ-jobs a,.occ-jobs-in a,.study-occ a,.news-occ a{display:inline-flex;align-items:baseline;gap:6px;padding:3px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);font:600 var(--fs-label)/1.6 var(--sans);color:var(--ink);text-decoration:none}
.occ-jobs a:hover,.occ-jobs-in a:hover,.study-occ a:hover,.news-occ a:hover{border-color:var(--ink-soft);text-decoration:none}
.occ-jobs a,.occ-jobs-in a{border-color:var(--accent,var(--deep));color:var(--accent,var(--deep))}
.occ-jobs a:hover,.occ-jobs-in a:hover{background:var(--tint)}

/* Cards: white with a hairline border. Timeline entries, lanes, model cards, the occupation card, the comparison table. */
.tl-item,.lane,.ai-card,.ai-quote,.occ-card-main,.ai-comparison,.callout,.result-title{background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.callout{background:var(--tint);padding:24px 28px 28px}
.callout h2{font-size:var(--fs-title);margin:0 0 15px}
.callout ul{padding-left:20px;font-size:15px;margin:0;color:var(--ink-soft)}
.callout li{margin:10px 0}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}
.empty{text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 20px;font-size:var(--fs-small)}

/* Tables: a hairline under each row, an ink rule under the head, small muted headers. */
.tool-table,.duty-table,.ai-qual,.data-table,.ai-comparison table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.tool-table th,.duty-table th,.ai-qual thead th,.data-table th{padding:8px 12px 8px 0;border-bottom:1px solid var(--ink);text-align:left;font:600 var(--fs-label)/1.4 var(--sans);color:var(--muted);vertical-align:bottom}
.tool-table td,.duty-table td,.ai-qual td,.data-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft);line-height:1.6}
.data-table th,.data-table td{padding:5px 8px}

/* Lists */
.sources{margin:0;padding-left:18px;font-size:var(--fs-small);color:var(--ink-soft)}
.sources li{margin:4px 0}
ul.plain{padding-left:18px;font-size:15px;color:var(--ink-soft)}
.fact-list{margin:16px 0 8px}
.fact-list>div{display:grid;grid-template-columns:1fr 3fr;border-bottom:1px solid var(--line);padding:12px 0;gap:20px;font-size:var(--fs-small)}
.fact-list dt{font-weight:600}
.fact-list dd{margin:0;color:var(--ink-soft)}
.fact-list .quote{color:var(--muted);font-size:var(--fs-meta)}
.related{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.related li{padding:14px 0;border-top:1px solid var(--line)}
.related b{display:block;margin-top:4px;font-family:var(--serif);font-size:var(--fs-title);line-height:1.5}
.related b a{color:var(--ink)}
.related .finding{display:block;margin-top:4px;font-size:var(--fs-meta);color:var(--muted)}
.action-list{list-style:none;padding:0;margin:16px 0 24px;counter-reset:step}
.action-list li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--fs-body)}
.action-list li::before{content:counter(step,decimal-leading-zero);font-family:var(--serif);font-weight:700;color:var(--deep)}

/* Small square marks: model logos and tool logos. */
.ai-logo,.tool-logo,.tool-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r);object-fit:contain;background:var(--white);border:1px solid var(--line);font:700 12px/1 var(--sans);color:var(--ink);flex:none}
img.ai-logo{border:0}
.ai-th{display:inline-flex;align-items:center;gap:8px}
.ai-th img{width:20px;height:20px;border-radius:4px}

/* Floating layers: the cumulative counter and the chart tooltips. */
.tl-counter{position:fixed;right:20px;bottom:20px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;padding:10px 14px;border-radius:var(--r);background:var(--ink);color:var(--white);box-shadow:var(--shadow-float)}
.tl-counter span,.tl-counter small{font-size:11px;color:#c9cbc7}
.tl-counter b{font-family:var(--serif);font-size:22px;line-height:1.3;font-variant-numeric:tabular-nums}
.tl-counter.is-hidden{visibility:hidden}
.jm-tip{position:fixed;z-index:50;width:252px;padding:12px 14px 10px;border-radius:var(--r);background:var(--white);color:var(--ink);box-shadow:var(--shadow-float);pointer-events:none;line-height:1.5}
.jm-tip p{color:inherit}
.jm-tip-group{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted)!important}
.jm-tip-name{font-size:var(--fs-small);font-weight:700;margin:2px 0 6px}
.jm-tip-ratio{display:flex;align-items:baseline;gap:2px;flex-wrap:wrap;font-size:var(--fs-meta);font-weight:700}
.jm-tip-ratio b{font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.jm-tip-ratio small{flex-basis:100%;font-size:var(--fs-label);font-weight:400;color:var(--muted)}
.jm-tip-ratio.j0 b,.jm-tip-ratio.j1 b{color:var(--alert)}
.jm-tip-ratio.j3 b,.jm-tip-ratio.j4 b{color:var(--blue)}
.jm-spark{display:block;width:100%;height:auto;margin:8px 0 2px}
.jm-spark .one{stroke:var(--ink-soft);stroke-width:1;stroke-dasharray:3 3}
.jm-spark .line{fill:none;stroke:var(--alert);stroke-width:2;stroke-linejoin:round}
.jm-spark .dot{fill:var(--alert)}
.jm-tip-range{font-size:11px;color:var(--muted)!important;font-variant-numeric:tabular-nums}
.jm-tip dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line);font-size:var(--fs-label)}
.jm-tip dt{color:var(--muted)}
.jm-tip dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.jm-tip-note{margin-top:6px;font-size:11px;color:var(--muted)!important}
.jm-tip-go{margin-top:8px;font-size:var(--fs-label);font-weight:700;color:var(--alert)!important}
.sc-tip-vals{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin:6px 0 4px;font-size:var(--fs-label);color:var(--muted)}
.sc-tip-vals b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.sc-tip-rank{font-size:var(--fs-label);font-weight:700;color:var(--alert);margin:0 0 4px}

/* ---------- Top: timeline ---------- */
.home-title{max-width:var(--w-wide);margin:32px auto 0;line-height:1.35}
.home-lead{max-width:var(--w-wide);margin:10px auto 0;font-size:var(--fs-small);color:var(--ink-soft)}
.home-lead a{margin-left:.6em;color:var(--deep);font-weight:700;text-decoration:underline}
.case-jumps{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 8px;font-size:var(--fs-small);font-weight:700}
.case-jumps a{color:var(--deep);text-decoration:underline}
.cases-index h2{margin:32px 0 4px}
.case-index{list-style:none;margin:0;padding:0}
.case-index>li{padding:14px 0;border-top:1px solid var(--line)}
.case-index>li:last-child{border-bottom:1px solid var(--line)}
.case-company{margin:6px 0 0;font-size:var(--fs-small);font-weight:700;color:var(--ink)}
.case-index h3{font-size:var(--fs-title);line-height:1.45;margin:2px 0 0}
.case-index h3 a{color:var(--ink)}
.case-index h3 a:hover{color:var(--deep)}
.case-figure{margin:4px 0 0;font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink)}
.timeline{max-width:var(--w-wide);margin:24px auto 0}
.tl-list{position:relative;display:flex;flex-direction:column}
.tl-list::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line)}
.tl-item{position:relative;width:calc(50% - 44px);margin:0 0 28px;padding:18px 22px 22px}
.tl-item.left{align-self:flex-start}
.tl-item.right{align-self:flex-end}
.tl-item+.tl-item{margin-top:-90px}
.tl-item.first{margin-top:0}
.tl-item[hidden]{display:none}
.tl-icon{position:absolute;top:18px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:2px solid var(--ink)}
.tl-item.left .tl-icon{right:-61px}
.tl-item.right .tl-icon{left:-61px}
.tl-icon svg{width:12px;height:17px;fill:var(--ink)}
.tl-icon.is-move{background:var(--purple-tint);border-color:var(--purple-line);font-weight:700;font-size:15px;color:var(--purple)}
.tl-icon.is-research{background:var(--tint);border-color:var(--muted);font-size:var(--fs-label);font-weight:700;color:var(--muted)}
.tl-company{font-size:var(--fs-meta);margin-top:6px;color:var(--muted)}
.tl-company a{text-decoration:underline}
.tl-item h2{font-size:var(--fs-title);line-height:1.5;margin:4px 0 6px}
.tl-summary{margin-top:8px;font-size:15px;line-height:1.85;color:var(--ink-soft)}
.tl-more{padding:28px 0 8px;text-align:center;font-size:var(--fs-meta);color:var(--muted)}
.people-chart{display:block;width:100%;height:auto}
.people-chart .stay{fill:#d4d3cb}
.people-chart .cut{fill:var(--ink)}
.tl-chart{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.tl-chart figcaption{margin-top:6px;font-size:var(--fs-meta);color:var(--muted)}
.tl-chart figcaption b{font-family:var(--serif);font-size:18px;color:var(--ink);margin:0 2px}

/* ---------- Case page ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;max-width:var(--w-read);margin:28px auto 0;font-size:var(--fs-meta);font-weight:700}
.crumbs a{color:var(--deep)}
.crumbs .sep{color:var(--muted);font-weight:400}
.reading.case{margin-top:8px}
.case h1{font-size:var(--fs-h2-lg);margin:8px 0 12px}
.case-summary{color:var(--ink-soft)}
.case-primary{margin:4px 0 0;font-size:var(--fs-small);font-weight:700}
.case-primary a{color:var(--deep);text-decoration:underline}
.case .sources{margin-top:4px}
.case .sources a{text-decoration:underline}
.case .study-occ{margin-top:18px}

/* ---------- Research list ---------- */
.study-item{display:grid;grid-template-columns:148px minmax(0,1fr);gap:22px;align-items:start;padding:22px 0 18px;border-top:1px solid var(--line)}
.study-item:last-child{border-bottom:1px solid var(--line)}
.study-body{min-width:0}
.study-thumb{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/3;padding:10px 12px;border-radius:var(--r);background:var(--deep);color:var(--white);overflow:hidden}
.study-thumb b{font-family:var(--serif);font-size:21px;line-height:1.25;word-break:auto-phrase}
.study-thumb b.is-long{font-size:15px}
.study-thumb .t-year{font:600 var(--fs-label)/1 var(--sans);opacity:.8;font-variant-numeric:tabular-nums}
.study-thumb.k-paper{background:var(--deep)}
.study-thumb.k-public{background:var(--blue)}
.study-thumb.k-report{background:var(--purple)}
.study-thumb.k-survey{background:var(--amber-tint);color:var(--amber)}
.study-item .entry-head{margin:0 0 6px}
.study-item h2{font-size:var(--fs-title);line-height:1.5;margin:0 0 8px}
.study-item h2 a{color:var(--ink)}
.study-item h2 a:hover{color:var(--deep)}
.study-item .summary{font-size:15px;margin:0 0 8px}
.study-occ{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}

/* ---------- Occupation index ---------- */
.occ-title{margin:28px 0 18px}
.occ-lead{font-size:var(--fs-small);margin:-6px 0 10px}
.occ-note{font-size:var(--fs-small);color:var(--ink-soft);margin-top:14px;line-height:1.7}
.occ-group{margin-top:34px}
.occ-group h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:700 var(--fs-meta)/1.5 var(--sans);letter-spacing:.04em;color:var(--accent,var(--deep))}
.occ-group h2::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent,var(--deep))}
.occ-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px}
.occ-card{position:relative;display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.occ-rank{position:absolute;top:8px;left:8px;z-index:1;padding:2px 9px;border-radius:var(--r-pill);background:var(--alert);color:var(--white);font:700 var(--fs-label)/1.6 var(--sans);font-variant-numeric:tabular-nums}
.occ-art{display:block;aspect-ratio:1;border-radius:var(--r);background:var(--tint);overflow:hidden}
.occ-art img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .2s ease}
.occ-card:hover .occ-art img{transform:scale(1.04)}
.occ-card:hover .occ-name{color:var(--accent,var(--deep));text-decoration:underline}
.occ-name{font-size:15px;font-weight:700;line-height:1.35}
.occ-jobs{list-style:none;margin:-2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.occ-jobs-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:14px 0 0;font:600 var(--fs-meta) var(--sans);color:var(--muted)}
.occ-jobs-in span{display:flex;flex-wrap:wrap;gap:6px}

/* Scatter: theory vs. observed use, one ringed illustration per occupation. */
.scatter{margin:4px 0 36px}
.sc-narrow{display:none}
.sc-svg{display:block;width:100%;height:auto;overflow:visible}
.sc-axes line{stroke:var(--line);stroke-width:1}
.sc-axes line.axis{stroke:var(--ink-soft)}
.sc-axes text{font:12px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.sc-narrow .sc-axes text{font-size:18px}
.sc-axis-title{font-weight:700;fill:var(--ink-soft)!important}
.sc-corner{font:12px var(--sans);fill:var(--muted);letter-spacing:.02em}
.sc-pt{cursor:pointer;outline:none}
.sc-ring{fill:var(--white);stroke:var(--accent,var(--deep));stroke-width:2.5;transition:stroke-width .15s ease}
.sc-pt:hover .sc-ring,.sc-pt.is-hover .sc-ring,.sc-pt:focus-visible .sc-ring{stroke-width:4;stroke:var(--ink)}
.sc-label{font:13px var(--sans);font-weight:700;fill:var(--ink)}
.sc-narrow .sc-label{font-size:19px}
.sc-pt:hover .sc-label,.sc-pt.is-hover .sc-label{text-decoration:underline}

/* Job map: openings per job seeker, a treemap in five bins from alert (few) to blue (many). */
.job-map{margin-top:72px}
.job-map .jm-title{font-size:var(--fs-h2-lg);margin:0 0 4px}
.job-map .occ-lead{margin:6px 0 14px}
.jm-legend{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 16px;padding:0;list-style:none;font-size:var(--fs-label);color:var(--ink-soft)}
.jm-legend li{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:var(--r-pill);background:var(--tint)}
.jm-sw{display:inline-block;width:12px;height:12px;border-radius:50%}
.job-map svg{display:block;width:100%;height:auto}
.jm-narrow{display:none}
.jm-dot{fill:var(--ink-soft)}
.jm-gname{font-family:var(--sans);font-weight:700;letter-spacing:.04em;fill:var(--ink-soft)}
.jm-gnum{font-weight:400;letter-spacing:0;fill:var(--muted)}
.jm-cell text{font-family:var(--sans);fill:var(--ink)}
.jm-name{font-weight:700}
.jm-val{font-weight:700;font-variant-numeric:tabular-nums}
.jm-num{fill:var(--muted)!important}
.jm-cell rect{transition:filter .15s ease}
.job-map a:hover .jm-cell rect{filter:brightness(.94)}
.job-map a:hover .jm-name{text-decoration:underline}
.jm-go{fill:var(--white)}
.jm-cell .jm-go-arrow,.jm-cell.j0 .jm-go-arrow{fill:var(--alert);font-weight:700}
.jm-foot{margin-top:12px}
.jm-cell{cursor:default;outline:none}
.job-map a .jm-cell{cursor:pointer}
.jm-cell.is-hover rect{stroke:var(--ink);stroke-width:2.5;filter:brightness(.97)}
.j0 rect,.jm-sw.j0{fill:var(--alert);background:var(--alert)}
.j1 rect,.jm-sw.j1{fill:var(--alert-soft);background:var(--alert-soft)}
.j2 rect,.jm-sw.j2{fill:var(--tint);background:#e4e0d4}
.j3 rect,.jm-sw.j3{fill:var(--blue-tint);background:#cddcee}
.j4 rect,.jm-sw.j4{fill:var(--blue-soft);background:#a9c2e0}
.jm-cell.j0 text{fill:var(--white)}
.jm-cell.j0 .jm-num{fill:var(--white)!important;opacity:.85}
.jm-cell.j0 .jm-go{fill:var(--white)}

/* ---------- Occupation page ---------- */
.occ-top{max-width:var(--w-wide);margin:0 auto}
.occ-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:18px 0 0}
.occ-top .occ-head .back,.occ-top .occ-head .kicker{margin:0}
.occ-top .kicker,.occ-hero .kicker{color:var(--ink-soft);align-items:center}
.occ-top .kicker::before,.occ-hero .kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent,var(--deep));flex:none}
.occ-top .occ-title{margin:6px 0 0}

/* The card (portrait + observed-use rank) and, beside it, the models' forecast table. */
.occ-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin:16px 0 12px;align-items:start}
.occ-panels.is-single{grid-template-columns:minmax(0,1fr);max-width:720px}
.occ-panels.is-bare{grid-template-columns:220px}
/* Side by side, both panels take the taller one's height; the table's rows share the extra space. */
.occ-panels.has-glance{align-items:stretch}
.occ-card-main{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1fr);gap:16px;align-items:start;padding:18px;min-width:0;margin:0}
.occ-panels.is-single .occ-card-main{grid-template-columns:140px minmax(0,1fr)}
.occ-panels.has-glance .occ-card-main{grid-template-columns:150px minmax(0,1fr)}
.occ-panels.is-bare .occ-card-main{grid-template-columns:minmax(0,1fr);padding:12px}
.occ-portrait{align-self:center}
.occ-portrait .occ-art{aspect-ratio:3/4}
.occ-facts{display:flex;flex-direction:column;gap:10px;min-width:0;align-self:center}
.occ-facts .figs{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.occ-facts .occ-deck{font-size:var(--fs-small);margin:2px 0 0;color:var(--ink-soft);line-height:1.7}
.occ-deck{font-size:15px;color:var(--ink-soft);margin:10px 0 0;line-height:1.7}
.occ-glance{margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.occ-glance .ai-comparison{margin:0;flex:1;display:flex;flex-direction:column}
.occ-glance .ai-comparison table{flex:1}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 4px}

/* A figure: label, value, source. The observed-use rank is drawn in the alert colour. */
.fig{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r);background:var(--tint);min-width:0;color:var(--ink)}
.fig .lab{font-size:var(--fs-label);font-weight:700;color:var(--ink-soft);line-height:1.45}
.fig .val{font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fig .val small{font-family:var(--sans);font-size:var(--fs-meta);font-weight:700;margin-left:3px}
.fig .val .pre{font-family:var(--sans);font-size:15px;font-weight:700;margin-right:8px;color:var(--ink)}
.fig .val .of{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink-soft);margin-left:6px;letter-spacing:.02em}
.fig .src{margin-top:6px;font-size:11px;color:var(--muted);line-height:1.5}
.fig .src a{text-decoration:underline}
.fig .by{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--fs-label);color:var(--ink-soft);margin-top:2px;font-variant-numeric:tabular-nums}
.fig .by b{color:var(--ink)}
.fig .by>span{display:inline-flex;align-items:center;gap:0 4px}
.fig .by .by-logo{width:16px;height:16px;border-radius:4px;vertical-align:-3px}
.fig.fact{background:none;border:0;border-radius:0;padding:0}
.fig.fact .val{font-size:48px;font-weight:700;color:var(--alert)}
.fig.fact .val .pre{font-size:16px}
.fig.is-quiet{background:var(--tint);border:0}
.fig.is-quiet .val,.fig.fact.is-quiet .val{font:700 17px/1.5 var(--sans);white-space:normal;overflow-wrap:anywhere;color:var(--muted)}
.rank-strip{display:block;margin:8px 0 0}
.rank-strip svg{display:block;width:100%;height:10px}
.rank-strip rect{fill:var(--line)}
.rank-strip rect.is-me{fill:var(--alert)}
.rank-strip .ends{display:flex;justify-content:space-between;gap:8px;margin-top:3px;font-size:10px;color:var(--muted);white-space:nowrap}
.rank-strip .ends span:last-child{text-align:right}

/* Models' forecast table */
.ai-comparison{margin:18px 0 24px;overflow:hidden}
.ai-comparison table{table-layout:fixed;font-variant-numeric:tabular-nums}
.ai-comparison caption{text-align:left;padding:18px 18px 6px;font:700 var(--fs-body)/1.5 var(--sans);color:var(--ink)}
.ai-comparison th,.ai-comparison td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:center}
.ai-comparison th{font-size:var(--fs-meta);font-weight:600;color:var(--ink-soft)}
.ai-comparison th:first-child{text-align:left;width:25%}
.ai-comparison tr:last-child>*{border-bottom:0}
.ai-comparison td:nth-of-type(3),.ai-comparison thead th:nth-of-type(4){background:var(--blue-tint)}
.ai-comparison th.ai-demand,.ai-comparison td.ai-demand{padding-left:8px;padding-right:8px;white-space:nowrap}
.ai-comparison td.ai-demand{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
@media (max-width:480px){.ai-comparison table{table-layout:auto}.ai-comparison th,.ai-comparison td{padding:12px 6px}.ai-comparison th:first-child{width:auto}.ai-comparison td b{font-size:22px}.ai-comparison caption{padding:14px 12px 4px}}
.ai-tasks{min-width:980px}.ai-tasks td{font-size:var(--fs-meta)}
.ai-comparison td b{font-size:28px;line-height:1.2;font-weight:600}
.ai-comparison td small{font-size:var(--fs-meta);margin-left:3px}

/* Models' reasoning: one card per model, then a table of what remains. */
.ai-view{margin:var(--space-section) 0 8px}
.ai-view h2{margin:0 0 12px}
.ai-lead{font-size:var(--fs-small);margin:0 0 16px;color:var(--ink-soft)}
.ai-sub{font-family:var(--sans);font-size:var(--fs-small);color:var(--ink-soft);margin:22px 0 10px}
.ai-foot{margin-top:12px;font-size:var(--fs-meta);color:var(--ink-soft);line-height:1.7}
.ai-foot a{text-decoration:underline}
.ai-cards,.ai-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.ai-card,.ai-quote{margin:0;padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ai-model{display:flex;align-items:center;gap:10px;min-width:0}
.ai-quote .ai-model{margin:0 0 4px}
.ai-name{font-weight:700;font-size:var(--fs-small);line-height:1.3;color:var(--ink)}
.ai-name small{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.ai-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.ai-pair>span>span{display:block;font-size:11px;font-weight:600;color:var(--muted);line-height:1.4}
.ai-pair b{display:block;font-family:var(--serif);line-height:1;font-variant-numeric:tabular-nums}
.ai-pair .y1 b{font-size:30px;color:var(--ink)}
.ai-pair .y5 b{font-size:50px;color:var(--alert)}
.ai-pair b small{font-family:var(--sans);font-size:var(--fs-small);font-weight:700;margin-left:2px}
.ai-why{font-size:var(--fs-meta);color:var(--ink-soft);line-height:1.6}
.ai-quote .ai-why{font-size:var(--fs-small);line-height:1.85;color:var(--ink);margin:0}
.ai-ranges{margin:18px 0 6px}
.ai-range-row{display:grid;grid-template-columns:90px 1fr 44px;gap:12px;align-items:center;padding:7px 0}
.ai-range-name{font-size:var(--fs-meta);font-weight:700}
.ai-track{display:block;width:100%;height:14px}
.ai-bg{fill:var(--tint)}
.ai-fill{fill:var(--alert-tint)}
.ai-fill.y1{fill:var(--alert);opacity:.85}
.ai-pt{font:700 var(--fs-label)/1 var(--sans);color:var(--alert);font-variant-numeric:tabular-nums;text-align:right}
.ai-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding-left:102px;padding-right:56px;font-variant-numeric:tabular-nums;margin:0}
.ai-qual-wrap{overflow-x:auto}
.ai-qual{min-width:520px}
.ai-qual tbody th{width:16%;font:700 var(--fs-meta)/1.6 var(--sans);color:var(--ink);border-bottom:1px solid var(--line);vertical-align:top;padding:12px 12px 12px 0;text-align:left}
.ai-more{background:none;border:0;padding:0;font:inherit;font-size:var(--fs-label);color:var(--alert);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.ai-more:hover{color:var(--ink)}
.ai-raw{white-space:pre-wrap;word-break:break-word;font:var(--fs-meta)/1.7 var(--sans);background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 20px}
.ai-meta{font-size:var(--fs-meta);color:var(--ink-soft);margin:0 0 10px}

/* AI tools table */
.occ-tasks{margin:var(--space-section) 0 8px}
.occ-tasks h2{margin:0 0 12px}
.occ-duties{margin:var(--space-section) 0 8px}
.occ-duties h2{margin:0 0 12px}
.duty-table td:first-child{color:var(--ink)}
.duty-table .duty-tools{width:34%;font-size:var(--fs-label);color:var(--muted)}
.occ-duties .src{margin:8px 0 0;font-size:11px;color:var(--muted)}
.occ-duties .src a{text-decoration:underline}
.occ-related{margin:var(--space-section) 0 8px}
.occ-related h2{margin:0 0 4px}
.tool-logo-cell{width:36px}
.tool-name{width:30%}
.tool-name a{display:block;font-weight:700;color:var(--ink)}
.tool-name a:hover{color:var(--alert)}
.tool-name small{display:block;font-size:var(--fs-label);color:var(--muted)}
.task-note{margin-top:10px;font-size:var(--fs-label)}

/* Events, research, the openings band and the next step */
.occ-none{padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px}
.occ-foot{max-width:var(--w-read);margin-top:36px}
.occ-research{margin-top:var(--space-section);max-width:var(--w-read)}
.occ-research h2{margin:0 0 10px}
.occ-jobs-note{margin:-12px 0 22px}
.occ-labor{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:36px 0 0;padding:12px 16px;border-radius:var(--r);background:var(--tint);font-size:var(--fs-meta);color:var(--ink-soft)}
.occ-labor .lab{font-weight:700}
.occ-labor b{font-family:var(--serif);font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.occ-labor b.r0,.occ-labor b.r1{color:var(--alert)}
.occ-labor b.r3,.occ-labor b.r4{color:var(--blue)}
.occ-labor .all{color:var(--muted)}
.occ-labor a{margin-left:auto;font-size:var(--fs-label);color:var(--muted);text-decoration:underline}
.occ-next{margin-top:40px}
.occ-labor+.occ-next{margin-top:14px}
.next h2{font-size:var(--fs-h2)}
.next .button{margin:8px 0 14px}
.credit{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:-10px;margin-bottom:20px;font-size:var(--fs-meta);color:var(--muted)}
.credit span{white-space:nowrap}

/* Legacy hero (kept for the single-figure layout) */
.occ-hero{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;margin:22px 0 18px}
.occ-hero .occ-title{margin:6px 0 0}
.squeeze{display:inline-block;vertical-align:middle;flex-shrink:0}
.squeeze .plate{fill:var(--purple-line)}
.squeeze use{fill:var(--ink)}
.squeeze .pow{stroke:var(--purple-line);stroke-width:1.6;stroke-linecap:round;fill:none}
.squeeze.is-flat use{fill:var(--purple)}

/* ---------- About: data section ---------- */
.data-link{margin-top:28px;font-size:var(--fs-meta)}
.data-link a{color:var(--muted);text-decoration:underline}
.data-dl{display:grid;grid-template-columns:7em minmax(0,1fr);gap:4px 14px;margin:6px 0 14px;font-size:var(--fs-small)}
.data-dl dt{color:var(--muted);font-weight:600}
.data-dl dd{margin:0}
.data-map{margin:4px 0 22px;font-size:var(--fs-small)}
.data-map summary{cursor:pointer;color:var(--ink-soft);font-weight:600}
.data-table{margin-top:8px}
.data-ops{margin:6px 0 0;padding-left:1.2em;font-size:var(--fs-small)}

/* ---------- Work and AI diagnosis ---------- */
[data-page=check] [hidden]{display:none!important}
.check-intro,#check-form,#check-result,.check-privacy{max-width:var(--w-read);margin-left:auto;margin-right:auto}
.check-intro .page-top{padding-bottom:16px}
.check-facts{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:0;color:var(--deep);font-size:var(--fs-meta);font-weight:600}
#check-form{margin-top:28px;scroll-margin-top:16px}
.quiz-progress{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-small);color:var(--muted)}
#question-position{font-weight:700;color:var(--ink)}
#check-progress{display:block;width:100%;height:5px;margin:12px 0 18px;border:0;border-radius:var(--r);background:var(--line);accent-color:var(--deep)}
#check-progress::-webkit-progress-bar{background:var(--line);border-radius:var(--r)}
#check-progress::-webkit-progress-value{background:var(--deep);border-radius:var(--r)}
#check-progress::-moz-progress-bar{background:var(--deep);border-radius:var(--r)}
.question-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:22px}
.question-nav button{background:transparent;border:1px solid var(--line);border-radius:var(--r);padding:6px 2px;min-height:52px;line-height:1.5}
.question-nav span,.question-nav small{display:block}
.question-nav span{font-weight:700}
.question-nav small{font-size:10px;color:var(--muted)}
.question-nav .is-done{background:var(--purple-tint);border-color:var(--purple-line)}
.question-nav [aria-current=step]{box-shadow:inset 0 -3px var(--deep);border-color:var(--deep)}
#check-form fieldset{min-width:0;border:1px solid var(--line);border-radius:var(--r);background:var(--white);margin:0;padding:24px}
#check-form legend{float:left;width:100%;font-family:var(--sans);font-size:21px;line-height:1.6;font-weight:650;margin:0 0 10px;padding:0}
#check-form legend span{font:var(--fs-meta) monospace;color:var(--purple);margin-right:10px}
.question-hint{clear:both;font-size:var(--fs-small);margin-bottom:20px}
.answer-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;clear:both}
.answer-options label{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 12px;min-height:60px;display:flex;align-items:center;cursor:pointer;font-size:var(--fs-small)}
.answer-options label:hover{border-color:var(--purple-line)}
.answer-options label:has(input:checked){background:var(--purple-tint);border-color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple);font-weight:700}
.answer-options label:has(input:focus-visible){outline:3px solid var(--deep);outline-offset:3px}
.answer-options input{flex-shrink:0;accent-color:var(--purple)}
.check-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:18px}
.check-controls #previous-question{margin-right:auto}
.check-error{color:var(--alert);font-size:var(--fs-small)}
.check-error:not(:empty){margin-top:12px}
.check-help{font-size:var(--fs-meta);margin-top:16px}
.check-privacy{font-size:var(--fs-meta);margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
#check-result{margin-top:28px;scroll-margin-top:20px}
.result-title{background:var(--purple-tint);border-radius:var(--r);padding:28px 32px;margin:0}
.result-title h2{font-size:var(--fs-h2-lg);margin:12px 0}
.result-title p{font-size:var(--fs-small);color:var(--ink-soft)}
.result-title .kicker{color:var(--purple);display:flex;justify-content:space-between;gap:16px}
.result-title .kicker span{font-weight:400}
.first-action{border-top:1px solid var(--purple-line);margin-top:22px;padding-top:18px}
.first-action h3{font:700 var(--fs-small)/1.6 var(--sans);color:var(--purple);margin-bottom:8px}
.first-action p{font-size:17px;color:var(--ink)}
.more-actions{margin-top:16px;font-size:var(--fs-small)}
.more-actions summary{cursor:pointer;min-height:44px;padding:8px 0}
.more-actions ul{margin:0;padding-left:20px}
.result-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 8px}
.result-tools .link-button{font-size:var(--fs-small);min-height:44px;margin-left:auto}
.result-limit,#export-status{font-size:var(--fs-meta)}
#export-status:not(:empty){color:var(--deep);margin:12px 0}
.result-next{margin-top:32px}
.result-next h2{font-size:var(--fs-h2)}
.result-next>p{font-size:var(--fs-small);margin-top:8px}
.lanes{display:grid;grid-template-columns:1fr;gap:10px;margin:18px 0 28px}
.lane{background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.lane summary,.result-detail>summary{cursor:pointer;font-size:var(--fs-body);font-weight:650;min-height:56px;padding:14px 20px}
.lane[open] summary{border-bottom:1px solid var(--line)}
.lane>div{padding:16px 20px 20px}
.lane p,.lane ul{font-size:var(--fs-small)}
.lane ul{padding-left:18px;margin:12px 0 0;color:var(--ink-soft)}
.lane a{text-decoration:underline}
.lane .pr{font-size:11px;color:var(--muted);margin-left:6px;border:1px solid var(--line);border-radius:var(--r-pill);padding:0 6px}
.result-detail{border-top:1px solid var(--line);padding-bottom:8px}
.result-detail>summary{padding-left:0;padding-right:0}
.result-detail>p{font-size:var(--fs-small);margin:0 0 16px}
.result-detail h3{font:650 var(--fs-small)/1.7 var(--sans);margin-top:4px}
.result-detail ul,.result-detail .detail-grid p{font-size:var(--fs-small);padding-left:18px}
.result-detail .detail-grid{margin:12px 0 20px}
.related-occupations{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
.related-occupations a{display:inline-block;padding:8px 0}
.sheet{width:100%;min-height:280px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);padding:14px;font:13px/1.7 ui-monospace,Menlo,monospace;white-space:pre-wrap}
.reset-check{min-height:44px;margin-top:20px}
@media(max-width:600px){
  #check-form{margin-top:22px}
  #check-form fieldset{padding:20px 16px}
  #check-form legend{font-size:19px}
  .question-nav{gap:5px;margin-bottom:18px}
  .answer-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .answer-options label{min-height:64px;padding:16px 10px}
  .check-controls{gap:10px}
  .check-controls .button{padding:14px 12px;flex:1}
  .check-controls #show-result:not([hidden]){flex-basis:100%}
  .check-facts{gap:5px 14px;font-size:12px}
  .result-title{padding:22px 20px}
  .result-title .kicker{font-size:12px}
  .first-action p{font-size:16px}
  .result-tools .button{flex:1 1 calc(50% - 6px);padding:14px 10px;font-size:13px}
  .result-tools .link-button{flex-basis:100%;margin-left:0;text-align:left}
  .related-occupations{grid-template-columns:1fr}
}

/* ---------- Breakpoints: 1280 (gutters), 960 (one column), 760 (phone), 520 (small phone) ---------- */
@media(max-width:1280px){
  main{margin:0 var(--gutter)}
}

@media(max-width:960px){
  .section-nav{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .section-nav::-webkit-scrollbar{display:none}
  .section-nav a{padding:16px 12px}
  .lanes{grid-template-columns:1fr}
  .tl-list::before{left:15px;margin-left:0}
  .tl-item,.tl-item.left,.tl-item.right{width:auto;align-self:stretch;margin:0 0 20px 44px}
  .tl-item+.tl-item{margin-top:0}
  .tl-item.left .tl-icon,.tl-item.right .tl-icon{left:-45px;right:auto}
  .occ-panels,.occ-panels.is-single,.occ-panels.has-glance{grid-template-columns:minmax(0,1fr)}
  .occ-panels.is-bare{grid-template-columns:160px}
}

@media(max-width:760px){
  :root{--gutter:20px;--fs-h1:30px;--fs-h2:21px;--fs-h2-lg:23px;--fs-title:18px;--space-section:40px}
  body{font-size:15px}
  main{padding-bottom:50px}
  .mast-inner{grid-template-columns:auto minmax(0,1fr);gap:0 12px}
  .mast-title{padding:10px 0}
  .logo{font-size:22px}
  .section-nav{grid-column:auto;justify-content:flex-end}
  .section-nav a{padding:14px 10px}
  .page-top{padding:0 0 20px;margin-top:28px}
  .page-top h1{font-size:min(var(--fs-h1),7.4vw)}
  .page-top p{font-size:var(--fs-small)}
  .reading p{font-size:15px}
  .fact-list>div{grid-template-columns:1fr;gap:4px}
  .detail-grid{grid-template-columns:1fr;gap:15px}
  .callout{padding:20px}
  footer{padding:35px var(--gutter)}
  footer>div{flex-wrap:wrap;gap:12px}
  /* timeline */
  .home-title{margin-top:22px}
  .home-lead{margin-top:8px}
  .case-index h3{font-size:17px}
  .timeline{margin-top:20px}
  .crumbs{margin-top:20px}
  .tl-list::before{left:11px}
  .tl-item,.tl-item.left,.tl-item.right{margin-left:36px;padding:14px 16px 16px}
  .tl-item.left .tl-icon,.tl-item.right .tl-icon{left:-37px;width:24px;height:24px;top:16px}
  .tl-icon svg{width:9px;height:13px}
  .tl-icon.is-move,.tl-icon.is-research{font-size:11px}
  .tl-summary{font-size:var(--fs-small)}
  .tl-counter{right:12px;bottom:12px;padding:6px 10px}
  .tl-counter b{font-size:16px}
  .tl-counter small{display:none}
  /* research */
  .study-item{grid-template-columns:92px minmax(0,1fr);gap:14px}
  .study-thumb{padding:7px 8px}
  .study-thumb b{font-size:15px}
  .study-thumb b.is-long{font-size:11px}
  .study-thumb .t-year{font-size:10px}
  .study-item h2{font-size:17px}
  /* occupations */
  .sc-wide,.jm-wide{display:none}
  .sc-narrow,.jm-narrow{display:block}
  .occ-title{margin-top:20px}
  .occ-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .occ-hero{grid-template-columns:110px minmax(0,1fr);gap:16px;margin:12px 0 16px}
  .occ-card-main,.occ-panels.is-single .occ-card-main,.occ-panels.has-glance .occ-card-main{grid-template-columns:92px minmax(0,1fr);gap:12px;padding:14px}
  .occ-panels.is-bare .occ-card-main{grid-template-columns:minmax(0,1fr)}
  .occ-facts,.occ-facts .figs{display:contents}
  .fig.fact .val{font-size:42px}
  .rank-strip .ends{white-space:normal}
  .rank-strip .ends span{min-width:0}
  .ai-range-row{grid-template-columns:70px 1fr 44px}
  .ai-axis{padding-left:82px}
  .tool-table thead,.duty-table thead{display:none}
  .duty-table tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .duty-table td{display:block;padding:0;border:0;width:auto}
  .duty-table .duty-tools{width:auto;margin-top:2px}
  .tool-table tr{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 10px;padding:12px 0;border-bottom:1px solid var(--line)}
  .tool-table td{display:block;padding:0;border:0;width:auto}
  .tool-logo-cell{grid-row:span 2}
  .tool-does{font-size:var(--fs-meta)}
}

@media(max-width:520px){
  .mast-inner{grid-template-columns:minmax(0,1fr)}
  .mast-title{padding:10px 0 0}
  .section-nav{justify-content:flex-start;margin:0 -8px}
  .section-nav a{padding:12px 10px}
  .occ-card-main,.occ-panels.is-single .occ-card-main,.occ-panels.has-glance .occ-card-main{grid-template-columns:68px minmax(0,1fr);gap:10px;padding:12px}
  .fig{padding:12px}
  .fig.fact .val{font-size:38px}
  .fig .val .of{font-size:var(--fs-meta)}
  .ai-comparison caption{padding:14px 12px 4px;font-size:15px}
  .ai-comparison th,.ai-comparison td{padding:12px 6px}
  .ai-comparison th{font-size:11px}
  .ai-comparison th:first-child{width:27%}
  .ai-comparison .ai-th{gap:4px;font-size:var(--fs-label)}
  .ai-comparison .ai-th img{width:16px;height:16px}
  .ai-comparison td b{font-size:23px}
  .ai-comparison td small{font-size:11px;margin-left:1px}
}