/* Round D of the site crawl (docs/design-loop/2026-09-26-site-crawl.md): articles, guides and the journal.
   Injected by scripts/build-full-site.mjs after chrome-loop.css, only on article, guide and news pages.
   Rules: one left edge per column, five text styles on an article, nothing under 12px, 44px taps, square
   surfaces (bar 11, 14), indigo for actions and the selected state only (bar 21). */

/* One left edge: the shared gutter on computers, and below 900px the 20px edge experience.css gives every other
   container, so the title and the text no longer sit 4px apart on a phone */
html body:is(.hhi-page-article,.hhi-page-guide,.hhi-page-news){--content-gutter:var(--store-gutter,20px)}
@media(max-width:900px){html body:is(.hhi-page-article,.hhi-page-guide,.hhi-page-news){--content-gutter:20px}}

/* Articles: title, archive line, picture, text and back link share one 680px column */
html body.hhi-page-article .hhi-breadcrumb,
html body.hhi-page-article .hhi-page-hero,
html body.hhi-page-article .hhi-content.hhi-article{width:100%;max-width:calc(680px + 2 * var(--content-gutter));margin-inline:auto;padding-inline:var(--content-gutter)}
html body.hhi-page-article .hhi-page-hero{display:block;padding-top:40px;padding-bottom:0}
html body.hhi-page-article .hhi-page-hero>div{max-width:none;padding:0}
html body.hhi-page-article .hhi-page-hero h1{font-size:clamp(32px,4vw,44px);line-height:1.15;letter-spacing:-.02em;margin:12px 0 0;max-width:none}
html body.hhi-page-article .hhi-page-hero img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:0;margin:32px 0 0;max-height:none}
html body .hhi-archive-line{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--hhi-muted);max-width:none}
html body .hhi-archive-line a{color:var(--hhi-indigo);text-underline-offset:3px}
html body.hhi-page-article .hhi-content.hhi-article{padding-top:40px;padding-bottom:16px}
html body.hhi-page-article .hhi-prose{font-size:17px;line-height:1.75;color:var(--hhi-ink)}
html body.hhi-page-article .hhi-prose p,html body.hhi-page-article .hhi-prose li{font-size:17px;line-height:1.75}
html body.hhi-page-article .hhi-prose h1,
html body.hhi-page-article .hhi-prose h2{font-size:24px;line-height:1.3;letter-spacing:-.01em;margin:40px 0 16px}
html body.hhi-page-article .hhi-prose>h2:first-child,html body.hhi-page-article .hhi-prose>h1:first-child{margin-top:0}
html body.hhi-page-article .hhi-prose :is(h3,h4,h5,h6){font-size:19px;line-height:1.4;font-weight:600;margin:32px 0 12px}
html body.hhi-page-article .hhi-prose :is(h1,h2,h3,h4,h5,h6) :is(strong,b){font-weight:inherit}
html body.hhi-page-article .hhi-prose :is(small,figcaption,td,th){font-size:14px}
html body.hhi-page-article .hhi-prose img{border-radius:0}
html body .hhi-back-link{display:inline-flex;align-items:center;min-height:44px;margin-top:24px;font-size:16px;font-weight:600;color:var(--hhi-indigo);text-decoration:none}
html body .hhi-back-link:hover{text-decoration:underline;text-underline-offset:4px}

/* More ideas: a row of three journal tiles under the article */
html body .hhi-more-ideas{width:100%;max-width:var(--store-width,1280px);margin:56px auto 0;padding-inline:var(--content-gutter)}
html body .hhi-more-ideas>h2{font-size:24px;line-height:1.3;margin:0 0 24px;padding-top:32px;border-top:1px solid var(--hhi-line)}
html body .hhi-more-ideas-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}

/* Journal tiles (news page and More ideas): the whole tile is the link */
html body .hhi-story-link{display:flex;flex-direction:column;gap:8px;height:100%;color:var(--hhi-ink);text-decoration:none}
/* The tile is the article's only child now, so experience.css's ".hhi-story>a:last-child" (13px, 700, written for the old
   "Read the story" link) matched the whole tile and set the excerpt in bold: reset it here */
