/* A photographic design journal for Calm & refined. All three stages share one room. */
.bps-story.bps-refined.bri-story{--bri-progress:0;--bri-reveal:0;--bri-draft:1;--bri-material:0;--bri-light:0;height:280svh;min-height:1200px;background:#f0ede4;color:#354a3c;overflow:visible;touch-action:pan-y pinch-zoom}
.bri-story .bri-stage{position:sticky;top:0;height:100svh;max-height:none;min-height:480px;padding:28px 5% 17px;display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.34fr);grid-template-rows:auto minmax(0,1fr) auto;gap:22px 30px;box-sizing:border-box;overflow:hidden}
.bri-story .bri-heading,.bri-story .bri-footer{grid-column:1/-1}
.bri-story .bri-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;min-width:0}
.bri-story .bri-eyebrow{font-size:8px;letter-spacing:.17em;line-height:1.6;display:block;color:#6e7968;margin-bottom:10px}
.bri-story .bri-heading h2{font:400 clamp(29px,4.2vw,49px)/1.08 Georgia,'Times New Roman',serif!important;letter-spacing:-.045em!important;margin:0!important;color:#354a3c}
.bri-story .bri-heading>p{font-size:10px;line-height:1.75;margin:0 0 2px;text-align:right;color:#6a7565}
.bri-story .bri-scene{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;gap:7px;grid-column:1;grid-row:2;height:100%;max-height:calc(49vw + 18px);align-self:center}
.bri-story .bri-room{position:relative;min-height:0;overflow:hidden;background:#fff}
.bri-story .bri-room>img,.bri-story .bri-drawing{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 50%;display:block;pointer-events:none}
.bri-story .bri-finished{clip-path:inset(0 calc((1 - var(--bri-reveal))*100%) 0 0)}
.bri-story .bri-drawing{color:#000;shape-rendering:geometricPrecision}
.bri-story .bri-draft-lines{opacity:var(--bri-draft)}
.bri-story .bri-shell-lines{stroke-width:1.35}.bri-story .bri-furniture-lines{stroke-width:1.65}
.bri-story .bri-material-markers{opacity:var(--bri-material)}
.bri-story .bri-material-markers circle{r:17px;fill:#344637;stroke:#f9f2e1;stroke-width:1.5}
.bri-story .bri-material-markers text{fill:#fff8e7;stroke:none;font:500 17px Arial,sans-serif;text-anchor:middle;dominant-baseline:central}
.bri-story .bri-daylight{position:absolute;inset:0;background:linear-gradient(122deg,transparent 45%,#fff0c70b 67%,transparent 80%);opacity:var(--bri-light);pointer-events:none}
.bri-story .bri-scene-caption{display:flex;justify-content:space-between;gap:12px;font-size:7px;letter-spacing:.15em;line-height:1.5;color:#75806d;min-height:11px}
.bri-story .bri-notes{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:30px;min-width:0}
.bri-story .bri-chapters{display:grid;min-width:0}
.bri-story .bri-chapter{grid-area:1/1;visibility:hidden;opacity:0;min-width:0}
.bri-story .bri-chapter[aria-hidden=false]{visibility:visible;opacity:1}
.bri-story .bri-chapter-title{display:flex;flex-direction:column;gap:17px;align-items:baseline}
.bri-story .bri-number{font:italic 21px/1 Georgia,serif;color:#8b927d}
.bri-story .bri-chapter h3{font:400 clamp(25px,3.2vw,43px)/1.1 Georgia,'Times New Roman',serif!important;letter-spacing:-.035em!important;margin:0!important}
.bri-story .bri-chapter p{font-size:11px;line-height:1.7;color:#65705e;margin:10px 0 0!important;max-width:490px}
.bri-story .bri-detail{display:block;color:#718169;font-size:8px;line-height:1.5;letter-spacing:.05em;margin-top:7px}
.bri-story .bri-material-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-self:stretch;align-content:center}
.bri-story .bri-material-board>div{display:flex;flex-direction:column;gap:7px;font-size:8px;line-height:1.4;color:#6b755f}
.bri-story .bri-material-board b{display:block;font-weight:400;letter-spacing:.1em;margin-bottom:2px}
.bri-story .bri-photo-credit{font:9px/1.6 Arial,sans-serif!important;color:#66725e;margin:0!important}
.bri-story .bri-photo-credit a{color:inherit;text-underline-offset:2px}
.bri-story .bri-photo-credit span{display:block;margin-top:3px}
.bri-story .bri-swatch{display:block;width:100%;aspect-ratio:1.7;border:1px solid #8382672b;box-shadow:0 2px 3px #615c4408}
.bri-story .bri-timber{background:repeating-linear-gradient(92deg,#684a292b 0 1px,transparent 1px 7px,#f9dfaf1a 7px 8px,transparent 8px 15px),linear-gradient(100deg,#a78b65,#bfaa86 60%,#a58a62)}
.bri-story .bri-fabric{background:repeating-linear-gradient(1deg,#71694915 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#fff7d62c 0 1px,transparent 1px 3px),#e2ded3}
.bri-story .bri-wall{background:#ecebe5}
.bri-story .bri-footer{min-width:0}
.bri-story .bri-ruler{position:relative;height:8px;border-top:1px solid #b3baa53d;background:repeating-linear-gradient(90deg,#9ca58d50 0 1px,transparent 1px 10%);margin:3px 0 8px}
.bri-story .bri-ruler-fill{position:absolute;inset:-1px 0 auto;height:2px;background:#789174;transform-origin:left;transform:scaleX(var(--bri-progress))}
.bri-story .bri-pencil{position:absolute;top:-7px;left:calc(6px + var(--bri-progress)*(100% - 12px));width:4px;height:14px;background:linear-gradient(90deg,#8c7553 0 25%,#d0b382 25% 75%,#a58a61 75%);transform:translateX(-2px) rotate(20deg);border-radius:1px}
.bri-story .bri-pencil:after{content:'';position:absolute;top:100%;left:0;width:4px;height:5px;background:#b3a080;clip-path:polygon(0 0,100% 0,50% 100%)}
.bri-story .bri-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bri-story .bri-controls button{display:flex;gap:11px;justify-content:center;align-items:center;min-width:0;min-height:44px;padding:9px 12px;font:400 11px/1.3 Arial,sans-serif!important;color:#62745e;background:transparent;border:1px solid #a4af973d;cursor:pointer;touch-action:manipulation}
.bri-story .bri-controls button>span{font:italic 12px/1 Georgia,serif;opacity:.7}
.bri-story .bri-controls button[aria-pressed=true]{background:#405641;color:#f2f0e6;border-color:#405641}
.bri-story .bri-controls button:hover{border-color:#789174}.bri-story .bri-controls button:focus-visible{outline:2px solid #5c784f;outline-offset:3px}
.bri-story .bri-scroll-hint{display:flex;justify-content:space-between;font-size:8px;line-height:1.5;letter-spacing:.025em;color:#7a866f;margin:7px 0 0!important}
.bri-story .bri-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1100px){.bri-story .bri-stage{padding:34px 6% 23px;gap:22px 36px}.bri-story .bri-chapter p{font-size:12px;line-height:1.8;margin-top:17px!important}.bri-story .bri-material-board>div{font-size:8px}.bri-story .bri-notes{gap:33px}}
@media(max-width:700px){.bps-story.bps-refined.bri-story{height:280svh;min-height:1200px}.bri-story .bri-stage{padding:20px 6% 13px;gap:14px;min-height:460px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto}.bri-story .bri-heading>p{display:none}.bri-story .bri-eyebrow{font-size:7px;letter-spacing:.1em;margin-bottom:9px}.bri-story .bri-heading h2{font-size:clamp(25px,7vw,38px)!important}.bri-story .bri-notes{grid-column:1;grid-row:3;display:grid;grid-template-columns:1fr;gap:13px}.bri-story .bri-chapter-title{flex-direction:row;gap:10px}.bri-story .bri-chapter h3{font-size:clamp(23px,6.4vw,32px)!important}.bri-story .bri-chapter p{font-size:11px;line-height:1.6;margin-top:8px!important}.bri-story .bri-detail{display:none}.bri-story .bri-material-board{gap:10px}.bri-story .bri-material-board>div{flex-direction:row;align-items:center;gap:7px;font-size:8px}.bri-story .bri-swatch{width:24px;height:27px;aspect-ratio:auto;flex:0 0 24px}.bri-story .bri-controls{gap:7px}.bri-story .bri-controls button{font-size:10px!important;gap:7px;padding:8px 5px}.bri-story .bri-scene-caption{font-size:6px;letter-spacing:.08em}.bri-story .bri-scene-caption>span:last-child{display:none}}
@media(max-width:330px){.bri-story .bri-stage{padding-inline:5%;gap:11px}.bri-story .bri-heading h2{font-size:25px!important}.bri-story .bri-eyebrow{font-size:6px}.bri-story .bri-chapter h3{font-size:22px!important}.bri-story .bri-chapter p{font-size:10px}.bri-story .bri-number{font-size:18px}.bri-story .bri-material-board{gap:6px}.bri-story .bri-material-board>div{font-size:7px;gap:5px}.bri-story .bri-swatch{width:19px;height:23px;flex-basis:19px}.bri-story .bri-controls button{font-size:9px!important;gap:4px}.bri-story .bri-controls button>span{font-size:10px}.bri-story .bri-scroll-hint{font-size:7px}}
@media(max-width:700px){.bri-story .bri-stage{height:min(100svh,calc(66vw + 415px))}.bri-story .bri-scene{max-height:calc(66vw + 18px)}.bri-story .bri-material-markers circle{r:27px}.bri-story .bri-material-markers text{font-size:28px}.bri-story .bri-photo-credit{font-size:8px!important}.bri-story .bri-photo-credit span{margin-top:0}.bri-story .bri-material-board b{display:inline;margin-right:3px}}
@media(max-height:650px){.bri-story .bri-stage{padding-top:16px;padding-bottom:10px;gap:10px;min-height:420px}.bri-story .bri-heading h2{font-size:28px!important}.bri-story .bri-eyebrow{margin-bottom:6px}.bri-story .bri-chapter h3{font-size:24px!important}.bri-story .bri-chapter p{font-size:10px;margin-top:7px!important}.bri-story .bri-detail{display:none}.bri-story .bri-material-board{gap:8px}.bri-story .bri-swatch{max-height:40px}.bri-story .bri-scroll-hint{margin-top:5px!important}}
@media(max-height:560px) and (max-width:700px){.bri-story .bri-stage{gap:8px;padding-top:12px}.bri-story .bri-heading h2{font-size:25px!important}.bri-story .bri-chapter h3{font-size:22px!important}.bri-story .bri-notes{gap:8px}.bri-story .bri-material-board>div{font-size:7px}.bri-story .bri-swatch{height:22px}.bri-story .bri-scene-caption{font-size:5px}.bri-story .bri-ruler{margin-bottom:5px}}
/* Compact embedded phone previews retain room for the illustration and 44px controls. */
@media(max-width:700px) and (max-height:500px){
  .bri-story .bri-stage{height:100svh;min-height:0;padding:10px 5%;gap:7px}
  .bri-story .bri-eyebrow{font-size:6px;line-height:1.4;margin-bottom:4px}
  .bri-story .bri-heading h2{font-size:20px!important;line-height:1.12!important}
  .bri-story .bri-scene{min-height:110px;max-height:none}
  .bri-story .bri-notes{gap:6px}
  .bri-story .bri-chapter-title{gap:7px}
  .bri-story .bri-number{font-size:16px}
  .bri-story .bri-chapter h3{font-size:18px!important;line-height:1.15!important}
  .bri-story .bri-chapter p{display:none}
  .bri-story .bri-detail{display:block;margin-top:4px;font-size:8px;line-height:1.4;letter-spacing:0}
  .bri-story .bri-photo-credit{font-size:7.5px!important;line-height:1.4!important}
  .bri-story .bri-ruler{height:5px;margin:0 0 7px}
  .bri-story .bri-scroll-hint{display:none}
}
@media(min-width:360px) and (max-width:700px) and (max-height:360px){
  .bri-story .bri-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr) auto;padding:8px 4%;gap:6px 12px}
  .bri-story .bri-eyebrow,.bri-story .bri-scene-caption,.bri-story .bri-ruler{display:none}
  .bri-story .bri-heading h2{font-size:18px!important}
  .bri-story .bri-scene{grid-column:1;grid-row:2;min-height:0;grid-template-rows:minmax(0,1fr);gap:0}
  .bri-story .bri-notes{grid-column:2;grid-row:2;gap:4px}
  .bri-story .bri-chapter-title{gap:5px}
  .bri-story .bri-number{font-size:13px}
  .bri-story .bri-chapter h3{font-size:15px!important}
  .bri-story .bri-detail{display:none}
  .bri-story .bri-material-board{gap:4px}
  .bri-story .bri-material-board>div{font-size:8px;gap:3px}
  .bri-story .bri-swatch{width:12px;height:16px;flex-basis:12px}
  .bri-story .bri-photo-credit{font-size:7.5px!important;line-height:1.3!important}
}
@media(prefers-reduced-motion:reduce){.bri-story .bri-room *{transition:none!important;animation:none!important}.bri-story .bri-pencil{display:none}}