@import url("ds/colors_and_type.css");

/* =====================================================================
   FLOW WITH JOYCE — Portfolio
   Editorial cream frame; each project keeps its own accent inside.
   ===================================================================== */

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

:root {
  /* chrome accent — tweakable */
  --accent-dynamic: var(--cognac);
  /* motion scale — tweakable (1 = cinematic, 0.4 = calm, 0 = off) */
  --motion: 1;
  --reveal-dur: 900ms;

  /* paper mount — light in both modes so dark line-art always reads.
     In cream mode it equals the page, so transparent mockups appear to float;
     in espresso mode it becomes a lit paper mount on the dark wall. */
  --paper: #FBF8F3;
  --paper-edge: var(--cognac-15);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  transition: background var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}

img { display: block; max-width: 100%; }

/* ---------- DARK / ESPRESSO MODE ---------- */
html[data-mode="espresso"] {
  --bg: #2A1A0F;
  --bg-elevated: #34200F;
  --fg: #F0E7DA;
  --fg-muted: #C9A982;
  --fg-faint: #B98B5E;
  --fg-eyebrow: #A9B79C;
  --border: rgba(196,149,106,0.22);
  --border-strong: rgba(240,231,218,0.28);
  --paper: #F2EADE;
  --paper-edge: rgba(196,149,106,0.30);
}

/* =====================================================================
   SCROLL PROGRESS + TOPBAR
   ===================================================================== */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--accent-dynamic);
  z-index: 120;
  transition: width 80ms linear;
}

.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 56px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur-slow) var(--ease);
}
.topbar.show { transform: translateY(0); border-bottom-color: var(--border); }

.topbar__wm { font-size: 15px; letter-spacing: 0.16em; }
.topbar__nav { display: flex; gap: clamp(14px, 2.4vw, 34px); align-items: center; }
.topbar__nav a {
  font-family: var(--font-sans);
  font-size: 10.5px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg-muted); text-decoration: none;
  display: inline-flex; gap: 8px; align-items: baseline;
}
.topbar__nav a .n { color: var(--accent-dynamic); font-size: 9.5px; }
.topbar__nav a:hover { color: var(--fg); }
.topbar__nav a.active { color: var(--fg); }
@media (max-width: 720px) {
  .topbar__nav .lbl { display: none; }
}

/* Wordmark (text, theme-able) */
.wm { font-family: var(--font-serif); font-weight: 300; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.wm .script { font-family: var(--font-script); text-transform: none; font-weight: 400; color: var(--accent-dynamic); letter-spacing: 0; margin: 0 0.18em; font-size: 1.15em; }

/* =====================================================================
   MASTHEAD
   ===================================================================== */
.masthead {
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding: 120px clamp(20px, 5vw, 80px) 80px;
  position: relative;
}
.masthead__eyebrow { margin-bottom: clamp(28px, 5vh, 60px); }
.masthead .wm { font-size: clamp(40px, 9vw, 120px); line-height: 1; letter-spacing: 0.04em; }
.masthead__line {
  margin: clamp(26px, 5vh, 52px) auto 0;
  max-width: 30ch;
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: clamp(16px, 2.1vw, 23px); line-height: 1.5;
  color: var(--fg-muted); letter-spacing: 0.01em;
}
.masthead__sprig { width: clamp(60px, 9vw, 104px); margin: 0 auto clamp(24px,4vh,40px); opacity: 0.5; }
html[data-mode="espresso"] .masthead__sprig { filter: invert(0.78) sepia(0.3) saturate(0.6) hue-rotate(20deg); opacity: 0.55; }

.scrollcue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-size: 9.5px; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--fg-eyebrow);
}
.scrollcue .rule { width: 1px; height: 46px; background: linear-gradient(var(--accent-dynamic), transparent); position: relative; overflow: hidden; }
.scrollcue .rule::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--fg); animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateY(0); } 60%,100% { transform: translateY(300%); } }

