/* TemplePC: a static, typographic technology magazine. */
:root {
  --paper: #f6f5f2;
  --ink: #252a30;
  --muted: #656972;
  --line: #dddeda;
  --accent: #b44732;
  --soft: #eeeae4;
  --sans: 'Segoe UI', Arial, sans-serif;
  --display: 'Segoe UI', Arial, sans-serif;
}
body { font-size: 15px; background: var(--paper); }
::selection { background: #f1c6bc; color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--accent); }
.container { width: min(1280px, calc(100% - 80px)); }
.topline { background: #eeece7; color: #525660; font-size: 10px; letter-spacing: 1.3px; }
.topline .container { min-height: 32px; }
.site-header { background: #fff; border-top: 3px solid var(--accent); }
.masthead { height: 100px; gap: 30px; }
.brand { gap: 13px; font: 750 35px/1 var(--display); letter-spacing: -1.5px; }
.brand-wordmark { white-space: nowrap; }
.brand-pc { color: var(--ink); font-weight: 750; }
.brand-emblem { display: block; flex: none; width: 44px; height: 44px; }
.brand .brand-emblem img { width: 100%; height: 100%; object-fit: contain; }
.brand-caption { color: var(--muted); font-size: 12px; padding-left: 28px; }
.header-actions { gap: 20px; }
.search-trigger, .about-trigger { font-size: 12px; }
.about-trigger { border-radius: 0; }
.language-switch { border-radius: 0; border-color: var(--line); font-size: 11px; }
.language-switch a { border-radius: 0; color: var(--muted); padding: 6px 8px; }
.language-switch a[aria-current] { background: var(--ink); color: #fff; }
.language-switch a:not([aria-current]):hover { background: var(--soft); }
.nav-border { border-bottom: 1px solid var(--line); background: #fff; }
.navigation { height: 53px; }
.nav-links { gap: 35px; }
.nav-links a { font-size: 13px; font-weight: 650; }
.nav-links a.active { color: var(--accent); }
.nav-links a:after { background: var(--accent); height: 3px; }
.nav-note { font-size: 11px; }
.nav-note > span { border-radius: 0; background: var(--accent); width: 6px; height: 6px; }
.page-intro { padding: 42px 0 34px; align-items: end; }
.intro-kicker { display: block; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; margin-bottom: 12px; }
.page-intro h1 { font: 750 clamp(36px, 4.1vw, 57px)/1.08 var(--display); letter-spacing: -2.3px; margin: 0; }
.page-intro p { max-width: 320px; font-size: 13px; line-height: 1.75; padding-bottom: 3px; }
.featured-grid { grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr); gap: 26px; align-items: stretch; }
.hero-story { height: auto; display: flex; flex-direction: column; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 0; }
.hero-story > img { width: 100%; height: 252px; flex: none; object-position: 50% 43%; }
.hero-story:after { display: none; }
.hero-story:hover > img { transform: none; }
.hero-top { top: 20px; left: 22px; right: 22px; align-items: start; }
.hero-label { background: #fff; color: var(--ink); padding: 8px 11px; border-radius: 0; box-shadow: 0 2px 8px #00000015; }
.hero-label span { color: var(--accent); }
.image-credit { background: #252a30de; color: #fff; padding: 5px 8px; font-size: 9px; text-shadow: none; }
.hero-copy { position: static; padding: 25px 28px 24px; flex: 1; }
.eyebrow { color: var(--accent); font-size: 10px; letter-spacing: 1.25px; font-weight: 700; }
.hero-copy > .eyebrow { color: var(--accent); font-size: 9px; }
.hero-copy h2 { font: 730 clamp(26px, 2.4vw, 35px)/1.13 var(--display); letter-spacing: -1.05px; margin: 10px 0 12px; }
.hero-copy h2 button:hover { color: var(--accent); }
.hero-copy p { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 620px; margin: 0 0 19px; }
.hero-read { color: var(--ink); border-bottom-color: var(--accent); font-size: 12px; font-weight: 650; padding-bottom: 4px; }
.hero-read:hover { color: var(--accent); }
.hero-meta { color: var(--muted); font-size: 8px; }
.tool-feature { border-radius: 0; background: #eeeae4; border: 1px solid #ded8d0; padding: 27px 27px 20px; }
.tool-eyebrow { color: var(--accent); font-size: 10px; letter-spacing: 1.15px; gap: 9px; }
.tool-symbol { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--accent); font: 700 12px/1 monospace; }
.free-label { border-color: #c6bdb2; border-radius: 0; color: #52545a; font-size: 8px; }
.tool-feature h2 { font: 730 34px/1.12 var(--display); letter-spacing: -1.2px; margin: 25px 0 13px; }
.tool-feature p { color: #60636a; font-size: 13px; line-height: 1.75; }
.desk-illustration { min-height: 180px; margin: 18px -4px 14px; }
.desk-illustration img { max-height: 192px; }
.dimension-label { color: #686b70; font: 10px/1.4 monospace; bottom: 5px; }
.button { border-radius: 0; padding: 13px 18px; font-size: 12px; font-weight: 650; }
.button-dark { background: var(--accent); color: #fff; }
.button-dark:hover { background: #923827; }
.button-outline { border-color: #c1c3c6; }
.button-outline:hover { background: #e9e7e2; }
.tool-note { color: #676a70; font-size: 10px; letter-spacing: 0; margin-top: 12px; }
.topic-strip { padding: 21px 0; margin-top: 15px; gap: 28px; border-bottom: 2px solid var(--ink); }
.topic-strip > span { color: #525660; font-size: 9px; }
.topic-strip button { font-size: 12px; gap: 15px; }
.topic-strip button:hover, .topic-strip button span { color: var(--accent); }
.articles-section { padding-top: 35px; }
.section-header { margin-bottom: 25px; }
.section-header h2 { font: 730 32px/1.2 var(--display); letter-spacing: -1.1px; }
.filters { gap: 6px; }
.filters button { font-size: 11px; border-radius: 0; color: var(--muted); padding: 8px 11px; }
.filters button:hover { background: var(--soft); }
.filters button.selected { background: var(--ink); color: #fff; }
.article-grid { gap: 32px 26px; }
.article-card { padding: 0 0 23px; }
.card-image { border-radius: 0; background: var(--soft); aspect-ratio: 1.75; }
.card-image:after { border-radius: 0; color: var(--accent); }
.category { color: var(--accent); font-size: 9px; }
.reading-time, .card-bottom { color: #6a6d75; font-size: 10px; }
.article-card h3 { font: 700 23px/1.28 var(--display); letter-spacing: -.55px; margin: 10px 0; }
.article-card h3 button:hover { color: var(--accent); }
.article-card p { font-size: 12px; line-height: 1.75; }
.no-results { background: var(--soft); border-radius: 0; }
.text-button { color: var(--accent); }
.editorial-band { margin: 46px 0 44px; border: 0; border-left: 4px solid var(--accent); border-radius: 0; background: #eeece7; padding: 28px; gap: 25px; }
.editorial-icon { padding: 0; background: none; border-radius: 0; }
.editorial-band h2 { font: 730 28px/1.25 var(--display); letter-spacing: -.8px; }
.editorial-band p { font-size: 12px; line-height: 1.75; }
.site-footer { background: #fff; border-top: 2px solid var(--ink); }
.footer-main { padding-block: 32px; }
.footer-main .brand { font-size: 27px; font-weight: 750; }
.footer-main .brand-emblem { width: 32px; height: 32px; }
.footer-main > div { font-size: 11px; }
.footer-main a:hover, .footer-main button:hover { color: var(--accent); }
.footer-bottom { color: #686b73; font-size: 10px; padding-block: 19px; }
dialog { border-color: var(--line); border-radius: 2px; background: #fff; box-shadow: 0 24px 90px #252a302b; }
dialog::backdrop { background: #252a3088; }
.dialog-heading h2 { font: 730 30px/1.15 var(--display); letter-spacing: -.7px; }
.dialog-close { background: #fff; border-color: var(--line); border-radius: 2px; }
.brand-static { width: 54px; height: 54px; }
.article-text h2 { font: 750 38px/1.15 var(--display); }
.article-lead, .about-dialog > p { color: var(--muted); }
.article-body h3 { font: 700 24px/1.3 var(--display); }
.demo-notice { background: #f2efea; border-left-color: var(--accent); color: #62656d; }
.search-field { border-color: #c1c3c6; border-radius: 0; }
.search-field svg { stroke: var(--accent); }
.search-result img { border-radius: 0; }
.search-result strong { font: 650 17px/1.3 var(--display); }
.search-result small, .search-result:hover strong { color: var(--accent); }
.about-dialog h2 { font: 750 40px/1.12 var(--display); }
.planner-dialog { background: #fff; }
.planner-controls label { color: #5f626a; }
.planner-controls select { border-color: #cfd0d0; border-radius: 0; }
.view-switch { background: #efede9; border-radius: 0; }
.view-switch button { border-radius: 0; color: #61656d; }
.view-switch button[aria-pressed=true] { background: #fff; color: var(--accent); box-shadow: 0 1px 4px #252a301a; }
.planner-canvas-wrap { background: #f3f1ed; border-color: var(--line); border-radius: 0; }
.planner-status { color: #364b40; }
.planner-status.warning { color: #975023; }
.planner-summary > span { color: #646870; }
.placement-note { color: #62656d; background: #efede9; border-radius: 0; }
.desk-item:focus-visible .item-footprint { stroke: var(--accent); }
.desk-item.overlapping .item-footprint { fill: #b44732; stroke: #b44732; }
@media (max-width: 1100px) {
  .container { width: calc(100% - 52px); }
  .brand-caption { display: none; }
  .page-intro h1 { font-size: 46px; }
  .page-intro p { max-width: 270px; font-size: 12px; }
  .featured-grid { grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); gap: 20px; }
  .hero-copy { padding: 23px; }
  .hero-copy h2 { font-size: 29px; }
  .tool-feature { padding: 24px 22px 20px; }
  .tool-feature h2 { font-size: 30px; }
  .editorial-icon { display: none; }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 36px); }
  .topline .container { min-height: 29px; font-size: 8px; }
  .masthead { height: 80px; gap: 12px; }
  .brand { font-size: 27px; gap: 9px; letter-spacing: -1.2px; }
  .brand-emblem { width: 33px; height: 33px; }
  .header-actions { gap: 9px; }
  .language-switch { font-size: 10px; }
  .language-switch a { padding: 5px 6px; }
  .search-trigger { padding: 8px 3px; }
  .navigation { height: auto; padding-block: 13px; }
  .nav-links { gap: 24px; }
  .nav-links a { font-size: 12px; }
  .page-intro { display: block; padding: 29px 0 26px; }
  .intro-kicker { font-size: 9px; margin-bottom: 11px; letter-spacing: 1.1px; }
  .page-intro h1 { max-width: none; font-size: clamp(36px, 7.8vw, 49px); line-height: 1.08; letter-spacing: -1.7px; }
  .page-intro p { max-width: 380px; margin-top: 17px; font-size: 12px; }
  .featured-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-story { height: auto; }
  .hero-story > img { height: 210px; }
  .hero-top { left: 17px; right: 17px; top: 17px; }
  .hero-copy { padding: 23px 21px; }
  .hero-copy h2 { font-size: 29px; }
  .hero-copy p { font-size: 12px; }
  .tool-feature { min-height: 0; padding: 24px; }
  .tool-feature h2 { font-size: 33px; margin-top: 21px; }
  .tool-feature p { font-size: 12px; }
  .desk-illustration { margin-top: 12px; min-height: 175px; }
  .desk-illustration img { max-height: 190px; }
  .topic-strip { gap: 12px 21px; padding-block: 22px; }
  .topic-strip button { font-size: 11px; }
  .section-header h2 { font-size: 29px; }
  .filters { gap: 3px; }
  .filters button { font-size: 10px; padding: 8px 10px; }
  .article-card h3 { font-size: 21px; }
  .article-card p { font-size: 12px; }
  .editorial-band { padding: 24px; }
  .editorial-band h2 { font-size: 26px; }
  .footer-main .brand { font-size: 25px; }
  .footer-bottom { font-size: 9px; }
  .article-text h2 { font-size: 30px; }
  .about-dialog h2 { font-size: 34px; }
}
@media (max-width: 430px) {
  .hero-copy h2 { font-size: 27px; }
  .article-card h3 { font-size: 23px; }
  .image-credit { font-size: 8px; }
}
@media (max-width: 370px) {
  .container { width: calc(100% - 28px); }
  .brand { font-size: 23px; gap: 7px; letter-spacing: -1px; }
  .brand-emblem { width: 28px; height: 28px; }
  .header-actions { gap: 6px; }
  .language-switch a { padding: 5px; }
  .page-intro h1 { font-size: 33px; }
}