/* ============================================================
   INDI STRAPS — Materialien (textures + page styles)
   loaded after styles.css
   ============================================================ */

/* ---- procedural material textures ---- */
.tex{ background-color:var(--c, #999); position:relative; }
.tex--canvas{
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.13) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 4px);
  background-position:0 0, 0 0, 0 2px, 2px 0;
}
.tex--suede{
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.22), transparent 55%),
    radial-gradient(rgba(255,255,255,.10) .5px, transparent .6px),
    radial-gradient(rgba(0,0,0,.13) .5px, transparent .6px);
  background-size:100% 100%, 100% 100%, 3px 3px, 4px 4px;
  background-position:0 0, 0 0, 0 0, 1px 2px;
}

/* ---- page intro ---- */
.mhero{ padding-block:clamp(2rem,4.5vw,3.5rem) clamp(1.5rem,3vw,2.4rem); border-bottom:2px solid var(--ink); }
.mhero__grid{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:2.4rem; align-items:end; }
.mhero h1{ font-size:clamp(2rem,5.2vw,4.4rem); margin:0.5rem 0 0; }
.mhero h1 .outline{ color:transparent; -webkit-text-stroke:2px var(--ink); }
.mhero__lead{ max-width:42ch; color:var(--ink-2); font-size:1rem; font-weight:500; }
.mhero__lead p{ margin:0 0 0.8rem; }

/* ---- atelier (interactive showcase) ---- */
.atelier{ padding-block:clamp(2rem,4vw,3rem); border-bottom:2px solid var(--ink); }
.atelier__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:stretch; }

.studio{ display:flex; flex-direction:column; gap:0.7rem; }

/* view switcher */
.viewtabs{ display:flex; gap:0; border:2px solid var(--ink); }
.viewtabs button{ flex:1; background:transparent; border:0; border-right:2px solid var(--ink); padding:0.6em 0.3em; font-family:var(--font-mono); text-transform:uppercase; font-size:0.6rem; font-weight:700; letter-spacing:0.03em; transition:background .15s,color .15s; white-space:nowrap; }
.viewtabs button:last-child{ border-right:0; }
.viewtabs button:hover{ background:var(--line-soft); }
.viewtabs button[aria-pressed="true"]{ background:var(--ink); color:var(--accent); }

.studio__band{
  position:relative; flex:1 1 auto; min-height:340px; border:2px solid var(--ink);
  background:var(--paper); overflow:hidden; box-shadow:6px 6px 0 var(--ink);
}
.studio__band::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(transparent 27px,var(--line-soft) 28px) 0 0/100% 28px,linear-gradient(90deg,transparent 27px,var(--line-soft) 28px) 0 0/28px 100%;
  opacity:.55;
}
/* views: only the active one shows */
.view{ position:absolute; inset:0; z-index:1; display:none; }
.studio__band[data-view="cgi"]     .view--cgi{ display:grid; place-items:center; }
.studio__band[data-view="macro"]   .view--macro{ display:block; }
.studio__band[data-view="video"]   .view--video{ display:block; }
.studio__band[data-view="details"] .view--details{ display:grid; place-items:center; }
.studio__chip{ position:absolute; z-index:3; top:12px; left:12px; background:var(--ink); color:var(--paper); padding:0.38em 0.65em; font-family:var(--font-mono); font-size:0.58rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; }

.studio__disc{ position:absolute; inset:0; margin:auto; width:min(58%,250px); aspect-ratio:1; border-radius:50%; transition:background .4s;
  background:radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--accent) 70%, white), var(--accent) 58%, var(--accent-deep) 100%);
  box-shadow:0 30px 60px -18px color-mix(in srgb, var(--accent) 60%, transparent);
}
.view--cgi::after{ content:""; position:absolute; z-index:1; bottom:13%; left:50%; transform:translateX(-50%); width:46%; height:5%; border-radius:50%; background:radial-gradient(ellipse, rgba(12,12,13,.3), transparent 70%); filter:blur(4px); }
.view--cgi img{ position:relative; z-index:2; width:auto; max-width:none; max-height:min(58vw,330px); transition:filter .45s ease; filter:var(--bandFilter, none) drop-shadow(0 18px 26px rgba(12,12,13,.3)); }

