/* A2 The Kept Box, original colours (round two). Design concept, not the live site.
   The page is a light linen-lined cupboard: ivory shelves, the live heritage green on the tin,
   the cabinet and the bands. Dark walnut is kept for one thing only: the table the tin is opened on. */
:root{
  /* the live Capture & Keep palette */
  --ivory:#FBF8F2; --ivory-2:#F4EEE3; --white:#FFFFFF;
  --green:#557267; --green-dk:#435C53; --green-lt:#6D8B7F; --on-green:#EEF4E7;
  --sage:#D7E2D3; --sage-dk:#BFD0B9; --blush:#E9D0CD; --blush-dk:#DBB6B1;
  --ink:#2E2E2E; --ink-soft:#5B5852; --rule:rgba(85,114,103,.22);
  /* accents, kept to the keepsakes */
  --wood:#2A1B13; --wood-2:#3B271B; --cream:#F4EBDC; --cream-2:#DCCBB2;
  --brass:#C9A55C; --brass-lt:#E3C98B; --brass-dk:#8E6B2E; --gold-text:#E2C07E;
  --burgundy:#7D3340; --burgundy-dk:#632630; --kraft:#B89A6A;
  --shadow:0 22px 40px -24px rgba(46,46,46,.42), 0 2px 6px rgba(46,46,46,.06);
  --shadow-wood:0 40px 60px -28px rgba(0,0,0,.8);
  --f-display:"Young Serif", Georgia, "Times New Roman", serif;
  --f-body:"Newsreader", Georgia, serif;
  --f-label:"Jost", "Gill Sans", "Trebuchet MS", sans-serif;
  --gut:clamp(16px, 4vw, 56px);
  --max:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--f-body);font-size:1.1875rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
svg{max-width:100%}
a{color:var(--green-dk);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--burgundy);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--burgundy);outline-offset:3px;border-radius:2px}
.wood :focus-visible,.green-band :focus-visible{outline-color:var(--gold-text)}
h1,h2{font-family:var(--f-display);font-weight:400;line-height:1.08;margin:0}
h3{font-family:var(--f-body);font-weight:500;line-height:1.15;margin:0}
p{margin:0 0 1em}
[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;background:var(--green-dk);color:var(--white);padding:12px 16px;z-index:100;font-family:var(--f-label)}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.label{font-family:var(--f-label);font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--green-dk)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grounds: ivory shelves, linen-lined; alternate shelf; heritage green bands */
.room{position:relative;background:var(--ivory)}
.room.alt{background:var(--ivory-2)}
.room.lined{background:
  repeating-linear-gradient(0deg, rgba(85,114,103,.045) 0 1px, transparent 1px 7px),
  repeating-linear-gradient(90deg, rgba(85,114,103,.035) 0 1px, transparent 1px 9px),
  var(--ivory)}
.green-band{background:var(--green-dk);color:var(--on-green)}
.green-band .label{color:var(--on-green)}
.green-band a{color:var(--on-green)}
.green-band a:hover{color:var(--white)}
.sage-band{background:var(--sage)}

/* paper things: white cards on ivory, explicit colours so they read on any ground */
.paper{background:var(--white);color:var(--ink);box-shadow:var(--shadow)}
.paper .label{color:var(--green-dk)}
.paper a{color:var(--green-dk)}
.paper a:hover{color:var(--burgundy)}
.paper a.btn,.paper a.btn:hover,.ltag a.btn,.ltag a.btn:hover{color:var(--white)}
.paper a.btn.ghost{color:var(--ink)}
.paper a.btn.ghost:hover{color:var(--white)}

.concept{position:fixed;right:0;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;z-index:60;background:var(--green-dk);color:var(--white);font-family:var(--f-label);font-size:.75rem;letter-spacing:.06em;padding:10px 3px;border-radius:4px 0 0 4px;margin:0}

/* buttons: the live green does the work */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--green);color:var(--white);text-decoration:none;font-family:var(--f-label);font-weight:500;font-size:1.0625rem;letter-spacing:.02em;border:2px solid var(--green);cursor:pointer}
.btn:hover{background:var(--green-dk);border-color:var(--green-dk);color:var(--white)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(67,92,83,.55)}
.btn.ghost:hover{background:var(--green-dk);color:var(--white);border-color:var(--green-dk)}
.btn.brass{background:linear-gradient(180deg,var(--brass-lt),var(--brass));border-color:var(--brass);color:var(--ink)}
.btn.brass:hover{background:var(--gold-text);color:var(--ink)}
.btn.line{background:transparent;color:var(--cream);border-color:rgba(244,235,220,.55)}
.btn.line:hover{background:var(--cream);color:var(--ink)}
.btn.onGreen{background:var(--ivory);color:var(--green-dk);border-color:var(--ivory)}
.btn.onGreen:hover{background:var(--white);color:var(--ink)}

