/* ======================================================================
   Atelier / Ink Channel — "What we do" workflow section
   All selectors are scoped under .atelier-section to avoid collisions
   with landing/style.css. Custom properties are prefixed --at-.
   Fonts are NOT re-declared here; they are loaded by landing/index.html.
====================================================================== */

.atelier-section {
  --at-navy:#0E1320;
  --at-ink:#0A0D15;
  --at-ecru:#E8DCC4;
  --at-ivory:#F6F1E6;
  --at-bone:#D9CFB9;
  --at-burgundy:#5B1A1A;
  --at-charcoal:#2A2A2A;
  --at-gold:#C9A25A;
  --at-gold-deep:#8B6A2E;
  --at-gold-hair:rgba(201,162,90,.30);
  --at-violet: oklch(0.62 0.18 300);
  --at-mono: "JetBrains Mono", ui-monospace, monospace;
  --at-serif: "Oswald", "Impact", "Helvetica Neue", Arial, sans-serif;
  --at-sans: "Inter", system-ui, sans-serif;

  background: var(--at-ink);
  color: var(--at-ivory);
  font-family: var(--at-sans);
  font-weight: 300;
}

.atelier-section *,
.atelier-section *::before,
.atelier-section *::after { box-sizing: border-box; }

/* Override landing/style.css `section { padding + border-top + background }`
   baseline on the inner <section> elements we nest inside .atelier-section.
   The outer .atelier-section keeps its own painted bg; inner sections
   (.preamble / .stage / .tail) need a clean reset so their own paddings win. */
.atelier-section > section{
  padding: 0;
  border-top: 0;
  background: transparent;
}

/* grain — scoped to a wrapper class inside the section, not body */
.atelier-section.grain-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:60;mix-blend-mode:overlay;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.atelier-section{ position: relative; }

/* preamble */
.atelier-section .preamble{padding: 8vh 6vw 5vh;display:flex;flex-direction:column;gap:22px;border-bottom:1px solid rgba(217,207,185,.08);}
.atelier-section .eyebrow{font-family:var(--at-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--at-bone);opacity:.7;}
.atelier-section .eyebrow::before{ content: none; } /* override landing eyebrow pseudo */
.atelier-section .preamble h1{font-family:var(--at-serif);font-weight:500;font-size:clamp(36px,5.4vw,86px);line-height:0.98;letter-spacing:-0.015em;color:var(--at-ivory);margin:0;max-width:24ch;text-wrap:balance;}
.atelier-section .preamble h1 em{font-style:italic;font-weight:400;color:var(--at-ecru);}
.atelier-section .preamble p.sub{font-weight:300;font-size:clamp(14px,1.1vw,17px);line-height:1.55;color:var(--at-bone);max-width:62ch;opacity:.78;margin:0;}

/* stage */
.atelier-section .stage{position:relative;padding: 9vh 4vw 9vh;overflow:hidden;}
.atelier-section .stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 45% 60% at 52% 50%, rgba(91,26,26,.09), transparent 60%),
    radial-gradient(ellipse 30% 40% at 52% 50%, rgba(201,162,90,.06), transparent 60%),
    linear-gradient(to bottom, transparent, rgba(0,0,0,.4));
}
.atelier-section .stage-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  margin-bottom: 34px;
  font-family:var(--at-mono);font-size:10px;letter-spacing:.3em;color:var(--at-bone);opacity:.7;text-transform:uppercase;
}
.atelier-section .stage-head .r{color:var(--at-gold);opacity:.8;}

/* rail: inputs | merge | output */
.atelier-section .rail{
  position:relative;
  display:grid;
  grid-template-columns: minmax(260px, 1fr) 36px minmax(160px, 0.55fr) 36px minmax(340px, 1.7fr);
  align-items:stretch;
  min-height: 580px;
}
.atelier-section .divider{position:relative;display:flex;align-items:stretch;justify-content:center;}
.atelier-section .divider .rule{width:1px;height:100%;background:linear-gradient(to bottom, transparent, var(--at-gold-hair) 18%, var(--at-gold-hair) 82%, transparent);opacity:.35;}