/* macro still */
.view--macro .tex{ position:absolute; inset:0; }
.view__badge{ position:absolute; z-index:2; bottom:12px; right:12px; background:color-mix(in srgb,var(--ink) 88%, transparent); color:var(--paper); font-family:var(--font-mono); font-size:0.56rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:0.32em 0.55em; }

/* macro video */
.viewvid__tex{ position:absolute; inset:0; background-size:200% 200% !important; }
.studio__band[data-view="video"].is-playing .viewvid__tex{ animation:texpan 9s linear infinite; }
@keyframes texpan{ 0%{ background-position:0% 0%; } 50%{ background-position:100% 100%; } 100%{ background-position:0% 0%; } }
.viewvid__scan{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.10) 48%, transparent 52%); background-size:100% 220%; }
.studio__band[data-view="video"].is-playing .viewvid__scan{ animation:scan 3.2s linear infinite; }
@keyframes scan{ from{ background-position:0 -60%; } to{ background-position:0 160%; } }
.viewvid__play{ position:absolute; z-index:3; inset:0; margin:auto; width:64px; height:64px; border:2px solid var(--paper); background:color-mix(in srgb,var(--ink) 70%, transparent); color:var(--paper); border-radius:50%; display:grid; place-items:center; transition:transform .15s, background .15s; }
.viewvid__play svg{ width:26px; height:26px; margin-left:3px; }
.viewvid__play:hover{ transform:scale(1.08); background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.studio__band[data-view="video"].is-playing .viewvid__play{ opacity:0; pointer-events:none; }
.viewvid__bar{ position:absolute; z-index:3; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:0.5rem; padding:0.5em 0.7em; background:color-mix(in srgb,var(--ink) 88%, transparent); color:var(--paper); font-family:var(--font-mono); font-size:0.54rem; letter-spacing:0.05em; text-transform:uppercase; font-weight:700; }
.viewvid__live{ color:var(--accent); }
.studio__band[data-view="video"]:not(.is-playing) .viewvid__live{ opacity:.4; }

/* details view */
.view--details{ background:var(--paper); }
.vdet{ position:relative; z-index:1; width:100%; padding:clamp(1rem,3vw,1.6rem); }
.vdet__row{ display:flex; justify-content:space-between; gap:1rem; padding:0.6rem 0; border-top:1px solid var(--line-soft); }
.vdet__row:first-child{ border-top:0; }
.vdet__k{ font-family:var(--font-mono); text-transform:uppercase; font-size:0.6rem; letter-spacing:0.06em; color:var(--muted); font-weight:700; flex:none; }
.vdet__v{ font-size:0.9rem; font-weight:600; text-align:right; }
.vdet__specs{ display:flex; gap:1.2rem; margin-top:1rem; padding-top:1rem; border-top:2px solid var(--ink); }
.vdet__s b{ display:block; font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.05rem; line-height:1; }
.vdet__s span{ font-family:var(--font-mono); font-size:0.54rem; letter-spacing:0.07em; color:var(--muted); text-transform:uppercase; }

.studio__macros{ display:flex; gap:0.7rem; }
.studio__macro{ flex:1; position:relative; aspect-ratio:2.4; border:2px solid var(--ink); overflow:hidden; }
.studio__macro .lab{ position:absolute; bottom:0; left:0; right:0; background:color-mix(in srgb, var(--ink) 88%, transparent); color:var(--paper); font-family:var(--font-mono); font-size:0.54rem; letter-spacing:0.06em; text-transform:uppercase; padding:0.32em 0.5em; }

/* picker */
.picker{ display:flex; flex-direction:column; }
.picker__eyebrow{ margin-bottom:0.5rem; }
.picker h2{ font-size:clamp(1.5rem,3vw,2.3rem); margin:0 0 0.9rem; }

/* segmented material filter */
.seg{ display:flex; gap:0; border:2px solid var(--ink); margin-bottom:1.2rem; }
.seg button{ flex:1; background:transparent; border:0; border-right:2px solid var(--ink); padding:0.7em 0.4em; font-family:var(--font-mono); text-transform:uppercase; font-size:0.66rem; font-weight:700; letter-spacing:0.04em; transition:background .15s,color .15s; }
.seg button:last-child{ border-right:0; }
.seg button:hover{ background:var(--line-soft); }
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--accent); }

