@charset "UTF-8";

:root {
  --pc-ground: #FAF8F2;
  --pc-ink: #2D2A22;
  --pc-accent: #26A633;
  --pc-support: #CDDDC5;
  --pc-surface: #FDFCFB;
  --pc-heading: "Voltaire", "Arial Narrow", sans-serif;
  --pc-reading: "Red Rose", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; color: var(--pc-ink); background: var(--pc-ground); font-family: var(--pc-reading); font-size: 18px; line-height: 1.65; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--pc-ink); outline-offset: 5px; background: var(--pc-support); }
img { display: block; max-width: 100%; }
svg { display: inline-block; vertical-align: middle; }
p { margin: 0 0 1.15em; }
h1, h2, h3 { font-family: var(--pc-heading); font-weight: 400; }
h1 { margin: 0; font-size: clamp(48px, 5vw, 72px); line-height: 1.03; letter-spacing: -.018em; }
h2 { margin: 0 0 .65em; font-size: clamp(36px, 3.7vw, 54px); line-height: 1.1; }
h3 { font-size: 28px; line-height: 1.2; }
.pc-skip { position: absolute; z-index: 10; top: -100px; left: 20px; padding: 8px 16px; background: var(--pc-ink); color: var(--pc-ground); }
.pc-skip:focus { top: 12px; }
.pc-width { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }

/* The lower word sets the baseline; the links begin at unequal indents. */
.pc-mast { display: grid; grid-template-columns: 340px 1fr; align-items: end; min-height: 126px; padding-block: 18px 16px; }
.pc-wordmark { display: block; width: max-content; font-family: var(--pc-heading); line-height: .78; font-size: 57px; text-decoration: none; letter-spacing: -.02em; }
.pc-wordmark > span { display: block; }
.pc-wordmark > span + span { margin-top: 5px; }
.pc-wordmark:hover { text-decoration: none; }
.pc-navigation { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: baseline; padding-bottom: 1px; }
.pc-navigation a { display: flex; align-items: center; gap: 9px; justify-self: start; font-size: 16px; line-height: 1.2; text-decoration: none; padding: 8px 0; border-bottom: 4px solid transparent; transition: border-color 160ms ease; }
.pc-navigation a:nth-child(2) { margin-left: 37px; }
.pc-navigation a:nth-child(3) { margin-left: 63px; }
.pc-navigation a:hover, .pc-navigation a[aria-current="page"] { border-bottom-color: var(--pc-accent); }
.pc-navigation svg, .pc-navigation i { flex: 0 0 19px; width: 19px; height: 19px; }
.pc-navigation svg { transition: transform 160ms ease; }
.pc-navigation a:hover svg { transform: translateY(-3px); }
.pc-term { white-space: nowrap; }