.atelier-section .zone{position:relative;padding: 4px 18px;display:flex;flex-direction:column;min-width:0;z-index:2;}
.atelier-section .zone-head{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font-family:var(--at-mono);font-size:10px;letter-spacing:.32em;color:var(--at-bone);opacity:.85;text-transform:uppercase;
}
.atelier-section .zone-head .num{color:var(--at-gold);}
.atelier-section .zone-head .dot{width:4px;height:4px;border-radius:50%;background:var(--at-gold);opacity:.7;}
.atelier-section .zone-head .rule{flex:1;height:1px;background:var(--at-gold-hair);}

/* INPUTS: brand + trend stacked */
.atelier-section .inputs{gap:22px;display:flex;flex-direction:column;}
.atelier-section .sub-zone{display:flex;flex-direction:column;flex:1;min-height:0;position:relative;}
.atelier-section .sub-zone .row{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:10px;flex:1;min-height:0;}

.atelier-section .card{
  position:relative;
  background:linear-gradient(180deg, rgba(246,241,230,.04), rgba(246,241,230,.015));
  border:1px solid rgba(217,207,185,.10);
  padding:8px 8px 6px;
  opacity:.30;
  transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 1200ms cubic-bezier(.2,.7,.2,1), filter 900ms ease, box-shadow 600ms ease;
  display:flex;flex-direction:column;
}
.atelier-section .card .media{position:relative;flex:1;overflow:hidden;background:#111520;border:1px solid rgba(217,207,185,.08);min-height:0;}
.atelier-section .card .media img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95) contrast(1.02);}
.atelier-section .card .media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(10,13,21,0) 60%, rgba(10,13,21,.35) 100%);mix-blend-mode:multiply;}
.atelier-section .card .cap{margin-top:6px;font-family:var(--at-mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--at-bone);opacity:.55;display:flex;justify-content:space-between;gap:6px;}
.atelier-section .card .cap .side{color:var(--at-gold);opacity:.8;}
.atelier-section .tilt-a{transform:rotate(-0.8deg) translateY(2px);} .atelier-section .tilt-b{transform:rotate(0.6deg);}
.atelier-section .tilt-c{transform:rotate(-0.4deg) translateY(-1px);} .atelier-section .tilt-d{transform:rotate(0.9deg) translateY(1px);}
.atelier-section .tilt-e{transform:rotate(-0.6deg);} .atelier-section .tilt-f{transform:rotate(1.1deg) translateY(-2px);}

.atelier-section .stage.lit .card{opacity:1;}
.atelier-section .stage.final .card{opacity:.42;filter:saturate(.85);}
/* card "bleeds" into ribbon: a tiny gold glow on right edge during ink-flow */
.atelier-section .stage.t-bleed .inputs .card{
  box-shadow: 6px 0 18px -8px rgba(201,162,90,.55);
}
.atelier-section .stage.final .inputs .card{box-shadow:none;}

.atelier-section .pin{position:absolute;top:-4px;left:14px;width:6px;height:6px;border-radius:50%;background:var(--at-gold);box-shadow: 0 0 0 2px rgba(201,162,90,.15), 0 1px 3px rgba(0,0,0,.5);}