/* selected info */
.selinfo{ border-bottom:2px solid var(--line); padding-bottom:1rem; margin-bottom:1rem; }
.selinfo__top{ display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap; }
.selinfo__nm{ font-family:var(--font-display); font-weight:var(--display-weight); text-transform:uppercase; font-size:1.3rem; letter-spacing:-0.01em; line-height:1.1; white-space:nowrap; }
.selinfo__mat{ font-family:var(--font-mono); text-transform:uppercase; font-size:0.58rem; font-weight:700; letter-spacing:0.06em; border:1.5px solid var(--ink); color:var(--ink); background:transparent; padding:0.32em 0.6em; border-radius:999px; }
.selinfo__coll{ font-family:var(--font-mono); text-transform:uppercase; font-size:0.6rem; letter-spacing:0.1em; color:var(--accent-deep); font-weight:700; margin-top:0.3rem; }
.selinfo__desc{ color:var(--ink-2); margin:0.5rem 0 0; font-size:0.95rem; }
.selinfo__tag{ display:inline-block; margin-top:0.7rem; font-family:var(--font-mono); text-transform:uppercase; font-size:0.6rem; font-weight:700; letter-spacing:0.04em; border:1.5px solid var(--ink); border-radius:999px; padding:0.32em 0.7em; }