/* header */
.top{background:var(--ivory);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand svg{width:68px;height:auto;flex:none}
.brand b{font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1;white-space:nowrap}
.brand small{display:block;font-family:var(--f-label);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
.nav{display:flex;align-items:center;gap:4px;font-family:var(--f-label);font-size:1rem}
.nav a{color:var(--ink);text-decoration:none;padding:12px 10px;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{text-decoration:underline;color:var(--green-dk)}
.nav a.btn{margin-left:8px;padding:10px 18px;color:var(--white);white-space:nowrap}
.nav a.btn:hover{color:var(--white);text-decoration:none}

/* ================= HERO: the lid on an ivory shelf, the open tin on the walnut table ================= */
.scene{padding:clamp(20px, 3vw, 44px) 0 clamp(56px, 7vw, 96px)}
.scene .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px, 3.4vw, 56px);align-items:center}
/* the lid, lifted off: the live green, brass beading, the label inside */
.lid{position:relative;border-radius:28px;padding:clamp(16px, 2vw, 26px);background:radial-gradient(120% 90% at 30% 15%,#6D8B7F 0%,#557267 55%,#4A6559 100%);box-shadow:0 30px 50px -30px rgba(46,46,46,.6),inset 0 0 0 7px #4C675C,inset 0 0 0 9px var(--brass);transform:rotate(-1.5deg)}
.lid::before{content:"";position:absolute;inset:16px;border-radius:18px;border:2px dotted rgba(227,201,139,.85);pointer-events:none}
.lid-card{position:relative;transform:rotate(1.5deg);padding:clamp(24px, 3vw, 40px);border-radius:3px;background:var(--ivory)}
.lid-card h1{font-size:clamp(2rem, 1.15rem + 1.9vw, 3rem);margin:12px 0 18px;text-wrap:balance;color:var(--ink)}
.lid-card .lede{font-size:clamp(1.0625rem, .95rem + .35vw, 1.25rem);margin-bottom:14px}
.not{font-size:1rem;color:var(--ink-soft);border-left:3px solid var(--blush-dk);padding-left:12px;margin-bottom:18px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}
.price-line{font-family:var(--f-label);font-size:1rem;color:var(--ink-soft);margin:0}
.price-line strong{color:var(--ink);font-weight:600}
.lid-mark{position:absolute;right:-20px;top:-28px;width:120px;transform:rotate(7deg);filter:drop-shadow(0 10px 12px rgba(46,46,46,.35))}

/* the walnut table: the only dark wood, under the keepsakes */
.wood{position:relative;color:var(--cream);border-radius:18px;background:
  radial-gradient(ellipse 70% 60% at 55% 30%, rgba(255,186,104,.16), rgba(255,186,104,0) 70%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 3px, rgba(0,0,0,0) 3px 11px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, rgba(0,0,0,0) 1px 37px),
  var(--wood);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 30px 50px -30px rgba(46,46,46,.55)}
.wood a{color:var(--gold-text)}
.table{padding:clamp(18px, 2.4vw, 34px)}
.table-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 2px 16px;font-family:var(--f-label);font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.table-top span:last-child{letter-spacing:.04em;text-transform:none;font-size:.9375rem;color:var(--cream-2)}

/* the open tin, lacquered in the live green */
.tin-wrap{position:relative}
.tin-open{position:relative;border-radius:24px;padding:20px;background:linear-gradient(150deg,#D7B46D,#A27C3A 45%,#C9A55C);box-shadow:var(--shadow-wood)}
.tin-open::before{content:"";position:absolute;inset:8px;border-radius:18px;border:1px solid rgba(255,240,210,.5);pointer-events:none}
.tin-inside{position:relative;border-radius:14px;background:radial-gradient(90% 80% at 40% 30%,#6D8B7F,#557267 60%,#435C53);aspect-ratio:1.4/1;box-shadow:inset 0 12px 30px rgba(0,0,0,.4);overflow:hidden}
.tin-inside::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px);pointer-events:none}
.objects{list-style:none;margin:0;padding:0}
.obj{position:absolute;background:none;border:0;padding:0;cursor:pointer;transform:rotate(var(--r,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s;filter:drop-shadow(0 12px 10px rgba(0,0,0,.42))}
.obj svg{width:100%;height:auto;display:block}
.obj:hover{transform:translateY(-8px) rotate(var(--r,0deg)) scale(1.04)}
.obj:focus-visible{outline:3px solid var(--gold-text);outline-offset:6px}
.obj .tag{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,100%);font-family:var(--f-label);font-size:.875rem;white-space:nowrap;background:var(--ivory);color:var(--ink);padding:3px 8px;border-radius:3px;opacity:0;transition:opacity .2s;pointer-events:none}
.obj:hover .tag,.obj:focus-visible .tag{opacity:1}
.obj.is-out{opacity:.16;transform:rotate(var(--r,0deg)) scale(.95);filter:grayscale(1)}
.o1{left:4%;top:6%;width:30%;--r:-4deg}
.o2{left:39%;top:4%;width:21%;--r:3deg}
.o3{left:64%;top:6%;width:32%;--r:-2deg}
.o4{left:6%;top:50%;width:26%;--r:5deg}
.o5{left:36%;top:50%;width:31%;--r:-3deg}
.o6{left:70%;top:56%;width:26%;--r:6deg}
.tin-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-family:var(--f-label);font-size:.9375rem;color:var(--cream-2);margin:18px 4px 0}
.tin-cap strong{color:var(--cream);font-weight:500}

/* the lifted object: a card held over the tin, turns over */
.tray{display:none;position:absolute;left:6%;right:6%;top:-10px;z-index:5}
.tray.has{display:block}
.tray-card{perspective:1400px}
.tray-inner{position:relative;min-height:360px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.tray-card.turned .tray-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;padding:26px 28px;background:var(--ivory);color:var(--ink);box-shadow:0 50px 60px -24px rgba(0,0,0,.8);display:flex;flex-direction:column}
.face.back{transform:rotateY(180deg)}
.face.front{align-items:center;justify-content:center;text-align:center;gap:12px}
.face.front .fig{width:62%;max-width:240px;max-height:200px;filter:drop-shadow(0 12px 14px rgba(46,46,46,.3))}
.face .label{color:var(--green-dk)}
.accession{font-family:var(--f-label);font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy);display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:14px;align-self:stretch}
.face h3{font-family:var(--f-display);font-weight:400;font-size:1.625rem}
.face .q{font-family:var(--f-display);font-size:1.4rem;line-height:1.25;margin:4px 0 16px}
.face .becomes{font-size:1.125rem;font-style:italic;border-left:3px solid var(--blush-dk);padding-left:14px;margin:4px 0 12px}
.face .small{font-family:var(--f-label);font-size:.875rem;color:var(--ink-soft);margin-top:auto;margin-bottom:0}
.tray-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px auto 0;justify-content:center;width:fit-content;max-width:100%;background:rgba(30,19,13,.95);padding:8px;border-radius:30px;box-shadow:0 10px 20px rgba(0,0,0,.45)}
.tray-actions .btn{min-height:44px;padding:8px 16px;font-size:.9375rem}
.aslist{margin-top:14px}
.aslist summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-family:var(--f-label);color:var(--gold-text);font-size:.9375rem;letter-spacing:.12em;text-transform:uppercase}
.objlist{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.objlist li{background:var(--ivory);color:var(--ink);padding:18px;border-radius:4px}
.objlist .label{color:var(--green-dk)}
.objlist .q{font-family:var(--f-display);font-size:1.2rem;line-height:1.25;margin:6px 0 8px}
.objlist h3{font-size:1.3rem}

/* ================= the story inside: a typed sheet on the ivory shelf ================= */
.story{padding:clamp(56px, 7vw, 100px) 0 clamp(72px, 9vw, 130px)}
.sheet-wrap{position:relative;max-width:900px;margin:0 auto}
.slip{position:relative;z-index:2;max-width:560px;margin:0 0 -26px -24px;padding:22px 26px;background:var(--blush);color:var(--ink);transform:rotate(-1.6deg);box-shadow:0 18px 28px -18px rgba(46,46,46,.45)}
.slip p{font-family:var(--f-display);font-size:clamp(1.2rem, .9rem + .9vw, 1.6rem);line-height:1.25;margin:0 0 8px}
.slip cite{font-style:normal;font-family:var(--f-label);font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy-dk)}
.sheet{padding:clamp(56px, 6vw, 84px) clamp(24px, 6vw, 88px) clamp(36px, 5vw, 64px);position:relative}
.sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--green)}
.sheet h2{font-size:clamp(1.9rem, 1.1rem + 2vw, 2.9rem);margin:10px 0 12px}
.sheet .intro{max-width:36em;color:var(--ink-soft)}
.passage{font-family:var(--f-body);font-size:clamp(1.25rem, 1rem + .9vw, 1.7rem);line-height:1.58;margin:26px 0 0}
.passage::first-letter{font-family:var(--f-display);float:left;font-size:4.2em;line-height:.82;padding:6px 10px 0 0;color:var(--green)}
.ph{transition:filter .6s ease,background-color .9s ease;border-radius:2px}
.js .ph.unset{filter:blur(5px);user-select:none}
.ph.just{background-color:var(--sage)}
.sheet-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;border-top:1px solid var(--rule);margin-top:26px;padding-top:16px}
.progress{font-family:var(--f-label);font-size:.9375rem;color:var(--ink-soft);margin:0}
.sample-note{font-family:var(--f-label);font-size:.9375rem;color:var(--ink-soft);margin:0;flex:1 1 280px}

