:root{
  --kraft:#C9A36A; --kraft-d:#B08B52; --navy:#1F3350; --navy-l:#3A5175;
  --cream:#FAF7F0; --paper:#FFFDF8; --red:#C0392B;
  --line:rgba(31,51,80,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--navy);
  font-family:"Mulish",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px;line-height:1.72;
}
img,svg{max-width:100%}
a{color:var(--navy);text-decoration-color:var(--kraft-d);text-underline-offset:3px}
a:hover{color:var(--red)}
h1,h2,h3,.code{font-family:"Rajdhani",system-ui,sans-serif;letter-spacing:.02em}
h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.12;margin:.2em 0 .5em;font-weight:700}
h2{font-weight:600}
.wrap{width:min(1080px,92vw);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--navy);color:var(--cream);padding:.6rem 1rem;z-index:99}

/* header */
.bar{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.bar-in{display:flex;align-items:center;gap:1.5rem;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:"Rajdhani",sans-serif;
  font-weight:700;font-size:1.32rem;text-transform:uppercase;letter-spacing:.09em;margin-right:auto}
.tagmark{width:30px;height:24px;flex:none}
.tagmark path{fill:var(--kraft);stroke:var(--navy);stroke-width:1.6}
.tagmark circle{fill:var(--paper);stroke:var(--red);stroke-width:1.6}
.nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav a{font-family:"Rajdhani",sans-serif;font-weight:600;font-size:1.02rem;text-transform:uppercase;
  letter-spacing:.07em;text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--red)}

.burger{display:none;width:44px;height:44px;padding:9px 5px;box-sizing:border-box;flex-direction:column;
  justify-content:center;gap:5px;cursor:pointer;background:none;border:0;border-radius:6px;
  -webkit-tap-highlight-color:transparent}
.burger span{display:block;width:100%;height:2px;background:var(--navy);border-radius:2px;pointer-events:none}
.burger:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;padding:4.2rem 0 3.4rem}
.eyebrow{font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.24em;
  font-size:.86rem;color:var(--kraft-d);margin:0}
.lede{font-size:1.1rem;color:var(--navy-l);max-width:60ch}
.hero-img{position:relative}
.hero-img::after{
  content:"";position:absolute;right:-10px;bottom:-14px;width:74px;height:56px;background:var(--kraft);
  border:2px solid var(--navy);
  clip-path:polygon(28% 0,100% 0,100% 100%,28% 100%,0 50%);
}

/* hero / category image */
.ph{margin:0}
.ph img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border:2px solid var(--navy);background:var(--paper)}

/* sections */
.sec-h{font-size:clamp(1.5rem,3vw,2.05rem);margin:0 0 .4rem}
.sec-p{max-width:64ch;color:var(--navy-l);margin:0 0 2.6rem}
.rack{padding:1.5rem 0 3rem}
.closing{padding:1rem 0 4rem;max-width:74ch}
.closing p{border-top:2px solid var(--kraft);padding-top:1.6rem;font-size:1.05rem}

/* tags */
.tags{display:grid;grid-template-columns:repeat(4,1fr);gap:2.6rem 1.6rem;align-items:start}
.tags-col{grid-template-columns:1fr;gap:3.4rem;padding-bottom:3rem}

/* die-cut luggage tag: rounded tag head, punched hole, string */
.tag{
  position:relative;color:var(--navy);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 22%),var(--kraft);
  border:2px solid var(--navy);
  border-radius:30px 30px 10px 10px;
  padding:3.1rem 1.5rem 1.5rem;
  box-shadow:6px 7px 0 rgba(31,51,80,.13);
}
.tag-hole{position:absolute;left:0;right:0;top:.95rem;display:flex;justify-content:center;z-index:2}
.tag-hole span{display:block;width:17px;height:17px;border-radius:50%;
  background:var(--cream);box-shadow:0 0 0 2px var(--red),inset 0 1px 2px rgba(31,51,80,.35)}
.string{position:absolute;left:50%;top:-1.7rem;width:2px;height:1.75rem;background:var(--red);z-index:1}
.string::after{content:"";position:absolute;left:-8px;top:-9px;width:18px;height:11px;
  border:2px solid var(--red);border-bottom:none;border-radius:18px 18px 0 0}
.tag::before{content:"";position:absolute;left:1.1rem;right:1.1rem;top:2.45rem;height:0;
  border-top:1.5px dashed rgba(31,51,80,.26)}

