/* Drip Factor LA — Logo Workshop subpage */

.ws-nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--gutter); background:rgba(251,248,242,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); font-size:.85rem;
}
.ws-nav .brand{color:var(--ink); font-size:1.1rem}
.ws-nav a.back{color:var(--muted); letter-spacing:.04em}
.ws-nav a.back:hover{color:var(--accent)}

.ws-hero{padding:clamp(3.5rem,8vw,7rem) 0 clamp(2.5rem,5vw,4rem)}
.ws-hero .eyebrow{margin-bottom:1.6rem}
.ws-hero h1{font-size:clamp(2.8rem,7vw,6rem); font-weight:300; line-height:1; margin-bottom:1.5rem}
.ws-hero h1 em{color:var(--accent)}
.ws-hero .lead{font-size:clamp(1.05rem,1.7vw,1.35rem)}
.ws-meta{display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--line)}
.ws-meta div{font-size:.85rem}
.ws-meta b{display:block; font-family:var(--sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; font-weight:600}
.ws-meta p{margin:0; color:var(--muted); max-width:26ch}

/* Foundations */
.foundations{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); padding-block:clamp(2.5rem,5vw,4rem); border-block:1px solid var(--line); background:var(--surface)}
.swatches{display:flex; flex-wrap:wrap; gap:.8rem}
.swatch{width:84px}
.swatch .chipc{height:70px; border-radius:3px; border:1px solid var(--line); margin-bottom:.5rem}
.swatch small{display:block; font-size:.7rem; color:var(--muted); letter-spacing:.02em}
.swatch b{font-size:.74rem; display:block}
.type-spec p{margin:.2rem 0; color:var(--muted); font-size:.9rem}
.type-fraunces{font-family:var(--serif); font-size:2.4rem; font-weight:300; line-height:1.1}
.type-inter{font-family:var(--sans); font-size:1.1rem; letter-spacing:.02em}

/* Direction blocks */
.direction{padding-block:clamp(3rem,7vw,6rem); border-bottom:1px solid var(--line)}
.dir-head{display:flex; align-items:baseline; gap:1.2rem; margin-bottom:.4rem}
.dir-num{font-family:var(--serif); font-size:1.1rem; color:var(--accent)}
.dir-head h2{font-size:clamp(1.8rem,3.6vw,2.8rem); font-weight:300}
.dir-flag{font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-accent); background:var(--accent); padding:.32rem .6rem; border-radius:100px; align-self:center}
.dir-concept{color:var(--muted); max-width:62ch; margin:.6rem 0 2.4rem; font-size:1.02rem}