/* ===== THE INK CHANNEL ===== */
.atelier-section .channel{
  position:absolute; inset:0; pointer-events:none; z-index:1;
}
.atelier-section .channel .ribbon{
  fill:none;
  stroke: #0A0D15;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(201,162,90,.35)) drop-shadow(0 0 2px rgba(0,0,0,.8));
}
.atelier-section .channel .ribbon.gold-edge{
  stroke: url(#inkGrad);
  mix-blend-mode: screen;
  filter: none;
  opacity: .55;
}

/* ===== line-style variants ===== */
/* Circuit: hard corners, crisp ink, no gold bloom on primary */
.atelier-section .stage[data-line="circuit"] .channel .ribbon{
  stroke-linecap: butt; stroke-linejoin: miter;
  filter: drop-shadow(0 0 1px rgba(201,162,90,.5));
}
.atelier-section .stage[data-line="circuit"] .channel .ribbon.gold-edge{ opacity:.35; }
.atelier-section .stage[data-line="circuit"] .channel .node{
  fill:#E8DCC4; filter: drop-shadow(0 0 3px rgba(232,220,196,.9));
}

/* Double: slimmer primary + parallel hairline twin */
.atelier-section .stage[data-line="double"] .channel .ribbon{
  filter: drop-shadow(0 0 3px rgba(201,162,90,.35));
}
.atelier-section .stage[data-line="double"] .channel .ribbon.gold-edge{ display:none; }
.atelier-section .channel .ribbon.twin{
  fill:none; stroke:#C9A25A; stroke-linecap:round; opacity:.8;
  filter: drop-shadow(0 0 3px rgba(201,162,90,.5));
}

/* Particle: dotted path + moving gold dot */
.atelier-section .stage[data-line="particle"] .channel .ribbon{
  stroke: rgba(232,220,196,.28);
  stroke-linecap: round;
  filter: none;
}
.atelier-section .stage[data-line="particle"] .channel .ribbon.gold-edge{ display:none; }
.atelier-section .channel .particle{
  fill:#E8DCC4;
  filter: drop-shadow(0 0 6px rgba(201,162,90,.9)) drop-shadow(0 0 2px rgba(232,220,196,1));
  opacity:0;
}
.atelier-section .stage.t-ink .channel .particle{ opacity:1; }

/* Spine: thick ink core + 2 outer hairlines (book-spine) */
.atelier-section .stage[data-line="spine"] .channel .ribbon.gold-edge{ display:none; }
.atelier-section .channel .ribbon.hair{
  fill:none; stroke:#C9A25A; stroke-linecap:round;
  opacity:.55;
  filter: drop-shadow(0 0 2px rgba(201,162,90,.4));
}

/* Stitch: dashed cross-stitch, tiny */
.atelier-section .stage[data-line="stitch"] .channel .ribbon{
  stroke: #E8DCC4;
  stroke-linecap: butt;
  filter: drop-shadow(0 0 3px rgba(232,220,196,.6));
}
.atelier-section .stage[data-line="stitch"] .channel .ribbon.gold-edge{ opacity:.3; }
.atelier-section .channel .node{
  fill: #C9A25A;
  stroke: none;
  filter: drop-shadow(0 0 8px rgba(201,162,90,.75)) drop-shadow(0 0 2px rgba(201,162,90,.9));
  opacity: 0;
  transition: opacity 280ms ease;
}
.atelier-section .stage.t-ink .channel .node.n1{opacity:1;}
.atelier-section .stage.t-bloom .channel .node.n1{opacity:1;}
.atelier-section .stage.t-split1 .channel .node.n2{opacity:1;}
.atelier-section .stage.t-split2 .channel .node.n3{opacity:1;}

/* MERGE */
.atelier-section .merge{padding: 4px 4px;display:flex;flex-direction:column;align-items:center;}
.atelier-section .merge .zone-head{align-self:stretch;justify-content:center;}
.atelier-section .merge-body{
  flex:1;width:100%;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.atelier-section .bloom{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:160px;height:160px;border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(201,162,90,.6), rgba(140,80,180,.28) 45%, transparent 72%);
  filter: blur(10px);
  opacity:0;pointer-events:none;
  transition: opacity 280ms ease;
}
.atelier-section .stage.t-bloom .bloom{opacity: var(--at-bloom-op, 1);}
.atelier-section .stage.t-bloom-out .bloom{opacity:0;transition:opacity 800ms ease;}

.atelier-section .tagline{
  font-family:var(--at-serif);font-style:italic;font-weight:400;
  font-size: clamp(15px, 1.3vw, 20px);
  color: rgba(246,241,230,.55);
  text-align:center;letter-spacing:.005em;line-height:1.25;
  transition: color 700ms ease, text-shadow 700ms ease, opacity 700ms ease;
  opacity:.75;position:relative;z-index:3;max-width:12ch;
}
.atelier-section .stage.t-bloom .tagline{color:var(--at-gold);text-shadow: 0 0 24px rgba(201,162,90,.5);opacity:1;}
.atelier-section .merge-sub{font-family:var(--at-mono);font-size:9px;letter-spacing:.32em;color:var(--at-bone);opacity:.45;text-transform:uppercase;text-align:center;position:relative;z-index:3;}

/* OUTPUT */
.atelier-section .output{display:flex;flex-direction:column;min-width:0;}
.atelier-section .output .zone-head{justify-content:space-between;}
.atelier-section .output .zone-head .meta{color:var(--at-bone);opacity:.55;}
.atelier-section .grid{display:grid;grid-template-columns: repeat(5, 1fr);grid-template-rows: 1fr 1fr;gap:clamp(8px,.9vw,13px);flex:1;position:relative;z-index:2;}
.atelier-section .frame{position:relative;border:1px solid var(--at-gold-hair);overflow:hidden;background:#0b0f18;aspect-ratio: 544/1080;
  transition: border-color 600ms ease, box-shadow 600ms ease;}
.atelier-section .frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--at-gold-hair);pointer-events:none;transition:opacity 600ms ease;}
.atelier-section .frame .num{position:absolute;top:6px;left:8px;font-family:var(--at-mono);font-size:8.5px;letter-spacing:.22em;color:var(--at-gold);opacity:.75;z-index:3;}
.atelier-section .frame .lookname{position:absolute;bottom:6px;left:8px;right:8px;font-family:var(--at-mono);font-size:7.5px;letter-spacing:.22em;color:var(--at-bone);opacity:0;text-transform:uppercase;transition:opacity 500ms ease .1s;z-index:3;}
.atelier-section .frame .flat{
  position:absolute;inset:0;
  transform-origin: left center;
  transform: scaleX(0);
  opacity:0;
  transition: transform 500ms cubic-bezier(.4,.1,.3,1), opacity 300ms ease;
}
.atelier-section .frame .flat img{width:100%;height:100%;object-fit:cover;display:block;}
.atelier-section .frame.filled .flat{
  transform: scaleX(1) !important;
  opacity:1 !important;
}
.atelier-section .frame.filled::before{opacity:.18;}
.atelier-section .frame.filled .lookname{opacity:.6;}
.atelier-section .frame.inking{box-shadow: inset 8px 0 18px -10px rgba(201,162,90,.7); border-color: rgba(201,162,90,.55);}
.atelier-section .frame.pulse{ animation: atelier-pulse 1s ease; }
@keyframes atelier-pulse{ 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.2)} }

