/* ============================================================
   design.css — visuals for the Design engine platform page.
   Reuses the shared atoms from idea.css (i-block/.slab, .i-head,
   .screen/.screen-stage/.screen-chrome, .disc-row/.disc-copy,
   .mini-idea, the cursive eyebrow, the rounded-card rhythm) and
   platform.css (nav, eng-hero, eng-move, dark pl-foot CTA).
   Adds the design-only pieces below. The app-screen mocks keep the
   app's Manrope/Inter Tight chrome so they read as real product.
   The "brand look" in the rendered visuals is Rowan Coffee:
   warm espresso + terracotta, a serif display, so it reads as a
   different house style from the cream marketing page.
   ============================================================ */

:root {
  --rw: #c25a2e;       /* Rowan Coffee accent (warm terracotta) */
  --rw-2: #e7c9a0;     /* cream */
  --rw-bg: #2a1d15;    /* espresso */
  --rw-ink: #f5ece0;   /* on-dark text */
}

/* wider hero lead + serif promise (mirrors idea.css) */
.eng-hero .lead.lead--wide { max-width: 62ch; }
.eng-hero .promise {
  margin: 30px auto 0; max-width: 720px;
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.3; color: var(--accent-ink);
}

/* ============================================================
   RENDERED VISUAL — a CSS-composed "finished image" in the
   brand's look (like the app's live preview render).
   ============================================================ */
.render { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 30px 60px -34px rgba(20,10,4,.5); font-family: 'Instrument Serif', 'EB Garamond', Georgia, serif; }
.render--sq { aspect-ratio: 1/1; }
.render-mark { position: absolute; top: 14px; left: 16px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rw-ink); opacity: .85; z-index: 2; }
.render-mark b { color: var(--rw); }
.render-badge { position: absolute; top: 13px; right: 14px; display: inline-flex; align-items: center; gap: 6px; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 10px; color: var(--rw-ink); background: rgba(255,255,255,.14); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 999px; z-index: 2; }
.render-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rw); }

