/* Homepage only. Everything shared lives in /assets/jf.css. */

/* Hero: Bauhaus poster split */
.jf-hero { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: var(--jf-rule) solid var(--jf-ink); }
.jf-hero-text { display: flex; flex-direction: column; justify-content: center; gap: var(--jf-s5); padding: clamp(40px, 6vw, 96px) var(--jf-gutter); padding-left: max(var(--jf-gutter), calc((100cqw - var(--jf-page)) / 2 + var(--jf-gutter))); border-right: var(--jf-rule) solid var(--jf-ink); }
.jf-hero-text > * { max-width: 620px; width: 100%; }
.jf-hero .jf-display .jf-line { white-space: nowrap; }
.jf-hero .jf-meta-row a { text-decoration: none; min-height: var(--jf-tap); }
.jf-hero .jf-meta-row a:hover { text-decoration: underline; text-underline-offset: 4px; }
.jf-hero-art { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; min-height: clamp(360px, 42vw, 640px); }
.jf-hero-art > div { position: relative; overflow: hidden; }
.jf-ha-1 { background: var(--jf-yellow); display: grid; place-items: center; }
/* The hero face is the logo's red face (same artwork), standing on its own flat floor shadow. */
.jf-ha-face { width: 70%; }
.jf-ha-face svg { display: block; width: 100%; height: auto; overflow: visible; }
.jf-ha-floor { fill: var(--jf-ground); }
.jf-pupils { transition: transform .12s ease-out; }
.jf-eye { transform-box: fill-box; transform-origin: center; animation: jf-blink 6s infinite; }
@keyframes jf-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.jf-ha-2 { background: var(--jf-blue); }
.jf-ha-2::after { content: ""; position: absolute; inset: 0; background: var(--jf-paper); border-radius: 100% 0 0 0; transform-origin: bottom right; transform: scale(.72); }
.jf-ha-3 { background: var(--jf-black); }
.jf-ha-3::after { content: ""; position: absolute; left: 13%; right: 13%; bottom: 0; height: 80%; background: var(--jf-cream); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.jf-ha-4 { background: var(--jf-paper); }
.jf-ha-4::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 52%; background: var(--jf-red); border-radius: 0 0 999px 999px; }
.jf-ha-4::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 15%; height: 12%; background: var(--jf-blue); }
.jf-ha-2::after, .jf-ha-3::after, .jf-ha-4::before, .jf-ha-4::after, .jf-daily-shape { box-shadow: var(--jf-rim); }
@media (max-width: 860px) {
  .jf-hero { grid-template-columns: minmax(0, 1fr); }
  .jf-hero-text { border-right: 0; border-bottom: var(--jf-rule) solid var(--jf-ink); }
  .jf-hero-art { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; min-height: 0; }
  .jf-hero-art > div { aspect-ratio: 1; }
}