.atelier-section .grid-foot{
  margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-family:var(--at-mono);font-size:9.5px;letter-spacing:.3em;color:var(--at-bone);opacity:0;
  text-transform:uppercase;transition: opacity 900ms ease;
  border-top:1px solid rgba(217,207,185,.08);padding-top:12px;
}
.atelier-section .stage.final .grid-foot{opacity:.7;}
.atelier-section .grid-foot .hairline{flex:1;height:1px;background:linear-gradient(to right, var(--at-gold-hair), transparent);}
.atelier-section .grid-foot .n{color:var(--at-gold);}

/* ---- input card visuals ---- */
.atelier-section .wordmark{display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--at-serif);font-weight:500;font-size:clamp(16px,1.3vw,22px);letter-spacing:.02em;color:var(--at-ivory);background: linear-gradient(180deg, #141a27 0%, #0c1018 100%);text-align:center;flex-direction:column;gap:2px;}
.atelier-section .wordmark .amp{color:var(--at-burgundy);font-style:italic;}
.atelier-section .wordmark small{font-family:var(--at-mono);font-size:7px;letter-spacing:.3em;color:var(--at-bone);opacity:.5;font-weight:400;}

.atelier-section .swatch{display:grid;grid-template-columns: repeat(5, 1fr);height:100%;}
.atelier-section .swatch > div{position:relative;}
.atelier-section .swatch > div::after{content: attr(data-name);position:absolute;bottom:3px;left:3px;right:3px;font-family:var(--at-mono);font-size:6px;letter-spacing:.14em;color:rgba(246,241,230,.7);text-transform:uppercase;}
.atelier-section .swatch .s1{background:var(--at-navy);} .atelier-section .swatch .s2{background:var(--at-ecru);} .atelier-section .swatch .s2::after{color:rgba(14,19,32,.7);}
.atelier-section .swatch .s3{background:var(--at-burgundy);} .atelier-section .swatch .s4{background:var(--at-charcoal);} .atelier-section .swatch .s5{background:var(--at-ivory);}
.atelier-section .swatch .s5::after{color:rgba(14,19,32,.7);}
.atelier-section .swatch.ss27 .s1{background:#5A6B4A;} .atelier-section .swatch.ss27 .s2{background:#A8B8A0;}
.atelier-section .swatch.ss27 .s3{background:#C86A44;} .atelier-section .swatch.ss27 .s4{background:#2A3A2A;} .atelier-section .swatch.ss27 .s5{background:#E8CCA8;}

.atelier-section .hardware{height:100%;background:radial-gradient(circle at 32% 38%, #d8b272 0%, #a07838 35%, #3a2a14 75%), #140c08;position:relative;display:flex;align-items:flex-end;justify-content:flex-end;padding:6px;}
.atelier-section .hardware::after{content:"";position:absolute;top:26%;left:22%;width:26%;aspect-ratio:1;border-radius:50%;background: radial-gradient(circle at 35% 35%, #f0d89a, #7a5a20 60%, #1e1208 100%);box-shadow: inset -2px -3px 5px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.5);}
.atelier-section .hardware .leather{width:48%;height:50%;background: linear-gradient(135deg, #6a3a2a, #3a1a10);border:1px solid rgba(201,162,90,.4);position:relative;}
.atelier-section .hardware .leather::after{content:"ATELIER";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--at-serif);font-style:italic;font-size:8px;color:rgba(232,220,196,.7);letter-spacing:.06em;}

.atelier-section .trend-tile{height:100%;background:linear-gradient(135deg, rgba(14,19,32,.1), rgba(14,19,32,.4)),repeating-linear-gradient(90deg, rgba(232,220,196,.04) 0 1px, transparent 1px 20px),linear-gradient(180deg, #2b3526 0%, #1a2018 100%);padding:8px;display:flex;flex-direction:column;justify-content:space-between;color:var(--at-ecru);}
.atelier-section .trend-tile .season{font-family:var(--at-mono);font-size:7px;letter-spacing:.3em;opacity:.75;}
.atelier-section .trend-tile .theme{font-family:var(--at-serif);font-weight:500;font-size:clamp(13px,1.1vw,18px);line-height:1;}
.atelier-section .trend-tile .meta{font-family:var(--at-mono);font-size:6px;letter-spacing:.22em;opacity:.5;}

.atelier-section .mood{height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:#0a0d15;}
.atelier-section .mood > div{position:relative;}
.atelier-section .mood .m1{background:radial-gradient(circle at 30% 40%, #6a4a2c 0%, #2a1a0e 60%);}
.atelier-section .mood .m2{background:repeating-linear-gradient(60deg, #5a3a24 0 3px, #3a2416 3px 7px);}
.atelier-section .mood .m3{background:radial-gradient(ellipse at 50% 50%, #88765a 0%, #38302a 70%);}
.atelier-section .mood .m4{background:linear-gradient(135deg, #2a3a2a 0%, #4a5a3a 50%, #1a2218 100%);}

.atelier-section .striped{width:100%;height:100%;background:repeating-linear-gradient(135deg, rgba(217,207,185,.06) 0 6px, rgba(217,207,185,.02) 6px 12px), #10141e;position:relative;}

.atelier-section .tail{padding: 7vh 6vw 10vh;text-align:center;border-top:1px solid rgba(217,207,185,.06);}
.atelier-section .tail .line{font-family:var(--at-serif);font-style:italic;font-size:clamp(18px,1.8vw,26px);color:var(--at-bone);opacity:.7;}

@media (max-width: 720px){
  .atelier-section .rail{grid-template-columns: 1fr;min-height:auto;gap:26px;}
  .atelier-section .divider{display:none;}
  .atelier-section .merge{min-height:200px;}
}