.swatchwall__cl{ font-family:var(--font-mono); text-transform:uppercase; font-size:0.58rem; letter-spacing:0.12em; color:var(--muted); font-weight:700; margin-bottom:0.6rem; }
.swatchwall{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.cway{ width:34px; height:34px; border:2px solid var(--ink); padding:0; cursor:pointer; position:relative; transition:transform .14s; }
.cway:hover{ transform:translateY(-3px); }
.cway[aria-pressed="true"]{ outline:2px solid var(--ink); outline-offset:3px; }
.cway[aria-pressed="true"]::after{ content:""; position:absolute; inset:0; border:2px solid var(--paper); }
.picker__cta{ margin-top:auto; padding-top:1.3rem; }

/* ---- catalog ---- */
.catalog{ padding-block:clamp(2.2rem,4.5vw,4rem); }
.catalog__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.catalog__head h2{ font-size:clamp(1.8rem,4vw,3rem); margin:0.3rem 0 0; }
.filterbar{ display:flex; gap:0.5rem; }
.filterbar button{ background:rgba(255,255,255,.6); border:1.5px solid color-mix(in srgb,var(--accent) 26%, var(--line)); border-radius:999px; padding:0.55em 1.1em; font-family:var(--font-mono); text-transform:uppercase; font-size:0.66rem; font-weight:700; letter-spacing:0.04em; transition:background .15s,color .15s,border-color .15s; }
.filterbar button:hover{ background:color-mix(in srgb,var(--accent) 8%, white); }
.filterbar button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

.catcoll{ margin-top:clamp(1.8rem,3.5vw,2.6rem); }
.catcoll.is-hidden{ display:none; }
.catcoll__name{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.1em; font-size:0.78rem; font-weight:700; color:var(--ink); padding-bottom:0.7rem; margin-bottom:1rem; border-bottom:1.5px solid color-mix(in srgb,var(--accent) 28%, var(--line)); display:flex; align-items:center; gap:0.55em; }
.catcoll__name::before{ content:""; width:16px; height:3px; background:var(--accent); display:block; }
.catcoll__name .ct{ font-family:var(--font-mono); font-size:0.6rem; color:var(--muted); letter-spacing:0.06em; margin-left:auto; font-weight:700; }
.mgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.9rem; }
.mcard{ display:flex; border:1.5px solid color-mix(in srgb,var(--accent) 22%, var(--line)); background:rgba(255,255,255,.72); backdrop-filter:blur(6px); border-radius:14px; overflow:hidden; transition:transform .16s, box-shadow .16s, border-color .16s; cursor:pointer; }
.mcard.is-hidden{ display:none; }
.mcard:hover{ transform:translateY(-4px); box-shadow:0 12px 28px -8px color-mix(in srgb,var(--accent) 30%, transparent); border-color:color-mix(in srgb,var(--accent) 45%, var(--line)); }
.mcard__sw{ width:88px; flex:none; align-self:stretch; }
.mcard__body{ padding:0.8rem 0.95rem 0.85rem; display:flex; flex-direction:column; gap:0.34rem; min-width:0; }
.mcard__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:0.5rem; }
.mcard__nm{ font-family:var(--font-display); font-weight:var(--display-weight); text-transform:uppercase; font-size:0.92rem; letter-spacing:-0.01em; line-height:1.12; }
.mcard__mat{ font-family:var(--font-mono); text-transform:uppercase; font-size:0.54rem; font-weight:700; letter-spacing:0.05em; color:var(--accent-deep); background:color-mix(in srgb,var(--accent) 13%, white); border-radius:999px; padding:0.3em 0.6em; white-space:nowrap; flex:none; margin-top:0.1em; }
.mcard__desc{ color:var(--muted); font-size:0.78rem; line-height:1.35; margin:0; }
.mcard__tag{ margin-top:auto; font-family:var(--font-mono); text-transform:uppercase; font-size:0.56rem; font-weight:700; letter-spacing:0.03em; color:var(--accent-deep); }

.catempty{ padding:3rem 1rem; text-align:center; color:var(--muted); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.06em; }

/* ---- care strip (light accent panel) ---- */
.care{ background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 7%, white), color-mix(in srgb,var(--accent) 12%, white)); color:var(--ink); padding-block:clamp(2.6rem,5vw,4.2rem); border-top:1.5px solid color-mix(in srgb,var(--accent) 22%, var(--line)); }
.care .eyebrow{ color:var(--accent-deep); }
.care h2{ color:var(--ink); font-size:clamp(1.8rem,4vw,3rem); margin:0.5rem 0 0; max-width:18ch; }
.care__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:2rem; }
.care__c{ background:rgba(255,255,255,.6); backdrop-filter:blur(6px); border:1.5px solid color-mix(in srgb,var(--accent) 20%, var(--line)); border-radius:14px; border-top:3px solid var(--accent); padding:1.3rem 1.4rem 1.4rem; }
.care__c .n{ font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; color:var(--accent-deep); text-transform:uppercase; }
.care__c h4{ font-family:var(--font-display); font-weight:var(--display-weight); text-transform:uppercase; font-size:1.25rem; margin:0.5rem 0 0.5rem; letter-spacing:-0.01em; }
.care__c p{ color:var(--ink-2); margin:0; font-size:0.95rem; }

@media (max-width:980px){
  .atelier__grid{ grid-template-columns:1fr; gap:1.6rem; }
  .studio{ max-width:460px; }
  .mhero__grid{ grid-template-columns:1fr; }
  .mgrid{ grid-template-columns:repeat(2,1fr); }
  .care__grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .mgrid{ grid-template-columns:1fr; }
  .studio__macros{ flex-direction:column; }
}