/* Concept "grid", homepage. Its own theme: deep blue glass with one amber accent. The shared look (frame, crosses,
   curtain, windows, type) is in shared/style/grid.css, loaded after this file. */

:root {
  --accent: #f4ac4f;
  --accent-label: #f7c27e;
  --ground: #03060d;
  --field: #0d1320;
}

/* the glass: a still gradient until the code draws it (and on devices without WebGL) */
.hm-base { background:
  radial-gradient(40% 35% at 30% 68%, rgba(244, 172, 79, 0.22), transparent 70%),
  linear-gradient(120deg, #03060d 20%, #06324f 38%, #03060d 52%, #04263c 66%, #03060d 80%); }
.hm-base canvas { opacity: 0; transition: opacity 1.2s ease; }
.hm-base canvas.is-drawn { opacity: 1; }

main { position: relative; z-index: 1; }
.hm-section { position: relative; padding: 0 104px 0 var(--text-side); } /* room at the right for the chapter dots */

/* ---- the opening: text in the first columns, the globe at the right ---- */
.hm-opening { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
/* the globe's drawing area fills the whole first screen, so a zoomed-in globe is never cut off by a box; the globe
   itself sits on the right (home.js) and the text lies above it */
.hm-globe { position: absolute; top: 0; left: 0; right: 0; width: auto; height: 100vh; height: 100svh; opacity: 0; transition: opacity 1.2s ease; touch-action: pan-y; }
.hm-globe.is-ready { opacity: 1; }
.hm-opening-text { position: relative; width: 50%; padding: 120px 0 80px; pointer-events: none; }
.hm-opening-text > * { pointer-events: auto; }
.hm-title { margin: 0 24px 0 0; font-family: var(--font-head); font-size: clamp(48px, 5.4vw, 80px); line-height: 0.98; letter-spacing: -0.05em; color: var(--text-main); }
.hm-lead { max-width: 30em; margin: 28px 24px 0 0; font-size: 18px; line-height: 1.5; color: var(--text-run); }


/* the globe block: the same parts as State Control's opening (year strip, instructions, layer switches) */
.hm-globe-block { max-width: 560px; margin-top: 36px; }
.hm-year { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 22px 14px; }
.hm-year-big { font-size: 48px; line-height: 0.9; letter-spacing: -0.04em; color: var(--text-main); }
.hm-speed { position: absolute; top: 16px; right: 22px; display: flex; flex-direction: column; gap: 3px; }
.hm-year-controls { display: flex; align-items: center; gap: 14px; }
.hm-year-range { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.hm-year-range input { width: 100%; }
.sc-ticks { position: relative; display: block; height: 18px; margin: 4px 8px 0; font-weight: 500; font-size: 13.5px; color: var(--text-detail); }
.sc-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.sc-ticks span:first-child { transform: translateX(-8px); }
.sc-ticks span:last-child { transform: translateX(calc(-100% + 8px)); }
.hm-globe-notes { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.hm-help { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-detail); }
.hm-help-phone { display: none; }
.hm-layers { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.hm-layer { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14.5px; color: var(--text-run); cursor: pointer; }
.hm-layer input { width: 18px; height: 18px; margin: 0; }
.hm-info { margin: 0; padding-top: 8px; border-top: 1px solid var(--frame-line); font-size: 14px; line-height: 1.5; color: var(--text-main); }
.hm-year, .hm-globe-notes { pointer-events: auto; }

/* ---- where signals meet: the illustration on the world map ---- */
.hm-converge { padding-top: 14vh; }
.hm-converge-window { padding: 22px 24px 14px; }
.hm-converge-window canvas { display: block; width: 100%; }
.hm-caption { max-width: 46em; margin: 22px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-run); }

/* ---- section heads ---- */
.hm-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; margin-bottom: 40px; }
.hm-h2 { grid-column: 1 / span 2; margin: 0; padding-right: 24px; font-family: var(--font-head); font-size: 48px; line-height: 1; letter-spacing: -0.05em; color: var(--text-main); }
.hm-intro { grid-column: 3 / span 2; margin: 0; padding-left: 24px; max-width: 32em; font-size: 16px; line-height: 1.55; color: var(--text-run); }

/* ---- how we work (on the glass), then the footer on its flat ground (grid.css) ---- */
.hm-how { padding-top: 120px; padding-bottom: 120px; }
.hm-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--window-fill); }
.hm-cell { position: relative; padding: 28px 24px 36px; border-right: 1px solid var(--frame-line); }
/* a cross wherever the lines between the cells meet the block's edge or each other; the block's corners carry theirs
   on its edge (grid.css, cg-marked). Four in a row: where each dividing line meets the top and the bottom edge */
.hm-cell::before, .hm-cell::after { content: ''; position: absolute; width: 17px; height: 17px; background: var(--cross-mark); pointer-events: none; }
.hm-cell::before { top: -9px; right: -8px; }
.hm-cell::after { bottom: -9px; right: -8px; }
.hm-cell:last-child::before, .hm-cell:last-child::after { display: none; }
.hm-cell:first-child { padding-left: 24px; }
.hm-cell:last-child { border-right: 0; }
/* narrower computer screens: two by two */
@media (min-width: 721px) and (max-width: 1180px) {
  .hm-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cell:nth-child(2n) { border-right: 0; }
  .hm-cell:nth-child(-n+2) { border-bottom: 1px solid var(--frame-line); }
  /* two by two: the middle, and where the two dividing lines meet the four edges */
  .hm-cell:nth-child(1)::before { top: auto; bottom: -8px; right: -8px; }
  .hm-cell:nth-child(1)::after { bottom: -8px; right: auto; left: -9px; }
  .hm-cell:nth-child(2)::before { top: -9px; right: auto; left: -9px; }
  .hm-cell:nth-child(2)::after { bottom: -8px; right: -9px; }
  .hm-cell:nth-child(3)::before { display: none; }
  .hm-cell:nth-child(3)::after { bottom: -9px; right: -8px; }
  .hm-cell:nth-child(4)::before, .hm-cell:nth-child(4)::after { display: none; }
}
.hm-cell h3 { margin: 0 0 12px; font-family: var(--font-head); font-size: 24px; line-height: 1.15; letter-spacing: -0.04em; color: var(--text-main); }
.hm-cell p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-run); }
.hm-note { margin: 18px 0 0; font-size: 14.5px; color: var(--text-detail); }