.code{font-size:2.2rem;font-weight:700;letter-spacing:.16em;line-height:1;margin:0 0 .3rem;color:var(--navy)}
.code-lg{font-size:2.6rem}
.code-xl{font-size:clamp(2.6rem,7vw,4rem);color:var(--kraft-d);margin:0;letter-spacing:.16em}
.tag-name{font-size:1.28rem;font-weight:700;margin:0 0 .15rem;line-height:1.22}
.tag-name a{text-decoration:none;border-bottom:2px solid rgba(31,51,80,.38)}
.tag-cat .tag-name{font-size:1.14rem}
.tag-sub{margin:0 0 .9rem;font-family:"Rajdhani",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.88rem;color:#6B4F27}
.tag p{margin:0 0 .85rem}
.tag-cat p{font-size:.96rem}
.count,.facts{font-family:"Rajdhani",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.82rem;border-top:1.5px solid rgba(31,51,80,.32);padding-top:.65rem}
.count{margin:1rem 0 0 !important}
.facts{margin:1.2rem 0 0 !important;font-weight:600;letter-spacing:.1em;font-size:.85rem;line-height:2}
.facts span{color:var(--red)}

.tags-col .tag{padding:3.4rem 2.4rem 2rem;border-radius:38px 38px 12px 12px}
.tags-col .code{font-size:2.9rem;letter-spacing:.18em}
.tags-col .tag-name{font-size:1.55rem}
.tags-col .tag p{max-width:78ch}

/* category head */
.cat-head{padding:3.4rem 0 1.4rem;max-width:74ch}
.cat-head h1{margin-top:.1em}
.hero-cat{padding-bottom:2.2rem}
.hero-cat .code-xl{margin:0 0 .15rem}
.hero-cat h1{margin:.05em 0 .55em}
.hero-cat .lede{margin:0}
.note{border-left:4px solid var(--red);background:var(--paper);padding:1.2rem 1.4rem;margin:0 0 3rem;max-width:74ch}
.note p{margin:0;color:var(--navy-l)}

/* prose pages */
.prose{max-width:70ch;padding:3rem 0 4rem}
.prose h2{font-size:1.4rem;margin:2.2rem 0 .5rem}
.prose p{margin:0 0 1.1rem}
.mark svg{width:46px;height:36px;margin:0}
.mark svg path{fill:var(--kraft);stroke:var(--navy);stroke-width:1.6}
.mark svg circle{fill:var(--cream);stroke:var(--red);stroke-width:1.6}

/* footer */
.foot{background:var(--navy);color:#E7E1D4;margin-top:2rem;padding:3rem 0 1.4rem}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.4rem}
.foot a{color:#E7E1D4;text-decoration:none}
.foot a:hover{color:var(--kraft)}
.foot h2{font-size:.9rem;text-transform:uppercase;letter-spacing:.18em;color:var(--kraft);margin:0 0 .8rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-brand{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:1.3rem;text-transform:uppercase;
  letter-spacing:.1em;margin:0 0 .5rem}
.foot-about p{margin:0;color:#BFB8A8;max-width:44ch}
.foot-end{border-top:1px solid rgba(231,225,212,.2);margin-top:2.4rem;padding-top:1.2rem}
.foot-end p{margin:0;font-size:.88rem;color:#BFB8A8}

@media(max-width:1040px){
  .hero{grid-template-columns:1fr;gap:2rem;padding-top:2.6rem}
  .tags{grid-template-columns:repeat(2,1fr);gap:2.8rem 1.8rem}
  .tags-col{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-about{grid-column:1/-1}
}
@media(max-width:680px){
  .burger{display:flex}
  .nav{display:none;width:100%;padding-bottom:.9rem}
  .nav.nav-open{display:block}
  .nav ul{flex-direction:column;gap:.1rem}
  .nav a{display:block;padding:.6rem 0;border-bottom:1px solid var(--line)}
  .tags{grid-template-columns:1fr}
  .tags-col .tag{padding:3rem 1.3rem 1.5rem;border-radius:30px 30px 10px 10px}
  .tags-col .code{font-size:2.3rem}
  .tags-col .tag-name{font-size:1.3rem}
  .foot-in{grid-template-columns:1fr}
  .hero-img::after{display:none}
}