@font-face{font-family:'UnifrakturMaguntia';src:url('fonts/unifraktur-maguntia.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Grenze Gotisch';src:url('fonts/grenze-gotisch.woff') format('woff');font-weight:100 900;font-display:swap}
@font-face{font-family:'Grenze';src:url('fonts/grenze.woff') format('woff');font-weight:100 900;font-display:swap}
  :root{
    --ink:#050505;        /* page background */
    --ink-2:#0e0d0c;      /* alt section background */
    --panel:#111010;      /* dark panels */
    --line:#26231f;       /* hairlines */
    --line-2:#3a352f;
    --bone:#e8e2d4;       /* main text */
    --plate:#ffffff;      /* white tiles so Printify mockups & white-background art blend in */
    --muted:#a39a8b;
    --muted-2:#8a8174;
    --accent:#f2efe8;     /* monochrome to match the logo; try #9fd36b for alien green */
    --display:'Grenze Gotisch', 'Times New Roman', serif;
    --mono:'Grenze', Georgia, serif;
    --wrap:1360px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--mono);-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:var(--bone);text-decoration:none}
  a:hover{color:#fff}
  .wrap{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px}
  .eyebrow{font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* Announcement bar */
  .announce{background:var(--accent);color:var(--ink);overflow:hidden;white-space:nowrap;height:34px;display:flex;align-items:center}
  .announce__track{display:inline-flex;gap:48px;padding-left:24px;font-size:14px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;animation:crawl 40s linear infinite}
  @keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.announce__track{animation:none}}

  /* Header */
  .header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;background:rgba(10,10,10,.94);backdrop-filter:blur(6px)}
  .header__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;padding-bottom:20px}
  .logo{display:flex;align-items:center;gap:12px}
  .logo__img{height:72px;width:auto}
  .logo__word{height:46px;width:auto}
  .nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:14px;letter-spacing:.2em;text-transform:uppercase}
  .icons{display:flex;align-items:center;gap:4px}
  .icon-btn{min-width:44px;height:44px;padding:0 8px;background:none;border:0;color:var(--bone);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px}
  .icon-btn:hover{color:#fff}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 30px;font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;border:1px solid transparent;cursor:pointer}
  .btn--solid{background:var(--bone);color:var(--ink)}
  .btn--solid:hover{background:#fff;color:var(--ink)}
  .btn--ghost{border-color:#5a5248;background:none;color:var(--bone)}
  .btn--ghost:hover{border-color:var(--bone)}
  .btn--accent{background:var(--accent);color:var(--ink);border:0}

  /* Hero */
  .hero{border-bottom:1px solid var(--line)}
  .hero__row{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-top:56px;padding-bottom:64px}
  .hero__copy{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:24px}
  .hero h1{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(46px,6.6vw,88px);line-height:1.08;letter-spacing:.01em}
  .hero p{margin:0;max-width:460px;font-size:17px;line-height:1.7;color:var(--muted)}
  .hero__ctas{display:flex;flex-wrap:wrap;gap:14px;padding-top:8px}
  .hero__art{flex:1.3 1 440px;min-width:0}
  .plate{background:var(--plate);color:#8a8174;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:hidden}
  .plate img{width:100%;height:100%;object-fit:contain;transition:opacity .15s}
  .plate__label{font-size:13px;letter-spacing:.24em;text-transform:uppercase;text-align:center;padding:0 12px}
  .hero__plate{aspect-ratio:4/3;border:10px solid var(--plate);outline:1px solid var(--line-2);outline-offset:8px}

  /* Section heading */
  .section{padding-top:72px;padding-bottom:72px}
  .section__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:36px}
  .section__head h2{margin:0;font-family:var(--display);font-weight:500;font-size:40px;letter-spacing:.01em}
  .link-underline{font-size:14px;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid #5a5248;padding-bottom:4px}

  /* Product grid */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:40px 24px}
  .card{display:flex;flex-direction:column;gap:14px}
  .card__art{position:relative;aspect-ratio:4/5;outline:1px solid transparent;outline-offset:6px;transition:outline-color .2s}
  .card:hover .card__art{outline-color:var(--muted-2)}
  .card__tag{position:absolute;top:12px;left:12px;background:var(--accent);color:var(--ink);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:5px 9px}
  .card__tag--out{background:var(--ink);color:var(--bone)}
  .card__meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
  .card__name{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:.01em}
  .card__kind{font-size:14px;color:var(--muted-2);margin-top:4px}
  .card__price{font-size:16px;white-space:nowrap}

  /* Collection banners */
  .banners{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;padding-bottom:72px}
  .banner{position:relative;aspect-ratio:16/10;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:32px;gap:8px;overflow:hidden}
  .banner:hover{border-color:#5a5248}
  .banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
  .banner__ph{position:absolute;top:24px;right:24px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#4a443c}
  .banner__title{position:relative;font-family:var(--display);font-weight:500;font-size:32px;letter-spacing:.01em}
  .banner .eyebrow{position:relative}

  /* About */
  .about{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2)}
  .about__inner{max-width:820px;margin:0 auto;padding:96px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
  .about__logo{width:min(240px,60vw);height:auto}
  .about__word{width:min(560px,86vw);height:auto;margin-top:-4px}
  .about p{margin:0;font-size:18px;line-height:1.85;color:#b3aa9a}

  /* Newsletter */
  .news{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
  .news h2{margin:0 0 10px;font-family:var(--display);font-weight:500;font-size:34px;letter-spacing:.01em}
  .news p{margin:0;font-size:16px;color:var(--muted)}
  .news form{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 420px;max-width:560px}
  .news input{flex:1 1 240px;height:50px;padding:0 16px;background:var(--panel);border:1px solid var(--line-2);color:var(--bone);font:inherit;font-size:16px}
  .news input:focus{outline:1px solid var(--accent);outline-offset:2px}

  /* Footer */
  .footer{border-top:1px solid var(--line)}
  .footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;padding-top:56px;padding-bottom:32px}
  .footer__col{display:flex;flex-direction:column;gap:12px;font-size:15px}
  .footer__label{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
  .footer__logo{width:110px;height:auto}
  .footer__word{width:220px;max-width:100%;height:auto}
  .footer__note{font-size:14px;line-height:1.7;color:var(--muted-2)}
  .footer__legal{border-top:1px solid #1c1a17;padding-top:20px;padding-bottom:36px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

  @media (max-width:720px){
    .nav{order:3;width:100%;gap:10px 18px}
    .hero__row{padding-top:36px}
    .section__head h2{font-size:32px}
    .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
    .card__meta{flex-direction:column;gap:6px}
    .logo__img{height:52px}
    .logo__word{height:30px}
  }

  /* ---------- Shared additions ---------- */
  .empty-note{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--muted);font-size:16px;line-height:1.7}
  .filters{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
  .filters__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .filters__label{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);margin-right:6px;padding:0;border:0;cursor:default}
  .chip--col{border-style:dashed}
  .chip{height:40px;padding:0 16px;display:inline-flex;align-items:center;border:1px solid var(--line-2);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .chip[aria-current="true"],.chip:hover{border-color:var(--bone);color:var(--bone)}
  .card__art .placeholder{display:flex;flex-direction:column;align-items:center;gap:12px}
  .skeleton .card__art{animation:pulse 1.4s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.6}}

  /* ---------- Cart drawer ---------- */
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
  .scrim.open{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:var(--ink);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .25s ease;z-index:50;display:flex;flex-direction:column}
  .drawer.open{transform:none}
  .drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
  .drawer__title{font-family:var(--display);font-size:28px;letter-spacing:.01em;margin:0}
  .drawer__body{flex:1;overflow:auto;padding:8px 24px}
  .drawer__foot{border-top:1px solid var(--line);padding:20px 24px 28px;display:flex;flex-direction:column;gap:14px}
  .drawer__row{display:flex;justify-content:space-between;font-size:16px}
  .drawer__fine{font-size:13px;color:var(--muted-2);line-height:1.6}
  .line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
  .line__img{width:72px;height:90px;background:var(--plate);object-fit:contain}
  .line__name{font-family:var(--display);font-size:18px;letter-spacing:.01em}
  .line__var{font-size:14px;color:var(--muted-2);margin-top:4px}
  .qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);margin-top:10px}
  .qty button{width:34px;height:34px;background:none;border:0;color:var(--bone);cursor:pointer;font:inherit;font-size:18px}
  .qty span{min-width:28px;text-align:center;font-size:15px}
  .line__right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-size:16px}
  .link-btn{background:none;border:0;color:var(--muted-2);font:inherit;font-size:13px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
  .link-btn:hover{color:var(--bone)}
  .btn[disabled]{opacity:.45;cursor:not-allowed}
  .btn--block{width:100%}
  .error{color:#ff8b7a;font-size:15px;line-height:1.5}

  /* ---------- Product page ---------- */
  .pdp{display:flex;flex-wrap:wrap;gap:56px;padding-top:48px;padding-bottom:88px}
  .pdp__media{flex:1.2 1 460px;min-width:0;display:flex;flex-direction:column;gap:14px}
  .pdp__main{aspect-ratio:1/1}
  .thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
  .thumb{aspect-ratio:1/1;padding:0;border:1px solid transparent;background:var(--plate);cursor:pointer}
  .thumb img{width:100%;height:100%;object-fit:contain}
  .thumb[aria-pressed="true"]{border-color:var(--bone);outline:1px solid var(--bone);outline-offset:2px}
  .pdp__info{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:22px}
  .pdp__info h1{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(36px,4.4vw,54px);line-height:1.08;letter-spacing:.01em}
  .pdp__price{font-size:20px}
  .opt{display:flex;flex-direction:column;gap:10px;border:0;margin:0 0 22px;padding:0}
  .opt legend{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px;padding:0}
  .opt legend b{color:var(--bone);font-weight:400;letter-spacing:.08em;text-transform:none;margin-left:8px}
  .opt__row{display:flex;flex-wrap:wrap;gap:8px}
  .size{min-width:52px;height:44px;padding:0 12px;background:none;border:1px solid var(--line-2);color:var(--bone);font:inherit;font-size:15px;cursor:pointer}
  .size[aria-pressed="true"]{border-color:var(--bone);background:var(--bone);color:var(--ink)}
  .size:disabled{color:#5a5248;text-decoration:line-through;cursor:not-allowed}
  .swatch{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);cursor:pointer;padding:0;position:relative}
  .swatch[aria-pressed="true"]{outline:2px solid var(--bone);outline-offset:3px}
  .pdp__desc{font-size:16px;line-height:1.8;color:#b3aa9a;border-top:1px solid var(--line);padding-top:22px}
  .pdp__desc p{margin:0 0 12px}
  .pdp__desc ul{padding-left:18px;margin:0 0 12px}
  .crumbs{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);padding-top:28px}
  .crumbs a{color:var(--muted-2)} .crumbs a:hover{color:var(--bone)}
  .note{font-size:14px;color:var(--muted-2);line-height:1.6}

  /* ---------- Success page ---------- */
  .done{max-width:640px;margin:0 auto;padding:110px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
  .done h1{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(38px,5vw,58px)}
  .done p{margin:0;color:var(--muted);line-height:1.8}

  /* ---------- Help pages ---------- */
  .page{max-width:760px;padding-top:56px;padding-bottom:96px}
  .page h1{margin:0 0 18px;font-family:var(--display);font-weight:500;font-size:clamp(40px,5vw,58px);letter-spacing:.01em}
  .page h2{margin:42px 0 12px;font-family:var(--display);font-weight:500;font-size:28px;letter-spacing:.01em}
  .page p,.page li{font-size:17px;line-height:1.8;color:#c9c1b3}
  .page p{margin:0 0 14px}
  .page ul,.page ol{margin:0 0 14px;padding-left:20px}
  .page li{margin-bottom:6px}
  .page strong{color:var(--bone);font-weight:500}
  .page a:not(.btn){color:var(--bone);text-decoration:underline;text-underline-offset:3px}
  .page .lead{font-size:20px;color:var(--bone);line-height:1.7}
  .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;margin:28px 0 10px}
  .contact-card{border:1px solid var(--line-2);padding:22px;display:flex;flex-direction:column;gap:10px}
  .contact-big{font-family:var(--display);font-size:24px;letter-spacing:.01em;word-break:break-all}
  .pdp__desc table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:15px}
  .pdp__desc th,.pdp__desc td{border:1px solid var(--line-2);padding:6px 8px;text-align:left}
  .pdp__desc th{color:var(--bone);font-weight:500}

  /* ---------- Back to top ---------- */
  .to-top{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;align-items:center;gap:6px;height:44px;padding:0 16px;background:var(--ink);color:var(--bone);border:1px solid var(--line-2);font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s,border-color .2s}
  .to-top.show{opacity:1;transform:none;pointer-events:auto}
  .to-top:hover{border-color:var(--bone)}
  @media (max-width:720px){.to-top span{display:none}.to-top{width:44px;padding:0;justify-content:center;right:14px;bottom:14px}}

  /* Product page: hover zoom on the main image */
  @media (hover:hover) and (pointer:fine){
    .pdp__main:has(img){cursor:zoom-in}
    .pdp__main img{transition:transform .12s ease-out}
    .pdp__main.zooming{cursor:zoom-out}
    .pdp__main.zoom-off{cursor:zoom-in}
  }
  @media (prefers-reduced-motion:reduce){.pdp__main img{transition:none}}

  /* Home: featured image slideshow (newest products) */
  .hero__plate--show{position:relative;display:block}
  .hero__slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .9s ease;pointer-events:none}
  .hero__slide.on{opacity:1;pointer-events:auto}
  .hero__slide img{width:100%;height:100%;object-fit:contain}
  .hero__dots{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:center;gap:2px}
  .hero__dot{width:22px;height:22px;padding:0;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .hero__dot::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(10,10,10,.28);transition:background .2s,transform .2s}
  .hero__dot[aria-pressed="true"]::before{background:#0a0a0a;transform:scale(1.25)}
  .hero__dot:focus-visible{outline:2px solid #0a0a0a;outline-offset:-2px}
  @media (prefers-reduced-motion:reduce){.hero__slide{transition:none}}

  /* Loading indicator */
  .loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#8a8174}
  .hero__plate--show .loader{position:absolute;inset:0;z-index:0}
  .hero__plate--show .hero__slide{z-index:1}
  .hero__plate--show .hero__dots{z-index:2}
  .loader__star{animation:ko-spin 2.4s linear infinite}
  .loader__text{font-family:var(--display);font-size:24px;letter-spacing:.01em;animation:ko-pulse 1.6s ease-in-out infinite}
  .loader--grid{grid-column:1/-1;padding:4px 0 8px;color:var(--bone)}
  .loader--grid .loader__text{font-size:26px}
  @keyframes ko-spin{to{transform:rotate(360deg)}}
  @keyframes ko-pulse{0%,100%{opacity:1}50%{opacity:.45}}
  @media (prefers-reduced-motion:reduce){.loader__star,.loader__text{animation:none}}

  /* Header: keep logo, menu and cart on one row on wider screens */
  @media (min-width:721px){
    .header__row{flex-wrap:nowrap}
    .logo{flex:0 0 auto}
    .nav{flex:1 1 auto;justify-content:center;gap:6px 20px;letter-spacing:.15em}
    .icons{flex:0 0 auto}
  }
  @media (min-width:721px) and (max-width:1100px){
    .logo__word{height:34px}
    .logo__img{height:58px}
    .nav{gap:4px 16px;font-size:13px;letter-spacing:.12em}
  }

  /* "Fall 2026" headline: Old English blackletter to match the logo */
  .hero h1{font-family:'UnifrakturMaguntia','Grenze Gotisch',serif;font-weight:400;letter-spacing:0;line-height:1.05;font-size:clamp(56px,8vw,108px)}
  .hero__title{line-height:0;margin:4px 0 2px}
  .hero__title img{display:block;width:min(520px,100%);height:auto}
