/* Guide page (prototype B). Loaded after style.css. The page wears one species colour: --c. */

/* Headline band */
.g-head { padding: 18px 0 0; }
.crumbs { font-stretch: 75%; font-weight: 650; font-size: 15px; color: var(--ink2-n); margin: 0 0 18px; }
.crumbs a { color: var(--paper-n); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.crumbs a:hover { border-color: #fff; }
.swoop-flag {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-stretch: 75%; font-size: 15px; font-weight: 600; line-height: 1.25;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 2px; padding: 7px 10px; margin: 0 0 16px; color: var(--ink2-n);
}
.swoop-flag b { color: #fff; font-weight: 800; }
.swoop-flag.is-on { border-color: var(--blue-n); }
.swoop-flag.is-on::before { content: ""; width: 8px; height: 8px; background: var(--blue-n); border-radius: 50%; }
.g-h1 {
  font-stretch: 125%; font-weight: 880; font-size: clamp(42px, 12vw, 136px); line-height: .88; letter-spacing: -.04em;
  margin: 0 0 18px; max-width: 9.5em;
}
.g-answer { font-size: 20px; line-height: 1.35; max-width: 30em; margin: 0 0 14px; }
.g-answer strong { font-weight: 700; color: #fff; }
.g-meta { font-stretch: 75%; font-size: 14.5px; font-weight: 600; color: var(--ink2-n); margin: 0 0 24px; }
.g-meta i { font-weight: 500; }
/* A headline band with no photo (the About page): padding, so the meta line's margin stays inside the band. */
.g-head.no-photo { padding-bottom: 32px; }
.g-head.no-photo .g-meta { margin-bottom: 0; }
@media (min-width: 1024px) { .g-head.no-photo { padding-bottom: 56px; } }
.g-hero { margin: 0 calc(-1 * var(--gut)); }
.g-hero .ph { aspect-ratio: 3 / 2; }
.g-hero figcaption { font-stretch: 75%; font-size: 13px; color: var(--ink2-n); padding: 9px var(--gut) 16px; }
.g-hero figcaption a { color: var(--ink2-n); }
@media (min-width: 760px) {
  .g-head { padding-top: 36px; }
  .g-answer { font-size: 24px; }
  .g-hero .ph { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .g-head { padding: 40px 0 56px; }
  .g-head-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: end; }
  .g-h1 { font-size: clamp(60px, 6.6vw, 108px); }
  .g-hero { margin: 0; }
  .g-hero .ph { aspect-ratio: 4 / 3; }
  .g-hero figcaption { padding: 9px 0 0; }
  .g-meta { margin-bottom: 0; }
}

/* Quick facts */
.qf-band { padding: 30px 0 40px; border-bottom: 1px solid var(--hair); }
.qf { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; margin: 0; }
.qf-item { border-top: 3px solid var(--ink); padding-top: 10px; min-width: 0; }
.qf-size, .qf-out { grid-column: 1 / -1; }
.qf dt { font-stretch: 75%; font-weight: 700; font-size: 14px; color: var(--ink2); margin-bottom: 4px; }
.qf dd { margin: 0; }
.qf-big { display: block; font-stretch: 112%; font-weight: 820; font-size: 22px; line-height: 1.05; letter-spacing: -.015em; }
.qf-size .qf-big { font-size: 30px; }
.qf-sub { display: block; font-size: 14px; line-height: 1.35; color: var(--ink2); margin-top: 5px; }
.ruler { margin-top: 16px; --max: 50; }
.ru-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; height: 30px; }
.ru-lab { font-stretch: 75%; font-weight: 700; font-size: 13.5px; }
.ru-trk { position: relative; height: 18px; border-left: 1px solid var(--ink); }
.ru-bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) / var(--max) * 100%); background: var(--c); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.ru-bar.ref { background: repeating-linear-gradient(135deg, var(--ink3) 0 1.5px, transparent 1.5px 5px); box-shadow: inset 0 0 0 1px var(--ink3); }
.ru-val { position: absolute; top: 0; left: calc(var(--v) / var(--max) * 100%); margin-left: 6px; font-stretch: 75%; font-weight: 800; font-size: 14px; line-height: 18px; font-variant-numeric: tabular-nums; transition: opacity .3s .6s var(--ease); }
.ruler.is-hidden .ru-bar { transform: scaleX(0); }
.ruler.is-hidden .ru-val { opacity: 0; }
.ru-axis { position: relative; height: 26px; margin-left: 64px; border-top: 1px solid var(--ink); font-stretch: 75%; font-size: 12px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ru-axis i { position: absolute; top: 0; width: 1px; height: 5px; background: var(--ink); }
.ru-axis i.maj { height: 9px; }
.ru-axis span { position: absolute; top: 10px; transform: translateX(-50%); white-space: nowrap; }
.ru-axis span:first-of-type { transform: translateX(-2px); }
.ru-axis span:last-of-type { transform: translateX(-80%); }
.qf-bar { margin-top: 12px; }
.qf-bar .g-bar { height: 18px; }
.qf-bar .g-bar .seg { background: var(--c); opacity: 1; }
.qf-bar .g-hrs { display: flex; justify-content: space-between; margin-top: 5px; font-stretch: 75%; font-size: 11.5px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .qf-band { padding: 48px 0 56px; }
  .qf { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
  .qf-size, .qf-out { grid-column: auto; }
  .qf-big { font-size: 26px; }
  .qf-size .qf-big { font-size: 34px; }
}

/* If it's in your yard */
.g-cols { display: grid; gap: 22px; }
.yard { list-style: none; counter-reset: y; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.yard li { counter-increment: y; position: relative; padding: 14px 0 15px 46px; border-bottom: 1px solid var(--hair2); font-size: 16.5px; line-height: 1.45; }
.yard li::before { content: counter(y, decimal-leading-zero); position: absolute; left: 0; top: 13px; font-stretch: 75%; font-weight: 800; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--edge, var(--c)); }
.yard b { font-stretch: 112%; font-weight: 800; display: block; font-size: 18px; line-height: 1.2; margin-bottom: 3px; letter-spacing: -.01em; }
.yard a.tel { font-weight: 700; white-space: nowrap; }
@media (min-width: 1024px) {
  .g-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .g-cols > div:first-child { position: sticky; top: 100px; }
}

/* Swooping chart: a year-long actogram */
.ych { position: relative; margin: 30px 0 0; padding-top: 30px; }
.ych-axis { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--ink); padding-bottom: 6px; font-stretch: 75%; font-weight: 700; font-size: 13px; text-align: center; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ych-axis span.is-now { color: var(--blue); font-weight: 800; }
.ych-rows { position: relative; background: linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%; }
.ych-row { padding: 10px 0 12px; border-bottom: 1px solid var(--hair2); }
.ych-lab { margin: 0 0 6px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14px; }
.ych-lab b { font-stretch: 112%; font-weight: 800; }
.ych-lab span { font-stretch: 75%; font-weight: 600; color: var(--ink2); }
.ych-lab b, .ych-lab span { position: relative; z-index: 2; background: var(--white); padding-right: 4px; }
.ych-lab span { padding: 0 0 0 4px; }
.ych-trk { position: relative; height: 26px; }
.ych-trk b { position: absolute; top: 0; bottom: 0; left: calc((var(--a) - 1) / 12 * 100% + 2px); width: calc((var(--b) - var(--a) + 1) / 12 * 100% - 4px); background: var(--c); border-radius: 2px; transform-origin: 0 50%; transition: transform .8s var(--ease); }
.ych-trk b.part { background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 5px); }
.ych-row:nth-child(2) .ych-trk b { transition-delay: .12s; }
.ych-row:nth-child(3) .ych-trk b { transition-delay: .24s; }
.ych.is-hidden .ych-trk b { transform: scaleX(0); }
.ych-now { position: absolute; z-index: 1; top: 22px; bottom: 44px; left: var(--x); width: 2px; margin-left: -1px; background: var(--blue); pointer-events: none; }
.ych-now span { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #fff; font-stretch: 75%; font-weight: 750; font-size: 13px; line-height: 22px; padding: 0 7px; border-radius: 2px; white-space: nowrap; }
.ych-cap { font-stretch: 75%; font-size: 13.5px; color: var(--ink2); margin-top: 10px; min-height: 2.6em; }
.bignums.light div { border-top: 1px solid var(--hair2); }
.bignums.light dt { color: var(--ink); }
.bignums.light dd { color: var(--ink2); }
@media (min-width: 760px) {
  .ych-trk { height: 34px; }
  .ych-axis { font-size: 15px; }
}

/* Do and don't */
.dd { display: grid; gap: 26px; margin-top: 28px; }
.dd h3 { font-stretch: 125%; font-weight: 880; font-size: 30px; line-height: 1; margin: 0 0 8px; letter-spacing: -.02em; }
.dd-do h3 { color: var(--blue-n); }
.dd-dont h3 { color: #FF6B74; }
.dd ul { list-style: none; margin: 0; padding: 0; }
.dd li { position: relative; padding: 12px 0 12px 32px; border-top: 1px solid rgba(255,255,255,.18); font-size: 16.5px; line-height: 1.4; }
.dd-do li::before { content: ""; position: absolute; left: 3px; top: 17px; width: 13px; height: 7px; border-left: 2.5px solid var(--blue-n); border-bottom: 2.5px solid var(--blue-n); transform: rotate(-45deg); }
.dd-dont li::before, .dd-dont li::after { content: ""; position: absolute; left: 1px; top: 22px; width: 17px; height: 2.5px; background: #FF6B74; transform: rotate(45deg); }
.dd-dont li::after { transform: rotate(-45deg); }
@media (min-width: 760px) { .dd { grid-template-columns: 1fr 1fr; column-gap: 48px; } }

/* FAQs */
.faqs { margin-top: 26px; border-top: 3px solid var(--ink); }
.faq { border-bottom: 1px solid var(--hair2); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-stretch: 112%; font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.faq summary:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.faq summary:active h3 { opacity: .7; }
.faq-x { position: relative; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 2px; transition: background-color .2s var(--ease); }
.faq-x::before, .faq-x::after { content: ""; position: absolute; left: 6px; right: 6px; top: 12px; height: 2px; background: var(--ink); transition: transform .25s var(--ease), background-color .2s; }
.faq-x::after { transform: rotate(90deg); }
.faq[open]:not(.is-closing) .faq-x { background: var(--ink); }
.faq[open]:not(.is-closing) .faq-x::before { background: #fff; }
.faq[open]:not(.is-closing) .faq-x::after { transform: rotate(0deg); background: #fff; }
.faq-a { overflow: hidden; }
.faq-a p { font-size: 16.5px; line-height: 1.5; max-width: 40em; margin: 0 0 14px; }
.faq-a p strong { font-weight: 700; }
.law-note { font-stretch: 75%; font-size: 14px !important; color: var(--ink2); border-left: 3px solid var(--red); padding-left: 10px; }
@media (min-width: 1024px) { .faq summary h3 { font-size: 24px; } }

/* Sources */
.srcs { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: s; border-top: 3px solid var(--ink); }
.srcs li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; padding: 11px 0; border-bottom: 1px solid var(--hair2); font-size: 15.5px; line-height: 1.4; scroll-margin-top: 90px; }
.srcs li::before { content: counter(s); font-stretch: 75%; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; grid-row: span 2; }
.srcs li a { font-weight: 650; }
.srcs li span { grid-column: 2; color: var(--ink2); font-size: 14px; }
.srcs li:target { background: rgba(59, 61, 181, .1); }
.srcs-note { margin-top: 18px; font-size: 14.5px; color: var(--ink2); max-width: 44em; }
#sources .sec { font-size: clamp(26px, 6vw, 48px); max-width: none; }