/* centred heads */
.head{text-align:center;max-width:46rem;margin:0 auto clamp(36px, 5vw, 64px)}
.head h2{font-size:clamp(2.1rem, 1.1rem + 3vw, 3.6rem);margin:12px 0 14px;text-wrap:balance}
.head p{color:var(--ink-soft);margin:0 auto;max-width:36em}
.green-band .head p{color:var(--on-green)}
.plate{display:inline-block;background:linear-gradient(180deg,var(--brass-lt),var(--brass));color:var(--ink);font-family:var(--f-label);font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:8px 18px 7px;border-radius:4px;box-shadow:0 2px 0 rgba(142,107,46,.55),inset 0 1px 0 rgba(255,255,255,.4)}

/* ================= how it works: three things come out of the box, on the green ================= */
.out{padding:clamp(72px, 9vw, 130px) 0}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px, 3vw, 48px);position:relative;list-style:none;margin:0;padding:0}
.three::before{content:"";position:absolute;left:12%;right:12%;top:120px;border-top:2px dashed rgba(227,201,139,.6)}
.thing{position:relative;display:flex;flex-direction:column;align-items:center}
.thing .obj-art{height:240px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.thing .obj-art svg{height:100%;width:auto;filter:drop-shadow(0 20px 16px rgba(0,0,0,.35))}
.card{position:relative;padding:22px 24px 24px;margin-top:22px;align-self:stretch;border-radius:2px}
.card .n{font-family:var(--f-label);font-size:.875rem;letter-spacing:.16em;color:var(--burgundy);text-transform:uppercase;display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:8px;margin:0 0 10px}
.card h3{font-family:var(--f-display);font-weight:400;font-size:1.625rem;margin:0 0 8px}
.card p{margin:0}
.card .key{display:inline-block;margin-top:12px;font-family:var(--f-label);font-size:.9375rem;color:var(--ink);background:var(--sage);padding:3px 10px;border-radius:2px}
.thing:nth-child(1) .card{transform:rotate(-1deg)}
.thing:nth-child(3) .card{transform:rotate(1deg)}
.more{text-align:center;margin-top:36px;font-family:var(--f-label)}

/* ================= which of these is you: a painted cabinet ================= */
.cab-sec{padding:clamp(72px, 9vw, 130px) 0}
.cabinet{background:linear-gradient(180deg,#5C7A6E,#4E6A5E);padding:0 18px 18px;border-radius:10px;box-shadow:0 40px 60px -40px rgba(46,46,46,.6),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(0,0,0,.05)}
.cab-top{text-align:center;padding:36px 20px 30px;color:var(--on-green)}
.cab-top h2{font-size:clamp(2rem, 1.1rem + 2.6vw, 3.4rem);color:var(--white);margin:16px 0 8px}
.cab-top p{color:var(--on-green);margin:0 auto;max-width:34em}
.drawers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.drawer{background:var(--ivory);color:var(--ink);border-radius:4px;padding:0 24px 24px;display:flex;flex-direction:column;box-shadow:inset 0 -5px 0 rgba(67,92,83,.16)}
.drawer a{color:var(--green-dk)}
.drawer .plate{align-self:center;margin:-1px 0 18px;border-radius:0 0 6px 6px}
.drawer h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem;margin:0 0 10px}
.drawer ul{padding:0;margin:0 0 18px;list-style:none}
.drawer li{padding:8px 0;border-top:1px dotted rgba(67,92,83,.4);font-size:1.0625rem}
.drawer .go{margin-top:auto;font-family:var(--f-label);font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.drawers-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.drawers-wide .drawer{flex-direction:row;align-items:center;gap:20px;padding:18px 24px}
.drawers-wide .drawer .plate{margin:0;border-radius:4px;flex:none}
.drawers-wide .drawer p{margin:0}

/* ================= what you end up with, and the price tags ================= */
.keep{padding:clamp(72px, 9vw, 130px) 0}
.keep-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px, 5vw, 80px);align-items:center}
.book-hold{position:relative;max-width:420px;margin:0 auto;width:100%}
.book-hold svg.bk{width:100%;filter:drop-shadow(0 30px 26px rgba(46,46,46,.38))}
.keep-sheet{padding:clamp(28px, 4vw, 48px);transform:rotate(.6deg)}
.keep-sheet h2{font-size:clamp(2rem, 1.1rem + 2.4vw, 3.2rem);margin:10px 0 14px}
/* luggage tags: kraft-edged white card */
.ltag{position:relative;background:var(--white);color:var(--ink);padding:18px 22px 18px 44px;clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px),0 18px);filter:drop-shadow(0 12px 12px rgba(46,46,46,.25))}
.ltag::before{content:"";position:absolute;left:16px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--ivory-2);box-shadow:0 0 0 3px var(--brass)}
.ltag .t{font-family:var(--f-label);font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block}
.ltag .p{font-family:var(--f-display);font-size:1.75rem;line-height:1.1;display:block;margin:4px 0;color:var(--green-dk)}
.ltag .d{font-size:1rem;color:var(--ink-soft);display:block;line-height:1.45}
.ltag a{color:var(--green-dk)}
.ltag .soon{display:inline-block;margin-left:6px;font-family:var(--f-label);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--burgundy);color:var(--burgundy);padding:1px 6px;border-radius:2px;vertical-align:middle}
.ltag.main{position:absolute;right:-16%;bottom:2%;width:270px;transform:rotate(-7deg)}
.ltag.main .p{font-size:2.5rem}
.rail-wrap{margin-top:clamp(56px, 7vw, 96px)}
.rail{height:10px;border-radius:5px;background:linear-gradient(180deg,var(--brass-lt),var(--brass-dk));box-shadow:0 6px 10px rgba(46,46,46,.25)}
.tags{list-style:none;margin:0;padding:0 2%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:start}
.tags li{position:relative;padding-top:var(--drop,40px)}
.tags li::before{content:"";position:absolute;left:50%;top:0;height:var(--drop,40px);border-left:2px solid var(--kraft)}
.tags li:nth-child(1){--drop:34px}.tags li:nth-child(2){--drop:56px}.tags li:nth-child(3){--drop:28px}.tags li:nth-child(4){--drop:48px}
.tags .ltag{clip-path:polygon(0 18px,18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);padding:40px 20px 20px;text-align:center}
.tags .ltag::before{left:50%;top:14px;margin:0 0 0 -7px}
.tags li:nth-child(odd) .ltag{transform:rotate(-1.5deg)}
.tags li:nth-child(even) .ltag{transform:rotate(1.5deg)}