/* =====================================================================
   PROJECT SECTIONS
   ===================================================================== */
.project {
  position: relative;
  padding: clamp(72px, 11vh, 150px) clamp(20px, 5vw, 80px);
  --p-accent: var(--cognac);
}
.project--dd   { --p-accent: #B07A42; }
.project--hl   { --p-accent: #1AA39C; }
.project--kids { --p-accent: #E8608B; }

.project__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 900px) {
  .project__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* sticky meta panel — the "pinned scene" */
.meta { position: sticky; top: 96px; align-self: start; }
@media (max-width: 900px) { .meta { position: static; top: auto; } }

.meta__num {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(56px, 7vw, 92px); line-height: 0.9;
  color: transparent; -webkit-text-stroke: 1px var(--p-accent);
  letter-spacing: 0.02em; margin-bottom: 18px;
}
.meta__eyebrow { color: var(--p-accent); margin-bottom: 14px; display: block; }
.meta__name {
  font-family: var(--font-serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(32px, 4vw, 50px); line-height: 1.04; letter-spacing: 0.05em;
  color: var(--fg); margin: 0 0 6px;
}
.meta__sub { font-family: var(--font-script); font-size: clamp(22px,2.6vw,30px); color: var(--p-accent); margin-bottom: 22px; }
.meta__desc { font-size: 13.5px; line-height: 1.85; color: var(--fg-muted); max-width: 34ch; margin: 0 0 26px; }
.meta__link {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg); text-decoration: none; display: inline-flex; gap: 9px; align-items: center;
  border-bottom: 1px solid var(--p-accent); padding-bottom: 4px; white-space: nowrap;
}
.meta__link .arrow { transition: transform var(--dur) var(--ease); color: var(--p-accent); }
.meta__link:hover .arrow { transform: translateX(5px); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.tag {
  font-family: var(--font-sans); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted); border: 1px solid var(--border); border-radius: 100px;
  padding: 6px 12px; white-space: nowrap;
}

/* gallery */
.gallery { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }
.group-label {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg-eyebrow); display: flex; align-items: center; gap: 14px; margin: clamp(14px,2vw,26px) 0 -8px;
}
.group-label::after { content: ""; height: 1px; flex: 1; background: var(--border); }

.shot { position: relative; }
.shot .cap {
  margin-top: 14px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.05em;
  color: var(--fg-faint); display: flex; gap: 10px; align-items: baseline;
}
.shot .cap b { color: var(--fg-muted); font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; }

/* colorful / opaque product renders read on any background — float bare */
.float img { width: 100%; height: auto; }
.float--center { max-width: 380px; margin: 0 auto; }
.float--lg { max-width: 580px; margin: 0 auto; }

/* light paper mount — for transparent line-art, type sheets, design boards */
.mount {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background var(--dur-slow) var(--ease);
}
.mount--pad { padding: clamp(14px, 3vw, 46px); }
.mount--flush img { width: 100%; height: auto; }
.mount--page { max-width: 460px; }
.mount--sm { max-width: 270px; }
.mount:hover { border-color: var(--cognac-30); }

/* full-bleed colored marketing graphics */
.bleed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 0 var(--border); }
.bleed img { width: 100%; height: auto; }

/* two-up row */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 32px); align-items: end; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

/* ---------- browser frame for the long website screenshot ---------- */
.browser {
  border-radius: 14px; overflow: hidden; background: #fff;
  border: var(--hairline);
}
.browser__bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: var(--bg-elevated); border-bottom: var(--hairline);
}
.browser__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cognac-30); }
.browser__url {
  margin-left: 12px; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.08em;
  color: var(--fg-faint); background: var(--bg); border-radius: 100px; padding: 5px 16px;
}
.browser__view { height: clamp(360px, 56vh, 560px); overflow: hidden; position: relative; }
.browser__scroll { width: 100%; will-change: transform; }

