@charset "UTF-8";
:root {
  --bg: #f5f5ef;
  --paper: #ffffff;
  --ink: #20372f;
  --muted: #54675e;
  --accent: #315d45;
  --soft: #e4eadb;
  --line: #d9dfd4;
  --radius: 8px;
  --display: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body.clay { --bg: #fff9ef; --paper: #fffdf8; --ink: #412f27; --muted: #705c50; --accent: #a34728; --soft: #f6e4cf; --line: #e9d9c6; --radius: 28px; }
body.navy { --bg: #eef2f6; --paper: #fff; --ink: #152b43; --muted: #506478; --accent: #193e70; --soft: #dee8f6; --line: #cbd7e3; --radius: 2px; --display: system-ui, sans-serif; }
body.plum { --bg: #1c1a24; --paper: #282530; --ink: #f7f0ec; --muted: #c9c1ce; --accent: #eab6a1; --soft: #39313f; --line: #514557; --radius: 24px; }
body.blue { --bg: #f4f6fc; --paper: #fff; --ink: #142955; --muted: #50617c; --accent: #214bc7; --soft: #e6ecff; --line: #cbd5f1; --radius: 10px; --display: system-ui, sans-serif; background-image: linear-gradient(#dbe1f080 1px, transparent 1px), linear-gradient(90deg,#dbe1f080 1px, transparent 1px); background-size: 32px 32px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button, input, select { font: inherit; }
button, .button { cursor: pointer; }
button, .button, input, select { min-height: 46px; }
button, .button { border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--paper); padding: 11px 20px; text-decoration: none; font-size: 15px; font-weight: 650; }
.plum button, .plum .button { color: #241d26; }
button.secondary, .button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
button:hover, .button:hover { filter: brightness(.92); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--paper); padding: 12px; }
.skip:focus { top: 10px; }
.shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.topline { padding: 9px 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.header { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 26px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 28px/1.1 var(--display); letter-spacing: -.04em; }
.mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--accent); color: var(--paper); font: 600 20px/1 var(--display); border-radius: 50%; letter-spacing: -.06em; flex-shrink: 0; }
.plum .mark { color: #241d26; }
.navy .mark { border-radius: 0; }
.blue .mark { border-radius: 8px; transform: rotate(-6deg); }
nav { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
nav a { text-decoration: none; font-size: 14px; font-weight: 600; }
nav a:hover { text-decoration: underline; }
.hero { padding-block: 64px 60px; display: grid; grid-template-columns: 1.03fr 1fr; gap: 60px; align-items: center; }
.kicker { font-size: 11px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
h1, h2, h3 { line-height: 1.08; margin: 0; font-weight: 500; }
h1 { font: 500 clamp(42px, 4.7vw, 68px)/1.06 var(--display); letter-spacing: -.055em; margin-block: 21px 24px; }
h2 { font: 500 clamp(30px, 3vw, 42px)/1.15 var(--display); letter-spacing: -.035em; }
h3 { font: 500 25px/1.2 var(--display); letter-spacing: -.025em; }
p { margin-block: 0 18px; }
.lead { color: var(--muted); font-size: 19px; line-height: 1.7; max-width: 570px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-visual { position: relative; }
.hero-visual img { display: block; width: 100%; height: 470px; object-fit: cover; border-radius: var(--radius); }
.hero-caption { background: var(--paper); padding: 18px 22px; border: 1px solid var(--line); margin: -47px 22px 0; position: relative; border-radius: var(--radius); font-size: 14px; }
.hero-caption strong { display: block; font-size: 16px; font-weight: 650; }
.hero-caption span { color: var(--muted); }
.metrics { border-block: 1px solid var(--line); padding: 20px 0; display: flex; gap: 36px; font-size: 13px; color: var(--muted); }
.metrics span { flex: 1; }
.metrics b { display: block; color: var(--ink); font-size: 18px; font-weight: 650; }
.section { padding-block: 64px; }
.section-head { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 30px; }
.section-head p { color: var(--muted); max-width: 420px; font-size: 15px; margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 30px; }
.filter { background: transparent; border-color: var(--line); color: var(--ink); padding: 8px 16px; border-radius: 50px; font-size: 13px; min-height: 40px; }
.filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.plum .filter[aria-pressed="true"] { color: #241d26; }
.search { margin-left: auto; width: 245px; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--paper); padding: 11px 14px; }
input::placeholder { color: var(--muted); opacity: 1; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); display: flex; flex-direction: column; }
.card[hidden] { display: none !important; }
.card-image { overflow: hidden; display: block; }
.card img { display: block; width: 100%; aspect-ratio: 1.55; object-fit: cover; transition: transform .25s; }
.card:hover img { transform: scale(1.03); }
.card-body { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.card-category { color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 750; margin-bottom: 13px; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { color: var(--muted); margin-block: 14px 20px; font-size: 14px; line-height: 1.7; }
.card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; padding-top: 16px; border-top: 1px solid var(--line); }
.ordinal { display: none; }
.empty { background: var(--paper); padding: 24px; border: 1px solid var(--line); }
.notice { margin-block: 30px 0; padding: 20px 24px; border-left: 3px solid var(--accent); background: var(--soft); font-size: 14px; line-height: 1.7; }
.profile { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; background: var(--soft); border-radius: var(--radius); padding: 48px; }
.profile h2 { margin-block: 14px 20px; }
.profile p { color: var(--muted); font-size: 15px; }
.profile form { display: grid; gap: 15px; }
label { display: block; font-size: 14px; font-weight: 600; }
label input, label select { margin-top: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 12px; line-height: 1.6; }
.check input { width: 18px; height: 18px; min-height: 18px; margin: 3px 0 0; flex: 0 0 auto; }
.form-status { font-size: 14px; margin: 0; min-height: 24px; }
.saved { margin-top: 24px; font-size: 14px; }
.saved ul { padding-left: 18px; }
.footer { border-top: 1px solid var(--line); margin-top: 64px; padding-block: 36px 28px; font-size: 13px; color: var(--muted); }
.footer-top { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.footer .brand { color: var(--ink); font-size: 23px; margin-bottom: 14px; }
.footer p { max-width: 570px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-small { border-top: 1px solid var(--line); padding-top: 19px; margin-top: 20px; font-size: 11px; display: flex; justify-content: space-between; gap: 20px; }
.breadcrumb { font-size: 12px; color: var(--muted); padding-top: 30px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 770px) 245px; gap: 70px; align-items: start; padding-block: 34px 50px; }
.article-head h1 { font-size: clamp(38px, 4.5vw, 58px); max-width: 900px; }
.article-meta { display: flex; gap: 15px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-block: 22px; }
.article-cover { margin: 28px 0 36px; }
.article-cover img { width: 100%; height: 390px; object-fit: cover; display: block; border-radius: var(--radius); }
figcaption { color: var(--muted); font-size: 11px; margin-top: 8px; }
.article-body h2 { font-size: 29px; margin-block: 35px 17px; }
.article-body p { font-size: 18px; line-height: 1.85; }
.article-body ul { padding-left: 22px; }
.article-body li { margin-bottom: 9px; }
.checklist { background: var(--soft); border-radius: var(--radius); padding: 24px 30px; margin-top: 32px; }
.checklist h2 { margin-top: 0; }
.takeaway { border-block: 1px solid var(--line); padding-block: 24px; margin-top: 35px; }
.takeaway .kicker { display: block; margin-bottom: 12px; }
.sources { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 30px; font-size: 13px; }
.sources h2 { font-size: 23px; margin-top: 0; }
.sources a { overflow-wrap: anywhere; }
.sidebar { position: sticky; top: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.sidebar h2 { font-size: 21px; margin-bottom: 20px; }
.sidebar ol { font-size: 13px; padding-left: 18px; }
.sidebar li { margin-bottom: 14px; }
.sidebar button { width: 100%; margin-top: 15px; }
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); z-index: 30; width: 0; }
.info-page { max-width: 800px; padding-block: 55px; }
.info-page h1 { font-size: 51px; }
.info-page h2 { font-size: 27px; margin-block: 33px 17px; }
.credits li { margin-bottom: 16px; }
/* Each publication has its own composition. */
.sage .hero-visual img { border-radius: 48% 48% 4px 4px; }
.sage .card { border: 0; background: transparent; }
.sage .card-body { padding: 23px 0; }
.clay .hero { grid-template-columns: 1fr; text-align: center; gap: 35px; padding-top: 48px; }
.clay .hero-copy { max-width: 810px; margin-inline: auto; }
.clay .hero h1 { font-size: clamp(46px, 6vw, 80px); }
.clay .hero .lead { max-width: 660px; margin-inline: auto; }
.clay .hero .actions { justify-content: center; }
.clay .hero-visual img { height: 355px; object-position: center 55%; }
.clay .hero-caption { max-width: 410px; margin-inline: auto; text-align: left; }
.clay .card:nth-child(3n + 2) { background: #f7ecdc; }
.clay .metrics { text-align: center; }
.navy .hero { grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--paper); padding: 0; margin-block: 35px; border: 1px solid var(--line); }
.navy .hero-copy { padding: 40px; }
.navy .hero h1 { font-size: clamp(40px, 4.6vw, 60px); font-weight: 750; }
.navy .hero-visual { align-self: stretch; }
.navy .hero-visual img { height: 100%; min-height: 465px; }
.navy .hero-caption { margin: 0; position: absolute; bottom: 0; left: 0; right: 0; background: #152b43; color: white; border: 0; }
.navy .hero-caption span { color: #ccd7e5; }
.navy .grid { grid-template-columns: repeat(2, 1fr); }
.navy .card { display: grid; grid-template-columns: 180px 1fr; }
.navy .card img { height: 100%; min-height: 260px; }
.navy .card h3 { font-size: 23px; font-weight: 700; }
.navy .card-body { padding: 22px; }
.navy .metrics { background: var(--accent); color: #e0e8f4; padding: 20px 30px; }
.navy .metrics b { color: #fff; }
.plum .hero-visual img { border-radius: 200px 200px 24px 24px; height: 510px; }
.plum .hero h1 { font-size: clamp(43px, 5vw, 73px); }
.plum .hero-caption { background: #342c39; }
.plum .card { border: 0; }
.plum .card img { aspect-ratio: 1.35; }
.plum .section-head h2 { font-style: italic; }
.blue .hero { grid-template-columns: 1.2fr 1fr; gap: 55px; }
.blue .hero h1 { font-size: clamp(41px, 4.6vw, 65px); font-weight: 760; letter-spacing: -.065em; }
.blue .hero-visual { padding: 12px; border: 1px solid var(--line); background: var(--paper); transform: rotate(2deg); }
.blue .hero-visual img { height: 390px; }
.blue .hero-caption { margin: 0; border: 0; padding: 18px 7px 5px; }
.blue .grid { grid-template-columns: 1fr; gap: 14px; }
.blue .card { display: grid; grid-template-columns: 200px 1fr; }
.blue .card img { height: 100%; min-height: 220px; }
.blue .card-body { position: relative; padding-right: 80px; }
.blue .ordinal { display: block; position: absolute; right: 24px; top: 20px; color: var(--accent); font-size: 30px; font-weight: 750; opacity: .55; }
.blue .card h3 { font-weight: 700; }
.blue .card-foot { justify-content: flex-start; gap: 24px; }
.blue .profile { border: 1px solid var(--line); background: var(--paper); }
@media (max-width: 1000px) {
  .header { gap: 20px; }
  nav { gap: 16px; }
  .hero { gap: 35px; }
  .hero-visual img { height: 400px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: minmax(0, 1fr) 210px; gap: 35px; }
  .navy .card { grid-template-columns: 1fr; }
  .navy .card img { height: 200px; min-height: 0; }
  .navy .hero-copy { padding: 30px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .shell { width: calc(100% - 36px); }
  .topline { font-size: 9px; letter-spacing: .09em; }
  .header { flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 20px; }
  .brand { font-size: 26px; }
  nav { width: 100%; justify-content: space-between; gap: 10px; }
  nav a { font-size: 12px; }
  .hero, .blue .hero, .navy .hero { grid-template-columns: 1fr; gap: 30px; padding-block: 38px; }
  h1, .clay .hero h1, .navy .hero h1, .plum .hero h1, .blue .hero h1 { font-size: clamp(38px, 10.3vw, 54px); }
  .lead { font-size: 17px; }
  .hero-visual img, .plum .hero-visual img, .blue .hero-visual img { height: 330px; }
  .clay .hero-visual img { height: 260px; }
  .navy .hero { padding: 0; gap: 0; }
  .navy .hero-copy { padding: 26px 23px; }
  .navy .hero-visual img { min-height: 270px; height: 270px; }
  .navy .hero-caption { position: relative; }
  .metrics { gap: 16px; flex-wrap: wrap; padding: 18px 0; }
  .metrics span { flex: 1 1 40%; font-size: 11px; }
  .metrics b { font-size: 15px; }
  .section { padding-block: 40px; }
  .section-head { display: block; }
  .section-head p { margin-top: 15px; }
  .search { width: 100%; margin-left: 0; margin-top: 8px; }
  .grid, .navy .grid { grid-template-columns: 1fr; gap: 25px; }
  .card h3 { font-size: 25px; }
  .profile { grid-template-columns: 1fr; gap: 25px; padding: 27px 22px; }
  .footer-top { flex-direction: column; }
  .footer-small { flex-direction: column; gap: 4px; }
  .article-layout { grid-template-columns: 1fr; gap: 30px; }
  .article-head h1 { font-size: 39px; }
  .article-cover img { height: 250px; }
  .article-body p { font-size: 17px; }
  .sidebar { position: static; }
  .checklist { padding: 24px; }
  .blue .card { grid-template-columns: 1fr; }
  .blue .card img { height: 200px; min-height: 0; }
  .blue .card-body { padding-right: 58px; }
  .blue .ordinal { right: 18px; font-size: 25px; }
  .info-page h1 { font-size: 39px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .header, .topline, .sidebar, .footer, .profile, .reading-progress, .bookmark { display: none !important; }
  body { color: black !important; background: white !important; }
  .shell, .article-layout { width: 100%; display: block; }
  .article-cover img { height: 230px; }
  a { text-decoration: none; }
}

body.sage { --bg:#f3f4ed; --paper:#fff; --ink:#243029; --muted:#566156; --accent:#27372c; --soft:#e6edb9; --line:#d5dccb; --radius:0px; --display:system-ui,sans-serif; }
.sage .header { border-bottom:2px solid var(--ink); }
.sage .mark { border-radius:0; color:var(--ink); background:#dce999; }
.sage .brand { font-size:27px; font-weight:800; }
.sage .hero { padding-top:44px; grid-template-columns:1.22fr 1fr; gap:50px; }
.sage .hero h1 { font-size:clamp(44px,5.2vw,73px); font-weight:770; letter-spacing:-.065em; }
.sage .hero-visual img { border-radius:0; height:440px; }
.sage .hero-caption { margin:0; padding:18px 20px; background:var(--soft); border:0; }
.sage .hero .button { background:var(--soft); color:var(--ink); border-color:var(--ink); }
.sage .hero .button.secondary { background:transparent; }
.sage .metrics { border:0; background:var(--ink); color:#dce1d8; padding:22px 28px; }
.sage .metrics b { color:#e4ecac; }
.sage .grid { grid-template-columns:repeat(3,1fr); gap:30px; }
.sage .card { border:0; border-top:2px solid var(--ink); padding-top:14px; }
.sage .card h3 { font-weight:740; font-size:23px; letter-spacing:-.035em; }
.sage .card:nth-child(1) { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.sage .card:nth-child(1) img { height:100%; min-height:340px; }
.sage .card:nth-child(1) .card-body { padding:15px 0; }
.sage .profile { background:#e6edb9; }
body.clay { --bg:#f1f4fa; --paper:#fff; --ink:#192f4a; --muted:#52667c; --accent:#234d83; --soft:#e0e9f6; --line:#cbd7e6; --radius:16px; --display:Georgia,serif; }
.clay .header { border:0; }
.clay .brand { letter-spacing:-.03em; }
.clay .mark { border-radius:50%; }
.clay .hero { grid-template-columns:1fr 1.1fr; gap:55px; text-align:left; padding-block:30px 45px; }
.clay .hero-copy { order:2; max-width:none; }
.clay .hero-visual { order:1; }
.clay .hero h1 { font-size:clamp(45px,5vw,67px); }
.clay .hero .actions { justify-content:flex-start; }
.clay .hero-visual img { height:500px; border-radius:170px 170px 16px 16px; }
.clay .hero-caption { max-width:none; margin:-65px 20px 0; box-shadow:0 10px 35px #15345b12; }
.clay .metrics { text-align:left; border:0; padding:0 0 25px; }
.clay .metrics span { padding-left:20px; border-left:3px solid var(--accent); }
.clay .grid { grid-template-columns:repeat(2,1fr); gap:25px; }
.clay .card:nth-child(3n + 2) { background:var(--paper); }
.clay .card { border:0; box-shadow:0 4px 16px #19304e07; }
.clay .card img { aspect-ratio:1.9; }
.clay .card-body { padding:30px; }
.clay .profile { background:var(--paper); border-top:5px solid var(--accent); }
body.navy { --bg:#fbf5e9; --paper:#fffdf8; --ink:#493628; --muted:#755f4e; --accent:#974b26; --soft:#f2e4cc; --line:#ddcbb2; --radius:22px; --display:Georgia,serif; }
.navy .mark { border-radius:50% 50% 6px 6px; }
.navy .hero { display:flex; flex-direction:column; align-items:stretch; gap:28px; padding:42px; border:0; background:var(--soft); border-radius:26px; margin-top:25px; }
.navy .hero-copy { padding:0; max-width:900px; }
.navy .hero h1 { font:500 clamp(44px,5.3vw,72px)/1.05 var(--display); max-width:1000px; }
.navy .hero .lead { max-width:740px; }
.navy .hero-visual { width:100%; }
.navy .hero-visual img { height:320px; min-height:0; border-radius:14px; object-position:center 35%; }
.navy .hero-caption { background:var(--paper); color:var(--ink); position:absolute; bottom:18px; right:18px; left:auto; width:min(420px,85%); border-radius:12px; }
.navy .hero-caption span { color:var(--muted); }
.navy .metrics { background:transparent; padding:20px 0; color:var(--muted); border-block:1px solid var(--line); }
.navy .metrics b { color:var(--ink); }
.navy .grid { grid-template-columns:repeat(3,1fr); }
.navy .card { display:flex; flex-direction:column; border:1px solid var(--line); }
.navy .card img { height:210px; min-height:0; }
.navy .card h3 { font:500 26px/1.16 var(--display); }
.navy .card-body { padding:24px; }
.navy .profile { background:#493628; --paper:#fffdf8; color:#fffdf8; }
.navy .profile p,.navy .profile .kicker { color:#eee0cb; }
.navy .profile input,.navy .profile select { color:#493628; }
.navy .profile button { background:#f2e4cc; color:#493628; border-color:#f2e4cc; }
.navy .profile button.secondary { color:#f2e4cc; background:transparent; }
body.plum { --bg:#fffaf8; --paper:#fff; --ink:#4b2630; --muted:#775b63; --accent:#853846; --soft:#f6e4e4; --line:#e6cccc; --radius:4px; --display:Georgia,serif; }
.plum .mark { color:white; background:var(--accent); border-radius:4px; }
.plum .header { padding-block:30px; border-bottom:1px solid var(--line); }
.plum .hero { grid-template-columns:1fr 1fr; gap:60px; }
.plum .hero-visual img { height:480px; border-radius:0 100px 0 100px; }
.plum .hero h1 { font-size:clamp(45px,5vw,72px); }
.plum .hero-caption { background:var(--paper); margin:-55px 20px 0; border:1px solid var(--line); }
.plum .hero .kicker::before { content:'„'; display:block; font:100px/.7 Georgia,serif; letter-spacing:0; margin-bottom:25px; }
.plum button,.plum .button { color:white; }
.plum .button.secondary,.plum button.secondary { color:var(--ink); }
.plum .filter { color:var(--ink); }
.plum .filter[aria-pressed="true"] { color:white; }
.plum .metrics { border:0; background:var(--soft); padding:25px 30px; }
.plum .grid { grid-template-columns:repeat(2,1fr); gap:36px; }
.plum .card { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.plum .card img { aspect-ratio:1.9; }
.plum .card-body { padding:24px 0; }
.plum .card h3 { font-size:31px; }
.plum .section-head h2 { font-style:normal; }
.plum .profile { border-radius:0; }
body.blue { --bg:#f3f7f4; --paper:#fff; --ink:#183d35; --muted:#526c62; --accent:#14614f; --soft:#dcebe0; --line:#c5d9cc; --radius:12px; --display:system-ui,sans-serif; background-image:none; }
.blue .mark { background:var(--accent); border-radius:50%; transform:none; }
.blue .brand { font-size:28px; }
.blue .hero { grid-template-columns:1.15fr 1fr; gap:0; margin-block:35px 40px; padding:0; background:var(--paper); border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.blue .hero-copy { padding:40px; }
.blue .hero h1 { font-size:clamp(42px,4.7vw,64px); font-weight:720; }
.blue .hero-visual { padding:0; border:0; transform:none; height:100%; background:var(--soft); }
.blue .hero-visual img { height:390px; border-radius:0; }
.blue .hero-caption { padding:24px; background:var(--soft); }
.blue .metrics { border:0; gap:20px; }
.blue .metrics span { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px 22px; }
.blue .grid { grid-template-columns:repeat(2,1fr); gap:20px; }
.blue .card { display:grid; grid-template-columns:135px 1fr; }
.blue .card img { height:100%; min-height:260px; }
.blue .card-body { padding:24px; }
.blue .card .ordinal { display:none; }
.blue .card h3 { font-size:23px; letter-spacing:-.035em; }
.blue .card-foot { gap:15px; justify-content:space-between; }
.blue .profile { background:var(--soft); border:0; }
@media (max-width:1000px) {
  .sage .card:nth-child(1) { display:flex; grid-column:span 1; }
  .sage .card:nth-child(1) img { height:210px; min-height:0; }
  .sage .grid,.navy .grid { grid-template-columns:repeat(2,1fr); }
  .blue .card { grid-template-columns:1fr; }
  .blue .card img { min-height:0; height:200px; }
}
@media (max-width:700px) {
  .sage .hero,.clay .hero,.plum .hero,.blue .hero { grid-template-columns:1fr; gap:28px; padding-block:32px; }
  .sage .hero h1,.clay .hero h1,.navy .hero h1,.plum .hero h1,.blue .hero h1 { font-size:clamp(38px,10.5vw,51px); }
  .sage .hero-visual img { height:310px; }
  .clay .hero-copy { order:0; }
  .clay .hero-visual { order:0; }
  .clay .hero-visual img { height:330px; }
  .clay .hero .actions { justify-content:flex-start; }
  .navy .hero { padding:26px 22px; gap:20px; border-radius:16px; }
  .navy .hero-visual img { height:240px; }
  .navy .hero-caption { position:static; width:100%; margin-top:10px; }
  .plum .hero-visual img { height:320px; border-radius:0 75px 0 75px; }
  .plum .hero .kicker::before { font-size:70px; margin-bottom:16px; }
  .blue .hero { padding:0; gap:0; }
  .blue .hero-copy { padding:26px 22px; }
  .blue .hero-visual img { height:260px; }
  .blue .metrics { gap:12px; padding:0; }
  .blue .metrics span { flex-basis:100%; }
  .sage .grid,.clay .grid,.navy .grid,.plum .grid,.blue .grid { grid-template-columns:1fr; }
  .sage .card:nth-child(1) { grid-column:auto; display:flex; }
  .sage .card:nth-child(1) .card-body { padding:23px 0; }
  .sage .card:nth-child(1) img { height:auto; }
  .sage .metrics,.plum .metrics { padding:20px; }
  .blue .card { grid-template-columns:1fr; }
  .blue .card img { height:210px; min-height:0; }
  .clay .card-body { padding:25px; }
  .plum .card h3 { font-size:28px; }
  .profile input,.profile select { max-width:100%; }
}

/* Five independent Italian visual directions. */
body.sage { --bg:#faf7f0; --paper:#fffdf8; --ink:#252b29; --muted:#626863; --accent:#a34130; --soft:#f0e3d3; --line:#d7d4c9; --radius:0px; --display:Georgia,serif; }
.sage .header { border-bottom:3px solid var(--ink); }
.sage .brand { font:700 29px/1.1 Georgia,serif; }
.sage .mark { background:var(--accent); color:white; border-radius:50%; }
.sage .hero { grid-template-columns:1.12fr 1fr; gap:55px; padding-block:45px; }
.sage .hero h1 { font:500 clamp(43px,5.2vw,73px)/1.04 Georgia,serif; letter-spacing:-.055em; }
.sage .hero-visual img { border-radius:0; height:450px; filter:saturate(.7); }
.sage .hero-caption { background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--accent); margin:-42px 22px 0; }
.sage .hero .button { color:white; background:var(--accent); border-color:var(--accent); }
.sage .hero .button.secondary { background:transparent; color:var(--ink); border-color:var(--line); }
.sage .metrics { background:transparent; border-block:1px solid var(--ink); color:var(--muted); padding:20px 0; }
.sage .metrics b { color:var(--ink); }
.sage .grid { grid-template-columns:repeat(3,1fr); gap:30px; }
.sage .card { border-top:0; padding-top:0; }
.sage .card:nth-child(1) { grid-column:span 1; display:flex; }
.sage .card:nth-child(1) img { height:auto; min-height:0; }
.sage .card:nth-child(1) .card-body { padding:24px 0; }
.sage .card h3 { font:500 29px/1.15 Georgia,serif; }
.sage .profile { background:var(--soft); border-top:3px solid var(--accent); }
body.clay { --bg:#edf3e9; --paper:#fffdf8; --ink:#254230; --muted:#5a6c5e; --accent:#345d3d; --soft:#dce8d3; --line:#c7d7bf; --radius:25px; --display:system-ui,sans-serif; }
.clay .brand { font:750 27px/1.1 system-ui,sans-serif; }
.clay .hero { grid-template-columns:1fr 1.1fr; text-align:left; padding-top:28px; }
.clay .hero-copy { order:2; }
.clay .hero-visual { order:1; }
.clay .hero h1 { font:720 clamp(42px,4.7vw,64px)/1.06 system-ui,sans-serif; letter-spacing:-.06em; }
.clay .hero-visual img { border-radius:150px 150px 25px 25px; height:490px; }
.clay .hero-caption { border-radius:20px; }
.clay .metrics { border:0; gap:22px; padding:5px 0; }
.clay .metrics span { border:0; padding:18px 22px; background:var(--paper); border-radius:18px; }
.clay .grid { grid-template-columns:repeat(2,1fr); }
.clay .card { display:grid; grid-template-columns:160px 1fr; }
.clay .card img { height:100%; min-height:310px; }
.clay .card-body { padding:24px; }
.clay .card h3 { font:650 24px/1.2 system-ui,sans-serif; }
.clay .profile { border-top:0; background:var(--paper); }
body.navy { --bg:#162c34; --paper:#203c45; --ink:#f3ece0; --muted:#c1d0cf; --accent:#edbc86; --soft:#2c4850; --line:#466068; --radius:12px; --display:Georgia,serif; }
.navy .mark { background:var(--accent); color:#162c34; border-radius:4px; }
.navy button,.navy .button { color:#162c34; }
.navy .button.secondary,.navy button.secondary { color:var(--ink); }
.navy .hero { display:grid; grid-template-columns:1.1fr 1fr; padding:0; gap:45px; background:transparent; margin-block:45px; }
.navy .hero-copy { max-width:none; }
.navy .hero h1 { font-size:clamp(44px,5vw,68px); }
.navy .hero-visual img { height:480px; object-position:center; border-radius:12px; }
.navy .hero-caption { position:relative; inset:auto; width:auto; margin:-65px 20px 0; background:#2c4850; color:var(--ink); border:1px solid var(--line); }
.navy .hero-caption span { color:var(--muted); }
.navy .metrics { border-block:1px solid var(--line); color:var(--muted); }
.navy .metrics b { color:var(--ink); }
.navy .grid { grid-template-columns:repeat(3,1fr); }
.navy .card { background:var(--paper); border:0; }
.navy .card h3 { font-size:28px; }
.navy .filter { color:var(--ink); }
.navy .filter[aria-pressed="true"] { color:#162c34; }
.navy .profile { background:#edbc86; color:#162c34; }
.navy .profile p,.navy .profile .kicker { color:#354b4b; }
.navy .profile input,.navy .profile select { background:#fff9ef; color:#162c34; border-color:#bb986f; }
.navy .profile button { background:#162c34; color:#fff9ef; border-color:#162c34; }
.navy .profile button.secondary { background:transparent; color:#162c34; }
body.plum { --bg:#fff; --paper:#fff; --ink:#442f36; --muted:#725f67; --accent:#a74365; --soft:#f7e8ee; --line:#e6d7de; --radius:18px; --display:system-ui,sans-serif; }
.plum .brand { font:750 28px/1.1 system-ui,sans-serif; }
.plum .mark { border-radius:50%; }
.plum .hero { display:flex; flex-direction:column; align-items:stretch; gap:30px; padding-top:45px; text-align:center; }
.plum .hero-copy { max-width:870px; margin-inline:auto; }
.plum .hero .kicker::before { display:none; }
.plum .hero h1 { font:740 clamp(44px,5.5vw,76px)/1.05 system-ui,sans-serif; letter-spacing:-.065em; }
.plum .hero .lead { margin-inline:auto; max-width:740px; }
.plum .hero .actions { justify-content:center; }
.plum .hero-visual img { border-radius:110px 110px 18px 18px; height:340px; object-position:center 40%; }
.plum .hero-caption { max-width:550px; margin:-47px auto 0; }
.plum .metrics { border-radius:20px; }
.plum .grid { grid-template-columns:repeat(2,1fr); }
.plum .card { border:1px solid var(--line); border-radius:18px; }
.plum .card-body { padding:26px; }
.plum .card h3 { font:650 28px/1.18 system-ui,sans-serif; }
.plum .profile { border-radius:20px; }
body.blue { --bg:#f5f2f9; --paper:#fff; --ink:#302c49; --muted:#68627f; --accent:#615191; --soft:#e9e1f3; --line:#d8cfe5; --radius:8px; --display:system-ui,sans-serif; }
.blue .brand { font-weight:740; }
.blue .mark { background:var(--accent); border-radius:8px; }
.blue .hero { grid-template-columns:1.2fr 1fr; gap:35px; background:transparent; border:0; border-radius:0; overflow:visible; padding:25px 0; }
.blue .hero-copy { padding:0; }
.blue .hero h1 { font-size:clamp(42px,4.8vw,65px); }
.blue .hero-visual { background:var(--paper); padding:12px; border:1px solid var(--line); transform:rotate(-2deg); }
.blue .hero-visual img { height:370px; border-radius:4px; }
.blue .hero-caption { background:var(--paper); padding:19px 8px 5px; }
.blue .metrics { gap:25px; }
.blue .metrics span { border:0; border-left:3px solid var(--accent); background:transparent; border-radius:0; padding:6px 0 6px 18px; }
.blue .grid { grid-template-columns:1fr; gap:18px; }
.blue .card { grid-template-columns:220px 1fr; }
.blue .card img { height:100%; min-height:230px; }
.blue .card h3 { font-size:27px; }
.blue .card-body { padding:27px 75px 27px 27px; }
.blue .card .ordinal { display:block; font-size:25px; }
.blue .profile { background:var(--paper); border:1px solid var(--line); }
@media (max-width:1000px) {
 .sage .grid,.navy .grid { grid-template-columns:repeat(2,1fr); }
 .clay .card { grid-template-columns:1fr; }
 .clay .card img { min-height:0; height:220px; }
}
@media (max-width:700px) {
 .sage .hero,.clay .hero,.navy .hero,.blue .hero { grid-template-columns:1fr; gap:28px; padding:30px 0; margin-block:0; }
 .sage .hero h1,.clay .hero h1,.navy .hero h1,.plum .hero h1,.blue .hero h1 { font-size:clamp(38px,10.2vw,50px); }
 .sage .hero-visual img,.clay .hero-visual img,.navy .hero-visual img { height:320px; }
 .clay .hero-copy,.clay .hero-visual { order:0; }
 .clay .metrics span { flex-basis:100%; }
 .navy .hero-caption { margin:-55px 15px 0; }
 .plum .hero { padding-block:32px; }
 .plum .hero-visual img { height:240px; border-radius:70px 70px 16px 16px; }
 .plum .hero-caption { margin:-28px 15px 0; }
 .sage .grid,.clay .grid,.navy .grid,.plum .grid,.blue .grid { grid-template-columns:1fr; }
 .blue .hero-visual img { height:290px; }
 .blue .card { grid-template-columns:1fr; }
 .blue .card img { min-height:0; height:210px; }
 .blue .card-body { padding:24px 55px 24px 24px; }
 .plum .card h3 { font-size:25px; }
 .hero-copy,.hero-visual,.card-body,.profile>div,.profile form { min-width:0; }
 .profile button { overflow-wrap:anywhere; }
}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); border:0; white-space:nowrap; }