/* ══════════════════════════════════════════════════════════════
   MJÚK ICELAND — porcelain shell (the studio's fashion recipe, tuned for a maker whose product is colour)
   Porcelain ground · ONE deep petrol accent, sampled from stock.
   ══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Bodoni Moda";src:url("assets/fonts/BodoniModa-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("assets/fonts/BodoniModa-500i.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Humane";src:url("assets/fonts/Humane.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Space Mono";src:url("assets/fonts/SpaceMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("assets/fonts/SpaceMono-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#f7f3ef;--bg-2:#efe9e2;--panel:#e9e1d8;
  --ink:#17121a;--dim:#6b6360;--faint:#c9c0b6;  /* dim: 5.3:1 on bg, 4.5:1+ on every panel (was #7c7370, 4.2:1) */
  --accent:#a8320a;--accent-soft:rgba(168,50,10,.4);
  --line:rgba(23,18,26,.14);
  --ff-d:"Humane","Arial Narrow",sans-serif;
  --ff-s:"Bodoni Moda",Georgia,serif;
  --ff-m:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
  --pad:clamp(18px,5vw,90px);
  /* real layout viewport, measured in JS — see the --vw note in app.js.
     100vw is the fallback for the first paint before JS runs. */
  --vw:100vw;--vh:100vh;
}
/* Every position:fixed layer is sized from the MEASURED viewport, never from
   left:0/right:0 — in-app browsers resolve that containing block too wide and
   push right-aligned chrome (the bag, the burger) off the edge of the screen. */
.bars,.load,.nav,.menu,.bag{width:var(--vw);right:auto}
*{margin:0;padding:0;box-sizing:border-box}
/* iOS Safari inflates text beside anything wider than the screen (the shop's sideways chip rows); the type scale here is already responsive */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--ff-m);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:#fff}
html.lenis,html.lenis body{height:auto}
/* main deliberately has NO z-index: `z-index:1` would make it an isolated
   stacking context, and the hero's difference-blend headline could then only
   invert against images inside main — over the page ground it would paint its
   raw colour and disappear. With z-index:auto it still paints above the fixed
   grain canvas (later in DOM order, both positioned), but the blend group is
   now the root, so the headline inverts against the ground and the grain too. */
main{position:relative}
.foot{position:relative;z-index:1}
/* a far jump (header link, or home#section from another page): the content dips out quickly, the page
   moves, and it comes back as gently as after a page change; the header stays */
main,.foot{transition:opacity .38s cubic-bezier(.23,1,.32,1)}
.go-jump main,.go-jump .foot{opacity:0;transition-duration:.16s;transition-timing-function:cubic-bezier(.4,0,1,1)}
@media (prefers-reduced-motion:reduce){main,.foot{transition:none}}

.mono{font-family:var(--ff-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

/* ══ WORDMARK (header + footer) ══
   Anna's full-name logo (2026-10-10: "only the logo with a full name of the brand"), traced from
   her Logo-frame.jpg: the framed lockup (1.22:1) in the loader and the footer, her own frameless
   MJÚK / ICELAND cut (1.65:1, the same letters) in the header, where the frame's small lines
   (LIMITED EDITION, DESIGNER PRODUCTS) would be under 2 px tall. The header mark is pinned by
   HEIGHT, or the generic width:100% blows the nav open; the framed one by width (below). */
.wordmark{display:block;line-height:0}
.wordmark img{display:block;height:100%;width:auto}
.head__t,.hero__word,.camp__line,.bold__t,.news__t,.foot__word,.pan__title,.cat__name{
  font-family:var(--ff-d);font-weight:600;line-height:1.05;text-transform:uppercase;letter-spacing:.015em}

.link{font-family:var(--ff-m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  display:inline-block;padding-bottom:3px;background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .5s var(--ease),color .3s}
.link:hover{color:var(--accent);background-size:100% 1px}

/* ══ VERTICAL-BARS BACKGROUND (canvas, ported from 21st.dev) ══ */
/* taller than the screen on purpose (8 Nov, Sindri's phone): --vh is measured with the browser bar showing, so when the bar
   hid on scroll the screen grew past the canvas and its bottom edge showed as a line of shade travelling over the page.
   100vh is the size with the bar hidden on iOS and Android; the extra is headroom for bars that float over the page. */
.bars{position:fixed;top:0;left:0;right:auto;z-index:0;pointer-events:none;display:block;width:var(--vw);height:calc(max(100vh,var(--vh)) + 240px);opacity:.24}
/* the campaign frame opens as you scroll; on a phone that cut the words inside it, so a phone gets the open frame */
@media(max-width:700px){.camp__frame{clip-path:none!important}}

/* ══ PRELOADER — soft blur-to-sharp wordmark reveal ══ */
.load{position:fixed;inset:0;z-index:200;background:#fff;display:grid;place-items:center;
  overflow:hidden;clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease)}
/* the framed lockup by width: at 224 px and up her LIMITED EDITION line is 6 px tall or more */
.load__mark{position:relative;width:min(80vw,520px,75vh);min-width:min(224px,92vw);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
/* elegant reveal: blur-to-sharp logo, then a petrol hairline draws beneath */
.load__still{display:block;width:100%;height:auto;margin:0 auto;
  opacity:0;filter:blur(16px);transform:scale(.97);
  animation:hyIn 1.5s var(--ease) .15s forwards}
@keyframes hyIn{to{opacity:1;filter:blur(0);transform:scale(1)}}
.load__line{display:block;width:0;height:1px;background:var(--accent);
  animation:hyLine 1.2s var(--ease) 1.0s forwards}
@keyframes hyLine{to{width:58%}}
.load__sub{opacity:0;animation:hyMeta .8s ease 1.7s forwards}
@keyframes hyMeta{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.load__still,.load__sub{animation:none;opacity:1;filter:none;transform:none}.load__line{animation:none;width:58%}}

/* exit: the panel wipes upward, the mark lifts with it */
body.ready .load{clip-path:inset(0 0 100% 0);pointer-events:none}
body.ready .load__mark{transform:translateY(-14px) scale(.985);opacity:.85;transition:transform 1s var(--ease),opacity .8s var(--ease)}

/* ══ NAV ══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:66px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:0 var(--pad);color:var(--ink);background:linear-gradient(180deg,rgba(247,243,239,.9),rgba(247,243,239,0))}
/* scrolled down the page, the header gets its own ground so text never shows through it (Sindri, 24 Oct) */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);box-shadow:0 1px 0 var(--line);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.nav.solid::before,.srch-open .nav::before{opacity:1}
.nav.hide{transform:translateY(-100%);transition:transform .5s var(--ease)}
.nav.show{transform:translateY(0);transition:transform .5s var(--ease)}
.nav__brand{display:flex;align-items:center;justify-self:center}
.nav__brand .wordmark{height:38px}
.nav__mid{display:flex;gap:26px;justify-self:start}
/* 961-1100 px: six links beside the centred logo need tighter gaps, or the left column runs into it;
   below 961 they do not fit at all (Icelandic labels are longer), so the menu toggle takes their place (rule after the toggle's own, below) */
@media(max-width:1100px){.nav__mid{gap:clamp(14px,1.9vw,26px)}}
.nav__mid a,.nav__link{font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);transition:opacity .3s;opacity:.85}
.nav__mid a:hover,.nav__link:hover{opacity:1}
.nav__search{display:inline-flex;align-items:center;justify-content:center;line-height:0;padding:4px}
/* header links roll on hover (2026-10-09): the word slides up out of its line and the same word
   rises in rust from below. CSS only, two text shadows on the one word, so no extra markup and
   screen readers hear it once. Keyboard focus rolls it too. */
.nav__mid a{display:inline-block;overflow:hidden;height:1.5em;line-height:1.5;opacity:1;color:transparent;
  text-shadow:0 0 var(--ink),0 1.5em var(--accent);transition:text-shadow .55s var(--ease)}
.nav__mid a:hover,.nav__mid a:focus-visible{text-shadow:0 -1.5em var(--ink),0 0 var(--accent)}
@media(prefers-reduced-motion:reduce){.nav__mid a{transition-duration:.01s}}
@media(forced-colors:active){.nav__mid a{color:LinkText;text-shadow:none}}
.nav__end{display:flex;gap:20px;align-items:center;justify-self:end}
/* ── Menu toggle, ported from sndr-studio: text roller + plus that spins to an X.
      GSAP drives the icon rotation and the label roll (see app.js). ── */
.nav__burger{display:none;align-items:center;gap:.45rem;height:44px;padding:0 2px;margin-right:-2px;
  background:transparent;border:none;cursor:pointer;color:var(--ink);
  font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.sm-toggle-textwrap{position:relative;display:inline-block;height:1em;overflow:hidden;white-space:nowrap}
.sm-toggle-textinner{display:flex;flex-direction:column;line-height:1}
.sm-toggle-line{display:block;height:1em;line-height:1}
.sm-icon{position:relative;width:12px;height:12px;flex:0 0 12px;display:inline-flex;will-change:transform}
.sm-icon-line{position:absolute;left:50%;top:50%;width:100%;height:2px;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);will-change:transform}
/* 821-960 px: the menu toggle instead of the six links (see the .nav__mid note above) */
@media(min-width:821px) and (max-width:960px){
  .nav__mid{display:none}
  .nav__burger{display:flex;grid-column:1;justify-self:start;margin:0 0 0 -2px}
}

/* ══ MOBILE MENU ══ */
.menu{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 var(--pad);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);pointer-events:none}
body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto}
/* direct children only: `.menu a` also caught the footer's Instagram link and blew
   it up to display size, overflowing the panel. */