/* A broad photographic opening, with a cut, green-edged title band. */
.pc-opening { position: relative; }
.pc-hero-stage { height: 350px; padding-top: 24px; position: relative; isolation: isolate; }
.pc-hero-stage::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--pc-support) url("/catchword-wheel-af84e129ca87/compare-braces.webp") center 43% / cover no-repeat; mask-image: radial-gradient(circle at 50% 100%, transparent 0 51px, #000 52px); -webkit-mask-image: radial-gradient(circle at 50% 100%, transparent 0 51px, #000 52px); }
.pc-title-band { position: relative; width: min(960px, calc(100% - 320px)); margin-left: max(56px, calc((100% - 1280px) / 2)); margin-right: auto; padding: 19px 76px 25px 27px; background: var(--pc-ground); border-left: 16px solid var(--pc-accent); clip-path: polygon(0 0, calc(100% - 56px) 0, calc(100% - 56px) 24px, 100% 24px, 100% calc(100% - 28px), calc(100% - 28px) calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.pc-home-title { max-width: 1180px; font-size: clamp(54px, 5vw, 72px); line-height: 1.04; }
.pc-home-title .pc-term { display: block; }
.pc-opening-layout { display: grid; grid-template-columns: minmax(0, 1fr) 228px minmax(0, 1fr); grid-template-rows: minmax(114px, auto) auto auto; column-gap: 44px; position: relative; align-items: start; }
.pc-home-lead { grid-column: 1; grid-row: 1; align-self: start; width: min(100%, 348px); margin: -126px 0 0; padding: 14px 20px 14px 0; background: var(--pc-ground); box-shadow: -56px 0 var(--pc-ground); font-size: 18px; line-height: 1.5; }
.pc-wheel { grid-column: 2; grid-row: 1; width: 228px; height: auto; margin: -114px auto 0; position: relative; }
.pc-annulus { width: 100%; height: auto; aspect-ratio: 1; mask-image: radial-gradient(circle at center, transparent 0 31%, #000 31.3% 70.5%, transparent 70.8%); -webkit-mask-image: radial-gradient(circle at center, transparent 0 31%, #000 31.3% 70.5%, transparent 70.8%); }
.pc-ring-photo { width: 100%; height: 100%; object-fit: cover; }
.pc-rim-detail { position: absolute; width: 86px; height: 86px; left: calc(50vw - 106px); top: -96px; object-fit: cover; border: 5px solid var(--pc-ground); box-shadow: 12px 12px 0 var(--pc-accent); }
.pc-scene-note { margin: 6px 0 0; font-size: 16px; line-height: 1.5; }
.pc-mobile-scene { display: none; }

/* Open ink on continuous ground, never an interactive card or a filled field. */
.pc-return-seam { grid-column: 1 / -1; grid-row: 2; margin-top: 10px; padding: 0; color: var(--pc-ink); background: var(--pc-ground); cursor: auto; }
.pc-return-word { display: block; font-family: var(--pc-heading); font-size: 46px; line-height: 1; margin: 0 0 3px; }
.pc-promise-paragraph { font-size: 17px; line-height: 1.5; text-indent: 0; max-width: 75ch; margin: 0; cursor: auto; }
.pc-opening-end { grid-column: 1 / -1; grid-row: 3; font-size: 16px; margin: 15px 0 0; }

/* The carry-over word hangs into the margin and stays beside its reading run. */
.pc-reading { position: relative; }
.pc-run { display: grid; grid-template-columns: 300px minmax(0, 745px); gap: 56px; padding-block: 78px 76px; position: relative; }
.pc-run + .pc-run { border-top: 3px solid var(--pc-ink); }
.pc-run::before { content: ""; position: absolute; width: 76px; height: 12px; top: -7px; left: -24px; background: var(--pc-accent); }
.pc-gutter { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 14px; align-items: start; position: sticky; top: 32px; align-self: start; padding-top: 4px; margin-left: -24px; }
.pc-catchword { font-family: var(--pc-heading); font-size: 66px; line-height: .98; overflow-wrap: anywhere; }
.pc-catchword-long { font-size: 49px; }
.pc-notch { width: 40px; height: 75px; margin-top: 3px; }
.pc-run-copy { max-width: 745px; }
.pc-run-copy h2 { max-width: 22ch; }
.pc-run-copy p { max-width: 65ch; }
.pc-run-copy p:last-child { margin-bottom: 0; }
.pc-run-copy p a { text-decoration-color: var(--pc-ink); text-decoration-thickness: 2px; }
.pc-run-copy p a:hover { background: var(--pc-support); text-decoration-thickness: 3px; }
.pc-opening + .pc-reading { margin-top: 65px; }
.pc-reading > .pc-run:first-child { border-top: 3px solid var(--pc-ink); }

/* Inner photographic bands keep square edges and an offset caption seam. */
.pc-article-heading { border-top: 12px solid var(--pc-accent); padding-top: 25px; }
.pc-breadcrumb { font-size: 16px; margin-bottom: 25px; display: flex; align-items: center; gap: 13px; }
.pc-breadcrumb svg, .pc-breadcrumb i { width: 21px; height: 21px; }
.pc-article-title { max-width: 1100px; }
.pc-article-lead { max-width: 680px; margin: 28px 0 0 356px; font-size: 22px; line-height: 1.5; }
.pc-picture-band { margin: 43px 0 0; position: relative; }
.pc-picture-band img { width: 100%; height: 290px; object-fit: cover; background: var(--pc-support); }
.pc-picture-band figcaption { position: relative; width: max-content; max-width: min(620px, calc(100% - 112px)); margin: -26px 0 0 max(56px, calc((100% - 1280px) / 2)); padding: 16px 24px 15px; background: var(--pc-ground); border-top: 6px solid var(--pc-ink); box-shadow: 12px 12px 0 var(--pc-accent); font-size: 16px; line-height: 1.5; }
.pc-article-opening + .pc-reading { margin-top: 76px; }
.pc-reading-end { border-top: 12px solid var(--pc-accent); display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 28px; margin-top: 8px; }
.pc-reading-end p { max-width: 400px; margin: 0; font-family: var(--pc-heading); font-size: 34px; line-height: 1.14; }
.pc-reading-links { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.pc-reading-links a { display: flex; align-items: center; gap: 9px; padding-block: 8px; }
.pc-reading-links svg, .pc-reading-links i { width: 21px; height: 21px; }
.pc-reading-links a:hover { text-decoration-thickness: 3px; background: var(--pc-support); }
.pc-footer { background: var(--pc-support); margin-top: 70px; padding-block: 42px 30px; border-top: 14px solid var(--pc-accent); }
.pc-foot-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; }
.pc-foot-voice { max-width: 560px; font-size: 21px; line-height: 1.5; }
.pc-foot-nav { display: flex; flex-wrap: wrap; align-content: start; gap: 14px 24px; }
.pc-foot-nav a { padding-block: 4px; }
.pc-copyright { grid-column: 1 / -1; font-family: var(--pc-heading); font-size: 32px; margin: 8px 0 0; }
.pc-missing { padding-block: 55px 100px; border-top: 12px solid var(--pc-accent); }
.pc-missing p { max-width: 620px; margin-top: 30px; }

@media (min-width: 1600px) {
  .pc-hero-stage { height: 380px; }
  .pc-title-band { margin-left: max(56px, calc((100% - 1392px) / 2)); }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .pc-width { width: calc(100% - 72px); }
  .pc-mast { grid-template-columns: 230px 1fr; }
  .pc-navigation a:nth-child(2) { margin-left: 10px; }
  .pc-navigation a:nth-child(3) { margin-left: 20px; }
  .pc-title-band { width: calc(100% - 300px); margin-left: 36px; padding-right: 58px; }
  .pc-home-title { font-size: clamp(36px, 5.2vw, 54px); }
  .pc-hero-stage { height: 370px; }
  .pc-opening-layout { grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr); gap: 20px; grid-template-rows: 105px auto auto; }
  .pc-wheel { width: 210px; height: 210px; margin-top: -105px; }
  .pc-home-lead { font-size: 16px; margin-top: -145px; box-shadow: -36px 0 var(--pc-ground); padding-right: 10px; }
  .pc-rim-detail { left: calc(50vw - 100px); top: -82px; width: 68px; height: 68px; }
  .pc-scene-note { margin-left: 12px; }
  .pc-run { grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
  .pc-catchword { font-size: 48px; }
  .pc-catchword-long { font-size: 37px; }
  .pc-article-lead { margin-left: 242px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; line-height: 1.65; }
  .pc-width { width: calc(100% - 40px); }
  .pc-mast { grid-template-columns: 1fr 164px; min-height: 0; height: 80px; padding-block: 13px 12px; align-items: center; }
  .pc-wordmark { font-size: 31px; line-height: .8; }
  .pc-wordmark > span + span { margin-top: 5px; }
  .pc-navigation { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .pc-navigation a { font-size: 16px; padding-block: 0; line-height: 1.1; min-height: 20px; gap: 7px; border: 0; }
  .pc-navigation a:nth-child(2) { margin-left: 18px; }
  .pc-navigation a:nth-child(3) { margin-left: 39px; }
  .pc-navigation a:hover, .pc-navigation a[aria-current="page"] { text-decoration: underline; }
  .pc-navigation svg, .pc-navigation i { flex-basis: 15px; width: 15px; height: 15px; }
  h1 { font-size: 38px; line-height: 1.05; letter-spacing: -.015em; }
  h2 { font-size: 34px; }
  .pc-hero-stage { height: auto; padding-top: 0; }
  .pc-hero-stage::before { display: none; }
  .pc-title-band { width: calc(100% - 40px); margin-inline: auto; padding: 16px 0 0; border-left: 0; border-top: 9px solid var(--pc-accent); clip-path: none; }
  .pc-home-title { font-size: 38px; line-height: 1.05; }
  .pc-opening-layout { display: grid; grid-template-columns: minmax(0, 1fr) 116px; grid-template-rows: auto 190px auto auto; gap: 0 18px; padding-top: 17px; align-items: start; }
  .pc-return-seam { grid-column: 1 / -1; grid-row: 1; margin: 0 0 24px; }
  .pc-return-word { font-size: 38px; margin-bottom: 5px; }
  .pc-promise-paragraph { font-size: 16px; line-height: 1.45; }
  /* The first mobile photograph follows the complete mention in painted order. */
  .pc-mobile-scene { display: block; grid-column: 1 / -1; grid-row: 2; margin-inline: -20px; height: 190px; background: var(--pc-support) url("/catchword-wheel-af84e129ca87/compare-braces.webp") center / cover no-repeat; }
  .pc-home-lead { grid-column: 1; grid-row: 3; width: auto; max-width: none; padding: 0; box-shadow: none; font-size: 16px; line-height: 1.5; margin: 24px 0 0; }
  .pc-wheel { grid-column: 2; grid-row: 3; width: 116px; height: 116px; margin: 24px 0 0; }
  .pc-rim-detail, .pc-scene-note { display: none; }
  .pc-opening-end { grid-column: 1 / -1; grid-row: 4; margin-top: 22px; font-size: 16px; line-height: 1.5; }
  .pc-opening + .pc-reading { margin-top: 44px; }
  .pc-run { grid-template-columns: 86px minmax(0, 1fr); gap: 17px; padding-block: 42px; }
  .pc-run::before { left: 0; width: 48px; height: 9px; top: -6px; }
  .pc-gutter { display: block; position: static; margin-left: 0; padding-top: 4px; }
  .pc-catchword { font-size: 30px; line-height: 1; }
  .pc-catchword-long { font-size: 26px; }
  .pc-notch { display: block; width: 25px; height: 45px; margin: 15px 0 0 2px; }
  .pc-run h2 { font-size: 30px; line-height: 1.13; }
  .pc-run-copy p { margin-bottom: 1.2em; }
  .pc-article-heading { border-top-width: 9px; padding-top: 18px; }
  .pc-breadcrumb { font-size: 16px; line-height: 1.4; margin-bottom: 24px; gap: 10px; }
  .pc-article-title { font-size: 39px; }
  .pc-article-lead { margin: 22px 0 0; font-size: 18px; line-height: 1.55; }
  .pc-picture-band { margin-top: 28px; }
  .pc-picture-band img { height: 190px; }
  .pc-picture-band figcaption { width: auto; max-width: none; margin: 0 20px; padding: 12px 0 0; box-shadow: none; border-top: 5px solid var(--pc-accent); font-size: 16px; }
  .pc-article-opening + .pc-reading { margin-top: 38px; }
  .pc-reading-end { display: block; padding-block: 23px; margin-top: 8px; border-top-width: 9px; }
  .pc-reading-end p { font-size: 28px; margin-bottom: 20px; }
  .pc-reading-links { display: block; }
  .pc-reading-links a { width: max-content; max-width: 100%; }
  .pc-footer { margin-top: 40px; padding-block: 30px; border-top-width: 10px; }
  .pc-foot-inner { grid-template-columns: 1fr; gap: 17px; }
  .pc-foot-voice { font-size: 18px; }
  .pc-copyright { margin: 10px 0 0; font-size: 28px; }
}
@media (max-width: 360px) {
  .pc-width { width: calc(100% - 32px); }
  .pc-mast { grid-template-columns: 1fr 150px; }
  .pc-navigation a:nth-child(3) { margin-left: 24px; }
  .pc-home-title { font-size: 34px; }
  .pc-title-band { width: calc(100% - 32px); }
  .pc-mobile-scene { margin-inline: -16px; }
  .pc-run { grid-template-columns: 66px minmax(0, 1fr); gap: 14px; }
  .pc-catchword { font-size: 26px; }
  .pc-catchword-long { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