/* Today's dailies: a date tile and four colour blocks */
.jf-daily-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(5, minmax(0, 1fr)); gap: var(--jf-rule); background: var(--jf-edge); border: var(--jf-rule) solid var(--jf-edge); }
.jf-daily-date { display: flex; flex-direction: column; justify-content: space-between; gap: var(--jf-s5); padding: var(--jf-s5); background: var(--jf-black); color: var(--jf-cream); }
.jf-daily-day { font-weight: 700; font-size: clamp(4rem, 3rem + 3vw, 6.5rem); line-height: .85; }
.jf-daily-date h2 { font-size: 1.6rem; }
.jf-daily-next { color: var(--jf-yellow); margin-top: var(--jf-s2); font-weight: 600; }
.jf-daily { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--jf-s3); min-height: 300px; padding: var(--jf-s5); color: #141414; }
.jf-daily > :not(.jf-daily-shape) { position: relative; z-index: 1; }
.jf-daily h3 { font-size: 1.5rem; }
.jf-daily p { flex: 1; font-size: var(--jf-t-small); max-width: 28ch; }
.jf-daily .jf-btn { align-self: flex-start; --bg: var(--jf-cream); --fg: #141414; border-color: #141414; box-shadow: var(--jf-bevel), 0 4px 0 #141414; }
.jf-daily-shape { position: absolute; right: -34px; bottom: -34px; width: 108px; height: 108px; transition: transform .45s var(--jf-ease-spring); }
/* The tiles are red, blue, yellow and cream, so the blue focus ring needs an ink or white one on them. */
.jf-daily .jf-btn:focus-visible { outline-color: #141414; }
.jf-daily--2 .jf-btn:focus-visible, .jf-daily--3 .jf-btn:focus-visible { outline-color: #fff; }
@media (hover: hover) { .jf-daily:hover .jf-daily-shape { transform: rotate(24deg) scale(1.12); } }
.jf-daily--1 { background: var(--jf-yellow); } .jf-daily--1 .jf-daily-shape { background: var(--jf-red); border-radius: 50%; }
.jf-daily--2 { background: var(--jf-red); color: #fff; } .jf-daily--2 .jf-daily-shape { background: var(--jf-yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.jf-daily--3 { background: var(--jf-blue); color: #fff; } .jf-daily--3 .jf-daily-shape { background: var(--jf-cream); border-radius: 0 0 0 100%; }
.jf-daily--4 { background: var(--jf-cream); } .jf-daily--4 .jf-daily-shape { background: var(--jf-black); }
.jf-daily--5 { background: var(--jf-yellow); } .jf-daily--5 .jf-daily-shape { background: var(--jf-blue); rotate: 45deg; }
.jf-daily--5 .jf-btn:focus-visible { outline-color: #141414; }
@media (max-width: 1100px) {
  .jf-daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jf-daily-date { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
}
@media (max-width: 560px) {
  .jf-daily-grid { grid-template-columns: minmax(0, 1fr); }
  .jf-daily-date { flex-direction: column; align-items: flex-start; }
  .jf-daily { min-height: 0; }
}

/* Tools grouped by kind */
.jf-toolcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); border-top: var(--jf-line) solid var(--jf-ink); }
.jf-toolcol { padding: var(--jf-s5) var(--jf-s4) var(--jf-s4); border-bottom: var(--jf-line) solid var(--jf-ink); }
.jf-toolcol h3 { display: flex; align-items: center; gap: var(--jf-s3); margin-bottom: var(--jf-s3); font-size: 1.15rem; }
.jf-toolcol ul { list-style: none; padding: 0; }
.jf-toolcol a { display: block; padding: var(--jf-s3) var(--jf-s2); margin-inline: calc(var(--jf-s2) * -1); text-decoration: none; border-top: 1px solid var(--jf-ink-faint); }
.jf-toolcol li:first-child a { border-top: 0; }
.jf-toolcol a b { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.jf-toolcol a span { display: block; margin-top: 2px; font-size: .875rem; color: var(--jf-ink-soft); }
@media (hover: hover) { .jf-toolcol a:hover { background: var(--jf-yellow); color: #141414; } .jf-toolcol a:hover span { color: #141414; } }
@media (min-width: 600px) { .jf-toolcol { border-right: var(--jf-line) solid var(--jf-ink); } }

/* What is Josh-Fun: blue band, three plain shapes */
.jf-promise { background: var(--jf-blue); color: #fff; border-top: var(--jf-rule) solid var(--jf-ink); padding-block: clamp(48px, 7vw, 96px); }
.jf-promise-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--jf-s7); align-items: center; }
.jf-promise p { margin-top: var(--jf-s4); max-width: 44ch; color: #fff; font-size: var(--jf-t-lede); }
.jf-promise .jf-link { color: #fff; }
.jf-promise :focus-visible { outline-color: var(--jf-yellow); }
.jf-promise-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jf-s5); list-style: none; padding: 0; text-align: center; }
.jf-promise-facts li { display: flex; flex-direction: column; align-items: center; gap: var(--jf-s2); }
.jf-pf { width: min(100%, 120px); aspect-ratio: 1; margin-bottom: var(--jf-s2); }
.jf-pf--circle { border-radius: 50%; background: var(--jf-yellow); }
.jf-pf--square { background: var(--jf-cream); }
.jf-pf--triangle { background: var(--jf-red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.jf-promise-facts b { font-weight: 700; font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); line-height: 1; }


/* Hero search: a square magnifier that springs open into a search bar */
.jf-hs { position: relative; flex: 0 0 auto; width: 52px; transition: width .45s var(--jf-ease-spring); }
.jf-hs[hidden] { display: none; }
.jf-hs.is-open { width: 100%; }
.jf-hs-open { width: 52px; padding: 0; }
.jf-hs-open svg, .jf-hs-icon svg { width: 22px; height: 22px; }
.jf-hs-form { position: relative; display: flex; align-items: center; }
.jf-hs-form[hidden] { display: none; }
.jf-hs-icon { position: absolute; left: var(--jf-s4); top: 50%; transform: translateY(-50%); display: flex; color: var(--jf-ink-soft); pointer-events: none; }
.jf-hs-q { padding-left: calc(var(--jf-s4) + 32px); padding-right: 56px; font-weight: 600; box-shadow: var(--jf-sunken), var(--jf-lift); }
.jf-hs-q::-webkit-search-cancel-button { display: none; }
.jf-hs-close { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: var(--jf-tap); height: var(--jf-tap); border: 0; background: none; color: var(--jf-ink); font: 700 1.1rem/1 var(--jf-font); cursor: pointer; }
.jf-hs-close:hover { color: var(--jf-accent-text); }
.jf-hs.is-open .jf-hs-form { animation: jf-hs-in .3s ease both; }
@keyframes jf-hs-in { from { opacity: 0; } to { opacity: 1; } }
.jf-hs-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: min(420px, 60vh); overflow: auto; margin: 0; padding: 0; list-style: none; background: var(--jf-paper); border: var(--jf-line) solid var(--jf-edge); box-shadow: var(--jf-lift-card); }
.jf-hs-list[hidden] { display: none; }
.jf-hs-head { padding: var(--jf-s2) var(--jf-s4); background: var(--jf-paper-2); border-bottom: 1px solid var(--jf-ink-faint); }
.jf-hs-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px var(--jf-s3); align-items: center; padding: var(--jf-s3) var(--jf-s4); min-height: var(--jf-tap); cursor: pointer; border-bottom: 1px solid var(--jf-ink-faint); }
.jf-hs-opt:last-child { border-bottom: 0; }
.jf-hs-opt .jf-mk { grid-row: 1 / span 2; }
.jf-hs-opt strong { font-weight: 700; }
.jf-hs-opt small { grid-column: 2 / -1; color: var(--jf-ink-soft); font-size: var(--jf-t-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-hs-type { font-size: .6875rem; }
.jf-hs-opt[aria-selected="true"] { background: var(--jf-yellow); color: #141414; }
.jf-hs-opt[aria-selected="true"] small { color: #141414; }
@media (hover: hover) { .jf-hs-opt:hover { background: var(--jf-yellow); color: #141414; } .jf-hs-opt:hover small { color: #141414; } }
.jf-hs-empty { padding: var(--jf-s4); color: var(--jf-ink-soft); }
@media (prefers-reduced-motion: reduce) { .jf-hs { transition: none; } .jf-hs.is-open .jf-hs-form { animation: none; } }