@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT@9..144,500,30;9..144,600,30&display=swap');
:root{color-scheme:light;--ink:#173a3a;--deep:#102a2b;--paper:#fffaf0;--gold:#e9c77b;--line:#d7d9c9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 'DM Sans',system-ui,sans-serif}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.12}h1,h2{font-family:'Fraunces',Georgia,serif;font-weight:500}a{color:inherit}.site-header{height:76px;padding:0 clamp(20px,4.5vw,80px);display:flex;align-items:center;justify-content:space-between;background:var(--paper);gap:20px}.wordmark,.footer-brand{font-weight:700;letter-spacing:.15em;text-decoration:none;font-size:1.15rem}.wordmark-star{color:#b97a38;padding-left:8px}.site-header nav{display:flex;gap:clamp(12px,2.5vw,38px);align-items:center}.site-header nav a{text-decoration:none;font-size:.91rem;font-weight:600}.site-header nav a:hover,.site-header nav a:focus-visible{text-decoration:underline;text-underline-offset:5px}.hero{position:relative;min-height:min(720px,77vh);display:flex;align-items:center;overflow:hidden;background:#294d58;color:white}.hero-image{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(9,38,43,.77) 0%,rgba(9,38,43,.48) 41%,rgba(9,38,43,.04) 72%),url('assets/fjord-welcome.png');background-size:cover;background-position:center}.hero-overlay{position:relative;padding:80px clamp(24px,8vw,140px);max-width:760px}.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.19em;font-size:.78rem}.hero .eyebrow{color:#fae7bd}.hero h1{font-size:clamp(3.4rem,8vw,7rem);letter-spacing:-.04em;margin-bottom:28px}.hero h1 em{font-style:normal;color:#f3d48d}.hero-overlay>p:not(.eyebrow){max-width:480px;font-size:clamp(1.1rem,1.8vw,1.32rem);line-height:1.55}.hero-link{display:inline-flex;gap:38px;align-items:center;margin-top:25px;padding:13px 18px;background:#f1d38e;color:var(--deep);font-weight:700;text-decoration:none;border-radius:4px}.hero-link:hover{background:#fff0ba}.section-wrap{max-width:1320px;margin:auto;padding-left:clamp(22px,5vw,76px);padding-right:clamp(22px,5vw,76px)}.intro{padding-top:112px;padding-bottom:105px;max-width:1040px;text-align:center}.intro h2{font-size:clamp(2.4rem,5vw,4.3rem);max-width:850px;margin:0 auto 28px}.intro>p:last-child{max-width:660px;margin:auto;font-size:1.13rem}.characters{padding-bottom:115px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}.section-heading h2,.collection h2,.about h2{font-size:clamp(2.5rem,5vw,4.25rem);margin-bottom:0}.section-heading>p{margin-bottom:7px}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.character{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fffdf7}.character summary{list-style:none;cursor:pointer}.character summary::-webkit-details-marker{display:none}.portrait{display:block;position:relative;aspect-ratio: .84;overflow:hidden;background:#f4eee3}.portrait img{position:absolute;top:-4%;left:-3%;width:300%;max-width:none;height:auto}.card-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:17px 18px}.card-label strong{font-family:'Fraunces',Georgia,serif;font-size:1.55rem;line-height:1.1}.card-label span{font-size:.78rem;text-align:right;color:#5e7067}.character>p{padding:0 18px 20px;margin:0;font-size:.92rem}.character[open]{box-shadow:0 8px 28px #1b46321c;border-color:#a7b7a2}.character summary:focus-visible{outline:3px solid #ad7227;outline-offset:-3px}.collection{background:#173a3a;color:#f8f5e8;padding:104px 0 112px}.collection .eyebrow{color:#e9c77b}.collection h2{margin-bottom:45px}.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.collection article{border-top:1px solid #78918a;padding-top:18px}.collection-index{color:#e9c77b;font-size:.85rem}.collection h3{font-family:'Fraunces',Georgia,serif;font-size:1.65rem;font-weight:500;margin:26px 0 13px}.collection p{color:#e1e7df;margin-bottom:0}.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-top:120px;padding-bottom:125px}.about h2{max-width:530px}.about>div:last-child{font-size:1.15rem;align-self:center}.about>div:last-child p:last-child{margin-bottom:0}footer{background:#102a2b;color:#f8f5e8;padding:65px 0}.footer-content{display:flex;justify-content:space-between;gap:40px}.footer-content>div:last-child{max-width:390px}.footer-content h2{font-family:'Fraunces',Georgia,serif;font-size:1.7rem;margin-bottom:15px}.contact-note{font-size:.88rem;color:#c8d4c8}footer p{margin-top:15px;color:#dbe3db}
@media(max-width:900px){.character-grid,.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about{gap:35px}}@media(max-width:640px){.site-header{height:auto;min-height:72px;flex-wrap:wrap;padding:16px 18px}.wordmark{font-size:1rem}.site-header nav{width:100%;overflow:auto;gap:22px;white-space:nowrap;padding-bottom:3px}.site-header nav a{font-size:.82rem}.hero{min-height:650px;align-items:end}.hero-image{background-image:linear-gradient(0deg,rgba(9,38,43,.88),rgba(9,38,43,.08) 80%),url('assets/fjord-welcome.png');background-position:57% center}.hero-overlay{padding:32px 24px 65px}.hero h1{font-size:clamp(3.25rem,12vw,5rem)}.intro{padding-top:80px;padding-bottom:80px}.characters{padding-bottom:85px}.section-heading{display:block}.section-heading>p{margin-top:18px}.character-grid{gap:11px}.card-label{display:block;padding:12px}.card-label strong{display:block;font-size:1.35rem}.card-label span{display:block;text-align:left;font-size:.73rem;margin-top:5px}.character>p{padding:0 12px 14px;font-size:.85rem}.portrait{aspect-ratio:.75}.collection{padding:80px 0}.collection-grid{gap:32px 15px}.collection h3{font-size:1.4rem}.collection p{font-size:.9rem}.about{grid-template-columns:1fr;padding-top:85px;padding-bottom:90px}.footer-content{display:block}.footer-content>div:last-child{margin-top:40px}}@media(max-width:370px){.character-grid{grid-template-columns:1fr 1fr}.card-label strong{font-size:1.2rem}}

/* Supplied Trollmarka mark in the site header. */
.site-header{min-height:154px;height:auto}.wordmark{display:block;flex:0 0 auto;width:130px;line-height:0}.wordmark img{display:block;width:100%;height:auto;mix-blend-mode:multiply}.wordmark:focus-visible{outline:3px solid #ad7227;outline-offset:5px}@media(max-width:640px){.site-header{min-height:110px}.wordmark{width:100px}}

.contact-email{font-size:1.15rem;font-weight:700;text-decoration-thickness:1px;text-underline-offset:5px;overflow-wrap:anywhere}.contact-email:hover,.contact-email:focus-visible{color:#e9c77b}

/* Full-scene portraits: every card shows one character in its own quiet landscape. */
.hero-image{background-image:linear-gradient(90deg,rgba(9,38,43,.83) 0%,rgba(9,38,43,.56) 36%,rgba(9,38,43,0) 69%),url('assets/trollmarka-welcome-bjorn-tuva.webp');background-position:center}
.portrait{aspect-ratio:2/3;background:#e7ede9}
.portrait img{position:static;display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center}
.card-label{display:block;padding:17px 18px 14px}
.card-label strong{display:block}
.card-label span{display:block;text-align:left;font-size:.87rem;line-height:1.35;margin-top:7px;color:#536d62}
.character>p{font-size:1rem;line-height:1.6;padding:0 18px 22px}
@media(max-width:640px){.portrait{aspect-ratio:2/3}.card-label{padding:13px 12px}.card-label span{font-size:.8rem}.character>p{font-size:.93rem;padding:0 12px 17px}}
@media(max-width:640px){.hero{min-height:680px}.hero-image{background-image:linear-gradient(0deg,rgba(9,38,43,.93) 0%,rgba(9,38,43,.72) 23%,rgba(9,38,43,0) 60%),url('assets/trollmarka-welcome-bjorn-tuva.webp');background-position:75% center}.hero-overlay{padding-bottom:52px}.hero-overlay>p:not(.eyebrow){max-width:370px}}

/* Keep both welcome characters in view when the landscape image cannot fill the banner. */
@media(max-width:1200px){
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;background:#173a3a}
  .hero-image{position:relative;inset:auto;width:100%;aspect-ratio:1672 / 940;background-image:url('assets/trollmarka-welcome-bjorn-tuva.webp');background-size:100% 100%;background-position:center;background-repeat:no-repeat;flex:none}
  .hero-overlay{max-width:100%;padding:34px clamp(24px,6vw,80px) 48px;background:#173a3a}
  .hero h1{font-size:clamp(3.25rem,7vw,6rem);margin-bottom:20px}
  .hero-overlay>p:not(.eyebrow){max-width:620px}
}
@media(max-width:640px){
  .hero{min-height:0;align-items:stretch}
  .hero-image{background-image:url('assets/trollmarka-welcome-bjorn-tuva.webp');background-position:center}
  .hero-overlay{padding:32px 24px 50px}
  .hero h1{font-size:clamp(3.25rem,12vw,5rem)}
}

.language-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #c7d1bf;border-radius:999px;flex:none}
.language-switch a{min-width:42px;min-height:38px;display:grid;place-items:center;padding:0 8px;border-radius:999px;text-decoration:none;font-size:.83rem;font-weight:700;letter-spacing:.04em}
.language-switch a[aria-current="page"]{background:#173a3a;color:#fffaf0}
.language-switch a:not([aria-current="page"]):hover{background:#e9ebdf}
.language-switch a:focus-visible{outline:3px solid #ad7227;outline-offset:2px}
@media(max-width:900px){.site-header{gap:12px}.site-header nav{gap:clamp(9px,1.6vw,22px)}}
@media(max-width:640px){.site-header nav{width:auto;flex:1 1 100%;order:3}.site-header .language-switch{margin-left:auto}.site-header{column-gap:10px}}

.card-expand{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 18px 17px;padding-top:12px;border-top:1px solid #e4e6d9;color:#365d55;font-size:.85rem;font-weight:700;line-height:1.35}
.card-expand [aria-hidden]{font-size:1.35rem;line-height:1;transition:transform .2s ease}
.character[open] .card-expand [aria-hidden]{transform:rotate(180deg)}
@media(max-width:640px){.card-expand{margin:0 12px 14px;font-size:.79rem}}

.coloring-feature{display:grid;grid-template-columns:minmax(210px,.72fr) minmax(0,1.28fr);gap:clamp(28px,5vw,76px);align-items:center;margin-top:76px;padding-top:60px;border-top:1px solid #78918a}
.coloring-cover{max-width:340px;margin:auto;box-shadow:0 18px 38px rgba(3,20,25,.32)}
.coloring-cover img{display:block;width:100%;height:auto}
.coloring-details>.eyebrow{margin-bottom:14px}
.coloring-details h3{font-family:'Fraunces',Georgia,serif;font-size:clamp(2rem,3.6vw,3.2rem);font-weight:500;margin:0 0 18px}
.coloring-details>p:not(.eyebrow){max-width:590px;font-size:1.08rem;color:#e1e7df}
.coloring-inside{margin-top:30px}
.coloring-inside .inside-title{font-size:.95rem;font-weight:700;margin-bottom:12px;color:#f8f5e8}
.coloring-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;max-width:470px}
.coloring-pages a{display:block;background:white;padding:6px;box-shadow:0 5px 16px rgba(3,20,25,.22)}
.coloring-pages a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.coloring-pages img{display:block;width:100%;height:auto}
.coloring-inside .inside-note{font-size:.84rem;margin:12px 0 0;color:#d9e2db}
@media(max-width:640px){.coloring-feature{grid-template-columns:1fr;margin-top:55px;padding-top:48px;gap:36px}.coloring-cover{width:min(68vw,290px)}.coloring-pages{gap:12px}}

/* The book leads the collection; interior pages remain a smaller preview. */
.collection .coloring-feature{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:start;gap:clamp(32px,4vw,64px);margin-top:0;padding-top:0;border-top:0}
.collection .coloring-cover{width:100%;max-width:440px;margin:0;box-shadow:0 22px 42px rgba(3,20,25,.34)}
.collection .coloring-details{padding-top:4px}
.collection .coloring-pages{max-width:360px;gap:14px}
.collection .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:78px;padding-top:34px;border-top:1px solid #78918a}
@media(max-width:900px){.collection .coloring-feature{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:30px}}
@media(max-width:640px){.collection .coloring-feature{grid-template-columns:1fr;gap:34px}.collection .coloring-cover{width:min(82vw,390px);margin:0 auto}.collection .coloring-pages{max-width:390px}.collection .collection-grid{grid-template-columns:1fr;margin-top:58px;gap:24px}}

/* Eight notebooks: each flat wrap shows the front on its right side. */
.notebook-feature{margin-top:92px;padding-top:62px;border-top:1px solid #78918a}
.notebook-feature h3{font-size:clamp(2rem,3.6vw,3.2rem);margin:8px 0 16px}
.notebook-feature>p:not(.eyebrow){max-width:720px;font-size:1.08rem}
.notebook-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 18px;margin-top:36px}
.notebook-card{min-width:0}
.notebook-card summary{list-style:none;cursor:pointer}
.notebook-card summary::-webkit-details-marker{display:none}
.notebook-card summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
.notebook-front{position:relative;display:block;aspect-ratio:716/1134;overflow:hidden;background:#213a56;box-shadow:0 12px 25px #061a1b70}
.notebook-front img{position:absolute;display:block;width:214.5%;max-width:none;height:100%;left:-114.5%;top:0}
.notebook-name{display:flex;justify-content:space-between;align-items:center;font:500 1.55rem/1.2 'Fraunces',Georgia,serif;margin-top:17px}
.notebook-name span{font:400 1.45rem/1 'DM Sans',sans-serif;color:var(--gold)}
.notebook-card[open] .notebook-name span{transform:rotate(45deg)}
.notebook-action{display:block;margin-top:5px;color:#dce8df;font-size:.88rem}
.notebook-open{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:18px 0 10px;background:#fff;box-shadow:0 12px 25px #061a1b70}
.notebook-open>img{display:block;width:100%;height:auto;aspect-ratio:1025/1536;object-fit:contain;background:#fff}
.notebook-blank{position:relative;aspect-ratio:1025/1536;background:#fff;border-right:1px solid #ddd}
.notebook-blank:before{content:"";position:absolute;inset:9.5% 9% 8%;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(4.05% - 1px),#c5b8ad calc(4.05% - 1px),#c5b8ad 4.05%);opacity:.8}
.collection .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.notebook-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.notebook-feature{margin-top:64px;padding-top:48px}.notebook-grid{gap:26px 12px}.notebook-name{font-size:1.3rem;margin-top:12px}.notebook-action{font-size:.78rem}.notebook-open{margin-top:12px}.collection .collection-grid{grid-template-columns:1fr}}
.notebook-preview-link{grid-column:1/-1;display:block;background:#fff;color:#173a3a;text-align:center;padding:8px;font-size:.82rem;font-weight:700}
.notebook-preview{background:#102a2b;color:#f8f5e8;min-height:100vh}
.notebook-preview header{display:flex;align-items:center;gap:25px;padding:22px clamp(20px,5vw,70px)}
.notebook-preview header a{display:inline-block;background:#f1d38e;color:#102a2b;text-decoration:none;padding:10px 16px;border-radius:4px;font-weight:700}
.notebook-preview main{max-width:1060px;padding:10px 20px 60px;margin:auto}
.notebook-preview main>p{text-align:center;margin:0 0 24px}
.notebook-preview-spread{display:grid;grid-template-columns:1fr 1fr;max-width:900px;margin:auto;background:#fff;box-shadow:0 18px 42px #0005}
.notebook-preview-spread>img{display:block;width:100%;height:auto;aspect-ratio:1025/1536}
@media(max-width:640px){.notebook-preview header{flex-wrap:wrap;gap:10px}.notebook-preview main{padding:10px 8px 36px}.notebook-preview main>p{padding:0 12px}}

/* Compact notebook presentation with a narrow piece of the illustrated tree spine. */
.notebook-grid{gap:27px 16px;max-width:1080px}
.notebook-front{aspect-ratio:738/1128;border-left:1px solid #816f5a;box-shadow:5px 12px 23px #061a1b70}
.notebook-front img{width:208.1%;left:-108.1%;height:101.2%;top:-.6%;transform:scale(1.004);transform-origin:center}
.notebook-open{aspect-ratio:2.05/1.43;overflow:hidden}
.notebook-open>img{height:100%;object-fit:cover;object-position:top;aspect-ratio:auto}
.notebook-open .notebook-blank{height:100%;aspect-ratio:auto}
.notebook-open .notebook-blank:before{inset:9% 9% 3%}
.notebook-preview-spread{aspect-ratio:2.05/1.43;overflow:hidden}
.notebook-preview-spread>img{height:100%;object-fit:cover;object-position:top;aspect-ratio:auto}
.notebook-preview-spread .notebook-blank{height:100%;aspect-ratio:auto}
.notebook-preview-spread .notebook-blank:before{inset:9% 9% 3%}
@media(min-width:641px) and (max-width:900px){.notebook-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.notebook-card>a{display:block;text-decoration:none}
.notebook-card>a:hover .notebook-action,.notebook-card>a:focus-visible .notebook-action{text-decoration:underline;text-underline-offset:4px}
.notebook-card>a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}

/* Match the first rule and spacing in the supplied right-hand page. */
.notebook-preview-spread .notebook-blank:before{
  inset:10.2% 9% 0;
  background:repeating-linear-gradient(to bottom,#bfb6ae 0 1px,transparent 1px 4.4%);
}

/* The covers are a single swipeable series. */
.notebook-grid{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 48px)/4);
  grid-template-columns:none;
  gap:16px;
  max-width:none;
  margin-top:30px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:#9cb6aa transparent;
  padding:4px 2px 16px;
}
.notebook-card{scroll-snap-align:start}
.notebook-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:13px}
.notebook-controls p{margin:0;color:#dce8df;font-size:.93rem}
.notebook-navigation{display:flex;align-items:center;gap:13px;flex:none}
.notebook-count{font-size:.88rem;min-width:70px;text-align:center;color:#e7e7d9}
.notebook-navigation button{width:42px;height:42px;border:1px solid #b2c4b7;border-radius:50%;background:transparent;color:#f8f5e8;font:400 1.75rem/1 'DM Sans',sans-serif;cursor:pointer}
.notebook-navigation button:hover:not(:disabled),.notebook-navigation button:focus-visible{background:#f1d38e;color:#102a2b}
.notebook-navigation button:disabled{opacity:.35;cursor:default}
@media(max-width:640px){
  .notebook-grid{grid-template-columns:none;grid-auto-columns:calc((100% - 12px)/2);gap:12px}
  .notebook-controls{align-items:flex-start;gap:10px}
  .notebook-controls p{max-width:170px;font-size:.84rem;line-height:1.35}
  .notebook-navigation{gap:6px}
  .notebook-count{min-width:58px;font-size:.78rem}
  .notebook-navigation button{width:36px;height:36px}
}

/* Soft toy concept: the full composition remains visible at every width. */
.plush-feature{margin:94px 0 76px;padding:34px 0 0;border-top:1px solid #78918a}
.plush-heading{max-width:720px;margin:0 0 28px}
.plush-heading h3{font-size:clamp(2rem,4vw,3.4rem);margin:12px 0 15px}
.plush-lead{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.6}
.plush-scene{margin:0;background:#d8b898;box-shadow:0 24px 50px #091c1c80}
.plush-scene img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
.plush-scene figcaption{padding:10px 16px;background:#102a2b;color:#c9d9d0;font-size:.82rem}
.plush-signature{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,52px);padding:23px 0 8px;font:500 clamp(1.2rem,2.5vw,1.9rem)/1.2 'Fraunces',Georgia,serif}
.plush-signature span:nth-child(2){color:#e9c77b;font-size:1rem}
.collection .plush-note{text-align:center;color:#dce8df;font-size:.9rem}
@media(max-width:640px){.plush-feature{margin:66px 0 54px;padding-top:24px}.plush-scene figcaption{font-size:.75rem}.plush-signature{gap:15px}}

.plush-portraits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,36px);margin-top:clamp(22px,3vw,38px)}
.plush-portraits article{min-width:0;background:#f8f1e5;color:#173a3a;overflow:hidden}
.plush-portraits article>a{display:block;overflow:hidden}
.plush-portraits img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;transition:transform .3s ease}
.plush-portraits article>a:hover img{transform:scale(1.025)}
.plush-portraits article>a:focus-visible{outline:3px solid #e9c77b;outline-offset:-3px}
.plush-portrait-copy{padding:clamp(16px,2.2vw,28px)}
.plush-portrait-copy h4{font:500 clamp(1.7rem,3vw,2.4rem)/1.1 'Fraunces',Georgia,serif;margin:0 0 10px}
.collection .plush-portrait-copy p{color:#284846;margin:0 0 15px}
.plush-portrait-copy a{color:#173a3a;font-weight:700;text-underline-offset:4px}
.collection .plush-note{margin:22px 0 0}
@media(max-width:640px){.plush-portraits{gap:12px}.plush-portrait-copy{padding:13px}.plush-portrait-copy h4{font-size:1.5rem}.collection .plush-portrait-copy p{font-size:.84rem}.plush-portrait-copy a{font-size:.8rem}}

/* Keep close-up portraits in proportion with the notebook and coloring-book display. */
.plush-portraits{max-width:820px;margin-left:auto;margin-right:auto}
/* Portrait cards start at the image, without the separator used by collection notes. */
.collection .plush-portraits article{border-top:0;padding-top:0}

/* The small keyrings have their own, lighter scale within the collection. */
.keyring-feature{margin-top:84px;padding-top:38px;border-top:1px solid #78918a}
.keyring-heading{max-width:740px;margin-bottom:27px}
.keyring-heading h3{font-size:clamp(2rem,4vw,3.4rem);margin:12px 0 15px}
.keyring-heading>p:last-child{font-size:clamp(1rem,1.6vw,1.15rem)}
.keyring-scene{margin:0;max-width:960px;background:#d4d9cf;box-shadow:0 20px 42px #061a1b70}
.keyring-scene img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.keyring-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,32px);max-width:690px;margin:32px auto 0}
.collection .keyring-cards article{min-width:0;padding:0;border:0;background:#f8f1e5;color:#173a3a;overflow:hidden}
.keyring-front{display:block;width:100%;aspect-ratio:2/3;overflow:hidden;background:#797b5d}
.keyring-front img{display:block;width:100%;height:100%;object-fit:cover}
.keyring-front:focus-visible{outline:3px solid #e9c77b;outline-offset:-3px}
.keyring-card-copy{padding:clamp(14px,2vw,24px)}
.keyring-card-copy h4{font:500 clamp(1.65rem,2.8vw,2.2rem)/1.1 'Fraunces',Georgia,serif;margin:0 0 10px}
.collection .keyring-card-copy p{color:#284846;margin:0 0 14px}
.keyring-card-copy a{font-weight:700;text-underline-offset:4px}
@media(max-width:640px){.keyring-feature{margin-top:62px;padding-top:24px}.keyring-cards{gap:12px;margin-top:22px}.keyring-card-copy{padding:12px}.keyring-card-copy h4{font-size:1.5rem}.collection .keyring-card-copy p,.keyring-card-copy a{font-size:.82rem}}