/* =================================================================
   STUDIO CODING REDM — storefront

   Nothing about a package is written here. The name, price, image,
   video, description and compatibility all come from Tebex through
   store.js. What is in the store shows up; what is not, does not.

   ---------------------------------------------------------------
   THE IDEA: a bounty hunter's scrapbook.
   ---------------------------------------------------------------
   Every surface on this page is a sheet of dark pulp paper, and
   every photograph is pasted onto one. No gold frames, no leather,
   no border drawn around anything - paper does not have a border,
   it has an EDGE, and that edge is torn.

   HOW THE PAPER IS MADE (no image files, the browser draws it)
     --tex-fiber  fine fractal noise lit from the side, so the sheet
                  has grain you can see at reading distance
     --tex-stain  very low frequency noise, which comes out as damp
                  patches - this is what stops a dark panel from
                  looking like a flat rectangle of CSS
   The two are blended into the panel colour with background-blend-
   mode, so one element carries the whole sheet.

   HOW THE EDGES ARE TORN
   A rect with a hard alpha edge goes through an SVG displacement
   filter (#t1..#t4). The amplitude is SMALL and the frequency HIGH -
   that is the difference between a torn edge and a blob. Big panels
   also get a fringe layer a couple of pixels wider in a lighter
   tone: the pale pulp you see inside a sheet you have just ripped.
   The filter only ever touches a backdrop layer, never text.

   THE COLOURS pull in three directions instead of one:
     sage   #7d8f68   the signs above a section
     ochre  #d49a38   prices, and only prices
     blood  #9d2a1c   the one action that costs money
   Product photographs are NOT graded. They are the thing being
   sold; the page is dark enough that they carry all the colour.
   ================================================================= */

:root{
  /* BLACK, not slate. An earlier pass had a blue cast in these five
     values; against warm product art it made the whole page look like
     a cold UI instead of a dark sheet of paper. Neutral, a hair warm. */
  --void:#080807;           /* the page */
  --ink:#101010;            /* a sheet at rest */
  --ink-2:#181816;          /* a sheet raised */
  --ink-3:#21201d;          /* a sheet lit */
  --fringe:#3d3b35;         /* the pale pulp along a tear */

  --bone:#efebdf;
  --bone-2:#a6ab9c;
  --bone-3:#636a60;

  --blood:#9d2a1c;
  --blood-2:#c0381f;
  --sage:#8aa06f;
  --sage-2:#a6bb87;
  --ochre:#dca63f;

  --f-head:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-body:Lora,Georgia,serif;
  --f-ui:Oswald,"Arial Narrow",system-ui,sans-serif;

  --wrap:1200px; --gut:26px;
  --ease:cubic-bezier(.16,1,.3,1);
  --snap:cubic-bezier(.16,.84,.22,1.035);

  /* --- the two layers that make a sheet of paper --- */
  /* THE AMPLITUDE IS THE WHOLE TRICK. Raw turbulence runs the full
     0..1 range, and blended over a near-black panel that does not read
     as paper - it reads as a grey film someone left on top of the
     page. So each texture is squeezed around mid-grey with
     feComponentTransfer (slope .2 = a band of roughly 0.4..0.6)
     BEFORE it ever reaches the browser. overlay and soft-light then
     move the panel colour by a few percent, which is exactly what a
     sheet of paper does to the light falling on it.
     feFuncA flattens the alpha, which turbulence also randomises. */
  --tex-fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='1.8'%3E%3CfeDistantLight azimuth='48' elevation='62'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.2' intercept='.4'/%3E%3CfeFuncG type='linear' slope='.2' intercept='.4'/%3E%3CfeFuncB type='linear' slope='.2' intercept='.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23f)'/%3E%3C/svg%3E");
  --tex-stain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='s' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .0065' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.15' intercept='.425'/%3E%3CfeFuncG type='linear' slope='.15' intercept='.425'/%3E%3CfeFuncB type='linear' slope='.15' intercept='.425'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23s)'/%3E%3C/svg%3E");
}

/* one declaration turns any element into a sheet of dark paper */
.sheet{
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;
  background-blend-mode:soft-light,soft-light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{margin:0;background:var(--void);color:var(--bone);
  font-family:var(--f-body);font-size:15.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:clip;}
body.locked{overflow:hidden;}
img{max-width:100%;display:block;}
h1,h2,h3{margin:0;font-family:var(--f-head);font-weight:700;line-height:1.08;}
p{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
input{font:inherit;color:inherit;}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}
#catalog,#buying{scroll-margin-top:92px;}
.defs{position:absolute;width:0;height:0;overflow:hidden;}

/* THE PAGE ITSELF IS FLAT BLACK, deliberately.
   It used to carry the same two blended textures as the panels. On a
   panel that costs nothing - it is a few hundred pixels tall and it is
   rasterised once. On the body it is the whole document, some eight
   thousand pixels of it, and the browser re-blends every strip that
   scrolls into view. That was the lag.
   The texture is worth it where you can see it - the frames, the band,
   the notice, the buttons - and it is worth nothing behind the gaps
   between tiles, which is most of the page. */
body::after{content:"";position:fixed;inset:0;z-index:94;pointer-events:none;
  background:radial-gradient(135% 88% at 50% 2%,transparent 36%,rgba(3,3,2,.78) 100%);}

/* a line torn out of the sheet */
.rip{height:3px;background:currentColor;opacity:.45;filter:url(#t4);}

.sign{font-family:var(--f-ui);font-weight:500;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--sage);}
.label{font-family:var(--f-ui);font-weight:300;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-3);}

/* =================== scroll reveal =================== */
html.sr-js .sr{opacity:0;
  transition:opacity .8s var(--ease),transform 1s var(--snap);}
html.sr-js .sr--l{transform:translateX(-44px);}
html.sr-js .sr--r{transform:translateX(44px);}
html.sr-js .sr--u{transform:translateY(30px);}
html.sr-js .sr.sr-in{opacity:1;transform:none;}
html.sr-js .tile.sr-in{transition:transform .45s var(--ease),opacity .8s var(--ease);}

#embers{position:fixed;inset:0;width:100%;height:100%;z-index:93;pointer-events:none;}

@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.lift{animation:rise 1.05s var(--ease) both;}
.lift:nth-child(1){animation-delay:.06s;}
.lift:nth-child(2){animation-delay:.18s;}
.lift:nth-child(3){animation-delay:.3s;}
.lift:nth-child(4){animation-delay:.42s;}
@media(prefers-reduced-motion:reduce){
  .lift{animation:none;}
  html.sr-js .sr{opacity:1;transform:none;transition:none;}
}

/* =================== buttons ===================
   A button is a chip of paper with a stamp on it. line-height:1 plus
   two more pixels of padding on top than on the bottom, because
   uppercase has no descenders and otherwise rides high in its box. */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;white-space:nowrap;
  font-family:var(--f-ui);font-weight:400;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;line-height:1;padding:15px 24px 13px;
  color:var(--bone-2);transition:color .2s;}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;filter:url(#t5);
  background-color:var(--ink-2);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;
  background-blend-mode:soft-light,soft-light;
  box-shadow:inset 0 1px 0 rgba(255,245,225,.09),0 0 0 1.5px rgba(61,59,53,.55);
  transition:background-color .2s,transform .14s;}
