/* Atmosphere: wordmark opening, category tiles, floating materials, footer wordmark */
.atm-hero{position:relative;height:clamp(640px,calc(100svh - 112px),900px);overflow:hidden;background:#e9dfd2;isolation:isolate}
.atm-hero .atm-bg{position:absolute;inset:0;background:url(assets/atmos/dreamscape-2000.jpg) center 62%/cover no-repeat;filter:saturate(.78) brightness(1.04) contrast(.96);z-index:-2}
.atm-hero .atm-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,249,246,.7) 0%,rgba(250,249,246,.16) 34%,rgba(250,249,246,0) 60%,rgba(250,249,246,.25) 100%);z-index:-1}
.atm-mark{position:absolute;top:3%;left:0;right:0;margin:0;display:flex;justify-content:center;direction:ltr;z-index:2;pointer-events:none}
.atm-mark>span{font-family:Gelasio,Georgia,serif;font-weight:700;font-size:min(15.6vw,262px);line-height:.86;letter-spacing:-.04em;white-space:nowrap;
 background:url(assets/atmos/inksky-1500.jpg) center 40%/cover;-webkit-background-clip:text;background-clip:text;color:transparent}
.atm-mark .atm-o{position:relative;display:inline-block}
.atm-key{position:absolute;width:.378em;height:.378em;left:52.5%;top:43.3%;transform:translate(-50%,-50%);overflow:hidden}
.atm-mark .atm-br{display:none}
.atm-product{position:absolute;left:50%;top:21%;width:min(21vw,330px);z-index:4;transform:translateX(-50%) translateY(var(--bob,0px)) rotate(calc(-8deg + var(--spin,0deg)));filter:drop-shadow(0 30px 34px rgba(60,40,20,.28)) drop-shadow(0 6px 10px rgba(60,40,20,.18));will-change:transform}
.atm-shadow{position:absolute;left:50%;top:76%;width:min(20vw,300px);height:38px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(70,50,30,.3),rgba(70,50,30,0));z-index:3}
.atm-glass{position:absolute;z-index:5;background:rgba(250,249,246,.48);border:1px solid rgba(255,255,255,.65);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);border-radius:6px;box-shadow:0 10px 40px rgba(60,40,20,.08)}
.atm-main{right:40px;bottom:56px;width:400px;padding:26px 26px 24px}
.atm-side{left:40px;bottom:56px;width:330px;padding:22px 22px 20px}
.atm-eyebrow{display:block;margin-bottom:12px;font-size:10.5px;letter-spacing:2.6px;font-weight:700;color:#7a5e36;direction:ltr;text-align:right}
.atm-main h1{margin:0;font-size:40px;font-weight:800;letter-spacing:-1.4px;line-height:1.02}
.atm-main p{margin:12px 0 0;font-size:15px;line-height:1.6;color:#3d3833}
.atm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.atm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;font:inherit;font-size:13px;font-weight:700;border:1px solid var(--ink,#141414);background:var(--ink,#141414);color:#fff;cursor:pointer;text-decoration:none}
.atm-btn.ghost{background:transparent;color:var(--ink,#141414)}
.atm-btn:hover{transform:translateY(-1px)}
.atm-side b{display:block;font-size:19px;font-weight:600;line-height:1.35}
.atm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.atm-chips a{font-size:12px;font-weight:500;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(20,20,20,.12);text-decoration:none;color:inherit}
.atm-chips a:hover{background:#fff}
.atm-side .atm-link{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;border-bottom:1px solid;padding-bottom:2px;text-decoration:none;color:inherit}
@media(max-width:1000px){.atm-side{display:none}.atm-product{width:min(26vw,300px)}}
@media(max-width:640px){
 .atm-hero{height:auto;min-height:800px}
 .atm-mark{top:22px}.atm-mark>span{font-size:33vw;letter-spacing:-.04em;line-height:.84;text-align:center}.atm-mark .atm-br{display:block}
 .atm-product{top:228px;width:54vw}
 .atm-shadow{top:530px;width:52vw}
 .atm-main{right:16px;left:16px;width:auto;bottom:28px;padding:20px}
 .atm-main h1{font-size:32px}.atm-main p{font-size:14px}
 .atm-actions{flex-direction:column}
}

/* Category tiles */
.cat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat-tile{position:relative;display:block;height:560px;border-radius:14px;overflow:hidden;isolation:isolate;color:var(--ink,#141414);text-decoration:none}
.cat-tile .ct-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.cat-tile .ct-tint{position:absolute;inset:0;z-index:-1}
.cat-tile img{position:absolute;left:50%;top:46%;width:var(--w,62%);transform:translate(-50%,-50%) rotate(var(--r,0deg));filter:drop-shadow(0 26px 30px rgba(0,0,0,.28));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cat-tile:hover img{transform:translate(-50%,-52%) rotate(calc(var(--r,0deg) * -1))}
.cat-tile:hover .ct-bg{transform:scale(1.04)}
.cat-tile .ct-big{position:absolute;top:26px;left:0;right:0;text-align:center;font-family:Gelasio,Georgia,serif;font-weight:700;font-size:96px;letter-spacing:-3px;line-height:1;color:rgba(255,255,255,.22);direction:ltr;pointer-events:none}
.cat-tile .ct-cap{position:absolute;right:16px;left:16px;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;border-radius:8px;background:rgba(250,249,246,.52);border:1px solid rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cat-tile .ct-cap b{display:block;font-size:22px;font-weight:700;letter-spacing:-.5px}
.cat-tile .ct-cap small{display:block;font-size:13px;color:#3d3833;margin-top:2px}
.cat-tile .ct-cap>span:last-child{font-size:13px;font-weight:600;border:1px solid rgba(20,20,20,.35);border-radius:999px;padding:8px 14px;white-space:nowrap}
.ct-clear .ct-bg{background-image:url(assets/atmos/dreamscape-1000.jpg);filter:saturate(.6) brightness(1.05)}
.ct-clear .ct-tint{background:linear-gradient(180deg,rgba(214,226,232,.55),rgba(250,249,246,.1))}
.ct-open .ct-bg{background-image:url(assets/atmos/dreamscape-1000.jpg);background-position:80% 60%;filter:saturate(.9) hue-rotate(-12deg)}
.ct-open .ct-tint{background:linear-gradient(180deg,rgba(236,196,200,.55),rgba(250,249,246,.05))}
.ct-steel .ct-bg{background-image:url(assets/atmos/sepia-1000.jpg)}
.ct-steel .ct-tint{background:linear-gradient(180deg,rgba(20,18,16,.12),rgba(20,18,16,.32))}
.ct-steel .ct-big{color:rgba(255,236,200,.16)}
@media(max-width:900px){.cat-tiles{grid-template-columns:1fr;gap:12px}.cat-tile{height:430px}.cat-tile .ct-big{font-size:80px}}

/* Floating materials */
.atm-float{position:relative;min-height:820px;overflow:hidden;background:#2a2119;color:#f4efe8;isolation:isolate}
.atm-float .af-bg{position:absolute;inset:0;background:url(assets/atmos/sepia-2000.jpg) center/cover;filter:brightness(.62) saturate(.9);z-index:-1}
.atm-float .af-ghost{position:absolute;top:60px;left:0;right:0;text-align:center;font-family:Gelasio,Georgia,serif;font-weight:700;font-size:min(14.6vw,210px);letter-spacing:-.04em;line-height:.9;color:rgba(255,240,220,.07);direction:ltr;pointer-events:none}.af-ghost::before{content:attr(data-t)}
.af-p1{position:absolute;left:10%;top:170px;width:min(25vw,360px);transform:translateY(var(--y1,0px)) rotate(calc(-16deg + var(--r1,0deg)));filter:drop-shadow(0 40px 50px rgba(0,0,0,.45));will-change:transform}
.af-p2{position:absolute;left:31%;top:400px;width:min(14.6vw,210px);transform:translateY(var(--y2,0px)) rotate(calc(14deg + var(--r2,0deg)));filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));will-change:transform}
.af-card{position:absolute;right:80px;top:150px;width:min(420px,calc(100% - 32px));padding:22px 22px 20px;border-radius:10px;background:rgba(30,24,19,.18);border:1px solid rgba(255,235,210,.16);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.af-card .atm-eyebrow{color:#d3b387}
.af-card h2{margin:0;font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.12;color:#f4efe8;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.af-card p{margin:10px 0 0;font-size:15px;line-height:1.65;color:#ece3d6;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.af-mats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.af-mats a{display:block;padding:10px 12px;border:1px solid rgba(255,235,210,.18);border-radius:8px;background:rgba(255,255,255,.04);color:#f4efe8;text-decoration:none;transition:background .2s,border-color .2s}
.af-mats a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,235,210,.4)}
.af-mats a:last-child{grid-column:1 / -1}
.af-mats b{display:block;font-size:15px;font-weight:600}
.af-mats small{display:block;font-size:12.5px;color:#cbbfae;margin-top:3px}
.af-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.af-pills a,.af-pills button{font:inherit;font-size:13px;font-weight:600;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,235,210,.4);background:transparent;color:#f4efe8;text-decoration:none;cursor:pointer}
.af-pills .solid{background:#f4efe8;color:#141414;border-color:#f4efe8}
@media(max-width:900px){
 .atm-float{min-height:0;padding:min(62vw,470px) 16px 40px}
 .af-p1{left:6%;top:40px;width:46vw}.af-p2{left:52%;top:120px;width:28vw}
 .af-card{position:relative;right:auto;top:auto;width:auto;padding:26px 22px}
 .af-card h2{font-size:32px}
}

/* Footer wordmark */
.mega-mark{display:block;width:100%;height:auto;margin-top:46px;overflow:visible;direction:ltr;user-select:none}
.mega-mark text{font-family:Gelasio,Georgia,serif;font-weight:700;font-size:178px;letter-spacing:-.03em;fill:#faf9f6}
@media(prefers-reduced-motion:reduce){.atm-product,.af-p1,.af-p2,.cat-tile img,.cat-tile .ct-bg{transition:none!important}}

/* Material comparison table */
.mtable-sec{padding-block:clamp(50px,7vw,90px) clamp(30px,5vw,60px)}
.mt-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px}
.mt-head h2{margin:0;font-size:clamp(40px,5.2vw,64px);font-weight:800;letter-spacing:-2px;line-height:1}
.mt-head p{margin:0;color:var(--muted,#68635d);font-size:15px;line-height:1.6;text-align:left}
.mt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mtable{width:100%;min-width:720px;border-collapse:collapse;table-layout:fixed}
.mtable th,.mtable td{padding:16px 10px;text-align:center;border-bottom:1px solid var(--line,#ddd9d1);vertical-align:middle}
.mtable thead th{border-bottom:1px solid var(--line,#ddd9d1);padding-bottom:22px}
.mtable thead th:first-child{width:18%}
.mtable thead a{display:inline-flex;flex-direction:column;align-items:center;gap:12px;color:inherit;text-decoration:none}
.mtable thead img{width:104px;height:104px;object-fit:contain;background:#fff;border:1px solid #ece8e1;border-radius:10px;padding:6px;transition:transform .3s}
.mtable thead a:hover img{transform:translateY(-3px)}
.mtable thead span{font-size:20px;font-weight:700;letter-spacing:-.3px}
.mtable tbody th{text-align:right;font-size:14px;font-weight:600;color:var(--ink,#141414);padding-inline-start:0}
.mtable tr:last-child th,.mtable tr:last-child td{border-bottom:0}
.mp{display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid #cfc8bd;font-size:14px;line-height:1.3;white-space:nowrap;color:var(--ink,#141414)}
.mp.yes{background:#efe3cf;border-color:#efe3cf;color:#5a4526;font-weight:600}
.mp.dark{background:var(--ink,#141414);border-color:var(--ink,#141414);color:#fff}
.mp.price{background:#fff;border-color:#e6e1d8;font-variant-numeric:tabular-nums;letter-spacing:.02em;direction:ltr}
@media(max-width:700px){.mt-head{flex-direction:column;align-items:flex-start}.mt-head p{text-align:right}.mtable thead img{width:78px;height:78px}.mtable thead span{font-size:16px}.mp{padding:7px 12px;font-size:13px}.mtable tbody th{position:sticky;right:0;background:var(--paper,#faf9f6);z-index:1}}
.atm-product,.af-p1,.af-p2,.cat-tile img{height:auto;max-width:none}
.atm-mark .atm-o{background:url(assets/atmos/inksky-1500.jpg) center 40%/cover;-webkit-background-clip:text;background-clip:text;color:transparent}
.atm-side{left:230px}
@media(max-width:1200px){.atm-side{display:none}}
@media(max-width:640px){.atm-product{width:44vw;top:236px}.atm-shadow{top:500px;width:42vw}}
/* The claim, after the video */
.key-claim{padding-block:clamp(56px,8vw,96px) clamp(26px,4vw,44px)}
.kc-inner{max-width:720px;margin:0 auto;text-align:center}
.kc-inner .atm-eyebrow{text-align:center}
.kc-inner h1{margin:0;font-size:clamp(44px,6.4vw,84px);font-weight:800;letter-spacing:-2.4px;line-height:1}
.kc-inner .atm-actions{justify-content:center;margin-top:26px}
@media(max-width:640px){.kc-inner .atm-actions{flex-direction:column;align-items:stretch}.atm-hero{min-height:0;height:620px}.atm-product{top:216px}.atm-shadow{top:470px}}
/* Slimmer band under the video */
.locktober-actions{padding:10px 20px;gap:22px}
.locktober-actions .btn{min-height:34px;padding:6px 16px;font-size:12px;gap:10px}
.locktober-actions .hero-text-link{font-size:11.5px;padding:4px 0}
.locktober-actions .btn .arrow{font-size:13px;line-height:1}
.locktober-actions .btn{line-height:1.2}
@media(max-width:680px){.locktober-actions{padding:9px 14px;gap:14px}.locktober-actions .btn{min-height:32px;width:auto;font-size:11px}}

/* Handwritten aside inside a heading */
.hand{font-family:'Amatic SC',cursive;font-weight:700;font-size:1.15em;letter-spacing:0;color:#8f7248;white-space:nowrap}
#start .section-head h2{max-width:none}

/* Handwriting accents */
.cat-tile .ct-cap small{font-family:'Amatic SC',cursive;font-weight:700;font-size:26px;line-height:1.05;letter-spacing:.01em;color:#5e4625;-webkit-text-stroke:.45px #5e4625;margin-top:4px}
.kbox h2 .hand{font-size:1.12em;line-height:1}
.kb-card h3{font-family:'Amatic SC',cursive;font-weight:700;font-size:clamp(54px,6.6vw,78px);letter-spacing:0;line-height:.95;color:#fff}
.hand-ink{font-family:'Amatic SC',cursive;font-weight:700;font-size:26px;line-height:1.2;letter-spacing:0;color:var(--ink,#141414)}

/* Contact band: sepia sky, turning gold cage, floating key */
.cb-sky{position:relative;isolation:isolate;overflow:hidden;min-height:620px;display:flex;align-items:center;justify-content:center;padding:90px 25px;background:#e5ded3}
.cb-sky .cb-bg{position:absolute;inset:-6% 0;background:url(assets/atmos/sepia-2000.jpg) center 45%/cover no-repeat;z-index:-2}
.cb-sky .cb-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 46% 60% at 50% 55%,rgba(238,232,222,.72),rgba(238,232,222,0) 100%)}
.cb-sky .cb-inner{position:relative;z-index:2;max-width:620px}
.cb-sky p{color:#3f362c;font-size:18px;margin-bottom:28px}
.cb-sky .phone{color:#2d2721}
.cb-cage,.cb-key{position:absolute;top:50%;z-index:1;height:auto;max-width:none;pointer-events:none;filter:drop-shadow(0 40px 36px rgba(60,40,15,.32));will-change:transform}
.cb-cage{left:7%;width:min(26vw,370px);transform:translateY(calc(-50% + var(--cy,0px))) rotate(var(--cr,-14deg))}
.cb-key{right:9%;width:min(10vw,140px);transform:translateY(calc(-50% + var(--ky,0px))) rotate(var(--kr,18deg))}
@media(max-width:1100px){.cb-cage{left:2%;width:28vw}.cb-key{right:3%}}
@media(max-width:760px){.cb-sky{min-height:0;padding:300px 20px 70px;align-items:flex-end}.cb-cage{left:8%;top:40px;width:46vw;transform:rotate(var(--cr,-14deg))}.cb-key{right:12%;top:70px;width:17vw;transform:rotate(var(--kr,18deg))}}
@media(prefers-reduced-motion:reduce){.cb-cage,.cb-key{transition:none}}


.ordering h2{font-size:clamp(26px,2.7vw,37px);line-height:1.2;letter-spacing:-.5px}
.ordering h2 br{display:block}
@media(max-width:680px){.ordering h2{font-size:clamp(22px,6.6vw,28px)}}

/* Finder: the collection swims like fish in a tank */
.finder-visual.fv-tank{display:block;position:relative;min-height:760px;padding:0;overflow:hidden;background:linear-gradient(180deg,#a9c8e3 0%,#b5c0c9 20%,#bfb7ae 35%,#cbaf94 50%,#d6a679 65%,#e09d5e 80%,#e99342 100%)}
.fv-item{position:absolute;left:0;top:0;width:var(--w);margin:0;padding:0;border:0;background:none;cursor:pointer;transform:translate3d(var(--x,0px),var(--y,0px),0) translate(-50%,-50%) rotate(var(--r,0deg));will-change:transform;z-index:var(--z,1);opacity:var(--o,1)}
.fv-item img{display:block;width:100%;height:auto;max-width:none;mix-blend-mode:normal;transform:none;filter:drop-shadow(0 18px 20px rgba(40,30,15,.26));transition:scale .35s cubic-bezier(.2,.7,.2,1)}
.fv-item:hover img{scale:1.08}
.fv-item:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:12px}
@media(max-width:680px){.finder-visual.fv-tank{min-height:560px}}