/* ================= Amanda, with her own tools ================= */
.amanda{padding:clamp(72px, 9vw, 130px) 0}
.amanda-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px, 5vw, 72px);align-items:center}
.desk{position:relative;aspect-ratio:1/1.12;max-width:600px;width:100%;margin:0 auto}
.desk::before{content:"";position:absolute;inset:6% -2% 2% 4%;background:var(--sage);border-radius:6px;transform:rotate(1.5deg)}
.desk .print{position:absolute;left:8%;top:0;width:68%;background:var(--white);padding:12px 12px 44px;transform:rotate(-3deg);box-shadow:var(--shadow);z-index:2}
.desk .print img{aspect-ratio:4/5;object-fit:cover;width:100%}
.desk .print figcaption{position:absolute;left:14px;right:14px;bottom:12px;font-family:var(--f-label);font-size:.875rem;color:var(--ink-soft)}
.desk .tool{position:absolute;filter:drop-shadow(0 14px 12px rgba(46,46,46,.35))}
.desk .t-pad{right:0;top:30%;width:30%;transform:rotate(7deg)}
.desk .t-rec{left:0;bottom:0;width:42%;transform:rotate(-5deg);z-index:3}
.desk .t-pencil{right:4%;bottom:12%;width:46%;transform:rotate(-24deg);z-index:3}
.desk .t-lbl{position:absolute;z-index:4;background:var(--white);color:var(--ink);font-family:var(--f-label);font-size:.875rem;padding:6px 10px;box-shadow:0 8px 12px rgba(46,46,46,.2)}
.desk .l1{right:2%;top:25%;transform:rotate(3deg)}
.desk .l2{left:44%;bottom:0;transform:rotate(-2deg)}
.am-sheet{padding:clamp(28px, 4vw, 48px)}
.am-sheet h2{font-size:clamp(1.9rem, 1.1rem + 2vw, 2.9rem);margin:10px 0 14px}
.ledger{list-style:none;padding:0;margin:18px 0 22px;border-top:2px solid var(--green)}
.ledger li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:1.0625rem}
.ledger span{font-family:var(--f-label);font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--burgundy);padding-top:3px}

