/* A visible museum frieze; lettering and navigation keep their own space. */
.masthead-frieze { height:22px; opacity:.92; }
.masthead-frieze img { height:65px; top:-18px; filter:brightness(1.17) saturate(.94) drop-shadow(0 1px 1px #081513); }
.masthead .brand small { margin-top:4px; }
.diy-session-tools { display:flex; gap:7px; flex-wrap:wrap; margin:4px 0 12px; }
.diy-session-tools button { border:1px solid #bc976355; border-radius:15px; padding:6px 10px; font:10px/1.6 var(--serif); min-height:44px; background:#b78e4520; color:#f4d59c; }
.diy-shelf { max-height:100%; overflow-y:auto; scrollbar-width:thin; }
.diy-session-tools button[aria-pressed=true] { border-color:#ecc679; background:#94633677; }
.diy-session-tools small { display:block; flex-basis:100%; color:#c4af88; font:9px/1.7 var(--serif); }
.diy-reference-flag { position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:4; padding:7px 15px; background:#1a382ee8; border:1px solid #c9a366; border-radius:16px; font:11px var(--serif); white-space:nowrap; pointer-events:none; }
.keepsake[data-reference=true] #diy-install { opacity:.42; }
.diy-part.is-next { box-shadow:inset 0 0 0 2px #ddb36744; border-color:#dbb367a0; }
.keepsake[data-practice=true] .diy-progress-caption { color:#f2d298; }
.record-entry { border-block:1px solid #b89b6b70; padding:13px 0; margin:18px 0; }
.record-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font:15px var(--serif); color:#64492d; }
.record-heading small { font:10px var(--serif); color:#877654; }
.record-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.record-buttons button { display:grid; grid-template-columns:26px 1fr; align-items:center; text-align:left; border:1px solid #95734660; background:#eee0c5; color:#674e32; padding:9px; min-height:56px; border-radius:2px 10px 2px 10px; cursor:pointer; }
.record-buttons button:last-child { grid-column:1/-1; }
.record-buttons button>span { grid-row:1/3; font-size:20px; }
.record-buttons strong { font:13px var(--serif); }
.record-buttons small { font:10px/1.6 var(--serif); color:#796b54; }
.record-buttons button:hover { background:#e6d0a8; border-color:#9a7441; }
.record-dialog { width:min(940px,92vw); max-height:87vh; padding:32px; background:#f4ecd9; color:#57432f; border:1px solid #c6a36b; border-radius:3px; box-shadow:0 25px 100px #05171490; }
.record-dialog::backdrop { background:#082723bf; backdrop-filter:blur(5px); }
.record-dialog header { padding-right:38px; }
.record-dialog h2 { font:clamp(25px,3.5vw,38px)/1.5 var(--serif); margin:8px 0; }
.record-dialog header p { font:13px/1.8 var(--serif); color:#80705b; margin:0 0 18px; }
.record-screen { background:#071613; border:1px solid #ac8857; }
.record-screen video { display:block; width:100%; aspect-ratio:16/9; max-height:50vh; object-fit:contain; }
.record-unavailable { padding:45px 20px; text-align:center; border:1px solid #b89b6b; background:radial-gradient(ellipse at center,#395c4670,transparent),#193a31; color:#edd6a3; }
.record-unavailable>span { display:block; font:46px/1.4 var(--serif); color:#c3a366; }
.record-unavailable h3 { font:25px/1.6 var(--serif); margin:12px 0; }
.record-unavailable p { font:13px/1.8 var(--serif); margin:0; }
#record-status { font:13px/1.7 var(--serif); min-height:23px; }
.record-actions { display:flex; gap:12px; flex-wrap:wrap; }
.record-actions button,.record-actions a,.record-album { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid #a3845f; background:#1d3d33; color:#f1dab0; font:13px/1.8 var(--serif); text-decoration:none; border-radius:3px; }
.record-actions a { background:transparent; color:#665132; }
.record-credit { margin-top:18px; padding-top:14px; border-top:1px solid #bda47970; font:12px/1.8 var(--serif); }
.record-credit summary { cursor:pointer; min-height:30px; }
.record-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.record-photo { display:block; position:relative; min-height:100px; background:#e1d3b8; text-decoration:none; }
.record-photo img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.record-image-fallback { display:block; padding:35px 12px; text-align:center; color:#695132; font:13px/1.8 var(--serif); }
.record-image-fallback[hidden] { display:none; }
.record-photo-open { position:absolute; bottom:0; right:0; padding:5px 9px; background:#16382cdc; color:#ead9b5; font:11px/1.8 var(--serif); }
.record-gallery h3 { font:17px/1.6 var(--serif); margin:10px 0 3px; }
.record-gallery p { font:11px/1.8 var(--serif); color:#837256; }
.record-album { margin:12px 0 0; width:100%; justify-content:space-between; gap:12px; box-sizing:border-box; }
.record-entry button:focus-visible,.record-dialog :focus-visible { outline:2px solid #a77b38; outline-offset:4px; }
.keepsake-experience-tabs { position:absolute; top:128px; left:26%; right:25%; z-index:5; display:flex; justify-content:center; gap:5px; }
.keepsake-experience-tabs button { min-height:40px; padding:7px 14px; font:11px/1.7 var(--serif); color:#f3d6a0; background:#163b31dd; border:1px solid #b6986370; border-radius:3px 12px 3px 12px; }
.keepsake-experience-tabs [aria-selected=true] { background:#825a34; border-color:#ddba75; color:#ffe5b1; }
.keepsake .diy-variant-switch { top:175px; }
.keepsake .diy-table { margin-top:183px; }
.keepsake-extra-panel { position:absolute; inset:186px 5% 86px; overflow:auto; padding:10px 0; scrollbar-width:thin; }
.craft-room { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:stretch; height:calc(100% - 92px); min-height:0; }
.craft-board { min-width:0; min-height:0; text-align:center; }
.craft-board canvas { display:block; width:100%; height:calc(100% - 85px); object-fit:contain; border:1px solid #9c845d; background:#173a31; }
.craft-board-tools { display:flex; gap:12px; justify-content:center; margin:10px 0; }
.craft-board-tools button,.craft-role-tags button { min-height:44px; padding:8px 15px; color:#ecd1a0; border:1px solid #b3915b; background:#233b2edc; border-radius:3px 10px; font:12px var(--serif); }
.craft-board>small { font:10px/1.7 var(--serif); color:#d6c39e; }
.craft-guide { padding:25px; background:var(--warm-paper); border:1px solid #b49560; border-radius:3px 12px; color:#654c31; overflow:auto; min-height:0; scrollbar-width:thin; }
.craft-guide h2 { font:25px/1.6 var(--display); color:#644329; margin:10px 0; }
.craft-guide>p { font:12px/1.9 var(--serif); margin:8px 0 16px; }
.craft-guide .craft-finished { font:12px/1.9 var(--serif); }
.craft-guide .eyebrow { font-size:10px; color:#937244; }
.craft-guide label { font:12px var(--serif); display:block; }
.craft-knowledge { padding:10px 0; border-block:1px solid #b6a07366; }
.craft-knowledge p { font:12px/1.8 var(--serif); margin:0 0 8px; }
.craft-knowledge button { display:inline-block; min-height:44px; margin:3px; padding:7px 10px; border:1px solid #b89962; color:#6a4c2d; background:#e7d5b7; font:11px var(--serif); border-radius:3px; }
.craft-guide select { width:100%; min-height:44px; font:14px var(--serif); background:#f7edd8; color:#634a2e; border:1px solid #a98b58; padding:8px; margin-top:8px; }
.craft-swatches { display:flex; gap:14px; padding:18px 0; }
.craft-swatches button { width:44px; height:44px; border-radius:50%; border:4px double #d7c4a1; background:var(--swatch); }
.craft-swatches button[aria-pressed=true] { outline:2px solid #7d5a30; outline-offset:3px; }
.craft-role-tags { display:flex; gap:7px; flex-wrap:wrap; margin:12px 0; }
.craft-role-tags [aria-pressed=true] { background:#84643e; }
.craft-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.craft-slots button { min-height:67px; padding:9px 5px; border:1px solid #aa8b58; color:#62472c; background:#e3d2b4; }
.craft-slots span,.craft-slots strong { display:block; font:11px/1.8 var(--serif); }
.craft-slots strong { font-size:12px; }
.craft-nav { display:flex; gap:16px; align-items:center; margin:12px 0; }
.craft-nav button { min-height:44px; font:13px var(--serif); }
#craft-status { min-height:36px; font-size:11px; color:#8b683d; }
.craft-source { display:block; font:11px/1.8 var(--serif); margin:12px 0; text-decoration:underline; text-underline-offset:4px; }
.craft-guide details { font:11px/1.8 var(--serif); color:#8a7353; border-top:1px solid #b79b7066; padding-top:12px; }
.craft-guide details summary { min-height:30px; cursor:pointer; }
.craft-chapters { display:flex; justify-content:space-around; gap:12px; margin:22px 0 5px; padding:15px; border-block:1px solid #bba07177; background:#3b2b1ed9; }
.craft-chapters button { min-height:44px; display:flex; align-items:center; gap:8px; color:#ccae7b; font:12px var(--serif); }
.craft-chapters button span { border:1px solid #8c744e; border-radius:50%; width:30px; height:30px; display:grid; place-items:center; font:11px var(--serif); }
.craft-chapters [aria-current=step] { color:#ffe3aa; }
.craft-chapters [aria-current=step] span { border-color:#ddb66f; background:#9b744c; }
#blessing-main { display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:1000px; margin:auto; align-items:start; }
#blessing-main canvas { display:block; width:auto; max-width:100%; height:480px; object-fit:contain; margin:auto; box-shadow:0 8px 35px #051b1380; }
#blessing-main .controls { padding:24px; color:#61462c; background:var(--warm-paper); border:1px solid #b49a67; border-radius:4px 12px; }
#blessing-main label { display:block; font:13px var(--serif); margin-bottom:15px; }
#blessing-main input,#blessing-main select { display:block; width:100%; min-height:44px; padding:9px 11px; margin-top:7px; font:16px var(--serif); border:1px solid #b69a67; background:#fff4dc; color:#59422d; }
#blessing-main .choice { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
#blessing-main .choice button { min-height:44px; border:1px solid #bda57b; color:#755432; background:#e8d8b9; font:12px var(--serif); padding:7px 12px; border-radius:3px 9px; }
#blessing-main .save { width:100%; min-height:48px; color:#ffe8bd; background:#915f3c; border:1px solid #b08550; border-radius:3px 12px; font:16px var(--serif); }
#blessing-main [role=status] { font:11px/1.8 var(--serif); min-height:35px; color:#8d704b; }
#blessing-main details { border-top:1px solid #b8a07777; padding-top:12px; font:11px/1.9 var(--serif); }
#blessing-main details summary { cursor:pointer; min-height:33px; }
#blessing-main details a { display:block; padding:7px 0; text-decoration:underline; text-underline-offset:3px; }
.engineering-book { width:min(1100px,93vw); max-height:87vh; padding:34px; background:#16382f; color:#eddabb; border:1px solid #c29b63; border-radius:3px; }
.engineering-book::backdrop { background:#082720c9; backdrop-filter:blur(5px); }
.engineering-book h2 { padding-right:30px; font:30px/1.5 var(--serif); color:#e7c386; margin:0 0 22px; }
.engineering-book .engineering { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.engineering-book .diagram { padding:17px; background:#eaddc3; border:4px double #bca170; color:#64472c; }
.engineering-book .diagram svg { display:block; width:100%; }
.engineering-book .diagram h3 { font:22px/1.6 var(--serif); text-align:center; margin:0; }
.engineering-book .diagram p,.engineering-book .spec p { font:13px/1.85 var(--serif); }
.engineering-book .spec p { margin:0 0 12px; padding-bottom:12px; border-bottom:1px solid #ad946445; }
.engineering-book .budget { margin:24px 0 10px; padding:20px; border:1px solid #957247; background:#352a20; }
.engineering-book .budget h3 { font:20px var(--serif); color:#e8bf7b; }
.engineering-book table { border-collapse:collapse; width:100%; font:13px/1.8 var(--serif); }
.engineering-book td,.engineering-book th { padding:12px 8px; border-bottom:1px solid #99744f; text-align:left; font-weight:400; }
.engineering-book .note { font:11px/1.85 var(--serif); color:#d0b48d; }
.engineering-book .budget a { display:inline-block; margin:6px 18px 0 0; min-height:30px; font:12px/1.8 var(--serif); text-decoration:underline; text-underline-offset:3px; }
.engineering-details { border-top:1px solid #a98a5766; padding:15px 0; font:13px/1.9 var(--serif); }
.engineering-details summary { cursor:pointer; min-height:38px; color:#edc887; }
.engineering-details li { margin:12px 0; }
.engineering-details a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1000px) {
 .masthead-frieze { height:18px; opacity:.9; }
 .masthead-frieze img { height:60px; top:-19px; }
 .diy-session-tools button { font-size:11px; padding:8px 12px; }
 .diy-shelf { max-height:none; overflow:visible; }
 .diy-session-tools small { font-size:10px; }
 .keepsake-experience-tabs { position:relative; inset:auto; margin:20px -2% 12px; }
 .keepsake-experience-tabs button { min-height:44px; }
 .keepsake .diy-variant-switch { position:relative; inset:auto; margin-top:14px; }
 .keepsake .diy-table { margin-top:12px; }
 .keepsake-extra-panel { position:relative; inset:auto; padding:10px 0 25px; overflow:visible; }
 .craft-room,#blessing-main { grid-template-columns:1fr; gap:22px; height:auto; }
 .craft-board canvas { height:auto; max-height:520px; }
 .craft-guide { padding:23px; overflow:visible; }
 .craft-chapters { flex-wrap:wrap; gap:10px; }
 .craft-chapters button { flex:1 0 40%; justify-content:center; }
 #blessing-main canvas { width:100%; max-width:350px; height:auto; }
 #blessing-main .controls { padding:23px; }
}
@media(max-width:600px) {
 .record-dialog { width:calc(100vw - 22px); max-height:90vh; padding:22px 16px; box-sizing:border-box; }
 .record-gallery { grid-template-columns:1fr; gap:15px; }
 .record-gallery article { display:grid; grid-template-columns:110px 1fr; column-gap:12px; }
 .record-gallery .record-photo { grid-row:1/3; }
 .record-photo img { aspect-ratio:1; }
 .record-gallery h3 { font-size:15px; }
 .record-gallery p { margin:0; }
 .record-photo-open { font-size:9px; }
 .record-album { display:flex; flex-direction:column; align-items:flex-start; }
 .engineering-book { padding:25px 17px; }
 .engineering-book h2 { font-size:23px; }
 .engineering-book .engineering { grid-template-columns:1fr; }
 .engineering-book .budget { padding:12px; }
 .engineering-book table { font-size:10px; }
 .engineering-book td,.engineering-book th { padding:8px 4px; }
}