.menu:focus,.pom:focus{outline:none}   /* the panel takes focus when a pointer opens it; only its links show a ring */
.menu > a{font-family:var(--ff-d);font-weight:600;font-size:clamp(34px,11vw,68px);line-height:.95;
  text-transform:uppercase;display:flex;align-items:baseline;gap:14px;padding:2px 0}
.menu > a i{font-family:var(--ff-m);font-size:11px;font-style:normal;color:var(--accent);flex:0 0 auto}
.menu__foot{position:absolute;bottom:32px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-family:var(--ff-m);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);line-height:1.6}
/* explicit reset so it can never inherit the display-size link styling */
.menu__foot a{color:var(--accent);font-family:var(--ff-m);font-size:11px;font-weight:400;
  line-height:1.6;letter-spacing:.08em;display:inline;text-transform:uppercase}

/* ══ HERO ══ */
.hero{min-height:100svh;display:flex;flex-direction:column;overflow-x:clip;padding:78px var(--pad) clamp(22px,3vw,40px)}
.hero__head{display:flex;justify-content:space-between;gap:16px}
.hero__stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0;padding:clamp(10px,2vw,24px) 0}
.hero__fig{height:min(58vh,560px);width:auto;object-fit:contain}
/* The blend MUST sit on this element, not on the two spans: z-index:4 makes
   .hero__word its own stacking context, so a blend on its children would have
   nothing inside it to blend against. It blends against the carousel photos AND
   the painted page ground, which is why `main` deliberately carries no z-index.
   The inversion IS the device — do not swap it for a solid colour plus a glow. */
.hero__word{position:absolute;left:0;right:0;bottom:max(28px,6%);margin:0;text-align:center;padding:0 var(--pad) .1em;
  z-index:4;pointer-events:none;display:flex;flex-direction:column;line-height:1.08;
  color:#fff;mix-blend-mode:difference}
/* the name alone, as large as the stage allows: bound by width (it is about 2.35em wide) and by
   height, so a short laptop screen does not push it off the photo */
.hero__l1{font-family:var(--ff-s);font-weight:500;text-transform:lowercase;
  font-size:clamp(72px,min(24vw,44svh),400px);letter-spacing:-.015em;padding:.06em 0;
  -webkit-text-stroke:.9px #fff}
.hero__cta{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero__tag{color:var(--dim)}
.hero__tag a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease),color .5s var(--ease)}
@media(hover:hover) and (pointer:fine){.hero__tag a:hover{background-size:100% 1px;color:var(--ink)}}
.hero__tag a:not(:hover){background-position:100% 100%}
.hero__tag a:focus-visible{background-size:100% 1px;color:var(--ink);outline:1px solid var(--accent);outline-offset:3px}
.hero__tag a:active{color:var(--ink)}
/* the words are 11 px: padding (inline, so the line does not move) gives a finger more to hit, the underline stays under the word */
.hero__tag a{padding:9px 0;background-origin:content-box}
.hero__cta .link{color:var(--accent);background-image:linear-gradient(var(--accent),var(--accent))}

/* ══ SECTION RHYTHM ══ */
section{padding:clamp(70px,12vw,180px) 0;position:relative}
.head{display:flex;align-items:baseline;gap:clamp(12px,2vw,26px);padding:0 var(--pad);margin-bottom:clamp(36px,6vw,80px)}
/* fixed min-width keeps every section headline on the same left edge */
.head__n{flex:0 0 auto;min-width:clamp(30px,3.4vw,52px);font-family:var(--ff-m);font-size:13px;color:var(--accent);letter-spacing:.05em}
.head__t{font-size:clamp(46px,9vw,150px);flex:1;min-width:0;overflow-wrap:normal}
.head__meta{white-space:nowrap;align-self:flex-end;padding-bottom:.4em}
.head__end{display:flex;flex-direction:column;align-items:flex-end;gap:8px;align-self:flex-end;padding-bottom:.45em;text-align:right}
.head__end .mono{white-space:nowrap}
@media(max-width:700px){
  .head{flex-wrap:wrap;row-gap:10px}
  .head__n{flex:0 0 100%;min-width:0}
  .head__t{flex:1 1 100%}
  .head__end{align-items:flex-start;text-align:left;padding-bottom:0;width:100%;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}
}

/* ══ RAIL + designed product cards ══ */
.rail{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;padding:0 var(--pad);-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing}
.rail__t{display:flex;gap:clamp(16px,2vw,34px);width:max-content;padding-bottom:4px}
.prod{width:clamp(250px,29vw,380px);flex:0 0 auto;container-type:inline-size}
.prod__im{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2)}
.prod__im::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 55%,rgba(168,50,10,.08),transparent 70%);opacity:0;transition:opacity .6s var(--ease)}
.prod:hover .prod__im::before{opacity:1}
.prod__ix{position:absolute;top:12px;left:14px;z-index:2;pointer-events:none;font-family:var(--ff-m);font-size:10px;letter-spacing:.1em;color:var(--dim)}
.prod__im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform 1.1s var(--ease)}
/* rail arrow buttons */
.rnav{display:flex;gap:8px}
.rnav__b{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:13px;line-height:1;transition:border-color .3s,color .3s,background .3s,opacity .3s}
.rnav__b:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.rnav__b:active:not(:disabled){transform:scale(.94)}
.rnav__b:disabled{opacity:.28;cursor:default}
.rnav__b:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