/* ---------- phone frame ---------- */
.phone {
  width: 100%; max-width: 270px; margin: 0 auto;
  border-radius: 34px; padding: 10px; background: #1c140d;
  box-shadow: 0 30px 60px -30px rgba(58,34,20,0.5);
}
.phone__screen { border-radius: 26px; overflow: hidden; background: #fff; }
.phone__screen img { width: 100%; height: auto; }

/* =====================================================================
   CRAFT STRIP — "also from the studio"
   ===================================================================== */
.craft { padding: clamp(64px, 9vh, 120px) clamp(20px, 5vw, 80px); border-top: var(--hairline); }
.craft__head { max-width: var(--content-wide); margin: 0 auto clamp(34px, 5vw, 60px); text-align: center; }
.craft__head .eyebrow { display: block; margin-bottom: 16px; color: var(--accent-dynamic); }
.craft__head h2 { margin: 0; }
.craft-grid {
  max-width: var(--content-wide); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 820px) { .craft-grid { grid-template-columns: 1fr; max-width: 420px; } }
.craft-card { display: flex; flex-direction: column; }
.craft-card__art {
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--radius-lg);
  overflow: hidden; padding: clamp(10px, 2vw, 26px);
  transition: border-color var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.craft-card__art img { width: 100%; height: auto; }
.craft-card:hover .craft-card__art { border-color: var(--cognac-30); transform: translateY(-5px); }
.craft-card__meta { padding: 16px 4px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.craft-card__meta h3 { margin: 0; font-size: 18px; letter-spacing: 0.04em; }
.craft-card__meta .k { font-family: var(--font-sans); font-size: 9.5px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-eyebrow); white-space: nowrap; }

/* =====================================================================
   CONTACT FOOTER
   ===================================================================== */
.contact {
  background: var(--bg-inverse);
  color: var(--fg-on-dark);
  padding: clamp(80px, 14vh, 170px) clamp(20px, 5vw, 80px);
  text-align: center;
  position: relative;
}
html[data-mode="espresso"] .contact { background: #1C1209; }
.contact .eyebrow { color: var(--warm-sand); display: block; margin-bottom: 26px; }
.contact__big {
  font-family: var(--font-serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(32px, 6vw, 76px); line-height: 1.05; letter-spacing: 0.05em;
  color: var(--ivory); margin: 0 auto; max-width: 16ch;
}
.contact__big .script { font-family: var(--font-script); text-transform: none; color: var(--warm-sand); letter-spacing: 0; }
.contact__mail {
  display: inline-block; margin-top: clamp(34px, 5vw, 56px);
  font-family: var(--font-serif); font-size: clamp(20px, 3vw, 34px); letter-spacing: 0.04em;
  color: var(--ivory); text-decoration: none; border-bottom: 1px solid var(--warm-sand);
  padding-bottom: 8px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact__mail:hover { color: var(--warm-sand); }
.contact__foot {
  margin-top: clamp(56px, 9vw, 100px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: var(--content-wide); margin-inline: auto;
  padding-top: 30px; border-top: 1px solid rgba(245,239,230,0.16);
  font-family: var(--font-sans); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(245,239,230,0.6);
}
.contact__foot .wm { font-size: 13px; color: var(--ivory); }
.contact__foot .wm .script { color: var(--warm-sand); }
@media (max-width: 560px) { .contact__foot { flex-direction: column; gap: 14px; } }

/* =====================================================================
   REVEAL ANIMATIONS  (progressive enhancement: hidden only once JS adds
   .anim to <html>, so no-JS / capture / verifier contexts always render)
   ===================================================================== */
html.anim [data-reveal] {
  opacity: 0;
  transform: translateY(calc(46px * var(--motion)));
  filter: blur(calc(6px * var(--motion)));
  transition: opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out),
              filter var(--reveal-dur) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.anim [data-reveal].in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .scrollcue .rule::after { animation: none; }
}

/* Tweaks host hides body until ready sometimes; ensure visible */
#tweaks-root { position: fixed; z-index: 200; }