/* Lolo Studios — studio site.
   Deliberately neutral: paper-white and graphite, one warm accent. The products
   each have their own color; the studio behind them stays quiet so the work reads
   first. Light and dark are both first-class. */

:root{
  --bg:hsl(40 20% 97%); --bg2:hsl(40 16% 94%); --surface:#fffefc;
  --ink:hsl(36 10% 11%); --ink-soft:hsl(36 6% 40%); --ink-faint:hsl(36 5% 56%);
  --line:hsl(38 12% 88%);
  --accent:hsl(24 46% 38%);
  --mark-bg:hsl(36 10% 11%); --mark-fg:hsl(40 20% 97%);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Noto Serif",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",system-ui,sans-serif;
  --wrap:940px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:hsl(36 8% 8%); --bg2:hsl(36 8% 11%); --surface:hsl(36 7% 12%);
    --ink:hsl(40 14% 93%); --ink-soft:hsl(38 7% 68%); --ink-faint:hsl(38 6% 52%);
    --line:hsl(36 7% 20%);
    --accent:hsl(26 52% 62%);
    --mark-bg:hsl(40 14% 93%); --mark-fg:hsl(36 8% 8%);
  }
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;
  line-height:1.12;text-wrap:balance;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;}

.mark-bg{fill:var(--mark-bg);}
.mark-fg{stroke:var(--mark-fg);}
.mark-solid{fill:var(--mark-fg);}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);
  font-size:19px;font-weight:600;letter-spacing:-.01em;}
.brand .mark{width:30px;height:30px;border-radius:8px;flex:none;}
.nav-links{display:flex;gap:26px;font-size:15px;}
.nav-links a{color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;
  font-size:16px;padding:13px 24px;border-radius:12px;border:1px solid transparent;
  transition:transform .12s ease,opacity .2s ease,background .2s ease;}
.btn:active{transform:scale(.985);}
.btn.primary{background:var(--ink);color:var(--bg);}
.btn.primary:hover{opacity:.86;}
.btn.ghost{border-color:var(--line);color:var(--ink);}
.btn.ghost:hover{background:var(--bg2);}

/* ---- hero ---- */
.hero{padding:104px 0 88px;}
.hero h1{font-size:clamp(38px,6.4vw,62px);margin:18px 0 0;max-width:16ch;}
.hero h1 em{font-style:italic;color:var(--accent);}
.hero .lede{font-size:19.5px;color:var(--ink-soft);margin:24px 0 34px;max-width:52ch;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;}

/* ---- sections ---- */
.section{padding:72px 0;}
.section.bordered{border-top:1px solid var(--line);}
.section-title{font-size:13px;font-family:var(--sans);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:30px;}

/* ---- work cards ---- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.card{display:flex;flex-direction:column;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:28px;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;}
.card:hover{transform:translateY(-3px);border-color:var(--ink-faint);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.5);}
.card-mark{width:46px;height:46px;border-radius:12px;display:block;margin-bottom:18px;}
.card h3{font-size:25px;}
.card-sub{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;margin-top:5px;}
.card-body{color:var(--ink-soft);font-size:16px;margin:14px 0 20px;}
.card-link{font-size:15px;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;}
.card .arrow{transition:transform .16s ease;display:inline-block;}
.card:hover .arrow{transform:translateX(3px);}

/* ---- values ---- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.value h4{font-size:19px;margin-bottom:9px;}
.value p{color:var(--ink-soft);font-size:16px;}

/* ---- contact ---- */
.contact-lede{color:var(--ink-soft);font-size:18px;margin-bottom:22px;max-width:46ch;}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:30px 0 44px;
  color:var(--ink-faint);font-size:14.5px;}
.foot{display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;}
.foot-links{display:flex;gap:20px;}
.foot-links a:hover{color:var(--ink);}

/* ---- responsive ---- */
@media (max-width:800px){
  .cards{grid-template-columns:1fr;}
  .values{grid-template-columns:1fr;gap:26px;}
  .hero{padding:68px 0 56px;}
  .section{padding:56px 0;}
}
@media (max-width:520px){
  body{font-size:16.5px;}
  .hero .lede{font-size:18px;}
  .cta-row .btn{flex:1 1 auto;}
}