/* Editorial surfaces and scroll instruments. Load after readability/motion.
   No reveal selector hides content: WAAPI is a temporary enhancement only. */
:root { --card-inset: clamp(22px, 2.2vw, 34px); --card-gap: clamp(16px, 1.8vw, 26px); }
.starting-points, #home-collections { gap: var(--card-gap); grid-template-columns: repeat(2,minmax(0,1fr)); }
#home-collections { border-top: 0; }
.starting-points > a, #home-collections > a, #home-collections > a:nth-child(even),
.feature, .resource, #home-search, .how-to-use {
 padding: var(--card-inset);
 border: 1px solid var(--line);
 border-radius: 0;
 background-color: var(--surface);
 color: var(--ink);
 min-width: 0;
 /* The small diagonal registration cut keeps the original FUI vocabulary. */
 background-image: linear-gradient(135deg, var(--bg) 7px, var(--line) 7px, var(--line) 8px, transparent 8px);
 background-size: 13px 13px;
 background-position: left top;
 background-repeat: no-repeat;
}
.starting-points > a, #home-collections > a { gap: 18px; }
.starting-points > a { gap: 0; }
.starting-points h3 { margin-top: 13px; }
.starting-points p { margin-bottom: 24px; }
#home-collections > a > div { min-width: 0; }
#home-collections p, .starting-points p, .resource-description { overflow-wrap: anywhere; }
.starting-points > a:hover, #home-collections > a:hover, .feature:hover, .resource:hover {
 border-color: var(--accent);
 background-color: var(--surface);
}
.starting-points > a:focus-visible, #home-collections > a:focus-visible, .feature:focus-visible {
 outline-color: var(--accent); outline-offset: 4px;
}
.feature-strip { gap: var(--card-gap); grid-template-columns: repeat(2,minmax(0,1fr)); }
.feature { min-height: 320px; display: flex; flex-direction: column; gap: 25px; }
.feature-meta { width: 100%; }
.feature-copy { max-width: 100%; margin-top: auto; }
.feature h3 { margin-top: 0; }
.feature p { font-size: 16px; line-height: 1.8; }
.feature-notebook .feature-link { color: var(--accent); }
#resource-list { display: grid; gap: 16px; }
.resource { grid-template-columns: 40px minmax(0,.85fr) minmax(0,1.25fr) 115px 44px; gap: 20px; }
.resource-open { min-width: 0; gap: 20px; }
.resource-main, .resource-description { min-width: 0; }
.resource-main h3, .resource-main p, .resource-notice { overflow-wrap: anywhere; }
.resource-description { font-size: 16px; line-height: 1.85; }
.resource:focus-within { border-color: var(--accent); }
/* Short edge instruments, never a translucent layer across reading text. */
.home-section-heading, .section-kicker { position: relative; }
.home-section-heading:after, .section-kicker:after {
 content: ''; position: absolute; top: -1px; left: 0; width: min(160px,35%); height: 2px;
 background: var(--accent); pointer-events: none; transform-origin: left;
 transform: scaleX(var(--scroll-section-progress,.18));
}

@media(max-width:1250px) {
 .resource { grid-template-columns: 40px minmax(0,.85fr) minmax(0,1.25fr) 44px; gap: 16px; }
 .resource-open { gap: 16px; }
}
@media(max-width:700px) {
 .list-header { display:none; }
 :root { --card-inset: 22px; --card-gap: 18px; }
 .starting-points, #home-collections, .feature-strip { grid-template-columns: minmax(0,1fr); }
 .feature { min-height: 290px; gap: 25px; }
 .resource { display: block; padding: 24px 22px; }
 .resource-open { display: block; width: 100%; padding: 0; }
 .resource-main { padding-right: 48px; }
 .resource > .save-small { right: 16px; top: 23px; }
 .resource-description { margin-top: 18px; }
 .how-to-use { gap: 28px; }
 #home-collections > a, #home-collections > a:nth-child(even) { gap: 16px; }
 .directory-count { max-width: 68px; white-space: normal; }
}
@media(prefers-reduced-motion:reduce) {
 .home-section-heading:after, .section-kicker:after { transform: none; }
}
html[data-motion=off] .home-section-heading:after,
html[data-motion=off] .section-kicker:after { transform: none; }