html body .hhi-story>a.hhi-story-link{font-size:16px;font-weight:400}
html body .hhi-story-link :is(h2,h3){font-weight:600}
html body .hhi-story img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0;margin-bottom:8px}
html body .hhi-story time{display:block;margin:0;font-size:12px;line-height:1.4;color:var(--hhi-muted)}
html body .hhi-story :is(h2,h3){font-size:19px;line-height:1.35;letter-spacing:-.01em;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .hhi-story p{font-size:14px;line-height:1.6;color:var(--hhi-muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html body .hhi-story-link:hover :is(h2,h3){text-decoration:underline;text-underline-offset:4px}
html body .hhi-story-link:focus-visible{outline:2px solid var(--hhi-indigo);outline-offset:4px}
html body.hhi-page-news .hhi-editorial-grid{gap:48px 24px}
html body.hhi-page-news .hhi-journal-search{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
html body.hhi-page-news .hhi-journal-search>*{grid-column:1/-1}
html body.hhi-page-news .hhi-journal-search>.hhi-search{grid-column:1/2;max-width:none}
@media(max-width:900px){html body.hhi-page-news .hhi-journal-search{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){html body.hhi-page-news .hhi-journal-search>.hhi-search{grid-column:1/-1}}

/* A lead never ends on one word */
html body:is(.hhi-page-article,.hhi-page-guide,.hhi-page-news) :is(.hhi-page-hero,.hhi-title) p{text-wrap:pretty}
@media(min-width:601px){html body .hhi-story :is(h2,h3){min-height:calc(2em * 1.35)}}

/* Guides: the text starts on the title's left edge */
html body.hhi-page-guide .door-guides{max-width:var(--store-width,1280px);padding-inline:var(--content-gutter);grid-template-columns:minmax(0,760px) 240px;justify-content:start;column-gap:clamp(48px,6vw,96px)}
html body.hhi-page-guide .hhi-guide-layout{display:grid;max-width:var(--store-width,1280px);padding-inline:var(--content-gutter);grid-template-columns:minmax(0,760px) 240px;justify-content:start;column-gap:clamp(48px,6vw,96px)}
html body.hhi-page-guide .hhi-guide-layout>.hhi-guide-sidebar{grid-column:2;grid-row:1}
html body.hhi-page-guide .hhi-guide-layout>.hhi-prose{grid-column:1;grid-row:1}
html body.hhi-page-guide .door-guide-section:first-child{padding-top:0}
html body.hhi-page-guide :is(.door-guide-section,.hhi-prose h2){scroll-margin-top:110px}

/* Guide text in the article's sizes: 17px on computers, 16px on phones (design-system.md, Access) */
html body.hhi-page-guide :is(.hhi-guide-layout>.hhi-prose,.door-guide-section)>:is(p,ul,ol){font-size:17px;line-height:1.7}

/* Guide side menu: plain links, the current page marked in ink with an indigo bar */
html body :is(.door-guide-links,.hhi-page-guide .hhi-guide-sidebar){border-top:1px solid var(--hhi-line)}
html body .door-guide-links a,html body.hhi-page-guide .hhi-guide-sidebar a{display:flex;align-items:center;min-height:44px;padding:8px 0 8px 14px;border-left:2px solid transparent;font-size:15px;line-height:1.4;color:var(--hhi-muted);text-decoration:none}
html body :is(.door-guide-links,.hhi-page-guide .hhi-guide-sidebar) a{border-bottom:1px solid var(--hhi-line)}
html body .door-guide-links a:hover,html body.hhi-page-guide .hhi-guide-sidebar a:hover{color:var(--hhi-ink)}
html body .door-guide-links a[aria-current=page],html body.hhi-page-guide .hhi-guide-sidebar a[aria-current=page]{color:var(--hhi-ink);font-weight:600;border-left-color:var(--hhi-indigo)}
html body.hhi-page-guide .hhi-guide-sidebar{gap:0}

/* In this guide: only on phones, under the title */
html body .hhi-guide-menu{display:none}

@media(max-width:900px){
 html body .hhi-guide-menu{display:block;margin:0 var(--content-gutter) 32px;padding:16px 0 4px;border-top:1px solid var(--hhi-line);border-bottom:1px solid var(--hhi-line)}
 html body .hhi-guide-menu p{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hhi-muted)}
 html body .hhi-guide-menu ul{list-style:none;margin:0;padding:0}
 html body .hhi-guide-menu a{display:flex;align-items:center;min-height:44px;font-size:16px;color:var(--hhi-ink);text-underline-offset:4px}
 html body.hhi-page-guide .hhi-guide-layout{grid-template-columns:minmax(0,1fr)}
 html body.hhi-page-guide .hhi-guide-layout>.hhi-guide-sidebar{grid-column:1;grid-row:2;position:static}
 html body.hhi-page-guide .hhi-guide-layout>.hhi-prose{grid-row:1}
 html body.hhi-page-guide .door-guides{grid-template-columns:minmax(0,1fr)}
 html body.hhi-page-guide .door-guide-links{position:static}
 html body.hhi-page-guide .door-guide-section:last-of-type{border-bottom:0}
 html body.hhi-page-guide .hhi-guide-sidebar{display:grid;gap:0;padding-top:0}
 html body.hhi-page-guide .hhi-guide-sidebar a{border-width:0 0 1px 2px;border-style:solid;border-color:transparent transparent var(--hhi-line) transparent;border-radius:0;padding:8px 0 8px 14px;font-size:15px}
 html body.hhi-page-guide .hhi-guide-sidebar a[aria-current=page]{border-left-color:var(--hhi-indigo)}
}
@media(max-width:760px){
 html body.hhi-page-article .hhi-page-hero{padding-top:24px}
 html body.hhi-page-article .hhi-page-hero img{margin-top:24px}
 html body.hhi-page-article .hhi-prose p,html body.hhi-page-article .hhi-prose li{font-size:16px}
 html body.hhi-page-guide :is(.hhi-guide-layout>.hhi-prose,.door-guide-section)>:is(p,ul,ol){font-size:16px}
}
@media(max-width:600px){
 html body .hhi-more-ideas-row,html body.hhi-page-news .hhi-editorial-grid{grid-template-columns:minmax(0,1fr);gap:40px}
 html body .hhi-story p{font-size:16px}
}