.btn:hover{color:var(--bone);}
.btn:hover::before{background-color:var(--ink-3);}
.btn:active::before{transform:translateY(2px);}
.btn:focus-visible{outline:2px solid var(--sage-2);outline-offset:5px;}
.btn--p{color:#fbf1e6;}
.btn--p::before{background-color:var(--blood);
  box-shadow:inset 0 1px 0 rgba(255,200,170,.26),0 0 0 1.5px rgba(126,46,30,.75);}
.btn--p:hover{color:#fff;}
.btn--p:hover::before{background-color:var(--blood-2);}
.btn--lg{padding:17px 32px 15px;font-size:13px;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}
.btn[disabled]:hover::before{background-color:var(--ink-2);}

/* =================== nav =================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .35s ease,backdrop-filter .35s ease;}
.nav.solid{background:linear-gradient(180deg,rgba(8,8,7,.97) 46%,rgba(8,8,7,.82) 78%,rgba(8,8,7,0));}
.nav__in{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:30px;}
.brand{display:flex;align-items:center;gap:13px;white-space:nowrap;}
.brand img{width:38px;height:38px;flex:none;object-fit:contain;}
.brand b{font-family:var(--f-head);font-weight:900;font-size:17px;letter-spacing:-.015em;
  color:var(--bone);line-height:1;display:block;}
.brand i{font-style:normal;font-family:var(--f-ui);font-weight:300;font-size:10px;
  letter-spacing:.42em;color:var(--sage);display:block;margin-top:5px;}
.nav__l{display:flex;gap:28px;font-family:var(--f-ui);font-weight:300;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);}
.nav__l a{transition:color .18s;}
.nav__l a:hover{color:var(--sage-2);}
.nav__r{margin-left:auto;display:flex;align-items:center;gap:14px;}
.nav__live{display:flex;align-items:center;gap:9px;font-family:var(--f-ui);font-weight:300;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);}
.nav__live i{width:5px;height:5px;border-radius:50%;background:var(--sage);display:block;}

/* =================== the banner =================== */
.banner{position:relative;width:100%;min-height:clamp(620px,94vh,900px);
  display:flex;overflow:hidden;background:var(--void);}
.banner__m{position:absolute;inset:0;}
/* dimmed so the words can be read on it, NOT drained of colour */
.banner__m img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02) contrast(1.05) brightness(.6);}
/* ONE gradient over the photograph, top to bottom, and nothing else.
   It used to be three stacked layers, and the middle one began at
   full strength a quarter of the way down - so it drew a hard
   horizontal edge across the picture, a grey panel laid over the art.
   A single stop list cannot leave a seam: dark under the nav, almost
   clear across the middle where the photograph is meant to be seen,
   then down into the page. */
.banner__haze{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(8,8,7,.88) 0,
    rgba(8,8,7,.46) 10%,
    rgba(8,8,7,.10) 25%,
    rgba(8,8,7,.08) 46%,
    rgba(8,8,7,.50) 66%,
    rgba(8,8,7,.90) 84%,
    var(--void) 100%);}