/* size chips → add to bag (2026-10-09, Sindri: the faded white band read generic). The band is
   gone: one solid ink bar rises out of the photo's lower edge on hover, carries a + that turns as
   it is pointed at, and says "Added" in rust for a moment once the piece is in the bag. On a
   touch screen there is no hover, so the photo stays clean and a small round + sits in its corner. */
.prod__sizes{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  transform:translateY(calc(100% + 12px));transition:transform .55s var(--ease)}
.prod:hover .prod__sizes,.prod:focus-within .prod__sizes{transform:none}
.prod__sizes .mono{color:var(--dim);margin-right:2px}
.sz{min-width:30px;padding:5px 7px;border:1px solid var(--line);font-family:var(--ff-m);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.sz:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.sz:disabled{opacity:.3;cursor:default;text-decoration:line-through}
.sz:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.sz.added{background:var(--ink);border-color:var(--ink);color:#fff}
.sz--solo{flex:0 0 auto;padding-inline:14px;letter-spacing:.06em}
.prod__sizes .sz.sz--solo{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 16px;
  border:0;background:var(--ink);color:#f7f3ef;font-size:10.5px;letter-spacing:.14em}
.prod__sizes .sz.sz--solo::after{content:"";width:11px;height:11px;flex:0 0 auto;margin-left:12px;color:inherit;
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  transition:transform .5s var(--ease)}
.prod__sizes .sz.sz--solo:hover:not(:disabled){background:var(--accent);color:#fff}
.prod__sizes .sz.sz--solo:hover::after{transform:rotate(90deg)}
.prod__sizes .sz.sz--solo:active{transform:scale(.985)}
.prod__sizes .sz.sz--solo:focus-visible{outline:1px solid #f7f3ef;outline-offset:-4px}
.prod__sizes .sz.sz--solo.added{background:var(--accent);color:#fff}
.prod__sizes .sz.sz--solo.added::after{width:12px;height:7px;background:none;border:solid currentColor;border-width:0 0 1.5px 1.5px;
  transform:translateY(-2px) rotate(-45deg)}
/* a sold piece: a quiet tag, always there, never a button */
.prod__sizes>.mono:only-child{margin:0;padding:6px 10px;background:var(--bg);color:var(--dim);font-size:10px;letter-spacing:.12em}
@media(hover:none){
  .prod__sizes{left:auto;right:10px;transform:none}
  .prod__sizes .sz.sz--solo{width:40px;height:40px;padding:0;justify-content:center;border-radius:999px;font-size:0;letter-spacing:0;
    background:rgba(247,243,239,.94);color:var(--ink);box-shadow:0 1px 0 rgba(23,18,26,.06)}
  .prod__sizes .sz.sz--solo::after{margin:0;width:13px;height:13px}
  .prod__sizes .sz.sz--solo.added{background:var(--accent);color:#fff}
  .prod__sizes .sz.sz--solo.added::after{width:12px;height:7px}
}
/* her other shots: where the pointer sits across the photo picks the shot, with a hairline per shot */
.prod__im img.alt{opacity:0;transition:opacity .45s var(--ease),transform 1.1s var(--ease)}
.prod__im img.alt.on{opacity:1}
@media(hover:hover){.prod:hover .prod__im img{transform:scale(1.03)}}
.prod__dots{position:absolute;top:15px;right:14px;z-index:2;display:flex;gap:4px;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.prod__dots i{width:14px;height:1px;background:rgba(23,18,26,.22);transition:background-color .3s var(--ease)}
.prod__dots i.on{background:var(--ink)}
.prod:hover .prod__dots{opacity:1}

/* ══ BAG DRAWER ══ */
.bag{position:fixed;inset:0;z-index:150;pointer-events:none}
.bag[aria-hidden="false"]{pointer-events:auto}
.bag__scrim{position:absolute;inset:0;background:rgba(23,18,26,.45);opacity:0;transition:opacity .28s var(--ease);backdrop-filter:blur(3px)}
.bag[aria-hidden="false"] .bag__scrim{opacity:1;transition-duration:.4s}
.bag__panel{position:absolute;top:0;right:0;height:100%;width:min(94vw,430px);background:var(--bg);border-left:1px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(101%);visibility:hidden;transition:transform .32s var(--ease),visibility 0s linear .32s}
/* closed means gone, for screen readers and the page edge too: hidden once it has slid out */
/* opening is the one to watch (.5s); closing answers a tap and gets out of the way (.32s) */
.bag[aria-hidden="false"] .bag__panel{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
.bag__panel:focus,.bag__panel:focus-visible{outline:none}   /* the panel takes focus on a pointer open; it must never draw a ring */
.bag__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:24px var(--bagpad,22px);border-bottom:1px solid var(--line)}
.bag__title{font-family:var(--ff-d);font-weight:600;font-size:34px;line-height:1;text-transform:uppercase}
.bag__title span{color:var(--accent);font-size:.5em}
.bag__items{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 22px}
.bag__empty{padding:40px 0;color:var(--dim);font-family:var(--ff-m);font-size:12px;text-transform:uppercase;letter-spacing:.08em;line-height:1.9}
.bag__it{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.bag__im{aspect-ratio:4/5;background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.bag__im img{width:100%;height:100%;object-fit:contain;padding:6%}
.bag__n{overflow-wrap:anywhere;font-family:var(--ff-m);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;line-height:1.4}
.bag__sz{font-family:var(--ff-m);font-size:10px;color:var(--dim);text-transform:uppercase;margin-top:4px}
.bag__qty{display:flex;align-items:center;gap:9px;margin-top:9px}
.bag__qty button{width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--line);font-size:12px;line-height:1;color:var(--ink);transition:border-color .25s var(--ease),color .25s var(--ease),opacity .25s var(--ease)}
@media(hover:hover) and (pointer:fine){.bag__qty button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}}
.bag__qty button:disabled{opacity:.3;cursor:default}
.bag__it--gone .bag__im{opacity:.45}
.bag__it--gone .bag__n{color:var(--dim);text-decoration:line-through}
.bag__it--gone .bag__sz{color:var(--accent)}
.bag__notice{margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line);background:var(--bg-2);font-family:var(--ff-m);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;line-height:1.7;color:var(--ink)}
.bag__clear{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px;padding:6px 0;margin:-6px 0}
.bag__clear:hover{color:var(--ink)}
.bag__clear:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.bag__qty span{font-family:var(--ff-m);font-size:11px;min-width:14px;text-align:center}
.bag__right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bag__p{font-family:var(--ff-m);font-size:11.5px;color:var(--accent);white-space:nowrap}
.bag__x{font-family:var(--ff-m);font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;transition:color .25s}
.bag__x:hover{color:var(--ink)}
.bag__foot{padding:20px 22px 24px;border-top:1px solid var(--line)}
.bag__sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.bag__total{font-family:var(--ff-d);font-weight:600;font-size:30px;line-height:1}
.bag__note{color:var(--dim);margin-bottom:14px;line-height:1.7}
.bag__go{width:100%;padding:15px;background:var(--accent);color:#fff;font-family:var(--ff-m);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:.3s var(--ease)}
.bag__go:hover{background:var(--ink)}
.bag__go:disabled{opacity:.35;cursor:default;background:var(--faint);color:var(--dim)}
.prod__meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.prod__name{font-family:var(--ff-m);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;line-height:1.3}
.prod__cat{font-family:var(--ff-m);font-size:10px;color:var(--dim);text-transform:uppercase;margin-top:5px;letter-spacing:.06em;text-wrap:balance;transition:color .3s var(--ease)}   /* wraps rather than cutting her material name short */
@media(hover:hover) and (pointer:fine){.prod:hover .prod__cat{color:var(--ink)}}
.prod__price{font-family:var(--ff-m);font-size:12.5px;color:var(--accent);white-space:nowrap}
.prod__price s{color:var(--dim);margin-right:6px}
/* a narrow card (two per row on a phone) cannot hold a long name and a sale price side by side:
   the name block stops shrinking at its longest word and the price escapes. Stack them there. */
.prod__meta > div:first-child{min-width:0;max-width:100%}
/* her names can hold a long run with no space ("Double-sided.100%Icelandic"): "anywhere", unlike
   "break-word", lets that run count as breakable when the stacked card sizes its name block */
.prod__name{overflow-wrap:anywhere}
@container (max-width:300px){.prod__meta{flex-direction:column;align-items:flex-start;gap:6px}}
/* browsers without container queries: the same stacking wherever cards are two to a row */
@supports not (container-type:inline-size){@media(max-width:640px){.pgrid .prod__meta,.fib__mini .prod__meta{flex-direction:column;align-items:flex-start;gap:6px}}}

/* ══ CAMPAIGN (uncrop on scroll) ══ */
.camp{min-height:100vh;padding:0;display:flex;align-items:flex-end;overflow:hidden;position:relative}
.camp__frame{position:absolute;inset:0;overflow:hidden;clip-path:inset(13% 19%)}
.camp__img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;filter:brightness(.82);transform:scale(1.12)}
.camp__over{position:relative;z-index:2;padding:var(--pad);display:flex;flex-direction:column;gap:18px}
.camp__over .mono{color:var(--ink);opacity:.75}
.camp__line{font-size:clamp(34px,10vw,150px);line-height:.86;color:#f7f3ef;mix-blend-mode:difference}
/* the made-for-you way in (Sindri 2026-10-17): a porcelain card, so it reads on the photo cropped or not */
.camp__card{max-width:min(420px,100%);background:var(--bg);color:var(--ink);padding:clamp(16px,2vw,24px);display:grid;gap:14px;justify-items:start}
.camp__card p{font-size:14px;line-height:1.6;text-wrap:pretty}
.camp__over .camp__card .mono{color:var(--accent);opacity:1;font-size:11px;letter-spacing:.06em}

/* ══ CATEGORIES — image grid, one tile per real collection ══ */
.cats{padding:0 var(--pad);display:grid;gap:clamp(10px,1.4vw,20px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
.cat{display:block;position:relative;min-width:0}
.cat__im{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--bg-2);border:1px solid var(--line)}
.cat__im img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease)}
.cat:hover .cat__im img{transform:scale(1.04)}
.cat__meta{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-top:10px}
.cat__name{font-family:var(--ff-d);font-weight:600;font-size:clamp(20px,2.2vw,34px);
  line-height:1.05;text-transform:uppercase;letter-spacing:.015em;color:var(--ink);transition:color .3s}
.cat:hover .cat__name{color:var(--accent)}
.cat__n{flex:0 0 auto;color:var(--dim)}
/* "Shop by piece" sits directly under "Shop by fibre" and answers a different
   question, so it must not look like the same grid twice: square tiles, all
   equal weight, no hero cell. The 8th tile is the "Everything" escape hatch,
   which is also what squares off the 7 real categories into two full rows. */
.cats--types{grid-template-columns:repeat(4,minmax(0,1fr))}
.cats--types .cat__im{aspect-ratio:1/1}
.cats--types .cat__name{font-size:clamp(17px,1.6vw,25px)}
/* the Everything tile fills what the last row leaves (app.js sets --s4/--s2), its box as tall as its row */
.cats .cat--all{display:flex;flex-direction:column;grid-column:span var(--s4,1)}
.cats .cat--all .cat__im--all{aspect-ratio:auto;flex:1 1 auto;min-height:clamp(96px,10vw,160px)}
.cat--all .cat__im--all{display:grid;place-items:center;background:var(--panel);
  border:1px solid var(--line);transition:background .5s var(--ease)}
@media(hover:hover) and (pointer:fine){.cat--all:hover .cat__im--all{background:var(--accent)}}
.cat__allmark{font-family:var(--ff-m);font-size:clamp(26px,3vw,44px);color:var(--accent);
  transition:color .5s var(--ease),transform .6s var(--ease)}
@media(hover:hover) and (pointer:fine){.cat--all:hover .cat__allmark{color:#fff;transform:translateX(6px)}}
/* wider than one tile (Anna added groups, so the last row was already full or half full): a slim link band with
   its words inside, arrow at the far end; the hover tints it and moves the arrow instead of flooding it with rust */
.cats .cat--all .cat__im--all{transition:background .5s var(--ease)}
@media(min-width:821px){
  .cats .cat--all[data-wide4]{position:relative}
  .cats .cat--all[data-wide4] .cat__im--all{min-height:clamp(96px,8vw,124px);place-items:center end;padding-right:clamp(20px,2.4vw,36px)}
  .cats .cat--all[data-wide4] .cat__meta{position:absolute;left:clamp(18px,2vw,30px);top:50%;transform:translateY(-50%);padding:0;pointer-events:none}
}
@media(hover:hover) and (pointer:fine) and (min-width:821px){
  .cats .cat--all[data-wide4]:hover .cat__im--all{background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
  .cats .cat--all[data-wide4]:hover .cat__allmark{color:var(--accent)}
}

/* ══ STORES — four real Reykjavík doors, the thing their current site hides ══ */
.stores__grid{padding:0 var(--pad);display:grid;gap:clamp(10px,1.4vw,20px);grid-template-columns:repeat(4,minmax(0,1fr))}
/* min-width:0 overrides the grid item's default min-width:auto — without it,
   the flex row inside (.store__top) can force this card wider than its own
   track rather than let its text wrap, blowing the grid out at narrow widths. */
.store{--sp:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px;min-width:0;padding:var(--sp);
  border:1px solid var(--line);background:var(--bg-2);transition:background .5s var(--ease),border-color .5s var(--ease)}
.store:hover{background:var(--panel);border-color:var(--accent-soft)}
/* her own shop-front photos (Anna, 2026-10-09), bled to the card edge above the text; --pos per photo
   keeps the door and the sign in frame at every crop */
.store__ph{margin:calc(var(--sp)*-1) calc(var(--sp)*-1) 4px;aspect-ratio:1;overflow:hidden;background:var(--panel);border-bottom:1px solid var(--line)}
.store__ph img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform 1.1s var(--ease)}
@media(hover:hover){.store:hover .store__ph img{transform:scale(1.03)}}
.store__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.store__ix{color:var(--accent);flex:0 0 auto}
/* the longest tag ("Store & workshop") sits opposite a fixed-width index, so it
   gets the flexible column and the index never wraps under it */
.store__tag{flex:1;min-width:0;text-align:right}
.store__name{overflow-wrap:break-word;font-family:var(--ff-s);font-weight:500;font-size:clamp(19px,1.85vw,27px);
  line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.store__note{font-family:var(--ff-m);font-size:12px;line-height:1.75;color:var(--dim)}
.store__map-btn{margin-top:auto;align-self:flex-start;font-family:var(--ff-m);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding:4px 0;
  background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 1px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .5s var(--ease)}
@media(hover:hover) and (pointer:fine){.store__map-btn:hover{background-size:100% 1px}}
.store__map-btn:active{opacity:.7}
.store__map-btn::before{content:"[ "}
.store__map-btn::after{content:" ]"}
.store__map-label{display:inline-block}
/* 0fr -> 1fr animates a genuinely auto-height panel, which max-height cannot do
   without guessing a magic number that clips on a narrow card */
.store__map{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.store__map>div{overflow:hidden;position:relative}
/* the placeholder sits exactly where the frame will be (it has a 12 px top margin), so no grey band shows above the map */
.store__map>div::before{content:attr(data-loading);position:absolute;inset:12px 0 0;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;font:10px var(--ff-m);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);pointer-events:none}
.store__map>div.is-loaded::before{content:none}
.store.is-open .store__map{grid-template-rows:1fr}
.store__map iframe{width:100%;height:190px;display:block;border:1px solid var(--line);
  margin-top:12px;filter:grayscale(1) contrast(1.04);background:var(--bg-2);position:relative;opacity:0;transition:opacity .5s var(--ease)}
.store__map iframe.is-loaded{opacity:1}
@media(prefers-reduced-motion:reduce){.store__map{transition:none}.store__map iframe,.hero__tag a,.prod__cat{transition:none}}

.stores__foot{padding:clamp(30px,4vw,54px) var(--pad) 0}

/* ══ VISIT (homepage): the four doors as one short list; photos and maps live on store.html ══ */
.visit__list{list-style:none;margin:0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(10px,1.4vw,20px)}
.visit__list a{display:flex;flex-direction:column;gap:10px;padding:22px 0 24px;border-top:1px solid var(--line);min-width:0;transition:border-color .4s var(--ease)}
.visit__nm{font-family:var(--ff-s);font-weight:500;font-size:clamp(19px,1.85vw,27px);line-height:1.2;letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word;transition:color .4s var(--ease)}
.visit__tag{font-size:11px;color:var(--dim)}
@media(hover:hover){.visit__list a:hover{border-color:var(--accent)}.visit__list a:hover .visit__nm{color:var(--accent)}}
.visit__list a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.visit__foot{padding:clamp(22px,3vw,36px) var(--pad) 0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px}
.visit__foot p{font-size:14px;line-height:1.6;max-width:60ch}
@media(max-width:900px){.visit__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.visit__list{grid-template-columns:1fr}.visit__list a{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 0}.visit__tag{text-align:right}}

/* ══ STOCKISTS ══ */
.stock__grid{padding:0 var(--pad);border-top:1px solid var(--line)}
.stock__row{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:baseline;
  padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid var(--line)}
.stock__pl{color:var(--accent)}
.stock__nm{font-family:var(--ff-s);font-weight:500;font-size:clamp(15px,1.7vw,22px);color:var(--ink)}

/* ══ BOLD ══ */
.bold{text-align:center;padding:clamp(90px,18vw,260px) var(--pad)}
.bold__t{font-size:clamp(74px,20vw,340px);line-height:.8;letter-spacing:.01em}
.bold__t span{color:var(--accent)}
.bold__m{display:block;margin-top:26px}

/* ══ FILM (their homepage video + aesthetic sound toggle) ══ */
.reel{position:relative;height:100vh;min-height:520px;overflow:hidden;background:#000;padding:0}
.reel__yt{position:absolute;inset:0;overflow:hidden}
.reel__yt iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;border:0;filter:grayscale(1) contrast(1.04) brightness(.9);transition:filter 1.2s var(--ease);pointer-events:none}
.reel.on .reel__yt iframe{filter:grayscale(0)}
.reel__tag{position:absolute;top:clamp(20px,3vw,40px);left:var(--pad);z-index:3;color:#fff;mix-blend-mode:difference}
.snd{position:absolute;bottom:clamp(22px,3.4vw,44px);right:var(--pad);z-index:3;display:flex;align-items:center;gap:12px;font-family:var(--ff-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;cursor:pointer;background:none;border:none}
.snd__bars{display:flex;align-items:flex-end;gap:3px;height:16px}
.snd__bars i{width:2.5px;height:4px;background:currentColor;display:block}
.reel.on .snd__bars i{animation:eq .85s ease-in-out infinite}
.reel.on .snd__bars i:nth-child(2){animation-delay:.16s}
.reel.on .snd__bars i:nth-child(3){animation-delay:.32s}
.reel.on .snd__bars i:nth-child(4){animation-delay:.48s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}

/* ══ AS SEEN ON — 3D auto-scroll wall ══ */
.seen{position:relative;height:clamp(600px,112vh,1150px);overflow:hidden;background:#231713;padding:0;contain:paint}
/* NO 3D perspective here, deliberately. A perspective+rotateX parent forces the
   compositor to rasterise one huge surface containing every video texture, which
   blew the frame budget and starved Lenis's rAF loop (scrolling died outright).
   A cheap 2D rotation keeps the dynamic feel at a fraction of the cost. */
.seen__wall{position:absolute;inset:-8% -6%;display:flex;gap:clamp(12px,1.6vw,28px);justify-content:center;
  transform:rotate(-3deg) scale(1.05);transform-origin:center 45%}
.seen__col{flex:0 0 auto;width:clamp(170px,20vw,300px);display:flex;flex-direction:column;gap:clamp(12px,1.6vw,26px);animation:seenUp 34s linear infinite;will-change:transform}
.seen__col--down{animation-name:seenDown}
.seen__col:nth-child(1){animation-duration:38s}
.seen__col:nth-child(2){animation-duration:29s}
.seen__col:nth-child(3){animation-duration:44s}
.seen__col:hover{animation-play-state:paused}
@keyframes seenUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes seenDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.seen__card{position:relative;aspect-ratio:9/14;overflow:hidden;background:#2e1c2e;border:1px solid rgba(247,243,239,.14)}
.seen__card img,.seen__card video{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .6s var(--ease),transform 1s var(--ease)}
.seen__card:hover img,.seen__card:hover video{filter:grayscale(0);transform:scale(1.04)}
.seen::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(62% 52% at 50% 50%,rgba(36,22,36,.78),transparent 76%)}
.seen__overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px;pointer-events:none;padding:0 var(--pad)}
.seen__overlay .mono{color:rgba(247,243,239,.82)}
.seen__n{color:#d98cb8!important;mix-blend-mode:normal!important}
.seen__title{font-family:var(--ff-d);font-weight:600;font-size:clamp(50px,10vw,175px);line-height:.82;text-transform:uppercase;color:#f7f3ef}

/* ══ LOOKBOOK — horizontal scroll-hijack ══ */
.pan{overflow:hidden;padding:0}
.pan__track{display:flex;align-items:center;gap:clamp(16px,2.4vw,44px);height:100vh;width:max-content;padding:0 var(--pad);will-change:transform}
.pan__intro{position:relative;flex:0 0 auto;width:min(86vw,700px);height:72vh;display:flex;align-items:flex-end;padding:0;overflow:hidden;isolation:isolate}
.pan__bg{position:absolute;inset:0;overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.pan__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.82);transition:filter 1s var(--ease)}
.pan__intro:hover .pan__bg img{filter:grayscale(0)}
/* text sits over a photo of unknown tone, so a scrim guarantees contrast —
   mix-blend-mode:difference alone can land on an unlucky midtone and vanish */
.pan__intro::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 20%,transparent 65%,rgba(0,0,0,.6))}
/* clipped inside the card, so it always has the photo behind it; isolate on
   .pan__intro gives the difference blend a real backdrop, and white+difference
   inverts against whatever that frame happens to be */
.pan__title{position:relative;z-index:2;margin:0 0 5% 5%;font-size:clamp(40px,8vw,96px);line-height:1.1;color:#fff;mix-blend-mode:difference;pointer-events:none}
.pan__intro .head__n{position:absolute;top:20px;left:22px;z-index:3;color:#fff}
.pan__hint{position:absolute;top:20px;right:22px;z-index:3;color:#fff;text-align:right;max-width:60%}
.pan__i{flex:0 0 auto;height:72vh;position:relative;overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.pan__i img{height:100%;width:100%;transition:filter 1s var(--ease),transform 1.2s var(--ease)}
.pan__i--tall img{filter:grayscale(1)}
.pan__i:hover img{filter:grayscale(0);transform:scale(1.03)}
.pan__i--tall{width:min(50vh,440px)}
.pan__i--tall img{object-fit:cover}
.pan__i--prod{width:min(42vh,360px)}
.pan__i--prod img{object-fit:cover}
.pan__cap{position:absolute;bottom:14px;left:14px;font-family:var(--ff-m);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#fff;mix-blend-mode:difference}
/* orientation aid: shows how far through the horizontal pan you are */
.pan__prog{position:absolute;bottom:clamp(20px,3vw,38px);left:var(--pad);right:var(--pad);height:1px;background:var(--line);z-index:4}
.pan__prog span{display:block;height:100%;width:0;background:var(--accent)}

/* ══ STORE ══ */
.budin__grid{padding:0 var(--pad);border-top:1px solid var(--line)}
.budin__row{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.budin__row span:last-child,.budin__row a{font-size:clamp(15px,2vw,20px);color:var(--ink)}
.budin__row a:hover{color:var(--accent)}

/* ══ NEWSLETTER ══ */
.news{padding:clamp(80px,14vw,200px) var(--pad);display:flex;flex-direction:column;gap:16px}
.news__t{font-size:clamp(56px,13vw,200px);line-height:.82}
.news__sub{max-width:44ch}
.news__form{display:flex;gap:22px;align-items:center;max-width:520px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-top:12px}
.news__form input{flex:1;background:none;border:none;color:var(--ink);font-family:var(--ff-m);font-size:15px;letter-spacing:.02em}
.news__form input::placeholder{color:var(--dim)}
.news__form input:focus{outline:none}
.news__msg{color:var(--accent);min-height:14px}

/* ══ FOOTER ══ */
.foot{padding:clamp(40px,6vw,80px) var(--pad) 30px;border-top:1px solid var(--line)}
.foot__word{width:100%;display:flex;justify-content:center}
.foot__word .wordmark{height:auto;width:clamp(232px,24vw,330px)}
.foot__word .wordmark img{width:100%;height:auto}
.foot__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:40px;padding-top:36px;border-top:1px solid var(--line)}
.foot__grid>div{display:flex;flex-direction:column;gap:10px}
.foot__grid .mono{margin-bottom:6px}
.foot__grid a,.foot__mut{font-size:13px;color:var(--dim);transition:color .3s}
.foot__grid a:hover{color:var(--ink)}
.foot__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.foot__base a{color:var(--accent)}

/* ══ REVEAL ══ */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ══ RESPONSIVE ══ */
@media(max-width:820px){
  /* Bag MUST stay reachable on mobile: only the nav links and Search collapse. */
  .nav__mid{display:none}
  .nav__search{padding:12px 6px}         /* the search stays on phones too: Anna could not find it (23 Oct) */
  .nav__burger{display:flex}
  /* the logo on the centre axis at every phone width: the menu toggle takes the left column,
     language and bag the right; two equal sides that cannot grow keep the logo centred.
     The columns are pinned because display:none on .nav__mid drops it out of the grid. */
  .nav{height:60px}
  .nav__burger{grid-column:1;justify-self:start;margin:0 0 0 -2px}
  .nav__brand{grid-column:2;justify-self:center}
  .nav__end{grid-column:3;justify-self:end}
  .nav__brand .wordmark{height:32px}
  .nav__end{gap:6px}
  #bagBtn{padding:12px 4px}                 /* taller hit area */
  .rnav__b{width:42px;height:42px}          /* was 34, below tap minimum */
  .sz{min-width:38px;min-height:36px}       /* easier to hit on a phone */
  .prod__sizes{gap:6px;padding:10px}
  .bag__qty button{width:34px;height:34px}  /* was 20x20, too small to tap */
  .bag__qty{gap:12px;margin-top:12px}
  .bag__x{padding:6px 0}                    /* bigger Remove target */
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stores__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cats--types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cats .cat--all{grid-column:span var(--s2,1)}
  .cats .cat--all[data-wide2]{position:relative}
  .cats .cat--all[data-wide2] .cat__im--all{min-height:84px;place-items:center end;padding-right:20px}
  .cats .cat--all[data-wide2] .cat__meta{position:absolute;left:16px;top:50%;transform:translateY(-50%);padding:0;pointer-events:none}
  .stock__row{grid-template-columns:1fr;gap:4px}
  .budin__row{grid-template-columns:1fr;gap:6px}
  .foot__grid{grid-template-columns:1fr 1fr}
  .hero__cta{flex-direction:column;align-items:flex-start}
  .pan__i{height:60vh}
  .pan__intro{width:82vw}
}
@media(max-width:479px){
  /* only the other language's code ("ÍS" / "EN"): "EN / ÍS" beside "Karfa (0)" pushed the
     centred logo off its axis at 320-390 px; the aria-label still names the language */
  .nav__end .nav__lang{font-size:0;padding:6px}            /* beats configurators.css, which loads later */
  .nav__end .nav__lang b{font-size:11px;color:var(--ink)}
}
@media(max-width:359px){
  /* 320 px in Icelandic ("Valmynd", "Karfa (0)"): tighter tracking and side padding, a 30 px logo,
     so the language code keeps clear air beside the centred logo */
  .nav__end .nav__lang{padding:6px 4px}
  .nav__end .nav__lang b,.nav__link,.nav__burger{letter-spacing:.05em}
  #bagBtn{padding:12px 2px}
  .nav__brand .wordmark{height:30px}
}
@media(max-width:520px){
  .hero__fig{height:44vh}
  /* bigger and higher than the desktop numbers scale to: the mobile carousel
     card is narrow (58vw), so the same vw-based clamp reads small next to it,
     and bottom:6% of the whole stage lands the text half off the photo's own
     bottom edge instead of inside it. */
  .hero__word{bottom:16%}
  .hero__l1{font-size:clamp(88px,min(36vw,26svh),210px)}
}

/* ══ REDUCED MOTION ══ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .seen__col{animation:none}
  .pan{overflow-x:auto}
  .camp__frame{clip-path:none}
}



/* ── HERO FEATURE CAROUSEL (ported from 21st.dev feature-carousel) ──
   Centre slide sharp and full-scale; neighbours recede with scale, blur,
   opacity and a slight Y-rotation; everything else hidden. */
/* perspective must NOT sit on .hero__stage: it creates an isolated group, which
   stopped the difference-blended wordmark from seeing the page ground as backdrop
   (it rendered raw green). Keep it on the carousel itself, as the original does. */
.fcar{perspective:1000px}
.fcar{position:relative;width:100%;height:min(62vh,600px)}
.fcar__i{position:absolute;left:50%;top:50%;width:min(58vw,380px);height:100%;
  margin-left:calc(min(58vw,380px)/-2);margin-top:calc(min(62vh,600px)/-2);
  transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease);
  will-change:transform,opacity,filter}
.fcar__i img{width:100%;height:100%;object-fit:cover;border:1px solid var(--line);display:block;background:var(--bg-2)}
.fcar__i::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.30) 58%,rgba(0,0,0,.62))}
.fcar__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:20;background:rgba(247,243,239,.72);backdrop-filter:blur(4px)}
.fcar__btn--l{left:clamp(4px,3vw,40px)}
.fcar__btn--r{right:clamp(4px,3vw,40px)}
@media(max-width:640px){.fcar__btn{display:none}}

/* ══ FOOTER CREDIT — the studio's standard markup, set in this shell's own faces ══ */
.sndr{display:inline-flex;align-items:baseline;gap:9px;min-height:44px;color:var(--dim);text-decoration:none;transition:color .3s}
.sndr .mono{margin-right:2px}
.sndr__mark{font-family:var(--ff-s);font-size:15px;letter-spacing:.02em;line-height:1;color:var(--ink)}
.sndr__mark i{font-style:normal;color:var(--accent);font-size:11px;vertical-align:.12em}
.sndr__studio{font-family:var(--ff-m);font-size:10px;letter-spacing:.12em;line-height:1;color:var(--dim)}
@media(hover:hover){.sndr:hover .sndr__mark,.sndr:hover .sndr__studio{color:var(--accent)}}
/* four street names like Skólavörðustígur 36 need a card's full width on a phone */
@media(max-width:560px){.stores__grid{grid-template-columns:1fr}.store__ph{aspect-ratio:4/3}}

/* ══ PAGE TO PAGE (2026-10-09, Sindri: elegant, easy, never lag) ══
   Every page, home included: the header stays exactly where it is, the old page fades out quickly
   and the new one settles in from 8px below. Opacity and transform on two snapshots only, under
   0.4 s, so it runs on the compositor and never holds a click up. Browsers without cross-document
   view transitions cut, as before; reduced motion cuts too. */
@view-transition{navigation:auto}
.nav{view-transition-name:mjuk-nav}
::view-transition-group(mjuk-nav){animation-duration:0s}
/* out, then in: the old page is gone before the new one starts, so two headings never sit on top of
   each other (measured: Stores to Shop showed "Four doors" through "Everything" for ~100 ms). The
   gap shows the page's own ground, not white. */
::view-transition{background:var(--bg)}
::view-transition-old(root){animation:vtOut .14s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .32s cubic-bezier(.23,1,.32,1) .14s both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* the home page's logo intro plays once per visit to the site, not every time she comes back to it */
.intro-seen .load{display:none}

/* one search for the whole site (Anna, 23 Oct) */
/* site search (Sindri, 24 Oct: "looks cheap", "smooth", "expand", "collapse"): unrolls from the top on the menu's own
   curve, the bar settles in, a hairline draws under it; photos lead the results; it rolls back up on close */
.srch{position:fixed;inset:var(--srch-top,66px) 0 auto 0;z-index:98;margin:0;padding:0;border:0;width:100%;max-width:100%;max-height:calc(100dvh - var(--srch-top,66px));overflow:hidden;background:var(--bg);color:var(--ink);
  clip-path:inset(0 0 100% 0);transition:clip-path .48s var(--ease);box-shadow:0 40px 80px -40px rgba(23,18,26,.35)}
.srch:not([open]){display:none}
.srch-scrim{position:fixed;inset:var(--srch-top,66px) 0 0 0;z-index:97;background:rgba(23,18,26,.34);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.srch-open .srch-scrim{opacity:1;pointer-events:auto}
.srch-open .nav{background:var(--bg)}
.srch-open #searchBtn{color:var(--accent)}
.srch.is-open{clip-path:inset(0 0 0 0)}
.srch.is-closing{transition-duration:.28s}
.srch:focus,.srch:focus-visible{outline:none}
.srch__bar{position:relative;display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);padding:clamp(14px,2.4vw,26px) var(--pad)}
.srch__bar::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease) .08s}
.srch.is-open .srch__bar::after{transform:none}
.srch__bar:focus-within::after{background:var(--ink)}   /* the field has no outline: the line under it darkens while it has focus */
.srch__s,.srch__x,.srch__it,.prod__sizes .sz{touch-action:manipulation}
.srch__bar>*{opacity:0;transform:translateY(-6px);transition:opacity .3s var(--ease) .08s,transform .4s var(--ease) .08s}
.srch.is-open .srch__bar>*{opacity:1;transform:none}
.srch.is-closing .srch__bar>*,.srch.is-closing .srch__bar::after{transition-delay:0s}
.srch__ic{flex:0 0 auto;color:var(--dim)}
.srch__bar input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--ff-s);font-size:clamp(24px,3.4vw,44px);line-height:1.15;letter-spacing:-.01em;padding:4px 0;color:var(--ink);caret-color:var(--accent);outline:none;-webkit-appearance:none;appearance:none;border-radius:0}
.srch__bar input::placeholder{color:var(--dim);opacity:1}
.srch__bar input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.srch__x{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:12px 0 12px 12px;font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:color .3s var(--ease)}
.srch__x svg{transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.srch__x:hover{color:var(--accent)}.srch__x:hover svg{transform:rotate(90deg)}}
.srch__x:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
@media(max-width:560px){.srch__x span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.srch__x{padding:14px 2px 14px 14px}.srch__x svg{width:14px;height:14px}}
.srch__res{max-height:calc(100dvh - var(--srch-top,66px) - var(--srch-bar,84px));overflow:auto;overscroll-behavior:contain;padding:clamp(18px,2.6vw,30px) var(--pad) clamp(26px,3.4vw,44px);scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
.srch__h{margin:0;font-family:var(--ff-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.srch__sug{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(18px,2.2vw,30px)}
.srch__sug .srch__h{flex-basis:100%;margin-bottom:6px}
.srch__s{background:none;border:0;padding:2px 0;font-family:var(--ff-s);font-size:clamp(20px,2.2vw,28px);font-style:italic;color:var(--ink);cursor:pointer;
  background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .5s var(--ease),color .3s var(--ease)}
.srch__s:focus-visible{color:var(--accent);background-size:100% 1px;outline:none}
@media(hover:hover) and (pointer:fine){.srch__s:hover{color:var(--accent);background-size:100% 1px}}
.srch__pgs{display:flex;flex-wrap:wrap;gap:6px clamp(18px,2.2vw,30px);margin-bottom:clamp(20px,2.6vw,30px)}
.srch__pg{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--ff-s);font-size:clamp(20px,2.2vw,28px);color:var(--ink);transition:color .3s var(--ease)}
.srch__pg span{font-family:var(--ff-m);font-size:12px;color:var(--accent);transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.srch__pg:hover{color:var(--accent)}.srch__pg:hover span{transform:translateX(4px)}}
.srch__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.srch__all{font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.srch__all span{display:inline-block;transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.srch__all:hover span{transform:translateX(4px)}}
.srch__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,28px) clamp(10px,1.2vw,18px)}
@media(min-width:1100px){.srch__grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:720px){.srch__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.srch__it{display:flex;flex-direction:column;gap:8px;min-width:0;color:var(--ink)}
.srch__im{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.srch__im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s var(--ease),transform .6s var(--ease)}
.srch__im img.ok{opacity:1}
@media(hover:hover) and (pointer:fine){.srch__it:hover .srch__im img{transform:scale(1.03)}.srch__it:hover .srch__nm{color:var(--accent)}}
.srch__it.is-oos .srch__im img.ok{opacity:.5}
.srch__nm{font-family:var(--ff-m);font-size:11.5px;line-height:1.35;letter-spacing:.03em;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s var(--ease)}
.srch__it:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.srch__meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.srch__sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.srch__pr{font-family:var(--ff-m);font-size:11.5px;color:var(--accent);white-space:nowrap}
.srch__pr s{color:var(--dim);margin-right:6px}
.srch__it.is-new{animation:srchIn .32s var(--ease) both;animation-delay:calc(var(--i,0) * 30ms)}
@keyframes srchIn{from{opacity:0;transform:translateY(8px)}}
.srch__none{margin:0;font-family:var(--ff-s);font-size:clamp(18px,2vw,24px)}
.srch__none a{margin-left:10px;font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
@media (prefers-reduced-motion: reduce){
  .srch{clip-path:none;opacity:0;transition:opacity .2s linear}.srch.is-open{opacity:1}.srch-scrim{transition:none}
  .srch__bar>*,.srch__bar::after{transition:none;opacity:1;transform:none}
  .srch__it.is-new{animation:none}.srch__im img{transition:none}
}
/* the card's photo and name open its page, on every page (moved here from pages.css: the front page loads only this file) */
.prod__go{position:absolute;inset:0;z-index:1}
.prod__go:focus-visible{outline:1px solid var(--accent);outline-offset:-4px}
.prod__name a{transition:color .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.prod__name a:hover{color:var(--accent)}}
/* a hat that takes pompoms says so on its photo; Add to bag opens the choice (Sindri, 24 Oct) */
.prod__pom{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 6px;border-radius:2px;background:rgba(247,243,239,.92);color:var(--ink);font-family:var(--ff-m);font-size:9.5px;line-height:1;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.prod__pom svg{flex:0 0 auto;color:var(--accent)}
.no-poms .prod__pom,.prod--oos .prod__pom{display:none}

/* the lookbook on a touch screen: a sideways swipe, no pin (Anna, 23 Oct); a mouse keeps the horizontal experience */
.pan--swipe{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;position:relative}
.pan--swipe::-webkit-scrollbar{display:none}
.pan--swipe.drag{scroll-snap-type:none;cursor:grabbing}   /* a mouse drag (reduced motion) moves freely, then snaps */
.no-poms .pom-ask[data-n="1"]:not(.pdp__cta),.no-poms .pom-ask[data-n="2"]:not(.pdp__cta),.no-poms .pdp__pom{display:none}   /* no chooser: the hat is added as it is */
.pan--swipe .pan__track{height:auto;padding-top:clamp(24px,6vh,56px);padding-bottom:clamp(28px,7vh,64px);transform:none!important}
.pan--swipe .pan__intro,.pan--swipe .pan__i{scroll-snap-align:center}
.pan--swipe .pan__prog{position:sticky;left:var(--pad);bottom:auto;right:auto;width:calc(100vw - 2 * var(--pad));margin-top:calc(-1 * clamp(14px,3.5vh,32px))}
/* the lookbook's photos all behave the same (Anna, 23 Oct: only the first two changed colour): with a mouse every
   photo starts black and white and takes its colour under the pointer; on a touch screen, with no hover, all in colour */
@media (hover:hover) and (pointer:fine){ .pan__i--prod img{filter:grayscale(1)} }
@media (hover:none),(pointer:coarse){ .pan__bg img,.pan__i--tall img,.pan__i--prod img{filter:none} }
/* the search icon shares the phone header's right side: the bag label never breaks ("KARFA (3)" did) */
#bagBtn{white-space:nowrap}
@media(max-width:820px){ .nav__end .nav__search{padding:12px 3px} }
@media(max-width:360px){ .nav__end{gap:2px} #bagBtn{padding-left:2px;padding-right:2px} .nav__end .nav__lang{padding:6px 2px} }

/* the Iceland note (Anna 6 Nov): big, clear, in both languages; a card under the nav, never a bar at the bottom like a cookie notice */
.isnote{position:fixed;z-index:98;top:84px;left:50%;width:min(560px,calc(100% - 32px));transform:translate(-50%,-14px);opacity:0;
  background:var(--bg);color:var(--ink);border:1px solid var(--ink);padding:22px 24px 20px;box-shadow:0 18px 50px rgba(23,18,26,.14);
  transition:opacity .45s var(--ease),transform .6s var(--ease)}
.isnote.on{opacity:1;transform:translate(-50%,0)}
.isnote__k{margin:0 0 10px;font:11px/1 var(--ff-m);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.isnote__t{margin:0 0 8px;padding-right:28px;font-family:var(--ff-s);font-size:clamp(25px,3vw,34px);line-height:1.12}
.isnote__s{margin:0 0 18px;font-size:13px;line-height:1.5;color:var(--dim)}
.isnote__b{display:flex;flex-wrap:wrap;gap:10px}
.isnote__go,.isnote__no{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;font:11px/1 var(--ff-m);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.isnote__go{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.isnote__no{background:none;color:var(--ink);border:1px solid var(--faint)}
.isnote__x{position:absolute;top:10px;right:10px;width:40px;height:40px;background:none;border:0;font-size:24px;line-height:1;color:var(--ink);cursor:pointer}
@media(hover:hover) and (pointer:fine){.isnote__go:hover{background:var(--accent);border-color:var(--accent)}.isnote__no:hover{border-color:var(--ink)}}
.isnote__go:focus-visible,.isnote__no:focus-visible,.isnote__x:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
@media(max-width:520px){.isnote{position:absolute;top:76px;padding:20px 18px 18px}  /* on a phone it scrolls away with the page instead of covering a third of every screen */.isnote__go,.isnote__no{flex:1 1 100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.isnote,.isnote.on{transform:translate(-50%,0);transition:opacity .2s}}
/* a piece with no photo yet (Ragnar Gloves, 6 Nov audit): a quiet card, never an empty half page */
.noimg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg-2);color:var(--faint);pointer-events:none}
.noimg b{font-family:var(--ff-s);font-weight:400;font-size:clamp(28px,4vw,56px);letter-spacing:.04em;color:var(--faint)}
.noimg small{font-family:var(--ff-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.prod__im .noimg b{font-size:clamp(22px,2.4vw,34px)}
.pdp__fig--none{cursor:default}
/* the newsletter sign-up in every footer (6 Nov): one quiet row above the link grid, the shop's own type */
.foot__news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-top:40px;padding-top:36px;border-top:1px solid var(--line)}
.foot__newsCopy .mono{display:block;margin-bottom:12px}
.foot__newsT{font-family:var(--ff-s);font-size:clamp(26px,2.6vw,38px);line-height:1.1;color:var(--ink)}
.foot__newsSub{margin-top:10px;font-size:14px;line-height:1.55;color:var(--dim);max-width:44ch}
.foot__newsRow{display:flex;align-items:stretch;border-bottom:1px solid var(--ink)}
.foot__newsRow input{flex:1;min-width:0;background:none;border:0;padding:14px 0;font:inherit;font-family:var(--ff-m);font-size:15px;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.foot__newsRow input::placeholder{color:var(--dim)}
.foot__newsRow input:focus{outline:none}
.foot__newsRow:focus-within{border-bottom-color:var(--accent)}
.foot__newsGo{flex:none;background:none;border:0;padding:14px 0 14px 18px;font-family:var(--ff-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:color .3s}
.foot__newsGo:hover{color:var(--accent)}
.foot__newsGo:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.foot__newsGo[disabled]{color:var(--dim);cursor:default}
.foot__newsTrap{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.foot__newsMsg{min-height:1.5em;margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink)}
.foot__newsMsg.is-err{color:var(--accent)}
.foot__newsFine{margin-top:6px;font-size:12px;color:var(--dim)}
.foot__newsFine a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.foot__newsFine a:hover{color:var(--ink)}
@media(max-width:760px){.foot__news{grid-template-columns:1fr;gap:20px}}
/* iPhone zooms into any field under 16px when tapped (Codex design audit 7 Nov, finding 5) */
@media(pointer:coarse){.foot__newsRow input{font-size:16px}}