/* ================= close: the lid goes back on, on the walnut shelf ================= */
.close{padding:clamp(72px, 9vw, 130px) 0}
.close-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px, 5vw, 80px);align-items:center}
.shelf{padding:clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px) clamp(22px, 3vw, 34px)}
.shelf .shelf-note{font-family:var(--f-label);font-size:.9375rem;color:var(--cream-2);text-align:center;margin:18px 0 0}
.closed-tin{position:relative;max-width:480px;width:100%;margin:0 auto;aspect-ratio:1.3/1}
.closed-tin .body{position:absolute;inset:16% 2% 0 2%;border-radius:24px;background:linear-gradient(170deg,#557267,#3D554C);box-shadow:var(--shadow-wood)}
.closed-tin .body::after{content:"";position:absolute;inset:auto 14px 18px 14px;height:2px;background:rgba(201,165,92,.7)}
.closed-tin .lidtop{position:absolute;inset:0 0 18% 0;border-radius:26px;background:radial-gradient(120% 90% at 30% 15%,#7A988B 0%,#5C7A6E 55%,#4C675C 100%);box-shadow:0 24px 30px -14px rgba(0,0,0,.7),inset 0 0 0 8px #4E6A5E,inset 0 0 0 10px var(--brass);display:grid;place-items:center;transition:transform 1.1s cubic-bezier(.2,.75,.25,1)}
.closed-tin .lidtop::before{content:"";position:absolute;inset:22px;border-radius:16px;border:2px dotted rgba(227,201,139,.85)}
.closed-tin .lidtop svg{width:58%}
.js .closed-tin.rv:not(.in) .lidtop{transform:translate(-14%,-22%) rotate(-12deg)}
.close-card{padding:clamp(28px, 4vw, 48px);transform:rotate(-.6deg)}
.close-card h2{font-size:clamp(2.2rem, 1.2rem + 3vw, 3.6rem);margin:10px 0 14px}
.close-card .wa{font-family:var(--f-label);font-size:1rem;color:var(--ink-soft);margin:12px 0 0}

/* footer: the darker live green */
.foot{background:var(--green-dk);color:var(--on-green);padding:56px 0 64px;font-size:1rem}
.foot .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
.foot .fmark{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-family:var(--f-display);font-size:1.5rem;color:var(--white)}
.foot .fmark svg{width:56px;flex:none}
.foot h2{font-family:var(--f-label);font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin:0 0 10px;font-weight:600}
.foot ul{list-style:none;padding:0;margin:0}
.foot a{color:var(--on-green);text-decoration:none;display:inline-block;padding:6px 0;min-height:32px}
.foot a:hover{text-decoration:underline;color:var(--white)}
.foot .legal{grid-column:1/-1;border-top:1px solid rgba(238,244,231,.25);padding-top:18px;font-size:.9375rem}

/* ================= INNER: the Life Story ================= */
.crumbs{font-family:var(--f-label);font-size:.9375rem;padding-top:8px}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap;color:var(--ink-soft)}
.crumbs li+li::before{content:"/";margin-right:8px}
.ls-scene .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.price-hang{position:relative;padding-top:70px;max-width:380px;margin:0 auto;width:100%}
.price-hang::before{content:"";position:absolute;left:50%;top:0;height:80px;border-left:2px solid var(--kraft)}
.price-hang .hook{position:absolute;left:calc(50% - 14px);top:-10px;width:28px;height:14px;border-radius:14px 14px 0 0;border:3px solid var(--brass);border-bottom:0}
.price-hang .ltag{clip-path:polygon(0 22px,22px 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);padding:48px 28px 28px;transform:rotate(2deg)}
.price-hang .ltag::before{left:50%;top:18px;margin:0 0 0 -7px}
.price-hang .ltag .p{font-size:clamp(2.8rem, 2rem + 2vw, 3.8rem);margin:6px 0 10px}
.price-hang .ltag p{font-size:1.0625rem;margin:0 0 12px}
.price-hang .btn{width:100%;margin-top:6px}
.price-hang .alt{display:block;text-align:center;font-family:var(--f-label);min-height:44px;line-height:44px}
.starts{padding:clamp(72px, 9vw, 130px) 0}
.tray-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;list-style:none;padding:24px;margin:0;background:linear-gradient(150deg,#D7B46D,#A27C3A 45%,#C9A55C);border-radius:22px;box-shadow:var(--shadow-wood)}
.tray-row li{background:radial-gradient(90% 80% at 40% 30%,#6D8B7F,#557267 60%,#435C53);border-radius:12px;padding:22px 16px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.tray-row svg,.tray-row img{width:100%;max-width:150px;height:110px;filter:drop-shadow(0 10px 8px rgba(0,0,0,.4))}
.tray-row img{object-fit:cover;border:6px solid var(--ivory);filter:none;box-shadow:0 10px 14px rgba(0,0,0,.35)}
.tray-row .label{color:var(--white)}
.tray-row p{margin:0;font-size:1.0625rem;color:var(--white);line-height:1.35}
.under{font-family:var(--f-label);font-size:.9375rem;color:var(--ink-soft);text-align:center;margin:20px 0 0}
.lidin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px, 3vw, 40px);align-items:start}
.lid.inv{transform:rotate(-1deg);padding:clamp(34px, 4vw, 52px);color:var(--white)}
.lid.inv .label{color:var(--white)}
.inv h3{font-family:var(--f-display);font-weight:400;font-size:1.75rem;margin:8px 0 6px}
.inv ul{list-style:none;padding:0;margin:14px 0 0}
.inv li{padding:12px 0 12px 32px;border-top:1px solid rgba(255,255,255,.28);position:relative}
.inv li::before{content:"";position:absolute;left:4px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--brass-lt)}
.decide{padding:clamp(28px, 4vw, 48px);transform:rotate(1deg)}
.decide h3{font-family:var(--f-display);font-weight:400;font-size:1.75rem;margin:8px 0 6px}
.decide ul{list-style:none;padding:0;margin:14px 0 0}
.decide li{padding:12px 0 12px 32px;border-top:1px solid var(--rule);position:relative}
.decide li::before{content:"";position:absolute;left:4px;top:20px;width:12px;height:12px;border-radius:50%;border:2px solid var(--burgundy)}
.index-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:0;margin:0}
.index-cards a{display:block;padding:24px 24px 22px;background:var(--white);color:var(--ink);text-decoration:none;border-top:28px solid var(--sage);box-shadow:var(--shadow);min-height:44px}
.index-cards li:nth-child(1) a{transform:rotate(-1.2deg)}.index-cards li:nth-child(3) a{transform:rotate(1.2deg)}
.index-cards a:hover{border-top-color:var(--blush)}
.index-cards b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.375rem;margin-bottom:6px}
.index-cards span{color:var(--ink-soft);font-size:1.0625rem}

/* reveal: visible by default, enhanced only with JS */
.js .rv{transition:opacity .7s ease,transform .7s ease}
.js .fade.rv:not(.in){opacity:0;transform:translateY(18px)}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .nav a:not(.btn){display:none}
  .scene .wrap,.ls-scene .wrap,.keep-grid,.amanda-grid,.close-grid,.lidin{grid-template-columns:1fr}
  .scene .wrap{gap:40px}
  .table{max-width:760px;margin:0 auto;width:100%}
  .tray-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ltag.main{right:-4%}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
/* ---------- phone: rewritten, not squeezed ---------- */
@media (max-width:720px){
  body{font-size:1.125rem}
  .top .wrap{min-height:64px;gap:10px}
  .brand{gap:10px}
  .brand svg{width:46px}
  .brand b{font-size:1.125rem}
  .brand small{display:none}
  .nav a.btn{padding:8px 14px;font-size:.9375rem;margin:0;min-height:44px}
  .scene{padding-top:14px}
  .scene .wrap{display:flex;flex-direction:column;gap:22px}
  .scene .table{order:1;padding:12px 12px 4px;border-radius:14px}
  .scene .lid{order:2}
  .table-top{display:none}
  .scene .lid-card{display:flex;flex-direction:column}
  .scene .lid-card .label{display:none}
  .scene .lid-card h1{font-size:1.9rem;margin-top:0}
  .scene .lid-card .lede-more{display:none}
  .scene .lid-card .price-line{order:4}
  .tin-open{padding:9px;border-radius:16px}
  .tin-open::before{inset:4px;border-radius:13px}
  .tin-inside{aspect-ratio:1.4/1}
  .lid{transform:none;padding:10px;border-radius:20px}
  .lid::before{inset:6px;border-radius:15px}
  .lid-card{transform:none;padding:22px 20px}
  .lid-mark{width:76px;right:-6px;top:-24px}
  .cta-row .btn{width:100%}
  .tray{position:relative;left:auto;right:auto;top:auto;margin-top:-30px}
  .tray-inner{min-height:450px}
  .face{padding:20px}
  .tin-cap{flex-direction:column;margin:12px 4px 0}
  .slip{margin:0 0 -20px -6px}
  .three{grid-template-columns:1fr;gap:40px}
  .three::before{display:none}
  .thing .obj-art{height:170px}
  .drawers,.drawers-wide{grid-template-columns:1fr}
  .drawers-wide .drawer{flex-direction:column;align-items:flex-start}
  .cabinet{padding:0 10px 10px}
  .ltag.main{position:relative;right:auto;bottom:auto;width:auto;margin:-40px 6% 0;transform:rotate(-3deg)}
  .tags{grid-template-columns:1fr;padding:0 6%}
  .tags li:nth-child(n){--drop:30px}
  .ledger li{grid-template-columns:1fr;gap:2px}
  .desk{aspect-ratio:1/1.1}
  .tray-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:10px}
  .tray-row li:last-child{grid-column:1/-1}
  .index-cards{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr}
  .passage::first-letter{font-size:3.4em}
  .keep-sheet,.close-card,.decide{transform:none}
  .lid.inv{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js .fade.rv:not(.in){opacity:1;transform:none}
  .js .closed-tin.rv:not(.in) .lidtop{transform:none}
  .js .ph.unset{filter:none}
}
.ls-scene .wrap{grid-template-rows:none}
@media (max-width:720px){.ls-scene .price-hang{order:3}}

/* Amanda, named and pictured on the first screen */
.byline{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-family:var(--f-label);font-size:.9375rem;line-height:1.45;color:var(--ink-soft)}
.byline img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;border:3px solid var(--white);box-shadow:0 0 0 2px var(--sage-dk)}
.byline b{color:var(--ink);font-weight:600}
@media (max-width:720px){.byline{font-size:.875rem;gap:12px}.byline img{width:48px;height:48px}}