/* the page torn across the bottom of the photograph */
.banner__tear{position:absolute;left:-3%;right:-3%;bottom:-18px;height:15%;z-index:1;
  background:var(--void);filter:url(#t1);}
.banner__tear::before{content:"";position:absolute;left:0;right:0;top:-2px;height:3px;
  background:var(--fringe);opacity:.35;}
.banner__in{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;
  justify-content:space-between;padding-block:124px 52px;}
.banner__in > .wrap{width:100%;}

/* The photograph behind the words is whatever Tebex holds, and the
   first package in the store happens to be a pair of bright open
   books. So the text carries its own shade: a radial one, running out
   well past the text on every side, which can never show an edge the
   way a panel does. */
.intro{position:relative;max-width:660px;}
.intro::before{content:"";position:absolute;z-index:-1;
  inset:-80px -180px -70px -240px;
  background:radial-gradient(58% 56% at 34% 50%,
    rgba(6,6,5,.93),rgba(6,6,5,.66) 46%,rgba(6,6,5,0) 76%);}
.intro .rip{color:var(--sage);max-width:140px;margin:20px 0 22px;opacity:.8;}
.intro h1{font-size:clamp(38px,5.4vw,70px);font-weight:900;letter-spacing:-.022em;
  text-shadow:0 4px 36px rgba(0,0,0,.9);}
.intro h1 em{font-style:italic;font-weight:900;color:var(--bone-2);}
.intro p{color:#cdcfc4;font-size:16.5px;max-width:50ch;margin-top:20px;
  text-shadow:0 2px 18px rgba(0,0,0,.95);}

/* the featured package, on a sheet pinned over the photograph */
.ledge{position:relative;isolation:isolate;display:flex;align-items:flex-end;
  gap:30px;flex-wrap:wrap;padding:26px 30px 28px;}
.ledge::before{content:"";position:absolute;left:-7px;right:-7px;top:-6px;bottom:-7px;
  z-index:-2;background:var(--fringe);opacity:.3;filter:url(#t2);}
.ledge::after{content:"";position:absolute;left:-4px;right:-4px;top:-3px;bottom:-4px;
  z-index:-1;background-color:rgba(16,16,16,.93);filter:url(#t2);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;background-blend-mode:soft-light,soft-light;}
.ledge__t{min-width:0;flex:1 1 340px;}
.ledge__k{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.ledge__t h2{font-size:clamp(24px,2.9vw,34px);font-weight:700;}
.ledge__t p{color:var(--bone-2);font-size:14.5px;max-width:60ch;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ledge__r{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.price{font-family:var(--f-head);font-size:30px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ochre);letter-spacing:-.02em;}

/* a stamp pressed into the paper */
.seal{position:relative;isolation:isolate;font-family:var(--f-ui);font-weight:400;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#fbeee4;
  padding:6px 13px 5px;line-height:1;}
.seal::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--blood);
  filter:url(#t4);}

/* =================== the band of four facts =================== */
.ribbon{position:relative;padding-block:54px;}
.ribbon__b{position:absolute;left:-3%;right:-3%;top:50%;height:96px;z-index:0;
  transform:translateY(-50%);background-color:var(--ink);filter:url(#t2);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;background-blend-mode:soft-light,soft-light;}
.band{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.band > div{text-align:center;}
.band .k{display:block;font-family:var(--f-ui);font-weight:300;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--sage);margin-bottom:7px;}
.band b{font-family:var(--f-head);font-size:19px;font-weight:700;color:var(--bone);
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* =================== the catalogue =================== */
.cat{padding-block:30px 78px;}
.cat__head{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:26px;}
.cat__head h2{font-size:clamp(28px,3.4vw,40px);font-weight:900;letter-spacing:-.02em;}
.cat__head .sign{display:block;margin-bottom:9px;}

.find{position:relative;margin-left:auto;min-width:270px;}
.find input{width:100%;background:transparent;border:0;outline:0;
  font-family:var(--f-ui);font-weight:300;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone);padding:10px 30px 12px 26px;}
.find input::placeholder{color:var(--bone-3);}
.find__r{position:absolute;left:0;right:0;bottom:0;height:2px;color:var(--bone-3);
  transition:color .25s;}
.find input:focus ~ .find__r{color:var(--sage);}
.find svg{position:absolute;left:1px;top:14px;width:14px;height:14px;
  stroke:var(--bone-3);fill:none;stroke-width:1.7;}
.find__x{position:absolute;right:0;top:9px;color:var(--bone-3);font-size:17px;
  line-height:1;padding:3px 5px;}
.find__x:hover{color:var(--bone);}

/* the tabs are paper chips; the open one is stamped */
.tabs{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:38px;}
.tab{position:relative;isolation:isolate;font-family:var(--f-ui);font-weight:300;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-2);
  padding:11px 17px 9px;line-height:1;transition:color .2s;}
.tab::before{content:"";position:absolute;inset:-2px;z-index:-1;filter:url(#t5);
  background-color:var(--ink);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;background-blend-mode:soft-light,soft-light;
  transition:background-color .2s;}
.tab:hover{color:var(--bone);}
.tab:hover::before{background-color:var(--ink-2);}
.tab[aria-selected="true"]{color:#fbf1e6;font-weight:400;}
.tab[aria-selected="true"]::before{background-color:var(--blood);}
.tab em{font-style:normal;opacity:.55;margin-left:9px;}
/* a search reaches past the open category, so the tabs step back */
.tabs.is-muted{opacity:.4;}
.tabs{transition:opacity .25s;}

/* ---- where one category ends and the next begins ----
   This was a filled plate once, and a plate above the products is a
   second thing competing with them. It is now only type: the name in
   sage, a torn rule running out to the count, and enough air above it
   that the break is obvious without anything being drawn. */
.sec{margin-bottom:34px;}
.sec + .sec{margin-top:58px;}
.sec[hidden]{display:none;}
.sec__h{display:flex;align-items:center;gap:18px;margin:0 0 20px;}
.sec__h h3{order:1;font-family:var(--f-ui);font-weight:500;font-size:13px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--sage);white-space:nowrap;
  display:flex;align-items:center;gap:13px;}
/* a small torn flake of blood ink opening the line */
.sec__h h3::before{content:"";width:5px;height:17px;flex:none;
  background:var(--blood-2);filter:url(#t4);}
.sec__h::after{content:"";order:2;flex:1;height:2px;background:var(--ink-3);
  filter:url(#t4);}
.sec__n{order:3;font-family:var(--f-ui);font-weight:300;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--bone-3);}
.sec__n::after{content:" items";}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start;}

/* Dealt out like cards whenever the shelf changes — a new category, a
   new search. The scroll reveal only fires on the way past an element,
   so without this a tab you come back to would appear with no life at
   all. store.js sets the per-tile delay and takes the class off again
   fill-mode BACKWARDS, not both: backwards holds the first frame during
   the stagger delay and then lets go, so nothing of the animation
   survives to fight the hover lift. "both" would pin transform:none on
   the tile for good. */
@keyframes dealIn{from{opacity:0;transform:translateY(20px) scale(.985);}}
.tile.deal{animation:dealIn .5s var(--ease) backwards;}
@media(prefers-reduced-motion:reduce){.tile.deal{animation:none;}}

/* A tile is the photograph and the two facts under it, and nothing
   else. No sheet around it, no frame: the art is what sells, so it
   gets the whole width of the tile and keeps its own colours.
   The torn paper belongs to the page furniture - the category plates,
   the band, the notice - not around every product. */
.tile{position:relative;display:block;width:100%;padding:0;text-align:left;
  background:none;cursor:pointer;transition:transform .5s var(--ease);}
.tile:hover{transform:translateY(-5px);}
.tile:focus-visible{outline:2px solid var(--sage-2);outline-offset:5px;}
.tile__m{position:relative;display:block;overflow:hidden;background:#0a0a09;
  aspect-ratio:16/9;box-shadow:0 16px 34px -20px #000;}
.tile__m img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  filter:saturate(1.06) contrast(1.03);
  transition:filter .5s var(--ease),transform .9s var(--ease);}
.tile:hover .tile__m img{filter:saturate(1.14) contrast(1.05) brightness(1.04);
  transform:scale(1.035);}
.plate{position:relative;aspect-ratio:16/9;display:grid;place-items:center;
  background:radial-gradient(70% 70% at 50% 42%,#1f1e1b,#080807);}
.plate span{font-family:var(--f-ui);font-weight:300;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--bone-3);padding:0 22px;text-align:center;}

/* The name and the price ride ON the photograph, bottom corners, over
   a gradient that is only as dark as it needs to be for them to be
   read. Set below the picture they cost a row of height on every tile
   and pull the eye off the art. */
.tile__b{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;gap:12px;padding:46px 15px 13px;
  background:linear-gradient(180deg,transparent,rgba(5,5,4,.5) 46%,rgba(5,5,4,.92));}
.tile__n{font-family:var(--f-head);font-size:18px;font-weight:700;color:#fff;
  letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.95);line-height:1.2;}
.tile__p{margin-left:auto;font-family:var(--f-head);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ochre);white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.95);line-height:1.2;}
.tile__p.is-free{color:var(--sage-2);font-family:var(--f-ui);font-weight:400;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;}
.tag{position:relative;isolation:isolate;font-family:var(--f-ui);font-weight:400;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#fbeee4;
  padding:5px 10px 4px;line-height:1;white-space:nowrap;}
.tag::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--blood);
  filter:url(#t4);}
.tag--sale{color:#17130a;}
.tag--sale::before{background:var(--ochre);}
.tile__play{position:absolute;left:12px;top:12px;z-index:3;isolation:isolate;
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px 6px;line-height:1;
  font-family:var(--f-ui);font-weight:300;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone);}
.tile__play::before{content:"";position:absolute;inset:-2px;z-index:-1;
  background:rgba(6,6,5,.84);}
.tile__play b{font-size:8px;line-height:1;color:var(--blood-2);}

/* Gift cards used to get a shape of their own here. They do not need
   one: the artwork in the store already says GIFT CARD and the
   amount, in black and gold, so they are ordinary tiles and the real
   picture does the work. */

.sc-state{grid-column:1/-1;padding:70px 8px;text-align:center;color:var(--bone-3);
  font-family:var(--f-ui);font-weight:300;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;}
.sc-state a{color:var(--sage-2);}

/* =================== the three promises =================== */
.why{padding-block:0 86px;}
.why__g{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;}
.why__g > div{position:relative;padding-top:30px;}
.why__g > div::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;
  background:var(--sage);opacity:.85;filter:url(#t4);}
.why__g b{font-family:var(--f-head);font-size:36px;font-weight:900;color:var(--bone-2);
  display:block;line-height:1;}
.why__g h3{font-size:19px;font-weight:700;margin:14px 0 9px;}
.why__g p{color:var(--bone-2);font-size:14px;}

/* =================== how to buy =================== */
.steps{padding-block:0 88px;}
.notice{position:relative;isolation:isolate;padding:56px 56px 52px;}
.notice::after{content:"";position:absolute;left:-12px;right:-12px;top:-8px;bottom:-10px;
  z-index:-2;filter:url(#t1);background-color:var(--ink);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;background-blend-mode:soft-light,soft-light;
  box-shadow:inset 0 1px 0 rgba(255,245,225,.05);}
.notice__h{text-align:center;}
.notice__h h2{font-size:clamp(30px,4.4vw,50px);font-weight:900;letter-spacing:-.025em;
  margin:12px 0 10px;}
.notice__h p{color:var(--bone-2);font-size:15px;max-width:58ch;margin:0 auto;}
.notice .rip{color:var(--blood-2);opacity:.9;max-width:110px;margin:26px auto 40px;}

.stps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.stp{text-align:center;}
.stp__n{position:relative;isolation:isolate;width:46px;height:46px;margin:0 auto 18px;
  display:grid;place-items:center;font-family:var(--f-head);font-size:20px;font-weight:900;
  color:#fbeee4;}
.stp__n::before{content:"";position:absolute;inset:-3px;z-index:-1;background:var(--blood);
  filter:url(#t4);}
.stp h3{font-size:18px;font-weight:700;}
.stp p{color:var(--bone-2);font-size:14px;margin-top:9px;}
.stp .fw{display:block;margin-top:12px;font-family:var(--f-ui);font-weight:300;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);}

/* =================== footer =================== */
.foot{padding-block:0 12px;}
.foot .rip{color:var(--fringe);opacity:.7;margin-bottom:26px;}
.foot__in{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;font-family:var(--f-ui);font-weight:300;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);}
.foot__in a{transition:color .18s;}
.foot__in a:hover{color:var(--sage-2);}
.foot__l{display:flex;gap:24px;flex-wrap:wrap;}
.paybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:11px;
  padding-block:26px 34px;}
.paybar img{height:30px;width:auto;opacity:.55;filter:grayscale(.85);
  transition:opacity .22s,filter .22s,transform .22s var(--ease);}
.paybar img:hover{opacity:1;filter:none;transform:translateY(-3px);}

/* =================== the cart =================== */
.cartbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.cartbtn em{font-style:normal;font-weight:400;color:var(--ochre);}
.cartbtn.has em{color:#17130a;background:var(--ochre);padding:1px 7px;margin-left:2px;}

.ct{position:fixed;inset:0;z-index:520;}
.ct__back{position:absolute;inset:0;background:rgba(3,3,2,.8);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:ctBack .3s ease backwards;}
@keyframes ctBack{from{opacity:0;}}
/* a sheet pinned to the right edge, torn down its left side */
.ct__panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);
  display:flex;flex-direction:column;background-color:var(--ink);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;background-blend-mode:soft-light,soft-light;
  box-shadow:-40px 0 90px -30px #000;
  animation:ctIn .5s var(--glide,cubic-bezier(.19,.72,.21,1)) backwards;}
@keyframes ctIn{from{transform:translateX(26px);opacity:0;}}
.ct__panel::before{content:"";position:absolute;left:-9px;top:0;bottom:0;width:18px;
  background:var(--ink);filter:url(#t2);}
.ct__head{position:relative;z-index:1;display:flex;align-items:center;
  padding:26px 26px 18px;}
.ct__x{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;
  color:var(--bone-3);font-size:14px;transition:color .18s;}
.ct__x:hover{color:var(--bone);}
.ct__list{position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:0 26px;scrollbar-width:thin;scrollbar-color:#2b2a26 transparent;}
.ct__list::-webkit-scrollbar{width:9px;}
.ct__list::-webkit-scrollbar-thumb{background:#2b2a26;}

.ct__row{display:flex;gap:13px;align-items:center;padding:14px 0;}
.ct__row + .ct__row{box-shadow:0 -1px 0 rgba(61,59,53,.3);}
.ct__row img{width:74px;height:44px;object-fit:cover;flex:none;background:#0a0a09;}
.ct__n{flex:1;min-width:0;}
.ct__n b{display:block;font-family:var(--f-head);font-size:14.5px;font-weight:700;
  color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ct__n span{font-family:var(--f-ui);font-weight:300;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3);}
.ct__p{font-family:var(--f-head);font-size:15px;font-weight:700;color:var(--ochre);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.ct__rm{width:26px;height:26px;flex:none;display:grid;place-items:center;font-size:13px;
  color:var(--bone-3);transition:color .18s;}
.ct__rm:hover{color:var(--blood-2);}
.ct__empty{padding:52px 0;text-align:center;color:var(--bone-3);
  font-family:var(--f-ui);font-weight:300;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;}

.ct__foot{position:relative;z-index:1;flex:none;padding:20px 26px 26px;
  box-shadow:0 -1px 0 rgba(61,59,53,.35);}
.ct__tot{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:16px;}
.ct__foot .btn{width:100%;}
.ct__fine{margin-top:12px;font-family:var(--f-ui);font-weight:300;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);text-align:center;}
.ct__fine:empty{display:none;}

@media(max-width:620px){ .ct__panel{width:100%;} .ct__panel::before{display:none;} }

/* =================== the details window =================== */
.pm{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:24px;}
.pm__back{position:absolute;inset:0;background:rgba(3,3,2,.88);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
/* ---- the frame: a torn sheet, cut once ----
   The tear is on the FRAME, which stays the size of the window. The
   panel inside it is what scrolls, so a package with twenty-two key
   points does not stretch the ripped edge down a page and a half. */
.pm__frame{position:relative;width:min(1020px,100%);max-height:90vh;
  display:flex;flex-direction:column;}

/* ---- the opening ----
   Four things arrive in order, over about three quarters of a second:
   the room goes dark, the sheet is laid down, the photograph settles
   out of a slight push-in, and the writing comes up under it.

   ONE RULE held throughout: the FRAME only ever translates, never
   scales. It carries the torn-paper filter, and scaling a filtered
   element forces the browser to run the displacement again at every
   new size, every frame. Translation reuses the picture it already
   rasterised. The stage may scale freely - there is no filter on it.

   Scoped to .is-in, which store.js takes off and puts back on each
   time the window opens, so the animation plays on the tenth product
   as well as the first. */
/* A gentler curve than the page uses elsewhere. --ease overshoots
   hard at the end, which is right for a tile snapping onto a shelf and
   wrong for a window this size: it reads as a flinch. --glide eases
   out long and flat, and the distances travelled are small, because a
   big move done quickly is what makes an opening feel cheap. */
.pm{--glide:cubic-bezier(.19,.72,.21,1);}
.pm.is-in .pm__back{animation:pmBack .42s ease backwards;}
.pm.is-in .pm__frame{animation:pmFrame .62s var(--glide) backwards;}
.pm.is-in .pm__stage{animation:pmStage .95s var(--glide) .05s backwards;}
.pm.is-in .pm__thumbs button{animation:pmThumb .5s var(--glide) .14s backwards;}
.pm.is-in .pm__thumbs button:nth-child(2){animation-delay:.19s;}
.pm.is-in .pm__thumbs button:nth-child(3){animation-delay:.24s;}
.pm.is-in .pm__thumbs button:nth-child(4){animation-delay:.29s;}
.pm.is-in .pm__thumbs button:nth-child(n+5){animation-delay:.33s;}
.pm.is-in .pm__sheet{animation:pmSheet .78s var(--glide) .1s backwards;}

@keyframes pmBack{from{opacity:0;}}
@keyframes pmFrame{from{opacity:0;transform:translateY(14px);}}
@keyframes pmStage{from{opacity:0;transform:scale(1.035);}}
@keyframes pmThumb{from{opacity:0;transform:translateY(7px);}}
@keyframes pmSheet{from{opacity:0;transform:translateY(18px);}}

@media(prefers-reduced-motion:reduce){
  .pm.is-in .pm__back,.pm.is-in .pm__frame,.pm.is-in .pm__stage,
  .pm.is-in .pm__thumbs button,.pm.is-in .pm__sheet{animation:none;}
}
.pm__frame::before{content:"";position:absolute;inset:-14px -12px;z-index:1;
  filter:url(#t1);background-color:var(--ink);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;background-blend-mode:soft-light,soft-light;
  box-shadow:0 70px 140px -50px #000;}
.pm__panel{position:relative;z-index:2;flex:1 1 auto;min-height:0;min-width:0;
  max-height:90vh;overflow-y:auto;overscroll-behavior:contain;background:transparent;
  scrollbar-width:thin;scrollbar-color:#2b2a26 transparent;}
.pm__panel::-webkit-scrollbar{width:10px;}
.pm__panel::-webkit-scrollbar-thumb{background:#2b2a26;}
.pm__panel::-webkit-scrollbar-track{background:transparent;}
/* No close button. Click anywhere outside the frame, or press Escape.
   ---- the stage ----
   A fixed 16:9 window on near-black. The art is shown WHOLE inside it
   (contain) - cropping a poster cuts off the title someone drew on
   it - and the trailer plays in this same window instead of being
   parked further down the page. */
/* sticky, so it is still there under the sheet as you read */
.pm__media{position:sticky;top:0;z-index:0;padding:20px 20px 0;}
/* capped, so that on a short screen the picture cannot take the whole
   window and leave no room for the words under it */
/* width:100% is not optional next to aspect-ratio and max-height: left
   out, the box derives its WIDTH from the capped height and the stage
   comes out two thirds as wide as the frame. */
.pm__stage{position:relative;width:100%;aspect-ratio:16/9;max-height:46vh;
  background:#09090a;overflow:hidden;display:grid;place-items:center;
  box-shadow:0 18px 40px -22px #000;}
.pm__stage img{width:100%;height:100%;object-fit:contain;
  filter:saturate(1.06) contrast(1.02);}
.pm__stage iframe,.pm__stage video{position:absolute;inset:0;width:100%;height:100%;
  border:0;background:#000;object-fit:contain;}
/* No torn edge over the picture. It was eating the bottom sixth of the
   artwork, and a photograph has straight edges anyway - the tearing
   belongs to the sheet it is pasted on, which is the frame. */
/* The trailer is not a separate field with its own button: it is one
   more frame in the strip below, marked as the trailer. */
.pm__thumbs{display:flex;gap:9px;flex-wrap:wrap;padding:13px 0 0;}
.pm__thumbs button{position:relative;width:92px;height:56px;padding:0;overflow:hidden;
  cursor:pointer;background:#09090a;opacity:.45;transition:opacity .22s,transform .22s var(--ease);}
.pm__thumbs button:hover{opacity:.85;transform:translateY(-2px);}
.pm__thumbs button[aria-current="true"]{opacity:1;}
.pm__thumbs button[aria-current="true"]::after{content:"";position:absolute;
  left:0;right:0;bottom:0;height:3px;background:var(--sage);filter:url(#t4);}
.pm__thumbs img{width:100%;height:100%;object-fit:cover;}
.pm__thumbs .is-video{display:grid;place-items:center;color:#fff;gap:5px;
  font-family:var(--f-ui);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;}
.pm__thumbs .is-video span{position:relative;z-index:1;display:flex;align-items:center;gap:7px;}
.pm__thumbs .is-video span::before{content:"\25B6";font-size:8px;color:var(--blood-2);}
.pm__thumbs .is-video img{position:absolute;inset:0;opacity:.3;}

/* ---- the sheet that slides over the picture ----
   It rides above the sticky stage and frosts it, so the text sits on
   a blurred version of the artwork rather than on the artwork itself.
   The top edge is torn, so what moves over the photograph reads as a
   page and not as a grey bar. */
/* The leading edge used to be a torn one. Over a photograph that reads
   as a cut — a panel laid down on top, with the picture chopped off
   under it. So the edge is gone entirely: the tint and the blur are on
   a layer of their own, and a mask takes that layer from nothing to
   full over the first hundred and twenty pixels. Nothing is cut; the
   picture simply goes out of focus and darkens as the writing arrives.
   The mask fades the backdrop-filter too, which a gradient background
   on its own could never do. */
.pm__sheet{position:relative;z-index:1;margin-top:10px;}
.pm__sheet::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(13,13,12,.88);
  backdrop-filter:blur(18px) saturate(.88);-webkit-backdrop-filter:blur(18px) saturate(.88);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px);
  mask-image:linear-gradient(180deg,transparent 0,#000 120px);}

/* the writing starts below the fade, where the sheet is solid */
.pm__body{position:relative;z-index:2;padding:76px 36px 22px;}
.pm__tag{font-family:var(--f-ui);font-weight:300;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--sage);}
.pm__body h3{font-size:clamp(26px,3.3vw,38px);font-weight:900;letter-spacing:-.025em;
  margin:10px 0 11px;}
.pm__body > p{color:var(--bone-2);font-size:15px;max-width:62ch;}
.pm__bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:22px;
  flex-wrap:wrap;padding:18px 36px;background:rgba(16,16,16,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 -1px 0 rgba(61,59,53,.35);}
.pm__fine{margin-left:14px;font-family:var(--f-ui);font-weight:300;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);}
#pm-config{margin-left:auto;}
#pm-config[aria-pressed="true"]{color:var(--sage-2);}
#pm-config[aria-pressed="true"]::before{background-color:var(--ink-3);}

/* ---- the config, shown as what it is: a file ----
   Monospace, its own scroll, and the indentation exactly as it was
   typed. Nothing here is highlighted or prettified - a server owner
   reading a config wants to recognise their own file, not a demo. */
.sc-code{padding:0 36px 36px;}
.sc-code__h{display:flex;align-items:center;gap:16px;padding:0 0 11px;}
.sc-code__n{font-family:var(--f-ui);font-weight:300;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sage);}
.sc-code__c{position:relative;isolation:isolate;margin-left:auto;
  font-family:var(--f-ui);font-weight:300;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-2);padding:7px 14px 6px;line-height:1;
  transition:color .2s;}
.sc-code__c::before{content:"";position:absolute;inset:-2px;z-index:-1;
  background:var(--ink-3);filter:url(#t4);}
.sc-code__c:hover{color:var(--bone);}
.sc-code pre{margin:0;max-height:min(58vh,620px);overflow:auto;
  background:#0a0a09;padding:20px 22px;
  box-shadow:inset 0 0 0 1px rgba(61,59,53,.4);
  scrollbar-width:thin;scrollbar-color:#2b2a26 transparent;}
.sc-code pre::-webkit-scrollbar{width:10px;height:10px;}
.sc-code pre::-webkit-scrollbar-thumb{background:#2b2a26;}
.sc-code code{display:block;white-space:pre;tab-size:4;-moz-tab-size:4;
  font-family:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  font-size:12.5px;line-height:1.62;color:#c8c7bb;}

/* The gallery and the trailer both live on the stage now, so what is
   left down here is only the writing. */
.sc-more{padding:30px 36px 42px;}
.sc-more:empty{display:none;}
.sc-para{color:var(--bone-2);font-size:14.5px;line-height:1.75;margin:0 0 16px;max-width:78ch;}
.sc-secs{margin-top:6px;}
@media(min-width:880px){
  .sc-secs--multi{column-count:2;column-gap:38px;}
  .sc-secs--multi .sc-sec{break-inside:avoid;-webkit-column-break-inside:avoid;}
  .sc-sec ul.cols{column-count:2;column-gap:32px;}
  .sc-sec ul.cols li{break-inside:avoid;-webkit-column-break-inside:avoid;}
}
.sc-sec{margin:0 0 22px;}
.sc-sec__h{font-family:var(--f-ui);font-weight:500;font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--sage);margin:0 0 11px;}
.sc-sec ul{margin:0;padding:0;list-style:none;}
.sc-sec li{position:relative;padding-left:18px;margin:0 0 8px;font-size:14px;
  line-height:1.62;color:var(--bone-2);}
.sc-sec li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:3px;
  background:var(--blood-2);filter:url(#t4);}
.sc-sec p{color:var(--bone-2);font-size:14px;line-height:1.7;margin:0 0 9px;}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 0;}
.chip{position:relative;isolation:isolate;font-family:var(--f-ui);font-weight:300;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-2);
  padding:6px 12px 5px;line-height:1;}
.chip::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--ink-3);
  filter:url(#t4);}
.sc-fine{font-size:12.5px;color:var(--bone-3);margin:24px 0 0;line-height:1.6;}

/* =================== the message that drops in =================== */
.sc-note{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:900;
  isolation:isolate;max-width:min(580px,calc(100vw - 32px));padding:18px 22px;
  color:var(--bone);font-size:14px;line-height:1.56;
  animation:scNote .32s var(--ease) both;}
.sc-note::before{content:"";position:absolute;inset:-4px;z-index:-1;filter:url(#t3);
  background-color:var(--ink-2);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;background-blend-mode:soft-light,soft-light;}
@keyframes scNote{from{opacity:0;transform:translate(-50%,16px);}}
.sc-note b{color:var(--ochre);}
.sc-note--ok b{color:var(--sage-2);}
.sc-note a{color:var(--sage-2);text-decoration:underline;}
.sc-note__x{float:right;margin:-4px -4px 0 14px;opacity:.45;font-size:18px;line-height:1;}
.sc-note__x:hover{opacity:1;}

/* TRAP: the hidden attribute is only display:none at specificity 0, so
   any class rule (.btn{display:inline-flex}, .nav__live{display:flex})
   overrides it and the element stays VISIBLE. */
[hidden]{display:none!important;}

@media(max-width:1040px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .nav__l{display:none;}
  .why__g,.stps{grid-template-columns:1fr;gap:30px;}
  .band{grid-template-columns:repeat(2,1fr);gap:22px;}
  .ribbon__b{height:158px;}.ribbon__f{height:166px;}
  .notice{padding:40px 24px 36px;}
  .pm__body{padding-inline:22px;}
  .pm__bar,.sc-more{padding-inline:22px;}
}
/* The top bar is the one place where nothing may wrap. On a phone the
   brand plus two buttons do not fit, so the pieces that exist
   elsewhere step aside: Discord is in the footer, the badge is a
   detail. */
@media(max-width:760px){
  .nav__live,.nav .nav__r [data-discord]{display:none!important;}
}
@media(max-width:620px){
  :root{--gut:18px;}
  .wide{display:none;}
  .nav__in{gap:12px;padding-inline:16px;}
  .brand img{width:32px;height:32px;}
  .brand b{font-size:15px;}
  .btn{padding:13px 16px 11px;letter-spacing:.14em;}
  .grid{grid-template-columns:1fr;}
  .find{margin-left:0;width:100%;}
  .banner__in{padding-block:104px 32px;}
  .ledge{padding:20px 18px 22px;}
  .ledge__r{width:100%;justify-content:space-between;}
  .sec__n::after{content:"";}
}


/* ===== adaugat pentru panou: aceleasi piese ca in magazin ===== */
body{padding-top:0}
.nav{position:sticky}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
main{padding:34px 0 90px}
.head{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:0 0 30px}
.head h1{font-family:var(--f-head);font-weight:900;font-size:clamp(28px,3.3vw,40px);
  letter-spacing:-.022em;margin:6px 0 0}
.head .rip{color:var(--blood-2);width:84px;margin-top:14px}
.head .n{margin-left:auto;font-family:var(--f-ui);font-weight:300;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--bone-3);text-align:right}
.head .n b{display:block;font-family:var(--f-head);font-weight:700;font-size:30px;
  letter-spacing:0;color:var(--ochre);font-variant-numeric:tabular-nums}

.find{position:relative;width:min(260px,34vw)}
.find input{width:100%;background:none;border:0;border-bottom:1px solid var(--ink-3);
  color:var(--bone);font-family:var(--f-ui);font-weight:300;font-size:12px;
  letter-spacing:.16em;padding:10px 2px 8px 22px}
.find input::placeholder{color:var(--bone-3)}
.find input:focus{outline:none;border-bottom-color:var(--sage)}

/* plata resursei: numele in centru, ca la pachetele fara imagine */
.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px}
.tile .plate{aspect-ratio:16/10}
.plate b{font-family:var(--f-head);font-weight:700;font-size:20px;letter-spacing:-.01em;
  text-transform:none;color:var(--bone);display:block;margin-bottom:10px}
.plate em{font-style:normal;font-family:var(--f-body);font-size:13px;line-height:1.55;
  color:var(--bone-3);letter-spacing:0;text-transform:none;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.plate span{display:grid;gap:0;padding:0 26px}
.tile__p.muted{color:var(--bone-3);font-family:var(--f-ui);font-weight:300;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase}

/* fisa de server: o foaie de hartie, ca .notice din magazin */
.sheet-card{position:relative;isolation:isolate;padding:28px 30px;margin-bottom:26px}
.sheet-card::before{content:"";position:absolute;inset:-5px;z-index:-1;filter:url(#t2);
  background-color:var(--ink);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;background-blend-mode:soft-light,soft-light;
  box-shadow:inset 0 1px 0 rgba(255,245,225,.07),0 0 0 1.5px rgba(61,59,53,.5)}
.sheet-card h3{font-family:var(--f-head);font-weight:700;font-size:21px}
.sc__h{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sc__h .btn{margin-left:0}
.sc__acts{margin-left:auto;display:flex;gap:10px}
.facts{display:flex;gap:30px;flex-wrap:wrap;margin-top:14px}
.facts div{display:grid;gap:3px}
.facts span{font-family:var(--f-ui);font-weight:300;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-3)}
.facts b{font-family:var(--f-ui);font-weight:300;font-size:14px;letter-spacing:.05em;
  color:var(--bone-2);font-variant-numeric:tabular-nums}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 22px;
  margin-top:22px;padding-top:20px;border-top:2px solid var(--ink-3)}
.mod{display:flex;align-items:center;gap:11px;font-family:var(--f-ui);font-weight:300;
  font-size:13px;letter-spacing:.05em;color:var(--bone-2);cursor:pointer}
.mod i{width:28px;height:15px;flex:none;border:1px solid var(--ink-3);background:rgba(0,0,0,.5);
  position:relative}
.mod i::after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;background:var(--bone-3)}
.mod.off{color:#e8a08f}
.mod.off i{border-color:rgba(157,42,28,.7);background:rgba(157,42,28,.28)}
.mod.off i::after{left:auto;right:2px;background:var(--blood-2)}

/* dialog, pe acelasi tipar de hartie */
dialog{border:0;background:none;padding:0;color:var(--bone);width:min(560px,92vw)}
dialog::backdrop{background:rgba(3,3,2,.82)}
.dlg{position:relative;isolation:isolate;padding:34px 34px 28px}
.dlg::before{content:"";position:absolute;inset:-6px;z-index:-1;filter:url(#t1);
  background-color:var(--ink);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;background-blend-mode:soft-light,soft-light;
  box-shadow:inset 0 1px 0 rgba(255,245,225,.08),0 0 0 1.5px rgba(61,59,53,.65)}
.dlg h2{font-family:var(--f-head);font-weight:900;font-size:26px;margin:8px 0 0}
.dlg .rip{color:var(--blood-2);width:76px;margin:14px 0 22px}
.dlg .label{display:block;margin:16px 0 7px}
.dlg input[type=text],.dlg textarea{width:100%;background:rgba(0,0,0,.45);
  border:1px solid var(--ink-3);color:var(--bone);font-family:var(--f-ui);font-weight:300;
  font-size:14px;letter-spacing:.05em;padding:12px 14px}
.dlg textarea{font-family:var(--f-body);font-size:14.5px;letter-spacing:0;line-height:1.6;resize:vertical}
.dlg input:focus,.dlg textarea:focus{outline:none;border-color:var(--sage)}
.sw-line{display:flex;align-items:center;gap:12px;margin-top:20px;cursor:pointer;
  font-family:var(--f-ui);font-weight:300;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-2)}
.sw-line input{appearance:none;width:16px;height:16px;margin:0;background:rgba(0,0,0,.5);
  border:1px solid var(--ink-3);position:relative;cursor:pointer}
.sw-line input:checked{background:var(--sage);border-color:var(--sage)}
.sw-line input:checked::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border-right:2px solid #0d1208;border-bottom:2px solid #0d1208;transform:rotate(45deg)}
.dlg__acts{display:flex;gap:10px;align-items:center;margin-top:28px}
.dlg__acts .fill{flex:1}
.btn--off{color:#d8907f}
.btn--off::before{box-shadow:inset 0 1px 0 rgba(255,200,170,.12),0 0 0 1.5px rgba(157,42,28,.6)}
.btn--off:hover::before{background-color:rgba(157,42,28,.3)}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.5)}
::-webkit-scrollbar-thumb{background:#33312c;border:2px solid var(--void)}
::-webkit-scrollbar-thumb:hover{background:var(--fringe)}
*{scrollbar-width:thin;scrollbar-color:#3d3b35 transparent}

@media(max-width:760px){
  .nav__in{flex-wrap:wrap;gap:12px}
  .find{width:100%;order:4}
  .head .n{margin-left:0;text-align:left}
}

/* bara: butoane mai mici */
.nav__in{padding:10px var(--gut)}
.nav__r{gap:10px}
.nav__r .btn{font-size:10.5px;letter-spacing:.16em;padding:9px 13px 8px}
.brand b{font-size:15px}
.brand i{font-size:9px}
.nav__l{gap:22px;font-size:11px}

/* fara cap de pagina: continutul incepe direct sub bara */
main{padding-top:26px}
.tabs{margin-bottom:30px}
.sec__n::after{content:""}

/* filtrele pe aceeasi linie cu titlul sectiunii */
.sec__h{flex-wrap:wrap;gap:16px 20px;margin-bottom:22px}
.sec__h h3{order:1}
.sec__h .tabs{order:2;margin:0;gap:9px}
.sec__h::after{order:3}
.sec__h .sec__n{order:4}
.sec__h .tab{font-size:10.5px;letter-spacing:.16em;padding:9px 13px 7px}

/* ===== dialog: foaie rupta, compacta, campuri inserate ===== */
dialog{width:min(430px,92vw);overflow:visible}
.dlg{padding:26px 28px 22px;overflow:visible}
.dlg::before{inset:-7px;filter:url(#t1);
  background-color:var(--ink-2);
  background-image:var(--tex-stain),var(--tex-fiber);
  background-size:700px 700px,260px 260px;background-blend-mode:soft-light,soft-light;
  box-shadow:inset 0 1px 0 rgba(255,245,225,.1),0 0 0 1.5px rgba(61,59,53,.75),0 26px 60px -24px #000}
.dlg__top{margin-bottom:18px}
.dlg h2{font-size:22px;font-weight:700;margin:4px 0 0;letter-spacing:-.01em}

.f{display:flex;align-items:center;gap:14px;padding:11px 0;
  border-bottom:1px solid rgba(61,59,53,.5)}
.f .label{flex:none;width:112px;margin:0}
.f input[type=text],.f textarea{flex:1;min-width:0;background:none;border:0;padding:0;
  color:var(--bone);font-family:var(--f-ui);font-weight:300;font-size:14px;letter-spacing:.05em}
.f input[type=text]:focus,.f textarea:focus{outline:none;color:#fff}
.f--log{align-items:flex-start;border-bottom:0;padding-bottom:0}
.f--log .label{padding-top:3px}
.f--log textarea{font-family:var(--f-body);font-size:14px;letter-spacing:0;line-height:1.55;
  resize:none;overflow:hidden}
.f--sw{cursor:pointer}
.f--sw input{appearance:none;width:34px;height:17px;margin:0;flex:none;cursor:pointer;
  background:rgba(0,0,0,.55);border:1px solid rgba(61,59,53,.9);position:relative}
.f--sw input::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;
  background:var(--bone-3);transition:left .15s,background .15s}
.f--sw input:checked{border-color:var(--sage)}
.f--sw input:checked::after{left:19px;background:var(--sage)}
.dlg__acts{margin-top:22px}
.dlg__acts .btn{font-size:10.5px;padding:9px 14px 8px}

/* dialog: mai ingust, mai inalt, fara grana de hartie */
dialog{width:min(344px,92vw)}
.dlg{padding:30px 26px 24px}
.dlg::before{background-image:none;background-color:#141413;
  box-shadow:inset 0 1px 0 rgba(255,245,225,.07),0 0 0 1.5px rgba(61,59,53,.8),0 30px 70px -26px #000}
.dlg__top{margin-bottom:22px}
.f{padding:13px 0;flex-wrap:wrap}
.f .label{width:100%}
.f input[type=text]{width:100%;flex:none;font-size:15px}
.f--sw{flex-wrap:nowrap}
.f--sw .label{width:auto;flex:1}
.f--log textarea{width:100%;min-height:92px}
.dlg__acts{margin-top:26px}

/* fundalul dialogului prinde clicul; foaia nu */
dialog{padding:0;border:0;background:none}

/* resursele serverului: buton cu motiv dedesubt */
.mods{gap:14px 22px}
.mod{display:grid;grid-template-columns:auto 1fr;gap:4px 11px;align-items:center;
  background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font-family:var(--f-ui);font-weight:300;font-size:13px;letter-spacing:.05em;color:var(--bone-2)}
.mod:hover .mod__n{color:var(--bone)}
.mod:focus-visible{outline:2px solid var(--sage-2);outline-offset:4px}
.mod__n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod__r{grid-column:2;font-family:var(--f-body);font-size:12.5px;letter-spacing:0;
  color:#c98775;line-height:1.4}
.f__ro{font-family:var(--f-ui);font-weight:300;font-size:15px;letter-spacing:.05em;color:var(--bone)}
#dban .dlg__acts{margin-top:24px}

/* ===== fisa de server, asezata pe doua coloane ===== */
.srv-card{padding:0;margin-bottom:30px}
.srv__h{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px 26px;border-bottom:2px solid var(--ink-3)}
.srv__h h3{order:2;flex:1;min-width:0;font-size:20px}
.srv__acts{order:3;display:flex;gap:9px}
.srv__acts .btn{font-size:10px;padding:8px 12px 7px}

.st{order:1;font-family:var(--f-ui);font-weight:300;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:6px 11px 5px;line-height:1;white-space:nowrap;
  border:1px solid}
.st--on{color:var(--sage-2);border-color:rgba(138,160,111,.5)}
.st--idle{color:var(--bone-3);border-color:rgba(99,106,96,.45)}
.st--off{color:#e8a08f;border-color:rgba(157,42,28,.6);background:rgba(157,42,28,.12)}

.srv__body{display:grid;grid-template-columns:240px minmax(0,1fr)}
.srv__facts{margin:0;padding:22px 26px;border-right:2px solid var(--ink-3);display:grid;
  gap:16px;align-content:start}
.srv__facts div{display:grid;gap:3px}
.srv__facts dt{font-family:var(--f-ui);font-weight:300;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-3)}
.srv__facts dd{margin:0;font-family:var(--f-ui);font-weight:300;font-size:14px;
  letter-spacing:.05em;color:var(--bone);font-variant-numeric:tabular-nums}

.srv__mods{padding:16px 26px 20px;display:grid;gap:0;align-content:start}
.srv__modsh{display:flex;justify-content:space-between;align-items:center;
  padding:0 0 10px;border-bottom:1px solid rgba(61,59,53,.45);margin-bottom:4px}
.mod{display:grid;grid-template-columns:auto 1fr auto;gap:2px 13px;align-items:center;
  padding:11px 0;border-bottom:1px solid rgba(61,59,53,.28);width:100%}
.mod:last-child{border-bottom:0}
.mod:hover{background:rgba(255,245,225,.025)}
.mod__st{font-family:var(--f-ui);font-weight:300;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-3);justify-self:end}
.mod.off .mod__st{color:#c98775}
.mod__r{grid-column:2/4;font-family:var(--f-body);font-size:12.5px;letter-spacing:0;
  color:#b5786a;line-height:1.4}

@media(max-width:820px){
  .srv__body{grid-template-columns:1fr}
  .srv__facts{border-right:0;border-bottom:2px solid var(--ink-3);
    grid-template-columns:repeat(2,1fr)}
  .srv__h h3{order:2;flex:1 1 100%}
  .srv__acts{order:4;width:100%}
}

/* ===== servere: 5 pe rand, un rand pe ecran, scroll in card ===== */
.sgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;
  grid-auto-rows:calc(100dvh - 230px);align-items:stretch}
.srv-card{margin:0;padding:0;display:flex;flex-direction:column;min-height:0}
.srv__h{display:block;padding:16px 18px 14px;border-bottom:2px solid var(--ink-3)}
.srv__ttl{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.srv__ttl h3{flex:1;min-width:0;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srv__facts{display:grid;gap:8px;margin:0;padding:0;border:0}
.srv__facts div{display:flex;align-items:baseline;gap:10px}
.srv__facts dt{flex:none;width:62px}
.srv__facts dd{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.srv__modsh{display:flex;justify-content:space-between;align-items:center;
  padding:11px 18px;border-bottom:1px solid rgba(61,59,53,.45);flex:none}
.srv__mods{flex:1;min-height:0;overflow-y:auto;padding:4px 18px 8px;display:block}
.mod{padding:10px 0;grid-template-columns:auto 1fr}
.mod__st{display:none}
.mod__r{grid-column:2}
.srv__f{flex:none;display:flex;gap:8px;padding:12px 18px;border-top:2px solid var(--ink-3)}
.srv__f .btn{flex:1;font-size:9.5px;letter-spacing:.14em;padding:8px 6px 7px}

@media(max-width:1500px){.sgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1180px){.sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:380px}}
@media(max-width:600px){.sgrid{grid-template-columns:1fr;grid-auto-rows:360px}}

/* carduri de server mai inalte: lasa ~6% jos */
.sgrid{grid-auto-rows:calc(100dvh - 170px)}
#p-s{padding-bottom:6vh}

/* fara vigneta care intuneca pagina spre jos */
body::after{display:none}

/* bifa de motiv; comutatorul e semn, nu buton separat */
.mod{grid-template-columns:auto 1fr auto}
.mod i{pointer-events:none}
.mod__ok{justify-self:end;font-size:12px;line-height:1;width:19px;height:19px;
  display:grid;place-items:center;border:1px solid}
.mod__ok.yes{color:var(--sage-2);border-color:rgba(138,160,111,.6)}
.mod__ok.no{color:#e8674d;border-color:rgba(157,42,28,.75);background:rgba(157,42,28,.16)}
.mod__r{grid-column:2/4;color:#b5786a}

/* bifa: doar iconita, fara chenar */
.mod__ok{justify-self:end;width:17px;height:17px;flex:none;display:block;
  fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  background:none;border:0;padding:0}
.mod__ok circle,.mod__ok path{stroke:currentColor}
.mod__ok circle{opacity:.45}
.mod__ok .dotf{fill:currentColor;stroke:none;opacity:1}
.mod__ok.yes{color:var(--sage-2)}
.mod__ok.no{color:#d8604a}

/* comutatorul din rand: fara chenar si fundal, doar un semn in rand */
.mod i{width:7px;height:7px;border:0;background:var(--sage);border-radius:0;
  box-shadow:none;position:static;transform:rotate(45deg);margin-left:2px}
.mod i::after{display:none}
.mod.off i{background:#d8604a}
.mod{padding:11px 0;gap:3px 14px}
.mod__n{color:var(--bone)}
.mod.off .mod__n{color:#e0b3a7}

/* ===== panou: login si cont ===== */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login{width:min(380px,92vw)}
.login .dlg__acts{margin-top:24px}
.d-err{color:#e8a08f;font-family:var(--f-body);font-size:13.5px;margin:10px 0 0}
.cont-form{max-width:420px}
.cont-form .dlg__acts{margin-top:26px}
.notice{position:relative;isolation:isolate;padding:13px 17px;margin:0 0 22px;
  font-family:var(--f-ui);font-weight:300;letter-spacing:.06em;color:var(--bone)}
.notice::before{content:"";position:absolute;inset:-3px;z-index:-1;filter:url(#t3);
  background-color:var(--ink-2);box-shadow:0 0 0 1.5px rgba(138,160,111,.45)}
.notice.error::before{box-shadow:0 0 0 1.5px rgba(157,42,28,.75)}
.cell{min-width:0}
.cell[hidden]{display:none}
.cell .tile{cursor:pointer}
.cell--nou .tile__m{box-shadow:0 0 0 1.5px rgba(138,160,111,.6),0 16px 34px -20px #000}
.nav__l a{cursor:pointer}

/* latime de lucru mai mare decat in magazin: incap 5 pe rand */
:root{--wrap:1760px}
.nav__in{max-width:var(--wrap)}
.grid{grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}