/* Section 03 boards v3 (2026-09-24): Orlo Ceramics, a concept project carried through
   brief, structure, identity, three directions and the evolving site.
   Sizes are in cqw of .build-deck (container set in motion-boards-v2.css). */
.orlo-board,.orlo-device{--kiln:#b4532f;--kiln-d:#8f3f22;--bone:#f3eee6;--paper:#faf7f1;--ash:#d9d2c6;--celadon:#9fb3a4;--char:#23201c;--mute:#6f675d;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
.orlo-board *,.orlo-device *{box-sizing:border-box}
.orlo-board h3,.orlo-board h4,.orlo-board p,.orlo-board ol,.orlo-board ul,.orlo-device h4{margin:0;padding:0}
.orlo-board ol,.orlo-board ul{list-style:none}
.orlo-board small,.orlo-device small{display:block;font-size:1cqw;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.motion-lab .orlo-board{background:var(--bone);color:var(--char)}
.motion-lab .orlo-board .sheet-label{background:var(--paper);color:var(--char);border-bottom:1px solid var(--ash)}
.motion-lab .orlo-board .sheet-label span{color:var(--mute)}
.orlo-board [style*="--img"],.orlo-device [style*="--img"]{background:var(--img) center/cover no-repeat}

/* 01 Brief */
.ob-body{position:relative;height:92%;display:grid;grid-template-columns:42% 1fr}
.ob-photo{position:relative;background-position:center 62%}
.ob-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#1c1813d9,#1c181300 55%)}
.ob-cap{position:absolute;z-index:1;left:3cqw;right:3cqw;bottom:3cqw;color:#efe7da;font-size:1.1cqw;letter-spacing:.06em;text-transform:uppercase}
.ob-cap b{display:block;margin-top:.8cqw;font:400 3cqw/1.1 var(--serif);letter-spacing:-.01em;text-transform:none;color:#fff}
.ob-text{padding:3.4cqw 3.8cqw 3cqw;display:flex;flex-direction:column}
.ob-text h3{font:400 4.6cqw/1.02 var(--serif);letter-spacing:-.025em;margin:1.4cqw 0 1.6cqw;max-width:34cqw}
.ob-text p{font-size:1.45cqw;line-height:1.55;color:#4b453e;max-width:38cqw}
.ob-text ol{margin-top:2.2cqw;border-top:1px solid var(--ash)}
.ob-text li{display:grid;grid-template-columns:30% 1fr;align-items:baseline;padding:1.25cqw 0;border-bottom:1px solid var(--ash)}
.ob-text li b{font-size:1.5cqw;font-weight:650;color:var(--kiln-d)}
.ob-text li span{font-size:1.35cqw;color:#3b362f}
.ob-route{margin-top:auto;display:flex;align-items:center;gap:1.2cqw;font-size:1.1cqw;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ob-route i{flex:1;height:1px;background:var(--kiln)}
.ob-note{position:absolute;right:3.2cqw;top:3.2cqw;width:15.5cqw;padding:1.4cqw 1.5cqw;background:#f4dfb4;color:#4a3a22;font:italic 400 1.45cqw/1.3 var(--serif);transform:rotate(3deg);box-shadow:0 .5cqw 1.2cqw #3a2a1426}
.ob-note:before{content:"From the owner";display:block;font:600 .8cqw/1 Manrope,sans-serif;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.7cqw;color:#8a6c3d}

/* 02 Structure */
.motion-lab .orlo-wire{background:#ecebe5;background-image:linear-gradient(#d5d6cf66 1px,transparent 1px),linear-gradient(90deg,#d5d6cf66 1px,transparent 1px);background-size:2.5cqw 2.5cqw}
.ow-body{position:relative;height:92%;display:grid;grid-template-columns:17% 1fr 15%;gap:2.6cqw;padding:3cqw}
.orlo-wire s{display:block;height:.75cqw;background:#bdbab2;border-radius:.2cqw;margin:.55cqw 0;text-decoration:none}
.orlo-wire s.big{height:1.7cqw;background:#8f8b82}
.orlo-wire .w30{width:30%}.orlo-wire .w40{width:40%}.orlo-wire .w50{width:50%}.orlo-wire .w60{width:60%}.orlo-wire .w70{width:70%}.orlo-wire .w80{width:80%}.orlo-wire .w90{width:90%}
.orlo-wire u{display:inline-block;margin:1cqw .6cqw 0 0;padding:.6cqw 1.2cqw;font-size:.9cqw;text-decoration:none;background:var(--char);color:var(--bone);border-radius:.2cqw}
.orlo-wire u.ghost{background:none;color:var(--char);border:1px solid var(--char)}
.ow-map{padding-top:.5cqw}
.ow-root{display:inline-block;margin:1.4cqw 0 1cqw;padding:.7cqw 1.2cqw;background:var(--char);color:var(--bone);font-size:1.25cqw;font-weight:600;border-radius:.2cqw}
.ow-map ul{margin-left:1cqw;border-left:1px solid #8f8b82}
.ow-map li{position:relative;padding:.9cqw 0 .9cqw 1.6cqw;font-size:1.25cqw;font-weight:600}
.ow-map li:before{content:"";position:absolute;left:0;top:50%;width:1.1cqw;height:1px;background:#8f8b82}
.ow-map em{display:block;font-style:normal;font-weight:400;font-size:.95cqw;color:var(--mute);margin-top:.2cqw}
.ow-page{position:relative;background:var(--paper);border:1px solid #9a968d;border-radius:.5cqw;display:flex;flex-direction:column;box-shadow:0 .5cqw 0 #cfccc4}
.ow-nav{display:flex;align-items:center;gap:1.4cqw;padding:1.2cqw 1.6cqw;border-bottom:1px solid #cfccc4}
.ow-nav span{width:4cqw;height:.6cqw;background:#bdbab2;border-radius:.2cqw}
.ow-logo{width:2.2cqw;height:2.2cqw;border:.35cqw solid #8f8b82;border-radius:50%;margin-right:auto}
.ow-bag{width:1.6cqw;height:1.8cqw;border:1px solid #8f8b82;border-radius:.2cqw .2cqw .4cqw .4cqw;margin-left:1cqw}
.ow-hero{display:grid;grid-template-columns:54% 1fr;gap:2cqw;padding:1.8cqw;flex:1.3}
.ow-img{background:#dedbd3;border:1px solid #b9b5ac;color:#aaa69c}
.ow-img svg{width:100%;height:100%;display:block}
.ow-copy{display:flex;flex-direction:column;justify-content:center}
.ow-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw;padding:0 1.8cqw 1.4cqw}
.ow-routes>div{border:1px solid #cfccc4;padding:1.2cqw 1cqw;min-height:5cqw}
.ow-cal{display:flex;align-items:center;gap:1.4cqw;padding:1.1cqw 1.8cqw;background:#eceae3;border-top:1px solid #cfccc4}
.ow-cal s{margin:0}
.ow-cal div{display:flex;gap:.6cqw;flex:1}
.ow-cal i{flex:1;height:1.8cqw;border:1px solid #bdbab2;border-radius:.2cqw;background:var(--paper)}
.ow-cal i.on{background:var(--kiln);border-color:var(--kiln)}
.ow-pin{position:absolute;width:2.3cqw;height:2.3cqw;border-radius:50%;background:var(--kiln);color:#fff;font-size:1.1cqw;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 .45cqw #b4532f33}
.ow-pin.p1{left:26%;top:30%}.ow-pin.p2{left:-1.2cqw;top:74%}.ow-pin.p3{right:-1.2cqw;bottom:1.2cqw}
.ow-mobile{align-self:start;background:var(--paper);border:1px solid #9a968d;border-radius:1.4cqw;padding:1.1cqw;aspect-ratio:9/17;display:flex;flex-direction:column;box-shadow:0 .5cqw 0 #cfccc4}
.ow-mnav{display:flex;justify-content:space-between;margin-bottom:.9cqw}
.ow-mnav i{width:1.6cqw;height:1.6cqw;border:.3cqw solid #8f8b82;border-radius:50%}
.ow-mnav i+i{border-radius:.2cqw;border-width:1px;height:1.2cqw}
.ow-mimg{height:34%;background:#dedbd3;border:1px solid #b9b5ac;margin-bottom:.6cqw}
.ow-mobile u{align-self:start;margin-top:.5cqw;font-size:.75cqw}
.ow-mrow{height:2.4cqw;border:1px solid #cfccc4;margin-top:.7cqw}
.ow-notes{grid-column:3;grid-row:1;align-self:end;display:flex;flex-direction:column;gap:1.1cqw}
.ow-mobile{grid-column:3;grid-row:1}
.ow-notes li{display:flex;gap:.8cqw;align-items:center;font-size:1.05cqw;font-weight:600;line-height:1.25}
.ow-notes b{flex:none;width:1.9cqw;height:1.9cqw;border-radius:50%;background:var(--kiln);color:#fff;font-size:.95cqw;display:grid;place-items:center}

/* 03 Identity */
.oi-body{position:relative;height:92%;display:grid;grid-template-columns:36% 1fr 1fr;grid-template-rows:58% 1fr;gap:1.8cqw;padding:2.6cqw}
.oi-mark{grid-row:1/3;background:var(--kiln);color:var(--bone);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4cqw;padding:2cqw}
.oi-mark svg{width:11cqw;height:11cqw}
.oi-word{font:400 8.6cqw/.9 var(--serif);letter-spacing:-.04em}
.oi-mark small{color:#f3e2d6;letter-spacing:.14em}
.oi-photo{grid-column:2/4;position:relative;display:flex;align-items:end;padding:1.8cqw;filter:sepia(.25) saturate(.9)}
.oi-photo:before{content:"";position:absolute;inset:0;background:#b4532f;mix-blend-mode:multiply;opacity:.28}
.oi-photo span{position:relative;color:#fff;font:italic 400 1.9cqw/1.2 var(--serif);text-shadow:0 1px 1cqw #0006}
.oi-type{display:flex;flex-direction:column}
.oi-pair{display:flex;align-items:baseline;gap:1.6cqw;margin:.6cqw 0}
.oi-aa{font:400 6.4cqw/1 var(--serif);letter-spacing:-.03em}
.oi-aa.sans{font:600 5.2cqw/1 Manrope,sans-serif;color:var(--kiln)}
.oi-type p{font:400 1.7cqw/1.3 var(--serif)}
.oi-specs{margin-top:auto;font-size:.95cqw;color:var(--mute)}
.oi-colour{display:flex;flex-direction:column}
.oi-colour div{display:flex;flex:1;margin-top:.9cqw;border:1px solid #0000000f}
.oi-colour i{flex:1;background:var(--sw);position:relative}
.oi-colour i span{position:absolute;left:.6cqw;bottom:.7cqw;font-size:.85cqw;font-style:normal;font-weight:600;color:#fff}
.oi-colour i:nth-child(2) span,.oi-colour i:nth-child(4) span,.oi-colour i:nth-child(3) span{color:var(--char)}
.oi-voice{position:absolute;right:3cqw;top:11%;display:flex;gap:.6cqw;align-items:center}
.oi-voice small{margin-right:.4cqw;color:#fff}
.oi-voice span{padding:.5cqw 1cqw;background:#faf7f1e6;font:italic 400 1.2cqw/1 var(--serif);border-radius:.2cqw}

/* 04 Directions */
.motion-lab .orlo-directions{background:#e7e2d9}
.od-body{height:92%;display:grid;grid-template-columns:repeat(3,1fr);gap:1.9cqw;padding:2.4cqw}
.od-dir{display:flex;flex-direction:column;min-width:0}
.od-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1cqw;font-size:1.15cqw;font-weight:650}
.od-label span{font-size:.9cqw;font-weight:500;color:var(--mute)}
.is-chosen .od-label span{padding:.3cqw .8cqw;background:var(--kiln);color:#fff;border-radius:.2cqw;font-weight:650}
.od-page{position:relative;flex:1;overflow:hidden;border-radius:.5cqw;padding:1.8cqw;display:flex;flex-direction:column;box-shadow:0 .4cqw 0 #bfb7aa,0 1.2cqw 2cqw #2a201519}
.is-chosen .od-page{outline:.3cqw solid var(--kiln);outline-offset:.5cqw}
.od-nav{display:flex;justify-content:space-between;align-items:baseline;font-size:.85cqw;margin-bottom:1.5cqw}
.od-nav b{font:400 1.9cqw/1 var(--serif);letter-spacing:-.03em}
.od-nav i{font-style:normal;opacity:.8}
.od-cta{align-self:start;margin-top:1.6cqw;padding:.9cqw 1.3cqw;font-size:.95cqw;font-weight:650;border-radius:.2cqw}
.od-gallery .od-page{color:#fff;background-position:center 70%}
.od-gallery .od-page:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#1c1813e6,#1c181300 62%)}
.od-gallery .od-page>*{position:relative}
.od-gallery h3{margin-top:auto;font:400 3cqw/1.05 var(--serif);letter-spacing:-.02em}
.od-gallery .od-cta{background:var(--kiln)}
.od-journal .od-page{background:var(--paper);color:var(--char)}
.od-journal small{font-size:.8cqw}
.od-journal h3{margin:.8cqw 0 1.2cqw;font:italic 400 2.7cqw/1.05 var(--serif);letter-spacing:-.02em}
.od-pic{flex:1;min-height:6cqw;border-radius:50% 50% .3cqw .3cqw/28% 28% .3cqw .3cqw;background-position:center 60%}
.od-journal .od-cta{background:none;padding:0;border-bottom:1px solid var(--char);border-radius:0}
.od-market .od-page{background:var(--char);color:var(--bone)}
.od-market h3{font:600 1.6cqw/1.2 Manrope,sans-serif;margin-bottom:1.2cqw}
.od-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1cqw}
.od-grid>div{background:#2f2b26;border-radius:.3cqw;padding:1cqw;display:flex;flex-direction:column;justify-content:space-between}
.od-grid span{display:flex;justify-content:space-between;font-size:.85cqw;margin-top:.6cqw}
.od-grid em{font-style:normal;color:#e2b49a}
.pot{display:block;margin:auto auto 0;background:var(--g,#9fb3a4)}
.p-bowl{--g:#9fb3a4;width:70%;height:2.6cqw;border-radius:.3cqw .3cqw 50% 50%/.3cqw .3cqw 100% 100%}
.p-vase{--g:#d9d2c6;width:2.6cqw;height:4.6cqw;border-radius:40% 40% 45% 45%/20% 20% 60% 60%}
.p-cup{--g:#b4532f;width:3.4cqw;height:3.2cqw;border-radius:.2cqw .2cqw 1cqw 1cqw;box-shadow:.9cqw .4cqw 0 -.5cqw #b4532f}
.p-plate{--g:#efe7da;width:78%;height:1.3cqw;border-radius:50%}

/* 05 Evolving site */
.motion-lab .orlo-site{background:var(--paper);color:var(--char)}
.motion-lab .orlo-site .device-toolbar{background:#ebe6dd;color:#4b453e;border-bottom:1px solid var(--ash)}
.os-body{position:relative;height:92%;display:flex;flex-direction:column}
.os-nav{display:flex;align-items:center;gap:2.6cqw;padding:1.6cqw 3cqw;font-size:1.1cqw;font-weight:600;border-bottom:1px solid #e3ddd2}
.os-logo{display:flex;align-items:center;gap:.7cqw;margin-right:auto;font:400 2.4cqw/1 var(--serif);letter-spacing:-.03em}
.os-logo svg{width:2.3cqw;height:2.3cqw}
.os-nav i{font-style:normal;padding:.5cqw 1cqw;border:1px solid var(--char);border-radius:2cqw}
.os-hero{flex:1;display:grid;grid-template-columns:47% 1fr;min-height:0}
.os-photo{background-position:center 64%}
.os-copy{padding:3.2cqw 3.6cqw;display:flex;flex-direction:column;justify-content:center;background:var(--bone)}
.os-copy small{color:var(--kiln-d)}
.os-copy h3{margin:1.3cqw 0 1.4cqw;font:400 5cqw/1 var(--serif);letter-spacing:-.03em}
.os-copy p{font-size:1.35cqw;line-height:1.55;color:#4b453e;max-width:34cqw}
.os-actions{display:flex;gap:1cqw;margin-top:2.2cqw}
.os-btn{padding:1.1cqw 1.7cqw;background:var(--kiln);color:#fff;font-size:1.1cqw;font-weight:650;border-radius:.3cqw}
.os-btn.ghost{background:none;color:var(--char);border:1px solid var(--char)}
.os-cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e3ddd2}
.os-cards>div{padding:1.6cqw 3cqw;display:flex;flex-direction:column;gap:.4cqw;border-right:1px solid #e3ddd2}
.os-cards>div:last-child{border:0}
.os-cards small{font-size:.85cqw}
.os-cards b{font:400 1.8cqw/1.15 var(--serif)}
.os-cards span{font-size:1cqw;color:var(--mute)}
.os-cards .os-spaces{color:var(--kiln-d);font-weight:650}
.os-log{position:absolute;left:2.2cqw;top:8.5cqw;display:flex;flex-direction:column;gap:.6cqw}
.os-log li{display:flex;gap:.8cqw;align-items:center;padding:.6cqw 1cqw;background:#fffffff0;border:1px solid var(--ash);border-radius:.3cqw;font-size:.95cqw;font-weight:600;box-shadow:0 .4cqw 1.2cqw #2a201514}
.os-log b{font-size:.8cqw;color:var(--mute);font-weight:650}
.os-log .is-new{border-color:var(--kiln)}
.os-log .is-new b{color:var(--kiln-d)}
.os-log .is-new:after{content:"New";margin-left:.4cqw;padding:.2cqw .6cqw;background:var(--kiln);color:#fff;font-size:.75cqw;border-radius:.2cqw}

/* Phone */
.motion-lab .orlo-device{background:var(--paper)!important;padding:0!important;container-type:inline-size}
.op-screen{height:100%;padding:18cqw 7cqw 7cqw;display:flex;flex-direction:column;color:var(--char);font-family:Manrope,sans-serif}
.op-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:5cqw}
.op-nav b{font:400 10cqw/1 var(--serif);letter-spacing:-.04em}
.op-nav i{width:9cqw;height:5cqw;border-top:1.2cqw solid var(--char);border-bottom:1.2cqw solid var(--char)}
.op-photo{height:34%;margin:0 -7cqw 5cqw;background-position:center 45%}
.orlo-device small{font-size:4.6cqw;color:var(--kiln-d)}
.op-screen h4{margin:2.5cqw 0 5cqw;font:400 10.5cqw/1.02 var(--serif);letter-spacing:-.03em}
.op-btn{align-self:start;padding:3.5cqw 5.5cqw;background:var(--kiln);color:#fff;font-size:5cqw;font-weight:650;border-radius:1.5cqw}
.op-card{margin-top:4cqw;padding:3.5cqw 0;border-top:1px solid var(--ash);display:flex;flex-direction:column;gap:1cqw}
.op-card b{font:400 6.4cqw/1.1 var(--serif)}
.op-card span{font-size:4.4cqw;color:var(--mute)}

@media(max-width:800px){.ob-note{display:none}.oi-voice{display:none}.os-log{top:7.5cqw}}
.motion-lab .scene-caption{display:none}