/* round-two fixes after the first screenshots */
/* the closing tin sits on a single walnut shelf, not a dark panel */
.shelf{position:relative;padding:0 0 34px}
.shelf::after{content:"";position:absolute;left:-4%;right:-4%;bottom:0;height:30px;border-radius:4px;background:
  linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,0) 40%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 3px,rgba(0,0,0,0) 3px 13px),var(--wood);
  box-shadow:0 18px 24px -14px rgba(46,46,46,.55)}
.shelf .closed-tin{z-index:1}
.shelf .shelf-note{position:absolute;left:0;right:0;bottom:4px;z-index:2;margin:0;color:var(--cream);font-size:.875rem}
/* Amanda's caption clear of the recorder */
.desk .print figcaption{text-align:right}
.desk .t-rec{left:-2%;bottom:-3%;width:36%}
@media (max-width:720px){
  .tin-cap .lamp-note{display:none}
  .tin-cap{font-size:.875rem;margin-top:10px}
  .aslist{margin-top:2px}
  .scene .lid-card{padding:20px 18px}
  .scene .lid-card h1{font-size:1.8rem;margin-bottom:12px}
  .scene .lid-card .lede{font-size:1.0625rem;line-height:1.5;margin-bottom:12px}
  .byline{margin-bottom:12px}
  .not{font-size:.9375rem;margin-bottom:14px;line-height:1.45}
  .scene .cta-row{gap:8px}
  .scene .cta-row .btn{min-height:48px}
  .desk .print figcaption{font-size:.8125rem}
}
/* phone: the label and the next step first, the open tin straight after, already in view */
@media (max-width:720px){
  .scene .lid{order:1}
  .scene .table{order:2}
  .scene .wrap{gap:18px}
  .lid-mark{top:-18px}
}
.desk .t-pencil{bottom:4%;right:0;width:40%}
@media (max-width:720px){.desk .t-pencil{bottom:2%;right:-2%;width:38%}.desk .l2{left:40%;bottom:-4%}}
.shelf{padding-bottom:0}
.shelf::after{display:none}
.shelf .closed-tin::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-30px;height:30px;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,0) 40%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 3px,rgba(0,0,0,0) 3px 13px),var(--wood);box-shadow:0 18px 24px -14px rgba(46,46,46,.55);z-index:-1}
.shelf .closed-tin{margin-bottom:30px}
.shelf .shelf-note{position:static;margin:14px 0 0;color:var(--ink-soft);font-size:.9375rem}
@media (max-width:720px){.shelf .closed-tin::after{left:-2%;right:-2%}}
.tin-wrap:has(.tray.has) + .tin-extra .tin-cap{visibility:hidden}