.hm-footer { padding-top: 120px; padding-bottom: 36vh; } /* room after the last lines */
.hm-footer-brand { margin-top: 104px; }
.hm-footer-name { font-family: var(--font-head); font-weight: 500; font-size: 28px; letter-spacing: -0.04em; color: var(--text-main); }
.hm-footer-brand p { margin: 8px 0 0; color: var(--text-detail); }
/* who it's for: the section's heading, then four audiences side by side (two by two on narrower screens) */
.hm-audience-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; }
.hm-audience h3 { margin: 0 0 8px; font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.035em; color: var(--text-main); }
.hm-audience p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-run); }
@media (min-width: 721px) and (max-width: 1180px) {
  .hm-audience-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- phones: one column, the globe under the text ---- */
@media (max-width: 720px) {
  .hm-section { padding: 0 var(--text-side); }
  .hm-opening { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hm-opening-text { display: contents; }
  .hm-title { order: 1; padding-top: 108px; }
  .hm-lead { order: 1; }
  .hm-globe-block { order: 3; max-width: none; margin-top: 0; }
  .hm-year { padding: 12px 14px 10px; }
  .hm-year-big { font-size: 40px; }
  .hm-speed { top: 12px; right: 14px; }
  .hm-help-wide { display: none; }
  .hm-help-phone { display: block; }
  .hm-title { font-size: 40px; line-height: 1; margin-right: 0; }
  .hm-lead { font-size: 15.5px; margin: 18px 0 0; }
  .hm-globe { order: 2; position: relative; left: auto; right: auto; width: auto; height: 360px; margin: 16px calc(-1 * var(--text-side)) 0; }
    .hm-converge { padding-top: 72px; }
  .hm-caption { margin-top: 16px; font-size: 14.5px; }
  .hm-converge-window { padding: 12px 10px 8px; margin: 0 calc(-1 * var(--text-side) + 12px); }
  .hm-head { display: block; margin-bottom: 24px; }
  .hm-h2 { font-size: 32px; padding: 0; }
  .hm-intro { padding: 0; margin-top: 12px; font-size: 14.5px; }
                    .hm-how { padding-top: 72px; padding-bottom: 72px; }
  .hm-cells { grid-template-columns: minmax(0, 1fr); }
  .hm-cell, .hm-cell:first-child { padding: 22px 16px 26px; border-right: 0; border-bottom: 1px solid var(--frame-line); }
  .hm-cell:last-child { border-bottom: 0; }
  /* one below the other: where each dividing line meets the left and the right edge */
  .hm-cell::before { top: auto; bottom: -8px; right: auto; left: -9px; }
  .hm-cell::after { bottom: -8px; right: -9px; }
  .hm-cell h3 { font-size: 21px; }
  .hm-cell p { font-size: 14.5px; }
  .hm-footer { padding-top: 72px; padding-bottom: 40vh; }
  .hm-footer-brand { margin-top: 64px; }
  .hm-audience-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* low computer screens (laptops): the opening and its globe block fit in the first screen */
@media (min-width: 721px) and (max-height: 940px) {
  .hm-opening-text { padding-top: 92px; padding-bottom: 24px; }
  .hm-title { font-size: clamp(38px, 3.6vw, 52px); }
  .hm-lead { margin-top: 16px; font-size: 16px; }
  .hm-globe-block { margin-top: 22px; }
  .hm-year { gap: 6px; padding: 12px 18px 10px; }
  .hm-year-big { font-size: 36px; }
  .hm-speed { top: 12px; right: 18px; }
  .hm-globe-notes { gap: 4px; margin-top: 12px; }
  .hm-help, .hm-layer { font-size: 13.5px; }
  .hm-layer { min-height: 30px; }
}