/* Frankli — shared site styles */
:root{
  --ink:#23201D; --paper:#F6F1EA; --card:#FFFDFB;
  --clay:#B5613E; --clay-deep:#93482C; --clay-soft:#F0E0D5;
  --sand:#B29A7C; --sand-soft:#EDE4D6;
  --muted:#8A8175; --hair:#E7DCCD; --faint:#B7AC9C;
  --molly:#B0666E; --cc:#22384A; --ska:#6E8174;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-weight:400;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}

/* top bar */
.topbar{max-width:1000px;margin:0 auto;padding:26px 26px 0;display:flex;
  align-items:baseline;justify-content:space-between;gap:16px;}
.wordmark{font-family:var(--serif);font-weight:500;font-size:23px;letter-spacing:.01em;}
.wordmark .dot{color:var(--clay);}
.topbar .right{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.backlink{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:7px;transition:color .2s;}
.backlink:hover{color:var(--clay);}

.wrap{max-width:1000px;margin:0 auto;padding:26px;}
.eyebrow{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--clay);margin:0 0 16px;}

/* hero */
.hero{padding:56px 0 30px;border-bottom:1px solid var(--hair);}
.hero h1{font-family:var(--serif);font-weight:400;font-size:92px;line-height:.9;margin:0;
  letter-spacing:.005em;}
.hero h1 .dot{color:var(--clay);}
.hero .tag{font-family:var(--serif);font-style:italic;font-size:25px;color:var(--muted);
  margin:20px 0 0;max-width:22em;line-height:1.35;}
.hero .intro{font-weight:300;color:var(--muted);font-size:16px;margin:18px 0 0;max-width:40em;line-height:1.65;}

/* section label */
.sec{display:flex;align-items:center;gap:16px;margin:44px 0 26px;}
.sec .lbl{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.sec .line{height:1px;background:var(--hair);flex:1;}
.sec .n{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:15px;}

/* project grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.proj{position:relative;display:block;background:var(--card);border:1px solid var(--hair);
  border-radius:18px;padding:26px 26px 22px;overflow:hidden;
  box-shadow:0 14px 34px -30px rgba(80,60,40,.5);transition:transform .22s,box-shadow .22s,border-color .22s;}
.proj:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(80,60,40,.55);border-color:var(--sand);}
.proj .accent{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sand);}
.proj.m .accent{background:var(--molly);}
.proj.c .accent{background:var(--cc);}
.proj.s .accent{background:var(--ska);}
.proj .code{font-family:var(--serif);font-size:30px;font-weight:500;line-height:1;margin:0 0 3px;}
.proj .client{font-size:12.5px;color:var(--muted);font-weight:400;margin:0 0 16px;}
.proj .scope{font-weight:300;font-size:14.5px;color:var(--ink);margin:0 0 20px;line-height:1.55;min-height:44px;}
.proj .foot{display:flex;align-items:center;justify-content:space-between;}
.pill{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 11px;border-radius:99px;}
.pill.live{color:#3f6b4e;background:#e4efe6;}
.pill.active{color:var(--clay-deep);background:var(--clay-soft);}
.pill.soon{color:var(--muted);background:var(--sand-soft);}
.open{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--clay-deep);
  display:inline-flex;align-items:center;gap:6px;}
.proj.disabled{cursor:default;}
.proj.disabled:hover{transform:none;box-shadow:0 14px 34px -30px rgba(80,60,40,.5);border-color:var(--hair);}

/* add-project ghost card */
.proj.add{display:flex;align-items:center;justify-content:center;border-style:dashed;
  background:transparent;box-shadow:none;color:var(--faint);min-height:150px;}
.proj.add:hover{transform:none;box-shadow:none;border-color:var(--sand);color:var(--muted);}
.proj.add .plus{font-family:var(--serif);font-size:15px;letter-spacing:.06em;}

/* generic project page */
.p-hero{padding:44px 0 26px;border-bottom:1px solid var(--hair);}
.p-hero .code{font-family:var(--serif);font-weight:400;font-size:64px;line-height:.95;margin:6px 0 4px;}
.p-hero .client{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--muted);margin:0;}
.p-hero .meta{display:flex;gap:22px;flex-wrap:wrap;margin:22px 0 0;}
.p-hero .meta div{font-size:13px;color:var(--muted);}
.p-hero .meta b{display:block;font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:3px;}
.p-hero .meta span{font-size:15px;color:var(--ink);font-weight:400;}
.ws{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0 0;}
.ws .card{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:22px 22px 18px;}
.ws .card h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:0 0 8px;}
.ws .card p{font-weight:300;font-size:14px;color:var(--muted);margin:0;line-height:1.55;}
.note{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted);
  border-left:2px solid var(--clay);padding-left:18px;margin:32px 0 0;line-height:1.5;}

footer.site{max-width:1000px;margin:60px auto 0;padding:26px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}

@media(max-width:640px){
  .hero h1{font-size:62px;} .hero .tag{font-size:21px;}
  .grid,.ws{grid-template-columns:1fr;} .p-hero .code{font-size:48px;}
  .wrap,.topbar{padding-left:18px;padding-right:18px;}
}