/* statement look: big words on a flat brand field */
.render--statement { background: radial-gradient(120% 90% at 78% 12%, rgba(194,90,46,.5), rgba(194,90,46,0) 55%), linear-gradient(160deg, #34241a, var(--rw-bg)); display: flex; flex-direction: column; justify-content: center; padding: 34px 30px; }
.render--statement .r-head { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.08; color: var(--rw-ink); font-weight: 500; letter-spacing: -0.01em; }
.render--statement .r-sub { font-family: 'Manrope', sans-serif; font-size: 12.5px; color: rgba(245,236,224,.7); margin-top: 14px; }

/* poster look: cut-out subject + type on a warm field */
.render--poster { background: linear-gradient(155deg, #d9682f 0%, var(--rw) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; }
.render--poster .r-cup { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); width: 46%; height: 46%; }
.render--poster .r-head { position: relative; font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.05; color: #fff; font-weight: 500; z-index: 2; }
.render--poster .r-sub { position: relative; font-family: 'Manrope', sans-serif; font-size: 12px; color: rgba(255,255,255,.82); margin-top: 8px; z-index: 2; }

/* infographic look: light field, crisp callouts */
.render--info { background: #faf5ec; padding: 26px 24px; display: flex; flex-direction: column; }
.render--info .r-mark { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--rw); }
.render--info .r-head { font-size: 1.6rem; line-height: 1.1; color: #2a1d15; margin: 6px 0 16px; font-weight: 500; }
.render--info .r-stats { display: grid; gap: 10px; font-family: 'Manrope', sans-serif; }
.render--info .r-stat { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: baseline; }
.render--info .r-num { font-family: 'Instrument Serif', serif; font-size: 1.7rem; color: var(--rw); line-height: 1; }
.render--info .r-lab { font-size: 12px; color: #5b4a3c; line-height: 1.35; }

/* photo look: warm photographic gradient + overlay marks */
.render--photo { background: linear-gradient(155deg, #7a5236 0%, #2a1d15 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.render--photo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 30% 30%, rgba(231,201,160,.28), transparent 60%); }
.render--photo .r-plate { position: relative; z-index: 2; background: rgba(20,12,7,.5); backdrop-filter: blur(3px); border-left: 3px solid var(--rw); padding: 10px 14px; }
.render--photo .r-head { font-size: 1.4rem; color: var(--rw-ink); line-height: 1.1; font-weight: 500; }
.render--photo .r-sub { font-family: 'Manrope', sans-serif; font-size: 11.5px; color: rgba(245,236,224,.72); margin-top: 5px; }

/* a gallery of finished renders */
.render-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 860px; margin: 0 auto; }
@media (max-width: 720px) { .render-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .render-gallery { grid-template-columns: 1fr; } }
.render-cap { text-align: center; margin-top: 10px; font-family: 'Inter Tight', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }

/* ============================================================
   THE SEVEN LOOKS — the real app tile picker
   ============================================================ */
.looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 860px) { .looks { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .looks { grid-template-columns: repeat(2, 1fr); } }
.look-tile { border: 1px solid #e7e7ec; border-radius: 12px; background: #fff; padding: 12px 12px 14px; text-align: left; }
.look-tile.is-on { border-color: var(--rw); box-shadow: 0 0 0 1px var(--rw), 0 12px 26px -16px rgba(194,90,46,.5); }
.look-visual { border-radius: 8px; overflow: hidden; margin-bottom: 10px; display: block; }
.look-visual svg { display: block; width: 100%; height: auto; }
.look-name { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13.5px; color: #131316; }
.look-tile.is-on .look-name { color: var(--rw); }
.look-blurb { font-family: 'Manrope', sans-serif; font-size: 11.5px; color: #6e7080; line-height: 1.35; margin-top: 2px; }

/* ============================================================
   BRAND RECORD — one identity themes everything
   ============================================================ */
.brandrec { display: grid; gap: 14px; }
.brandrec-row { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.brandrec-lab { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #9a9ba3; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #eeeef0; border-radius: 8px; padding: 6px 11px 6px 7px; font-family: 'Manrope', sans-serif; font-size: 12px; color: #42434d; }
.swatch i { width: 18px; height: 18px; border-radius: 5px; }
.fontchip { font-size: 15px; color: #131316; }
.fontchip .fc-serif { font-family: 'Instrument Serif', serif; font-size: 20px; }
.fontchip .fc-sans { font-family: 'Manrope', sans-serif; font-weight: 600; }
.fontchip small { font-family: 'Inter Tight', sans-serif; font-size: 10px; color: #9a9ba3; letter-spacing: .04em; text-transform: uppercase; margin-left: 8px; }
.refthumbs { display: flex; gap: 8px; }
.refthumb { width: 46px; height: 46px; border-radius: 8px; border: 1px solid #eeeef0; }

/* theme cards (the app's saved brand styles) */
.themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 620px) { .themes { grid-template-columns: 1fr 1fr; } }
.theme-card { border: 1px solid #e7e7ec; border-radius: 11px; background: #fff; padding: 8px 8px 11px; }
.theme-card.is-on { border-color: var(--rw); box-shadow: 0 0 0 1px var(--rw); }
.theme-thumb { height: 74px; border-radius: 7px; margin-bottom: 9px; }
.theme-name { display: flex; align-items: center; gap: 6px; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 12.5px; color: #131316; padding: 0 3px; }
.theme-card.is-on .theme-name { color: var(--rw); }
.theme-name .tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--rw); }
.theme-meta { font-family: 'Inter Tight', sans-serif; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: #9a9ba3; padding: 3px 3px 0; }

/* re-theme demo: same idea, two brand looks */
.retheme { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; max-width: 720px; margin: 26px auto 0; }
@media (max-width: 640px) { .retheme { grid-template-columns: 1fr; } }
.retheme-arrow { display: grid; place-items: center; color: var(--accent-ink); }
.retheme-arrow svg { width: 26px; height: 26px; }
@media (max-width: 640px) { .retheme-arrow { transform: rotate(90deg); } }

/* ============================================================
   TWO ENGINES — it paints, or it builds from templates
   ============================================================ */
.engines { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 820px) { .engines { grid-template-columns: 1fr; } }
.engine-col { border: 1px solid var(--line-ink); border-radius: 20px; background: var(--paper); padding: 26px; }
.i-block.slab .engine-col { background: var(--bg); }
.engine-col h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.engine-col h3 em { font-style: italic; color: var(--accent-ink); }
.engine-col > p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.engine-demo { margin-top: 4px; }

/* ============================================================
   BRING YOUR OWN — attach a photo (recreate / reinterpret)
   ============================================================ */
.attach-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; max-width: 900px; margin: 0 auto; }
@media (max-width: 820px) { .attach-row { grid-template-columns: 1fr; gap: 16px; } }
.attach-src { border: 1.5px dashed var(--line-strong); border-radius: 13px; background: var(--paper); padding: 12px; text-align: center; }
.i-block.slab .attach-src { background: var(--bg); }
.attach-src .as-img { border-radius: 8px; height: 120px; }
.attach-src .as-lab { font-family: 'Inter Tight', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }
.attach-arrow { display: grid; place-items: center; text-align: center; color: var(--accent-ink); }
.attach-arrow svg { width: 22px; height: 22px; }
.attach-arrow .amode { display: block; font-family: 'Inter Tight', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }
@media (max-width: 820px) { .attach-arrow { transform: rotate(90deg); } .attach-arrow .amode { transform: rotate(-90deg); } }
.attach-modes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.amode-pill { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; border: 1px solid var(--line-ink); border-radius: 999px; padding: 6px 13px; color: var(--ink); background: var(--paper); display: inline-flex; align-items: center; gap: 7px; }
.i-block.slab .amode-pill { background: var(--bg); }
.amode-pill.is-on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.amode-pill .exp { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }

/* ============================================================
   CAROUSEL — five slides, slide-1 anchors the rest
   ============================================================ */
.arc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 940px; margin: 0 auto; }
@media (max-width: 720px) { .arc { grid-template-columns: repeat(2, 1fr); } }
.arc-slide { border: 1px solid var(--line-ink); border-radius: 12px; background: var(--paper); overflow: hidden; }
.i-block.slab .arc-slide { background: var(--bg); }
.arc-num { font-family: 'Inter Tight', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rw); padding: 10px 12px 0; }
.arc-mini { margin: 8px 12px 12px; border-radius: 7px; aspect-ratio: 4/5; background: linear-gradient(160deg, #34241a, var(--rw-bg)); display: flex; align-items: flex-end; padding: 11px; }
.arc-mini .m { font-family: 'Instrument Serif', serif; font-size: 13px; color: var(--rw-ink); line-height: 1.1; }
.arc-mini.stat { background: #faf5ec; }
.arc-mini.stat .m { font-family: 'Instrument Serif', serif; color: var(--rw); font-size: 26px; }
.arc-role { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; color: var(--ink); padding: 0 12px 12px; }
.arc-role small { display: block; font-weight: 500; color: var(--ink-faint); font-size: 10.5px; margin-top: 1px; }

.anchor-flow { max-width: 820px; margin: clamp(30px,4vw,48px) auto 0; border: 1px solid var(--line-ink); border-radius: 16px; background: var(--paper); padding: 24px 26px; }
.i-block.slab .anchor-flow { background: var(--bg); }
.anchor-flow h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); margin: 0 0 6px; }
.anchor-flow h3 em { font-style: italic; color: var(--accent-ink); }
.anchor-flow p { color: var(--ink-dim); font-size: 14px; line-height: 1.55; margin: 0 0 18px; max-width: 62ch; }
.anchor-diagram { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: center; }
@media (max-width: 620px) { .anchor-diagram { grid-template-columns: 1fr; } }
.anchor-one { border: 2px solid var(--rw); border-radius: 9px; aspect-ratio: 4/5; width: 78px; background: linear-gradient(160deg, #34241a, var(--rw-bg)); display: grid; place-items: center; position: relative; }
.anchor-one .tag { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-family: 'Inter Tight', sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--rw); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.anchor-one svg { width: 22px; height: 22px; color: var(--rw-2); }
.anchor-fan { display: grid; place-items: center; color: var(--ink-faint); }
.anchor-fan svg { width: 26px; height: 26px; color: var(--accent-ink); }
.anchor-rest { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.anchor-rest .s { border: 1px solid var(--line-ink); border-radius: 7px; aspect-ratio: 4/5; background: linear-gradient(160deg, #3a291e, #241a13); position: relative; }
.anchor-rest .s.stat { background: #f3ece0; }
.anchor-rest .s::after { content: 'inherits slide 1'; position: absolute; inset: 0; display: none; }

/* thread marker (reused idea for the winter-post continuity) */
.d-thread { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: 'Inter Tight', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rw); background: color-mix(in srgb, var(--rw) 10%, transparent); border-radius: 999px; padding: 5px 11px; }
.d-thread svg { width: 12px; height: 12px; }

/* Titles: gray setup + dark-ink emphasis (match home two-tone) */
.engine-col h3, .anchor-flow h3 { color: rgba(26, 26, 26, 0.4); }
.engine-col h3 em, .anchor-flow h3 em { color: var(--ink); }

/* ===== Hero: staggered gallery (dark stage) ===== */
.bento { display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px,1.4vw,16px); margin: 0 auto clamp(26px,3.5vw,44px); }
.bento .render { width: clamp(140px,16vw,186px); flex: none; }
.bento .render:nth-child(1) { transform: translateY(28px); }
.bento .render:nth-child(3) { transform: translateY(36px); }
.bento .render:nth-child(4) { transform: translateY(10px); }
.hero-dark .bento .render { box-shadow: 0 0 0 1px rgba(255,255,235,.14), 0 26px 55px -22px rgba(0,0,0,.7); }
@media (max-width: 640px) { .bento .render:nth-child(n+3) { display:none; } .bento .render:nth-child(1){ transform:none; } }