/* The supplied 2026-09-17 desktop design is in reference.css.
   These additions cover semantics, actual states and smaller/larger viewports. */
[hidden] { display:none !important; }
.landing { overflow-x:clip; }
#top { scroll-margin-top:72px; }
a[data-action] { cursor:pointer; }
a:focus-visible, button:focus-visible { outline:3px solid #F7F3F5; outline-offset:5px; }
#why a:focus-visible { outline-color:#08070A; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:disabled:hover { color:inherit; border-color:#2C2233; background:transparent; }
.entry-feedback { margin:14px 0 0; color:#B0A2B4; font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.entry-feedback:empty { display:none; }
.entry-modal { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:#F7F3F5; }
.entry-modal::backdrop { background:transparent; }
.entry-modal > div { overflow-y:auto; }
.entry-modal > div > div:last-child { max-height:calc(100dvh - 48px); overflow-y:auto; }
.entry-modal [data-action="closeModal"]:is(button) { min-width:32px; min-height:32px; margin:-8px; }
html:has(.entry-modal[open]) { overflow:hidden; }
.topic-card { min-width:0; }
.has-cover > span[aria-hidden] { display:none; }
.topic-cover { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.cover-disclosure { position:absolute; right:8px; bottom:8px; padding:3px 6px; background:rgba(8,7,10,.8); color:#F7F3F5; font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.topic-content { overflow-wrap:anywhere; }
@media (min-width:1600px) {
  /* Retain the owner's large-screen gutters; the supplied proportions scale up. */
  .hero-frame,.content-frame { max-width:none; padding-inline:3vw; }
  .hero-title { font-size:clamp(152px,9.6vw,246px); }
  .hero-copy { font-size:clamp(19px,1.35vw,32px); }
  .hero-cta { min-height:clamp(60px,4.2vw,90px); padding-inline:2.4vw; font-size:clamp(17px,1.2vw,28px); }
  .hero-content { gap:clamp(44px,3.1vw,80px); }
}
@media (max-width:1000px) {
  .site-header nav { gap:20px; margin-left:28px; }
  .entry-grid,.faq-grid { gap:28px; }
  .section-heading h2 { font-size:30px; }
  .section-heading > span:last-child:not(:first-child) { max-width:220px; line-height:1.6; }
  .feed-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .benefits-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .closing-grid { gap:28px; }
  .footer-grid { gap:24px; }
}
@media (max-width:760px) {
  .site-header { height:112px; flex-wrap:wrap; }
  .site-header > a { height:66px; gap:8px; }
  .site-header > a > span:first-child { height:66px; padding-left:20px; }
  .site-header > a svg { width:40px; height:40px; }
  .site-header > a > span:last-child > span:first-child { font-size:24px; }
  .site-header > a > span:last-child > span:last-child { font-size:9px; }
  .site-header > div { padding-right:20px; }
  .site-header > div > a { height:40px; padding:0 16px; font-size:13px; }
  .site-header nav { order:3; width:100%; height:44px; justify-content:space-between; margin:0; padding:0 20px; gap:12px; border-top:1px solid #2C2233; font-size:12px; }
  .site-header nav a { display:flex; align-items:center; height:44px; white-space:nowrap; }
  #top { min-height:calc(100svh - 112px); scroll-margin-top:112px; }
  .hero-frame { padding:22px 20px 38px; }
  .hero-frame > div { gap:36px; }
  .hero-status { gap:10px; padding-bottom:16px; font-size:10px; letter-spacing:0; }
  .hero-status > span:nth-child(2) { display:none; }
  .hero-status > span:last-child { font-size:10px; padding:3px 6px; }
  .hero-content { gap:32px; padding-block:38px 10px; }
  .hero-title { font-size:clamp(68px,17.8vw,130px); }
  .hero-title > span:first-child { -webkit-text-stroke-width:1.5px; }
  .hero-title > span:last-child { -webkit-text-stroke-width:1.3px; }
  .hero-copy { max-width:none; font-size:16px; line-height:1.85; }
  .hero-content > div { width:100%; gap:24px; }
  .hero-content > div > div { width:100%; }
  .hero-cta { width:100%; height:56px; font-size:16px; }
  .hero-content > div > div > span { font-size:10px; }
  #top [data-ref="railA"] > span { font-size:30px; }
  #top [data-ref="railA"] > span:nth-child(even) { font-size:12px; }
  #top [data-ref="railB"] > span { font-size:24px; }
  #top [data-ref="railB"] > span:nth-child(even) { font-size:10px; }
  #entry,#feed,#faq { padding:44px 20px 0; scroll-margin-top:128px; }
  #why { margin-top:44px; scroll-margin-top:112px; }
  .why-frame { padding:44px 20px; }
  .section-heading { gap:12px; flex-wrap:wrap; padding-bottom:18px; }
  .section-heading > span:first-child { font-size:42px; }
  .section-heading h2 { font-size:24px; line-height:1.15; }
  #why .section-heading h2 { flex:1; }
  #entry .section-heading > span:last-child { max-width:none; width:100%; margin:0; font-size:10px; }
  #feed .section-heading > a { width:100%; margin:2px 0 0; font-size:11px; }
  .entry-grid,.faq-grid,.closing-grid { grid-template-columns:minmax(0,1fr); gap:24px; padding-top:24px; }
  .entry-grid > div:first-child > p { font-size:16px; }
  .entry-stats > span { padding:14px 10px; }
  .entry-stats > span > span:first-child { font-size:9px; letter-spacing:.08em; }
  .entry-stats > span > span:last-child { font-size:16px; }
  .feed-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topic-card > span:last-child { padding:14px 12px; }
  .topic-card > span:last-child > span:first-child { font-size:16px; }
  .topic-card:nth-child(3) { padding:16px 12px; gap:12px; }
  .topic-card:nth-child(3) > span:nth-child(2) { font-size:20px; }
  .topic-card:nth-child(3) > span:nth-child(3) { font-size:13px; }
  .benefits-grid { gap:28px 20px; }
  .benefits-grid h3 { font-size:18px; }
  .benefits-grid p { font-size:14px; }
  .faq-grid { padding-top:0; }
  .faq-grid > div:last-child { margin-top:0; }
  section[data-screen-label="底部入口"] { margin-top:44px; }
  .closing-grid { padding:48px 20px; }
  .closing-grid h2 { font-size:clamp(40px,13vw,72px); }
  .closing-grid p { font-size:16px; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:36px 20px; gap:28px; }
  .footer-grid > div:first-child { grid-column:1/-1; }
  .footer-bottom { flex-wrap:wrap; padding:16px 20px; }
  .footer-bottom > span { font-size:10px; }
  .entry-modal > div { padding:16px; }
  .entry-modal > div > div:last-child { max-height:calc(100dvh - 32px); }
  .entry-modal [data-bind="assignedText"] { font-size:24px; }
}
@media (max-width:380px) {
  .feed-grid { grid-template-columns:minmax(0,1fr); }
  .hero-status { gap:6px; font-size:9px; }
  .site-header > div > a { padding:0 12px; }
  .site-header nav { gap:8px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* Full-bleed photographic Hero. The overlay keeps all controls readable. */
#top { isolation:isolate; }
.hero-background { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:linear-gradient(135deg,#262527 0%,#353334 45%,#4B4743 78%,#403832 100%); }
.hero-background img { position:absolute; display:block; height:116%; width:auto; max-width:none; right:0; top:0; mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.12) 4%,rgba(0,0,0,.42) 9%,rgba(0,0,0,.75) 15%,rgba(0,0,0,.95) 22%,black 30%); }
.hero-background::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 100% 160% at 0% 65%,rgba(8,7,10,.99) 0%,rgba(8,7,10,.94) 25%,rgba(8,7,10,.72) 43%,rgba(8,7,10,.35) 61%,rgba(8,7,10,.08) 78%,transparent 100%); }
.hero-status { color:#BEB2C1; border-bottom-color:rgba(247,243,245,.18); }
.hero-copy { color:#D7CED9; }
@media (max-width:760px) {
  .hero-background { background:#08070A; }
  .hero-background img { height:120%; top:30px; right:auto; left:50%; transform:translateX(-50%); mask-image:linear-gradient(180deg,transparent,black 8%); }
  .hero-background::after { background:linear-gradient(180deg,rgba(8,7,10,.38) 0%,rgba(8,7,10,.08) 22%,rgba(8,7,10,.77) 48%,#08070A 85%); }
  .hero-content { padding:clamp(240px,62vw,340px) 0 10px; gap:26px; }
  .hero-frame > div { gap:24px; }
}