/* September 13: changes from the narrated screen review. */
:root { --section-space: 64px; }
html { scroll-padding-top: 24px; }
.site-header { position: absolute; }
.hero { min-height: 100svh; max-height: none; }
.hero__inner { min-height: 100svh; padding-bottom: 100px; }
.hero__note { right: 5%; bottom: 70px; color: var(--text); font-size: 30px; line-height: .95; text-shadow: 0 2px 8px #000; transform: rotate(-5deg); }
.hero__lead { max-width: 550px; }
.scroll-cue { position: absolute; z-index: 5; bottom: 22px; left: calc(50% - 24px); display: grid; place-items: center; width: 48px; height: 48px; font-size: 34px; text-decoration: none; animation: float-down 3s ease-in-out infinite; }
@keyframes float-down { 0%,100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
.back-to-top { position: fixed; z-index: 55; bottom: 24px; right: 24px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #f3efe759; border-radius: 50%; color: #f3efe7; background: #17130fa6; backdrop-filter: blur(8px); text-decoration: none; font-size: 24px; opacity: .7; }
.back-to-top:hover,.back-to-top:focus-visible { opacity: 1; }
.back-to-top[hidden] { display: none; }
.section-heading { margin-bottom: 28px; }
.categories__stage { top: 24px; }
.category-card { background-image: url('../assets/workshop/workbench-five.png'); background-size: 500% auto; background-repeat: no-repeat; }
.category-card:nth-child(1) { background-position: 0% center; }
.category-card:nth-child(2) { background-position: 25% center; }
.category-card:nth-child(3) { background-position: 50% center; }
.category-card:nth-child(4) { background-position: 75% center; }
.category-card:nth-child(5) { background-position: 100% center; }
.category-card picture { display: none; }
.gallery__footer { grid-template-columns: auto 1fr; margin-top: 18px; }
.gallery__status { display: block; }
.brands { padding-block: 60px 28px; }
.brands .section-heading { grid-template-columns: 1fr; gap: 10px; }
.brands__hint { display: inline-block; max-width: 680px; margin: 16px 0 0 24px; color: var(--muted); font-size: 13px; vertical-align: top; line-height: 1.5; }
.process { padding-top: 16px; padding-bottom: 32px; }
.notebook { min-height: 0; max-height: none; container-type: inline-size; }
.notebook__paper { inset: 23% 20% 17% 21%; column-gap: 10%; font-family: 'Caveat', 'Segoe Print', cursive; }
.notebook__page:first-child { padding-left: 0; transform: perspective(1100px) rotateY(5deg) rotateZ(1deg) skewX(-5deg); transform-origin: right top; }
.notebook__page:nth-child(2) { transform: perspective(1100px) rotateY(-5deg) rotateZ(-1deg) skewX(4deg); transform-origin: left top; }
.notebook__kicker { margin: 0 0 1.8cqw; font: 700 3.1cqw/1 'Caveat', cursive; letter-spacing: 0; text-transform: none; color: #372a20; }
.steps { gap: 4cqw; }
.steps li { grid-template-columns: 2.6cqw 1fr; gap: 1cqw; }
.steps li > span { width: 2.5cqw; height: 2.5cqw; font-size: 1.7cqw; }
.steps h3 { font: 700 2.6cqw/1.05 'Caveat', cursive; margin-bottom: .8cqw; }
.steps p { font: 400 2.05cqw/1.1 'Caveat', cursive; color: #49392c; }
.notebook__note { max-width: 46%; font-size: 2.05cqw; line-height: 1.12; bottom: 1%; right: 0; transform: rotate(-2deg) skewX(3deg); }
.request { padding-top: 28px; padding-bottom: 44px; }
.request .section-heading { gap: 10px; margin-bottom: 22px; }
.request-layout { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 22px; }
.request-form { padding: 24px 28px; }
.form-block { margin-bottom: 16px; }
.form-block legend,.field > span { font-size: 14px; margin-bottom: 7px; }
.contact-row { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 14px; align-items: start; }
.contact-toggle { margin: 0; max-width: none; }
.contact-row .field { margin: 0; }
#contact-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.field { margin-bottom: 14px; }
.field input { min-height: 46px; font-size: 15px; }
.field textarea { min-height: 96px; height: 96px; font-size: 15px; }
.field-error:empty,.form-status:empty { display: none; }
.description-block { display: grid; grid-template-columns: minmax(0,1fr) 155px; gap: 12px; }
.photo-field { display: flex; flex-direction: column; gap: 7px; padding-top: 27px; margin: 0; align-items: stretch; }
.photo-field small { font-size: 11px; color: #706454; }
.file-button { min-height: 46px; padding: 8px; justify-content: center; font-size: 13px; }
.photo-previews { display: grid; grid-template-columns: repeat(5,1fr); width: 100%; height: 24px; gap: 6px; }
.photo-slot { position: relative; min-width: 0; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.photo-slot::before { content: ''; position: absolute; inset: 9px 0; border-radius: 3px; background: #c5b89f; transition: background 160ms; }
.photo-slot.is-filled::before { background: #826027; }
.photo-slot.is-filled:hover::before { background: #a34435; }
.photo-slot:disabled { cursor: default; }
.photo-slot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.photo-field:focus-within .file-button { border-color: var(--ink); }
.brand-grid { grid-template-columns: repeat(5,1fr); }
.brand-type { height: 36px; display: grid; align-items: center; font-size: 28px; letter-spacing: .04em; }
.brand-type--small { font-size: 19px; }
.selection-chips,.selection-chips:empty { display: inline-flex; height: 20px; margin: 0 0 0 8px; gap: 6px; vertical-align: middle; max-width: 60%; }
.selection-chip { padding: 0 5px; min-height: 20px; height: 20px; font-size: 11px; white-space: nowrap; border: 0; gap: 2px; }
.selection-chip button { width: 18px; height: 18px; }
.more-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: auto; opacity: 1; overflow: visible; }
.submit-button { min-height: 46px; }
.data-note { margin: 10px 0 0; font-size: 11px; }
.request-aside { min-height: 0; }
.request-aside__photo img { object-position: center; }
.request-aside__note { font-size: 30px; right: 24px; bottom: 24px; line-height: .95; text-shadow: 0 2px 8px #000; }
.site-footer__inner { min-height: 0; padding-block: 28px; gap: 20px; }
.site-footer__hand { font-size: 27px; }
@media (max-width:900px) {
 .request-layout { grid-template-columns: minmax(0,1fr) 240px; gap: 16px; }
 .request-form { padding: 20px; }
 .contact-row { grid-template-columns: 190px minmax(0,1fr); gap: 8px; }
 .description-block { grid-template-columns: 1fr; gap: 0; position: relative; }
 .description-block textarea { padding-bottom: 38px; }
 .photo-field { padding-top: 0; margin-top: -64px; margin-right: 8px; margin-bottom: 22px; align-items: flex-end; pointer-events: none; }
 .photo-field > * { pointer-events: auto; }
 .photo-field > small { display: none; }
 .photo-previews { width: 130px; height: 22px; }
 .file-button { min-height: 30px; padding: 4px 8px; }
 .brands__hint { display: block; margin-left: 0; }
}
@media (max-width:767px) {
 html { scroll-padding-top: 16px; }
 .hero { min-height: 720px; }
 .hero__inner { min-height: 720px; padding-bottom: 270px; }
 .hero__note { display: block; bottom: 76px; right: 24px; font-size: 23px; }
 .hero__lead br { display: none; }
 .brands { padding-block: 44px 20px; }
 .notebook__paper { inset: auto; padding: 24px 24px 28px 38px; }
 .notebook__page:first-child,.notebook__page:nth-child(2) { transform: none; }
 .notebook__kicker { display: block; font-size: 31px; margin-bottom: 22px; }
 .notebook__page:nth-child(2) .notebook__kicker { display: none; }
 .steps { gap: 22px; }
 .steps li { grid-template-columns: 28px 1fr; gap: 10px; }
 .steps li > span { width: 27px; height: 27px; font-size: 20px; }
 .steps h3 { font-size: 26px; }
 .steps p { font-size: 23px; }
 .notebook__note { position: static; max-width: none; font-size: 25px; margin-top: 28px; }
 .request-layout { grid-template-columns: 1fr; }
 .request .section-heading h2 { font-size: 28px; }
 .request .section-heading p { font-size: 14px; }
 .request-aside { min-height: 280px; }
 .contact-row { grid-template-columns: 160px minmax(0,1fr); }
 .contact-toggle button { min-height: 40px; font-size: 12px; }
 .field input,.field textarea { font-size: 16px; }
 .more-fields { gap: 10px; }
 .more-fields .field > span { font-size: 12px; }
 .selection-chips { max-width: 55%; }
 .selection-chip { max-width: 120px; overflow: hidden; }
 .site-footer__inner { padding-block: 28px 40px; }
 .back-to-top { bottom: 16px; right: 16px; }
 .brand-grid { grid-template-columns: repeat(2,1fr); }
 .brand-card { border-bottom: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; }
 .brand-card:nth-child(2n) { border-right: 0 !important; }
 .brand-card:last-child { grid-column: 1 / -1; border: 0 !important; }
 .brand-type { font-size: 24px; }
 .brand-type--small { font-size: 17px; }
}
@media (prefers-reduced-motion:reduce) { .scroll-cue { animation: none; } }
