/* by: claude. The About plate: the funnel's glass frame over the live globe, holding a plate in the
   Claim Your Listing film's look (human, 2026-10-28): charcoal black, topographic contour lines, amber
   light for the accents. The contours are about-topo.svg, drawn by make_topo.py. */
@font-face{font-family:"Russo One";src:url(/check/assets/RussoOne-Regular.ttf) format("truetype");font-display:swap}
#about-viewport,#guides-viewport{--char:12,11,10;--cream:#f2f3ed;--dim:#a9a49b;--amber:#eea443;
  position:fixed;z-index:35;pointer-events:none}
#about-viewport[hidden],#guides-viewport[hidden]{display:none!important}
/* the funnel's floating questions belong to the assessment, so they leave while a plate is open (human, 2026-10-28) */
html.plate-open .owner-question{display:none!important}
.about-screen{pointer-events:auto;position:absolute;top:0;left:0;width:100%;height:fit-content;max-height:100%;container-type:inline-size;transform-origin:50% 40%;
  display:flex;flex-direction:column;padding:10px;border-radius:26px;border:1px solid rgba(220,235,250,.22);
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 45%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 80px rgba(0,0,0,.35)}
/* warm amber light pooled behind the copy, contours over a charcoal ground, as in the film */
.about-plate{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:17px;
  border:1px solid rgba(238,164,67,.18);color:var(--cream);
  background:radial-gradient(ellipse 70% 60% at 22% 30%,rgba(238,164,67,.10),transparent 70%),
    radial-gradient(ellipse 60% 70% at 85% 90%,rgba(120,84,40,.14),transparent 70%),
    url(/check/assets/about-topo.svg) center/cover no-repeat,
    linear-gradient(170deg,rgb(20,18,16),rgb(var(--char)) 55%,rgb(8,8,7));
  box-shadow:inset 0 0 80px rgba(0,0,0,.55)}
.about-toolbar{display:flex;padding:8px 20px;border-bottom:1px solid rgba(242,243,237,.08)}
.about-toolbar button{min-height:44px;font-size:14px;color:var(--dim)}
.about-toolbar button:hover,.about-toolbar button:focus-visible{color:var(--cream)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;padding:32px 40px 40px}
.about-figure img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid rgba(238,164,67,.28);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 50px rgba(0,0,0,.55),0 0 40px rgba(238,164,67,.08)}
.about-eyebrow{margin:0 0 14px;color:var(--amber);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-shadow:0 0 16px rgba(238,164,67,.45)}
.about-copy h1{margin:0;font:400 clamp(32px,9cqi,50px)/1.05 "Russo One",Arial,sans-serif;letter-spacing:.01em;color:var(--cream);
  text-transform:none}
/* the film's short glowing amber rule under each title */
.about-copy h1::after{content:"";display:block;width:76px;height:3px;margin-top:14px;border-radius:2px;background:var(--amber);
  box-shadow:0 0 10px rgba(238,164,67,.7),0 0 22px rgba(238,164,67,.35)}
.about-copy h1:focus{outline:none}
.about-where{margin:14px 0 22px;color:var(--amber);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 0 14px rgba(238,164,67,.35)}
.about-copy p:not(.about-eyebrow):not(.about-where){margin:0 0 14px;font-size:17px;line-height:1.65;color:var(--cream);text-wrap:pretty}
.about-copy p.about-second{color:var(--dim)}
.about-mail{display:inline-block;margin-top:8px;padding:8px 16px;border:1px solid rgba(238,164,67,.55);border-radius:999px;
  color:var(--amber);font-weight:700;letter-spacing:.04em;overflow-wrap:anywhere;text-decoration:none;
  text-shadow:0 0 16px rgba(238,164,67,.4);box-shadow:0 0 18px rgba(238,164,67,.12),inset 0 0 12px rgba(238,164,67,.06)}
.about-mail:hover,.about-mail:focus-visible{background:rgba(238,164,67,.1)}
.about-more{display:block;margin-top:18px;color:var(--dim);font-size:14px;text-underline-offset:4px}
.about-more:hover,.about-more:focus-visible{color:var(--cream)}
/* the Guides plate shares the shell above: a heading block, then the blog's cards */
.guides-head{padding:30px 40px 8px}
.guides-head h1{margin:0;font:400 clamp(28px,7cqi,44px)/1.08 "Russo One",Arial,sans-serif;color:var(--cream);text-transform:none}
.guides-head h1::after{content:"";display:block;width:76px;height:3px;margin-top:14px;border-radius:2px;background:var(--amber);
  box-shadow:0 0 10px rgba(238,164,67,.7),0 0 22px rgba(238,164,67,.35)}
