/* generated from design/Archive.dc.html by tools/build.mjs — edit the design file, then rebuild */
body{margin:0;background:#FFFFFF}
a{color:#000000;text-decoration:none}
a:hover{color:#000000}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.root{position:relative;height:100vh;height:100dvh;overflow:hidden;background:#FFFFFF;color:#000000;font-family:'Noto Sans KR',sans-serif;font-weight:470;letter-spacing:0;text-rendering:optimizeLegibility;touch-action:none;outline:none}
.root:focus-visible{box-shadow:inset 0 0 0 2px #000000}
.stage{position:absolute;left:0;top:0;width:var(--dw, 1822px);transform-origin:0 0}
.ct{position:absolute;left:0;top:0;width:var(--dw, 1822px)}

.gear{position:absolute;left:0;top:150px;width:var(--dw, 1822px);height:170px;overflow:hidden;perspective:1100px;perspective-origin:var(--dc, 911px) 62px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.cgear{position:absolute;left:0;top:282px;width:var(--dw, 1822px);height:100px;overflow:hidden;perspective:800px;perspective-origin:var(--dc, 911px) 30px;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 26%,#000 38%,#000 62%,transparent 74%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,transparent 26%,#000 38%,#000 62%,transparent 74%,transparent 100%)}
.ci{position:absolute;left:0;top:0;width:max-content;text-align:center;font-size:15px;line-height:15px;font-weight:470;color:#000;white-space:nowrap;opacity:0;transform-origin:0 0}
.nobj .cgear{opacity:0;pointer-events:none}
.gi{position:absolute;left:0;top:0;width:max-content;text-align:center;font-size:20px;line-height:20px;font-weight:470;color:#000;white-space:nowrap;opacity:0;transform-origin:0 0;backface-visibility:visible}
.logo{position:absolute;left:var(--dc, 911px);top:62px;transform:translate(-50%,0);white-space:nowrap;font-size:34.6px;line-height:34.6px;font-weight:470;color:#9A2629;z-index:60;pointer-events:none}
.logo a{pointer-events:auto;color:inherit;padding:6px 0}
.logo a:hover{color:inherit}
.logo.hid{opacity:0}
.lbp{display:inline-block;width:0;height:0;vertical-align:baseline}
.ch{position:relative;visibility:hidden}
.ch.on{visibility:visible}
.ch.cur::before,.ch.end::after{content:"";position:absolute;top:0.36em;height:0.9em;width:2.6px;background:#9A2629;visibility:visible}
.ch.cur::before{left:-1.5px}
.ch.end::after{right:-5px}
.hb{position:absolute;left:0;top:0;width:var(--dw, 1822px);height:180px;z-index:55;pointer-events:none;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 100%);opacity:0;transition:opacity .6s ease}
.hb.on{opacity:1}

.sw{position:absolute;left:0;top:0;width:var(--dw, 1822px);backface-visibility:hidden}
.swo{pointer-events:none}
.turning .foot{opacity:0 !important;transition:opacity .2s ease}

.grid{position:absolute;left:0;top:420px;width:calc(var(--dw, 1822px) + var(--hl, 1px));display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));background:#FFFFFF}
.grid::before{content:"";position:absolute;left:0;top:0;width:100%;height:var(--hl, 1px);background:#E2E2E2;transform-origin:0 50%;z-index:4;pointer-events:none}
.cell{position:relative;display:block;box-sizing:border-box;aspect-ratio:1 / 1;background:#FFFFFF;overflow:hidden;cursor:pointer}
.cell::before,.cell::after{content:"";position:absolute;z-index:3;pointer-events:none;background:#E2E2E2}
.cell::before{right:0;top:0;width:var(--hl, 1px);height:100%;transform-origin:50% 0}
.cell::after{left:0;bottom:0;width:100%;height:var(--hl, 1px);transform-origin:0 50%}
.cell img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:opacity .35s ease,filter .35s ease}
/* The archive's arrival: no grey, no silhouettes. Each square warms for a moment to the paper tone of the intro's
   wash, and the object develops in on it, sharpening as it comes — at its own random moment. */
@keyframes glow{0%{background-color:#FFFFFF}38%{background-color:#F1EEE6}100%{background-color:#FFFFFF}}
@keyframes devIn{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@keyframes devOut{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(4px)}}
.ww .cell img{opacity:0;filter:blur(4px)}
.wwi .cell img{opacity:0 !important;filter:blur(4px) !important;transition:opacity .35s ease,filter .35s ease !important}
.wwq .cell img{transition:opacity 1s cubic-bezier(.4,0,.2,1) calc(var(--wd, 0s) + .32s),filter 1.1s cubic-bezier(.4,0,.2,1) calc(var(--wd, 0s) + .32s)}
.wwq .cell:not(.off):not(.empty){animation:glow 1.3s ease both;animation-delay:var(--wd, 0s)}
.cell .s{opacity:0}
.cell:hover .s,.cell:focus-visible .s{opacity:1}
.cell:hover .f,.cell:focus-visible .f{opacity:0}
.cell.ns .s{display:none}
.cell.empty{cursor:default}
.cell.empty img,.cell.empty .cl{display:none}
.cell.ns:hover .f,.cell.ns:focus-visible .f{opacity:1}
.cell.off{pointer-events:none;cursor:default}
.cell.off img,.cell.off .cl{opacity:0}
.wwq .cell.off img{transition:opacity .5s ease calc(var(--wd, 0s) * .5),filter .5s ease}
.cl{position:absolute;left:10px;right:10px;bottom:8px;display:flex;justify-content:space-between;font-size:11px;line-height:13px;color:#7A7A7A;opacity:0;transition:opacity .35s ease;white-space:nowrap;overflow:hidden}
.cell:hover .cl,.cell:focus-visible .cl{opacity:1}

.pj{position:absolute;left:0;width:var(--dw, 1822px);z-index:0}
.pi{position:absolute;display:block;object-fit:cover;background:#EDECE8;pointer-events:none;-webkit-user-drag:none}
.pi,.pinfo,.pexp{transition:top .7s cubic-bezier(.22,1,.36,1)}
.pinfo{position:absolute;left:var(--mx, 371px);width:var(--mw, 1080px);height:64px;box-sizing:border-box;padding-top:16px;display:flex;align-items:baseline;gap:28px}
.pinfo::before{content:"";position:absolute;left:0;top:0;width:100%;height:var(--hl, 1px);background:#E2E2E2;transform-origin:0 50%}
.pinfo b{font-size:18px;line-height:22px;font-weight:470}
.pinfo span{font-size:15px;line-height:22px;color:#7A7A7A}
.pplus{position:absolute;right:0;top:12px;width:30px;height:30px;font-size:26px;line-height:28px;font-weight:300;color:#111111;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pplus.on{transform:rotate(45deg)}
.pexp{position:absolute;left:var(--mx, 371px);width:var(--mw, 1080px);overflow:hidden;transition:top .7s cubic-bezier(.22,1,.36,1),height .7s cubic-bezier(.22,1,.36,1)}
.pexp .in{display:flex;gap:80px;padding:22px 0 0;opacity:0;transform:translate(0,-10px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.pexp.on .in{opacity:1;transform:none;transition-delay:.18s}
.pexp p{margin:0;width:620px;font-size:15px;line-height:26px;color:#333333}
.pexp dl{margin:0;display:grid;grid-template-columns:96px 1fr;row-gap:8px;font-size:13px;line-height:20px}
.pexp dt{color:#8A8A86}
.pexp dd{margin:0}
.pj{transition:height .7s cubic-bezier(.22,1,.36,1)}
.dial{position:absolute;left:1430px;top:0;width:413px;height:0}
.di{position:absolute;left:0;top:0;width:413px;text-align:center;font-size:20px;line-height:20px;font-weight:470;color:#000;white-space:nowrap;opacity:0;transform-origin:50% 0}

/* Leaving a grid page: the intro's white-wash in reverse — each object loses its colour at its own moment,
   pales to a ghost and is gone, then the squares' lines dissolve after them. */
@keyframes wsG{from{opacity:0}to{opacity:1}}
@keyframes wsC{from{filter:grayscale(1) brightness(1.75) contrast(.42)}to{filter:none}}
@keyframes fdOut{to{opacity:0}}
.bo .sw:not(.swo) .cell .f{animation:devOut .6s ease both;animation-delay:calc(var(--wd, 0s) * .45)}
.bo .sw:not(.swo) .cell:not(.off):not(.empty){animation:glow 1s ease both;animation-delay:calc(var(--wd, 0s) * .45)}
.bo .sw:not(.swo) .cell .s,.bo .sw:not(.swo) .cell .cl{opacity:0}
.bo .sw:not(.swo) .cell::before,.bo .sw:not(.swo) .cell::after{animation:fdOut .5s ease both;animation-delay:calc(.6s + var(--wd, 0s) * .45)}
.bo .sw:not(.swo) .grid::before{animation:fdOut .5s ease 1s both}
.bo .cgear,.bo .foot{opacity:0;pointer-events:none;transition:opacity .45s ease}
/* Arriving: the page is drawn like a diagram — rules pull across, the grid is ruled row by row,
   each photo is outlined, crossed, labelled, and then filled in from the top. */
@keyframes lnX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lnY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes piIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cblink{0%{opacity:1}50%{opacity:0}}
.sw.bg .grid::before{animation:lnX .8s cubic-bezier(.6,0,.2,1) both}
.sw.bg .cell::after{animation:lnX var(--hs) linear both;animation-delay:var(--lh)}
.sw.bg .cell::before{animation:lnY var(--vs) linear both;animation-delay:var(--lv)}
/* then the objects come in exactly as in the intro: pale white-washed ghosts first, colour back square by square */
.sw.bg .cell .f{animation:devIn 1s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(1.07s + var(--wd, 0s))}
.sw.bg .cell:not(.off):not(.empty){animation:glow 1.3s ease both;animation-delay:calc(.75s + var(--wd, 0s))}
.pbx{position:absolute;pointer-events:none}
.pbx > i{position:absolute;display:block;background:#B4B4AF}
.pbx.nb > i{display:none}
.pbx .et{left:0;top:0;width:100%;height:var(--hl, 1px);transform-origin:0 50%;animation:lnX var(--a) linear both;animation-delay:var(--d)}
.pbx .er{right:0;top:0;width:var(--hl, 1px);height:100%;transform-origin:50% 0;animation:lnY var(--b) linear both;animation-delay:calc(var(--d) + var(--a))}
.pbx .eb{right:0;bottom:0;width:100%;height:var(--hl, 1px);transform-origin:100% 50%;animation:lnX var(--a) linear both;animation-delay:calc(var(--d) + var(--a) + var(--b))}
.pbx .el{left:0;bottom:0;width:var(--hl, 1px);height:100%;transform-origin:50% 100%;animation:lnY var(--b) linear both;animation-delay:calc(var(--d) + var(--a) * 2 + var(--b))}
/* inside each frame: an architectural drawing for that menu (axonometric room, exploded layers, stacked floors,
   plan, elevation…) drawn line by line with its notes typed in, before the photo fills in over it */
.pdg{position:absolute;left:0;top:0;width:100%;height:100%}
.pdg svg{position:absolute;left:0;top:0;overflow:visible}
.pdg path{fill:none;stroke:#8C8C87;stroke-width:var(--hl, 1px);stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:0;animation:dsh var(--t) cubic-bezier(.45,0,.25,1) both;animation-delay:calc(var(--d) + var(--s))}
.pdg path.lt{stroke:#BDBDB8}
.pdg path.ds{stroke:#AEAEA9;stroke-dasharray:2.5 3;stroke-dashoffset:0;animation:fdIn .5s ease both;animation-delay:calc(var(--d) + var(--s))}
.pdg path.fl{fill:#F1F0EC;stroke:none;stroke-dasharray:none;stroke-dashoffset:0;animation:fdIn .7s ease both;animation-delay:calc(var(--d) + var(--s))}
.pdg path.fc{stroke:none;stroke-dasharray:none;stroke-dashoffset:0;animation:fdIn .9s ease both;animation-delay:calc(var(--d) + var(--s))}
.pdg path.mk{stroke:#1E1D1B}
/* big type is typed letter by letter, a caret riding on the last letter */
.pdg .tw{position:absolute;display:block;white-space:nowrap;font-family:'Noto Sans KR',sans-serif;font-weight:470;color:#111111;letter-spacing:.02em}
.pdg .tw.k{color:#55554F;letter-spacing:0}
.pdg .tw i{position:relative;font-style:normal;animation:chOn .01s linear both;animation-delay:calc(var(--d) + var(--c))}
.pdg .tw i::after{content:"";position:absolute;right:-.06em;top:.1em;bottom:.06em;width:max(1.5px, .035em);background:#111111;opacity:0;animation:crW var(--g) linear;animation-delay:calc(var(--d) + var(--c))}
.pdg .tw i:last-child::after{animation:crE 2.2s steps(1,end);animation-delay:calc(var(--d) + var(--c))}
@keyframes chOn{from{visibility:hidden}to{visibility:visible}}
@keyframes crW{from{opacity:1}to{opacity:1}}
@keyframes crE{0%{opacity:1}22%{opacity:0}44%{opacity:1}66%,100%{opacity:0}}
/* the outgoing face of a turn shows its drawings finished, not drawing again */
.swo .pbx > i,.swo .pdg *,.swo .pdg *::after{animation:none !important}
@keyframes dsh{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fdIn{from{opacity:0}to{opacity:1}}
.pdg .tl{position:absolute;display:block;height:13px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:13px;letter-spacing:.04em;color:#77776F;white-space:nowrap;overflow:hidden;animation:tyW steps(var(--n), end) both;animation-duration:calc(var(--n) * .035s);animation-delay:calc(var(--d) + var(--s))}
@keyframes tyW{from{width:0}to{width:calc(var(--n) * (1ch + .04em))}}
.pbx span{position:absolute;font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;font-size:11px;line-height:14px;color:#8A8A86;white-space:nowrap}
.pbx .pl{left:12px;top:11px}
.pbx .pd{right:12px;bottom:10px}
.sw.bp .pi{clip-path:inset(0 0 100% 0)}
.sw.bp .pi.rv{animation:piIn .85s cubic-bezier(.65,0,.25,1) both,wsC 1.7s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--d) + .15s),calc(var(--d) + .7s)}
.sw.bp .pinfo::before{transform:scaleX(0)}
.sw.bp .pinfo.rv::before{animation:lnX 1s cubic-bezier(.6,0,.2,1) both}
.sw.bp .pinfo .pplus{opacity:0}
.sw.bp .pinfo.td .pplus{opacity:1;animation:wsG .6s ease both}
.tc::after,.tb::after{content:"";display:inline-block;width:1.5px;height:.92em;margin-left:2px;background:#111111;vertical-align:-.12em}
.tb::after{animation:cblink .9s steps(1,end) infinite}

.foot{position:absolute;left:37px;right:37px;display:flex;justify-content:space-between;font-size:12px;line-height:18px;color:#7A7A7A}
.foot a{color:inherit}
.foot a:hover{color:#111111}
.foot em{font-style:normal;margin:0 9px;color:#B4B4AF}
/* a menu with nothing in it yet: one typed line */
.pe{position:absolute;left:0;width:var(--dw, 1822px);text-align:center;pointer-events:none}
.pe b{display:inline-block;text-align:left;font-weight:400;width:calc(var(--n) * (1ch + .04em) + 6px);font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;font-size:13px;line-height:16px;color:#77776F;white-space:nowrap}
.pe span{display:inline-block;overflow:hidden;vertical-align:top;animation:tyW steps(var(--n), end) both;animation-duration:calc(var(--n) * .045s);animation-delay:.6s}
.pe i{display:inline-block;width:1.5px;height:15px;margin-left:3px;background:#111111;vertical-align:top;animation:cblink .9s steps(1,end) infinite}
/* condition: one dot, green is good, red needs work; an empty ring until it is set */
.cdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 10px 0 0;vertical-align:1px}
.cdot.nd{display:none}
.cdot.unset{box-shadow:inset 0 0 0 var(--lw, 1px) #B4B4AF}

.gear,.cgear,.grid,.pj,.foot{transition:filter 2.4s cubic-bezier(.22,1,.36,1),opacity 2s ease}
.gear{transition-delay:0s}
.cgear{transition-delay:.2s}
.grid,.pj{transition-delay:.45s}
.foot{transition-delay:.8s}
.pre .gear,.pre .cgear,.pre .grid,.pre .pj,.pre .foot{opacity:0;filter:blur(16px)}
/* the menus come in quicker and only lightly blurred, so their turning is seen as they arrive */
.gear,.cgear{transition:filter 1.2s cubic-bezier(.22,1,.36,1),opacity .9s ease}
.cgear{transition-delay:.2s}
.pre .gear,.pre .cgear{filter:blur(5px)}
.door{position:absolute;left:0;top:0;width:var(--dw, 1822px);height:1139px;z-index:50;background:#151516}
.door.sp{background:transparent;pointer-events:none}
.dcv{position:absolute;left:0;top:0;width:var(--dw, 1822px);height:100%;display:block}
.dword{position:absolute;left:0;top:552px;width:var(--dw, 1822px);height:34.6px;display:flex;align-items:center;justify-content:center;gap:18px;font-size:34.6px;line-height:34.6px;font-weight:470;color:#F3F1EA;white-space:nowrap}
.dword:before{content:"";width:10px;height:10px;margin-top:4.8px;background:#C5281E}
.dword.gone{visibility:hidden}
.dv{position:absolute;left:0;top:0;width:var(--dw, 1822px);z-index:90;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:dvIn .35s ease both}
.dwin{position:absolute;left:211px;width:1400px;display:flex;flex-direction:column;background:#FFFFFF;color:#111111;font-weight:400;overflow:hidden;box-shadow:0 0 0 var(--hl, 1px) #D9D9D6,0 30px 90px rgba(0,0,0,.06);animation:dwIn .22s ease both}
.dwin button{font-weight:400}
.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.04em}
.dbar{position:relative;flex:none;height:57px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#E4E4E1,#E4E4E1) left bottom / 100% var(--hl, 1px) no-repeat;animation:rule .8s cubic-bezier(.6,0,.2,1) .12s both;font-size:13px;line-height:13px;color:#555555}
.dlogo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Noto Sans KR',sans-serif;letter-spacing:0;font-size:22.8px;line-height:22.8px;font-weight:470;color:#9A2629;white-space:nowrap}
.dbr{display:flex;gap:26px}
.dbr button:hover{color:#000000}
.dbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:0 30px 90px;scrollbar-width:thin}
.dprod{display:flex;gap:120px;padding-top:84px}
.dleft{flex:none;width:635px}
.dframe{position:relative;width:635px;aspect-ratio:4 / 5;box-sizing:border-box;background:#FFFFFF}
.dframe img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
/* the detail window simply appears: photo and frame are there at once, no wipe, no tracing */
.dframe::before,.dframe::after{animation:none}
.dframe::before,.dframe::after,.dlabel::before,.dlabel::after{content:"";position:absolute;z-index:1;box-sizing:border-box;pointer-events:none;width:100%;height:100%;border:0 solid #E6E6E3}
.dframe::before,.dlabel::before{left:0;top:0;border-top-width:var(--hl, 1px);border-right-width:var(--hl, 1px);animation:trace .36s linear .14s both}
.dframe::after,.dlabel::after{right:0;bottom:0;border-bottom-width:var(--hl, 1px);border-left-width:var(--hl, 1px);animation:trace .36s linear .5s both}
.dlabel::before,.dlabel::after{border-color:#DCDCD8;animation-duration:.3s}
.dlabel::before{animation-delay:.3s}.dlabel::after{animation-delay:.6s}
@keyframes trace{0%{width:0;height:0}50%{width:100%;height:0}100%{width:100%;height:100%}}
@keyframes rule{from{background-size:0 var(--hl, 1px)}}
@property --cp{syntax:'<percentage>';inherits:false;initial-value:100%}
@keyframes cpDraw{from{--cp:0%}to{--cp:100%}}
.dthumbs{display:flex;gap:12px;margin-top:12px}
.dth{display:block;width:72px;height:72px;box-sizing:border-box;padding:0;border:var(--hl, 1px) solid #E6E6E3;background:#FFFFFF;opacity:.45;transition:opacity .25s ease}
.dth.on,.dth:hover{opacity:1}
.dth.on{border-color:#9A9A96}
.dth img{display:block;width:100%;height:100%;object-fit:contain}
.dright{flex:none;width:553px}
.dlabel{position:relative;padding:22px 30px 18px;background:#FFFFFF}
.dlabel i{position:absolute;width:var(--lw, 1px);height:9px;background:#C9C9C4}
.dlabel i:nth-child(1){left:12px;top:9px}.dlabel i:nth-child(2){right:12px;top:9px}
.dlabel i:nth-child(3){left:12px;bottom:9px}.dlabel i:nth-child(4){right:12px;bottom:9px}
.dnums{display:grid;grid-template-columns:repeat(12, 1fr);row-gap:6px;font-size:14px;line-height:26px;color:#A3A39F;text-align:center}
.dnums span{position:relative}
.dnums span.on{color:#111111}
.dnums span.on::after{content:"";position:absolute;left:50%;top:50%;width:29px;height:29px;margin:-15px 0 0 -15px;box-sizing:border-box;border:var(--lw, 1px) solid #111111;border-radius:50%;-webkit-mask:conic-gradient(#000 var(--cp), transparent 0);mask:conic-gradient(#000 var(--cp), transparent 0);animation:cpDraw .7s cubic-bezier(.5,0,.3,1) .85s both}
.dlcap{margin-top:14px;display:flex;justify-content:space-between;font-size:11.5px;line-height:16px;color:#8A8A86}
.dt{margin:46px 0 0;font-size:20.3px;line-height:28px;font-weight:400;letter-spacing:.02em}
.dpr{margin-top:6px;font-size:15.2px;line-height:22px;color:#555555}
.dq{margin:30px 0 0;font-size:15.2px;line-height:25px;color:#333333}
.dspec{margin-top:40px;background:linear-gradient(#E4E4E1,#E4E4E1) left top / 100% var(--hl, 1px) no-repeat;animation:rule .8s cubic-bezier(.6,0,.2,1) .34s both}
.dspec div{display:flex;align-items:baseline;padding:11px 0;background:linear-gradient(#E4E4E1,#E4E4E1) left bottom / 100% var(--hl, 1px) no-repeat;animation:rule .7s cubic-bezier(.6,0,.2,1) both;animation-delay:calc(.42s + var(--i, 0) * .06s);font-size:15.2px;line-height:22px}
.dspec dt{flex:none;width:150px;font-size:11.5px;line-height:22px;color:#8A8A86}
.dspec dd{margin:0}
.dnote{margin:20px 0 0;font-size:12.7px;line-height:20px;color:#8A8A86}
.dq:empty,.dnote:empty{display:none}
.dbtn{margin-top:40px;display:flex;gap:10px}
.dbtn a,.dbtn button{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;box-sizing:border-box;border:var(--hl, 1px) solid #C8C8C4;font-size:15.2px;line-height:20px;color:#111111}
.dbtn a.on,.dbtn button.on{border-color:#111111}
.dbtn a:hover,.dbtn button:hover{background:#F6F6F4}
.dbtn .no{display:none}
/* inquiry / visit request — written like the spec table: a mono key on the left, the line to write on at the right */
.dform{margin-top:28px;background:linear-gradient(#E4E4E1,#E4E4E1) left top / 100% var(--hl, 1px) no-repeat;animation:rule .6s cubic-bezier(.6,0,.2,1) both}
.dform label{display:flex;align-items:baseline;padding:11px 0;background:linear-gradient(#E4E4E1,#E4E4E1) left bottom / 100% var(--hl, 1px) no-repeat;transition:background-image .2s}
.dform label:focus-within{background-image:linear-gradient(#111111,#111111)}
.dform label.hide,.dform .hp{display:none}
.dform label span{flex:none;width:150px;font-size:11.5px;line-height:22px;color:#8A8A86}
.dform input,.dform textarea{flex:1;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;font:inherit;font-size:15.2px;line-height:22px;color:#111111;outline:none;resize:none;-webkit-appearance:none;appearance:none}
.dform input::placeholder,.dform textarea::placeholder{color:#B4B4B0}
.dfa{margin-top:22px;display:flex;align-items:center;gap:18px}
.dfa button{height:52px;padding:0 26px;box-sizing:border-box;border:var(--hl, 1px) solid #111111;background:#111111;color:#FFFFFF;font-size:15.2px;line-height:20px}
.dfa button:hover{background:#333333}
.dfa button[aria-disabled="true"]{opacity:.5;cursor:default}
.dfm{font-size:12.7px;line-height:20px;color:#B8392F}
.dfo{margin:14px 0 0;font-size:12.7px;line-height:20px;color:#8A8A86}
.dfo a{color:#555555;border-bottom:var(--hl, 1px) solid #C8C8C4}
.dsent{margin-top:28px;padding:22px 0 20px;background:linear-gradient(#E4E4E1,#E4E4E1) left top / 100% var(--hl, 1px) no-repeat,linear-gradient(#E4E4E1,#E4E4E1) left bottom / 100% var(--hl, 1px) no-repeat;animation:dwIn .3s ease both}
.dsent b{display:block;font-size:11.5px;line-height:16px;font-weight:400;color:#8A8A86}
.dsent p{margin:8px 0 0;font-size:15.2px;line-height:24px;color:#111111}
.dyml{margin:120px 0 0;font-size:12px;line-height:18px;color:#8A8A86}
.drel{margin-top:14px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));border-top:var(--hl, 1px) solid #E4E4E1;border-left:var(--hl, 1px) solid #E4E4E1}
.drc{display:block;padding-bottom:22px;border-right:var(--hl, 1px) solid #E4E4E1;border-bottom:var(--hl, 1px) solid #E4E4E1}
.drc img{display:block;width:100%;aspect-ratio:1 / 1;object-fit:contain;-webkit-user-drag:none}
.drc span{display:block;padding:0 18px}
.drc span:first-of-type{margin-top:12px;font-size:11.5px;line-height:16px;color:#8A8A86}
.drc span:last-of-type{margin-top:4px;font-size:15.2px;line-height:22px}
/* PHONE — the same page on a 760-wide sheet: four squares to a row, the menus and the detail window sized to be read in the hand */
.ph .gear{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.ph .cgear{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 6%,#000 30%,#000 70%,transparent 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,transparent 6%,#000 30%,#000 70%,transparent 94%,transparent 100%)}
.ph .foot{left:30px;right:30px;flex-direction:column;gap:12px;font-size:19px;line-height:30px}
.ph .foot .fct{display:flex;flex-wrap:wrap}
.ph .foot em{margin:0 12px}
.ph .pe b{font-size:22px;line-height:28px}
.ph .pe i{height:26px}
.ph .cdot{width:15px;height:15px;margin-right:14px}
.ph .cl{left:14px;right:14px;bottom:12px;font-size:18px;line-height:22px}
.ph .dwin{left:0;width:var(--dw, 760px);box-shadow:none}
.ph .dbar{height:100px;padding:0 34px;font-size:22px;line-height:22px}
.ph .dbar > span:first-child{display:none}
.ph .dlogo{position:static;transform:none;font-size:30px;line-height:30px}
.ph .dbr{gap:34px}
.ph .dbr button{padding:24px 0}
.ph .dbody{padding:0 34px 170px}
.ph .dprod{flex-direction:column;gap:56px;padding-top:34px}
.ph .dleft,.ph .dright,.ph .dframe{width:100%}
.ph .dthumbs{gap:16px;margin-top:16px}
.ph .dth{width:110px;height:110px}
.ph .dlabel{padding:28px 34px 22px}
.ph .dnums{font-size:20px;line-height:38px;row-gap:8px}
.ph .dnums span.on::after{width:40px;height:40px;margin:-20px 0 0 -20px}
.ph .dlcap{margin-top:18px;font-size:18px;line-height:24px}
.ph .dt{margin-top:50px;font-size:36px;line-height:46px}
.ph .dpr{margin-top:10px;font-size:27px;line-height:38px}
.ph .dq{margin-top:34px;font-size:27px;line-height:44px}
.ph .dspec{margin-top:44px}
.ph .dspec div{padding:18px 0;font-size:27px;line-height:38px}
.ph .dspec dt{width:220px;font-size:19px;line-height:38px}
.ph .dnote{margin-top:26px;font-size:22px;line-height:34px}
.ph .dbtn{margin-top:46px;gap:16px}
.ph .dbtn button{flex:1;height:92px;padding:0 20px;font-size:28px;line-height:32px}
.ph .dform label{padding:18px 0}
.ph .dform label span{width:200px;font-size:19px;line-height:40px}
.ph .dform input,.ph .dform textarea{font-size:32px;line-height:40px}
.ph .dfa{flex-direction:column;align-items:stretch;gap:16px;margin-top:30px}
.ph .dfa button{height:92px;font-size:28px}
.ph .dfm{font-size:22px;line-height:32px}
.ph .dfo{margin-top:20px;font-size:22px;line-height:36px}
.ph .dsent b{font-size:19px;line-height:26px}
.ph .dsent p{font-size:27px;line-height:42px}
.ph .dyml{margin-top:110px;font-size:20px;line-height:28px}
.ph .drel{grid-template-columns:repeat(2, minmax(0, 1fr))}
.ph .drc span{padding:0 22px}
.ph .drc span:first-of-type{margin-top:14px;font-size:19px;line-height:26px}
.ph .drc span:last-of-type{font-size:26px;line-height:36px}
.ph .pinfo{flex-wrap:wrap;gap:4px 22px;padding:20px 60px 0 0}
.ph .pinfo b{font-size:28px;line-height:34px}
.ph .pinfo span{font-size:23px;line-height:34px}
.ph .pplus{top:16px;width:44px;height:44px;font-size:40px;line-height:42px}
.ph .pexp .in{flex-direction:column;gap:30px}
.ph .pexp p{width:auto;font-size:24px;line-height:40px}
.ph .pexp dl{grid-template-columns:150px 1fr;font-size:21px;line-height:32px}
.ph .dial{display:none}
@keyframes dvIn{from{opacity:0}}
@keyframes dwIn{from{opacity:0}}
@media (prefers-reduced-motion: reduce){.pbx i,.pdg *,.pdg *::after{animation:none !important}.cell img,.cl{transition:none}.dv,.dwin,.dbar,.dspec,.dspec div,.dframe img,.dframe::before,.dframe::after,.dlabel::before,.dlabel::after,.dnums span.on::after{animation:none}}

/* site shell */
html,body{height:100%}
#app{position:relative;height:100%}