.lockup-stage{
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  min-height:300px; display:grid; place-items:center; padding:clamp(2.5rem,6vw,5rem) 2rem;
  position:relative; overflow:hidden;
}
.lockup-stage.bone{background:var(--bg)}
.stage-label{position:absolute; top:1rem; left:1.2rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* the lockup primitive */
.lockup{--mark-accent:var(--accent); --mark-ink:var(--ink); color:var(--mark-ink); display:inline-flex; align-items:center; gap:1.1rem}
.lockup.stack{flex-direction:column; gap:.9rem; text-align:center}
.lockup .mark{flex:none; color:var(--mark-accent)}
.lockup .mark svg{display:block; width:100%; height:100%}
.lockup .wm{font-family:var(--serif); line-height:.95; color:var(--mark-ink)}
/* mark fills/strokes are global, driven by --mark-* (set on body, .lockup, .var, or on-* classes) */
body{--mark-accent:var(--accent); --mark-ink:var(--ink)}
.accent{fill:var(--mark-accent)}
.inkfill{fill:var(--mark-ink)}
.accent-stroke{stroke:var(--mark-accent)}
.ink-stroke{stroke:var(--mark-ink)}

/* color variants surfaces */
.on-dark{--mark-ink:#FBF8F2}
.on-gold{--mark-accent:var(--ink); --mark-ink:var(--ink)}
.mono-ink{--mark-accent:var(--ink); --mark-ink:var(--ink)}
.mono-bone{--mark-accent:#FBF8F2; --mark-ink:#FBF8F2}

.variants{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1rem}
.var{border:1px solid var(--line); border-radius:4px; min-height:130px; display:grid; place-items:center; padding:1.4rem; position:relative}
.var .tag{position:absolute; bottom:.6rem; left:.8rem; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.var.s-bone{background:var(--bg)} .var.s-surface{background:var(--surface)}
.var.s-dark{background:var(--ink)} .var.s-dark .tag{color:rgba(251,248,242,.5)}
.var.s-gold{background:var(--accent)} .var.s-gold .tag{color:rgba(31,27,22,.55)}

.dir-foot{display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; justify-content:space-between; align-items:flex-start; margin-top:2rem}
.dir-note{max-width:52ch; font-size:.9rem; color:var(--muted)}
.dir-note b{color:var(--ink); font-weight:500}
.dl{display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:500; color:var(--accent); border:1px solid var(--line); padding:.5rem .9rem; border-radius:100px; transition:border-color .3s, background .3s}
.dl:hover{border-color:var(--accent); background:#fff}

/* Wordmark type styles (shared) */
.wm .d1{font-weight:300} .wm .d2{font-weight:500} .wm .d3{font-weight:300}
.wm-sub{font-family:var(--sans); font-size:.62em; letter-spacing:.42em; text-transform:uppercase; color:var(--mark-ink); opacity:.7; font-weight:500}
.wm-rule{display:flex; align-items:center; gap:.7rem; width:100%; justify-content:center}
.wm-rule::before,.wm-rule::after{content:""; height:1px; flex:1; max-width:42px; background:var(--mark-accent); opacity:.6}

/* mark sizing + special glyphs */
.mark.xl svg{width:96px;height:auto}
.mark.lg svg{width:64px;height:auto}
.mark.sm svg{width:40px;height:auto}
.mark.seal.xl svg{width:140px}
.mark.seal.lg svg{width:74px}
.mark.seal.sm svg{width:54px}
.idot{position:relative; display:inline-block}
.idot .idrop{position:absolute; left:50%; top:-0.30em; width:0.30em; height:0.40em; transform:translateX(-50%)}
.seal-text{font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:3.2px}
.emblem-text{font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:3.6px}
.emblem-text2{font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:3.6px}
.mark.emblem.xl svg{width:150px}
.mark.emblem.lg svg{width:122px}
.mark.emblem.sm svg{width:58px}
.lockup .wm-cap{font-family:var(--serif); font-weight:300; letter-spacing:.16em}
.lockup .wm-lower{font-family:var(--serif); font-weight:400; text-transform:lowercase; letter-spacing:-.01em}

/* Application / favicon row */
.apps{display:flex; flex-wrap:wrap; gap:1.6rem; align-items:flex-end; margin-top:1.5rem}
.app-ico{border-radius:22%; display:grid; place-items:center; box-shadow:var(--shadow-sm)}
.app-ico.gold{background:var(--accent); color:var(--on-accent)}
.app-ico.ink{background:var(--ink); color:#FBF8F2}
.fav-row{display:flex; align-items:flex-end; gap:1.1rem}
.fav{background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent); border-radius:4px}
.avatar{border-radius:50%; display:grid; place-items:center; box-shadow:var(--shadow-sm)}
.avatar.grad{background:radial-gradient(120% 120% at 30% 20%, #C49A52, #8A6A33)}

/* Mockups */
.mockups{padding-block:clamp(3rem,7vw,6rem)}
.mock-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.5vw,1.8rem)}
.mock{border-radius:6px; overflow:hidden; position:relative; box-shadow:var(--shadow); aspect-ratio:4/3; background:var(--surface) center/cover}
.mock .cap{position:absolute; bottom:.8rem; left:1rem; z-index:4; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#FBF8F2; text-shadow:0 1px 6px rgba(0,0,0,.5)}
.mock.light .cap{color:var(--ink); text-shadow:none}
.mock .overlay{position:absolute; inset:0; display:grid; place-items:center; padding:2rem}

/* business card */
.bizcard{width:74%; aspect-ratio:1.75/1; background:var(--surface); border-radius:8px; box-shadow:0 30px 60px -20px rgba(31,27,22,.5); display:grid; place-items:center; transform:rotate(-4deg)}
.bizcard.back{background:var(--ink); color:#FBF8F2}
/* browser */
.browser{width:84%; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(31,27,22,.5)}
.browser .bar{display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem; background:var(--bg); border-bottom:1px solid var(--line)}
.browser .bar i{width:9px; height:9px; border-radius:50%; background:var(--line)}
.browser .bar .url{margin-left:.8rem; font-size:.6rem; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:100px; padding:.2rem .8rem}
.browser .vp{padding:1.1rem 1.2rem; display:flex; align-items:center; justify-content:space-between}
.browser .vp .links{display:flex; gap:.7rem; font-size:.5rem; color:var(--muted)}
.browser .vp .bk{font-size:.5rem; background:var(--accent); color:#fff; padding:.25rem .6rem; border-radius:3px}
/* tag */
.ivtag{width:30%; aspect-ratio:.62/1; background:var(--surface); border-radius:6px; box-shadow:0 24px 50px -18px rgba(31,27,22,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:1rem; position:relative}
.ivtag::before{content:""; position:absolute; top:12px; width:14px; height:14px; border:2px solid var(--muted); border-radius:50%}
.foil .cap{color:#E8DCC4}

@media (max-width:900px){
  .foundations{grid-template-columns:1fr}
  .variants{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .mock-grid{grid-template-columns:1fr}
  .ws-meta{gap:1.5rem}
  .dir-head{flex-direction:column; gap:.2rem}
}