.guides-head h1:focus{outline:none}
.guides-lead{margin:14px 0 0;color:var(--dim);font-size:16px;line-height:1.6}
.guides-count{margin:18px 0 0;color:var(--amber);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 0 14px rgba(238,164,67,.35)}
.guides-all{margin-top:10px}
.guides-list{list-style:none;margin:0;padding:18px 40px 32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.guide-card{display:flex;flex-direction:column;gap:8px;height:100%;box-sizing:border-box;padding:10px 10px 16px;border-radius:14px;text-decoration:none;
  background:rgba(8,8,7,.62);border:1px solid rgba(242,243,237,.1);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.guide-card:hover,.guide-card:focus-visible{border-color:rgba(238,164,67,.5);box-shadow:0 0 26px rgba(238,164,67,.14);transform:translateY(-2px)}
.guide-card>.guide-kind,.guide-card>.guide-title{padding:0 8px}
.guide-kind{margin-top:4px;color:var(--amber);font-size:11px;font-weight:700;letter-spacing:.14em}
.guide-title{color:var(--cream);font-size:16px;line-height:1.4;font-weight:600}
/* card art: a written guide's topic on a contour tile, or a video's own thumbnail with a play mark */
.guide-art{position:relative;display:flex;align-items:flex-end;aspect-ratio:16/9;overflow:hidden;border-radius:9px;
  border:1px solid rgba(238,164,67,.2);background:radial-gradient(ellipse 80% 90% at 20% 100%,rgba(238,164,67,.16),transparent 70%),
    url(/check/assets/about-topo.svg) 30% 40%/240% auto,rgb(14,13,11)}
.guide-topic-word{padding:0 16px 14px;font:400 clamp(20px,2.4cqi,28px)/1.1 "Russo One",Arial,sans-serif;color:var(--amber);
  text-shadow:0 0 18px rgba(238,164,67,.4)}
.guide-card:nth-child(2n) .guide-art{background-position:0 0,80% 10%,0 0}
.guide-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.guide-card:hover .guide-art img{transform:scale(1.04)}
.guide-art.is-video::before{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:rgba(8,8,7,.66);border:1px solid rgba(238,164,67,.7);box-shadow:0 0 18px rgba(238,164,67,.3)}
.guide-art.is-video::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:16px;margin:-8px 0 0 -5px;background:var(--amber);
  clip-path:polygon(0 0,100% 50%,0 100%)}
/* wide plate (a desktop, human 2026-10-28): the heading stays put on the left while the cards scroll */
@container (min-width:860px){
  .guides-plate{display:grid;grid-template-columns:minmax(260px,.75fr) 2fr;align-items:start}
  .guides-plate .about-toolbar{grid-column:1/-1}
  .guides-head{position:sticky;top:0;padding:44px 12px 40px 48px}
  .guides-head h1{font-size:clamp(34px,3.6cqi,46px)}
  .guides-list{padding:44px 48px 48px 28px;gap:18px}
  /* compact enough that the whole person section shows without a scrollbar (human, 2026-10-28) */
  .about-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;padding:18px 44px 22px}
  .about-toolbar{padding:2px 20px}
  .about-eyebrow{margin-bottom:8px}
  .about-copy h1{font-size:clamp(36px,4.2cqi,46px)}
  .about-copy h1::after{margin-top:10px}
  .about-where{margin:10px 0 12px}
  .about-copy p:not(.about-eyebrow):not(.about-where){font-size:15.5px;line-height:1.55;margin-bottom:10px}
  .about-mail{margin-top:4px;padding:6px 14px}
  .about-more{margin-top:10px}
}
/* on a desktop the About plate is only as tall as its words, centred in the space under the header */
@media (min-width:900px){#about-viewport .about-screen{bottom:0;margin:auto 0}}
/* the plate takes the funnel panel's width, so its layout follows its own size */
@container (max-width:700px){.about-grid{grid-template-columns:1fr;gap:20px;padding:20px 22px 26px}
  .guides-head{padding:22px 22px 6px}.guides-list{grid-template-columns:1fr;padding:14px 22px 24px}
  /* a phone keeps the list short: art beside the words */
  .guide-card{display:grid;grid-template-columns:128px 1fr;grid-template-rows:auto 1fr;column-gap:12px;row-gap:4px;padding:10px}
  .guide-art{grid-row:1/3;aspect-ratio:16/9;align-self:start}
  .guide-topic-word{padding:0 8px 8px;font-size:14px}
  .guide-card>.guide-kind,.guide-card>.guide-title{padding:0}
  .guide-kind{margin-top:2px;font-size:10px}.guide-title{font-size:15px}
  .guide-art.is-video::before{width:30px;height:30px;margin:-15px 0 0 -15px}.guide-art.is-video::after{width:10px;height:12px;margin:-6px 0 0 -3px}}
/* a guide opened from the plate fades in instead of cutting (same origin, browsers that support it) */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}
  /* the header holds still between the homepage and the other pages (2026-10-29), as reading-plate.css does */
  header.site{view-transition-name:site-header}}
@media (max-width:700px){.about-screen{padding:6px;border-radius:20px}.about-plate{border-radius:14px}.about-toolbar{padding:6px 12px}
  .about-copy p:not(.about-eyebrow):not(.about-where){font-size:16px}}
/* the header now carries five links; on the narrowest phones they stay on one line (navigation lint, 2026-10-29) */
@media (max-width:360px){header.site nav{font-size:13px}}