/* Skeleton E — Studio Portfolio / Industrial Gray + Highlight */
:root{
  --bg:#f5f5f5;
  --ink:#1a1a1a;
  --ink-soft:#3a3a3a;
  --mute:#7a7a7a;
  --line:#dcdcdc;
  --paper:#ffffff;
  --beige:#e8e3da;
  --accent:#ffd60a;
  --accent-ink:#1a1a1a;
  --side:#101010;
  --side-ink:#f5f5f5;
  --side-mute:#888;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;border:0;cursor:pointer;background:transparent;color:inherit}
ul{list-style:none}

/* ===== Two-column shell ===== */
.shell{display:flex;min-height:100vh;align-items:flex-start}
.side{
  width:33%;
  min-width:300px;
  max-width:460px;
  position:sticky;
  top:0;
  height:100vh;
  background:var(--side);
  color:var(--side-ink);
  padding:36px 38px 32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.main{
  width:67%;
  flex:1;
  padding:36px 56px 64px;
}

/* ===== Side blocks ===== */
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:46px;height:46px;
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:22px;
  border-radius:2px;
}
.brand-name{font-size:18px;letter-spacing:.5px;font-weight:700}
.brand-sub{display:block;font-size:11px;color:var(--side-mute);letter-spacing:2px;margin-top:2px;text-transform:uppercase}

.side-nav{margin-top:48px}
.side-nav a{
  display:block;
  padding:10px 0;
  font-size:15px;
  color:var(--side-ink);
  border-bottom:1px solid #2a2a2a;
  position:relative;
  letter-spacing:.5px;
}
.side-nav a span.num{color:var(--side-mute);font-size:11px;margin-right:14px;font-family:"Courier New",monospace}
.side-nav a:hover,.side-nav a.active{color:var(--accent)}
.side-nav a.active::after{content:"●";color:var(--accent);position:absolute;right:0}

.side-manifesto{margin-top:48px;font-size:13px;color:#bbb;line-height:1.7;border-left:2px solid var(--accent);padding-left:14px}
.side-manifesto strong{color:var(--side-ink);display:block;margin-bottom:8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:600}

.side-foot{font-size:12px;color:var(--side-mute);line-height:1.8}
.side-foot a{color:#ccc;display:block}
.side-foot .tel{color:var(--accent);font-size:18px;letter-spacing:1px;font-weight:700;margin-bottom:6px;font-family:"Helvetica Neue",sans-serif}

/* ===== Main ===== */
.topbar{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:36px;
}
.topbar .crumb{font-size:11px;letter-spacing:3px;color:var(--mute);text-transform:uppercase}
.topbar .date{font-family:"Courier New",monospace;font-size:12px;color:var(--ink-soft)}

/* Hero block (giant) */
.hero{
  position:relative;
  padding:32px 0 56px;
  border-bottom:1px solid var(--line);
  margin-bottom:48px;
}
.hero .eyebrow{font-size:11px;letter-spacing:4px;color:var(--mute);text-transform:uppercase;margin-bottom:24px}
.hero h1{
  font-size:clamp(48px,7vw,96px);
  line-height:.96;
  font-weight:900;
  letter-spacing:-2px;
  margin-bottom:24px;
}
.hero h1 em{font-style:normal;background:var(--accent);color:var(--accent-ink);padding:0 8px;display:inline-block;transform:translateY(-4px)}
.hero h1 .stroke{-webkit-text-stroke:2px var(--ink);color:transparent}
.hero p.lead{font-size:18px;max-width:620px;color:var(--ink-soft);line-height:1.6}
.hero .meta{display:flex;gap:32px;margin-top:36px;font-size:12px;color:var(--mute);letter-spacing:1px;text-transform:uppercase}
.hero .meta b{display:block;color:var(--ink);font-size:20px;letter-spacing:-.5px;margin-top:4px;text-transform:none;font-weight:800}

/* Feature project block (under hero) */
.feature{
  background:var(--ink);
  color:#f5f5f5;
  padding:48px 44px;
  position:relative;
  margin-bottom:64px;
  overflow:hidden;
}
.feature::before{
  content:"";
  position:absolute;
  right:-60px;bottom:-60px;
  width:240px;height:240px;
  background:var(--accent);
  border-radius:50%;
  opacity:.18;
}
.feature .tag{display:inline-block;background:var(--accent);color:var(--accent-ink);font-size:11px;letter-spacing:2px;padding:4px 10px;font-weight:700;text-transform:uppercase;margin-bottom:20px}
.feature h2{font-size:42px;line-height:1.05;font-weight:800;letter-spacing:-1px;margin-bottom:18px;max-width:680px}
.feature p{font-size:15px;color:#bbb;max-width:560px;line-height:1.7}
.feature .feature-meta{display:flex;gap:40px;margin-top:32px;font-size:12px;color:#777;letter-spacing:1px;text-transform:uppercase;flex-wrap:wrap}
.feature .feature-meta b{display:block;color:#fff;font-size:14px;margin-top:4px;text-transform:none;letter-spacing:.5px}

/* Section heads */
.s-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--ink);
}
.s-head h2{font-size:32px;font-weight:800;letter-spacing:-.5px}
.s-head .ix{font-family:"Courier New",monospace;font-size:12px;color:var(--mute)}

/* Project grid (works) */
.works{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:64px}
.work{
  background:var(--paper);
  border:1px solid var(--line);
  padding:28px 26px;
  position:relative;
  transition:transform .2s,border-color .2s;
}
.work:hover{transform:translateY(-3px);border-color:var(--ink)}
.work .w-num{position:absolute;top:18px;right:22px;font-family:"Courier New",monospace;font-size:11px;color:var(--mute)}
.work .w-type{font-size:11px;letter-spacing:2px;color:var(--mute);text-transform:uppercase;margin-bottom:14px}
.work h3{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:8px;line-height:1.25}
.work .w-client{font-size:13px;color:var(--mute);margin-bottom:14px}
.work p{font-size:14px;color:var(--ink-soft);line-height:1.65;margin-bottom:18px}
.work .w-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;font-size:11px;letter-spacing:1px;color:var(--mute);text-transform:uppercase}
.work .w-foot b{color:var(--ink)}
.work.dark{background:var(--ink);color:#eee;border-color:var(--ink)}
.work.dark h3{color:#fff}
.work.dark p{color:#bbb}
.work.dark .w-foot{border-color:#333}
.work.dark .w-foot b{color:var(--accent)}
.work.dark .w-num,.work.dark .w-type,.work.dark .w-client{color:#888}
.work.beige{background:var(--beige)}
.work.accent{background:var(--accent);border-color:var(--accent)}

/* Services rows */
.svc-row{
  display:grid;grid-template-columns:80px 1fr 200px;gap:32px;
  padding:28px 0;border-bottom:1px solid var(--line);
  align-items:start;
}
.svc-row:hover h3{color:var(--accent-ink);background:var(--accent);padding:0 6px;display:inline-block}
.svc-row .svc-n{font-family:"Courier New",monospace;color:var(--mute);font-size:13px;padding-top:6px}
.svc-row h3{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-bottom:10px;transition:background .2s}
.svc-row p{font-size:14px;color:var(--ink-soft);line-height:1.65;max-width:520px}
.svc-row .svc-tags{font-size:11px;letter-spacing:1px;color:var(--mute);text-transform:uppercase;line-height:1.8;text-align:right;padding-top:8px}

/* About blocks */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:56px}
.about-grid h3{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--mute);margin-bottom:14px;border-top:2px solid var(--ink);padding-top:14px}
.about-grid p{font-size:15px;color:var(--ink-soft);line-height:1.75;margin-bottom:14px}
.about-grid p strong{color:var(--ink)}

.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:var(--ink);padding:40px;margin-bottom:56px;color:#eee}
.figures .fig b{display:block;font-size:42px;font-weight:900;color:var(--accent);letter-spacing:-1px;margin-bottom:6px}
.figures .fig span{font-size:11px;letter-spacing:2px;color:#888;text-transform:uppercase}

.timeline{margin-bottom:56px}
.timeline .tl{display:grid;grid-template-columns:100px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.timeline .tl-year{font-family:"Courier New",monospace;font-size:18px;font-weight:700;color:var(--ink)}
.timeline .tl-body h4{font-size:17px;font-weight:700;margin-bottom:4px}
.timeline .tl-body p{font-size:14px;color:var(--ink-soft)}

/* Case list (cases.html) */
.case-list .case-item{
  display:grid;grid-template-columns:100px 1fr 180px 100px;gap:24px;
  padding:24px 0;border-bottom:1px solid var(--line);align-items:center;
}
.case-list .case-item:hover{background:#ececec}
.case-list .case-item .ci-year{font-family:"Courier New",monospace;font-size:14px;font-weight:700}
.case-list .case-item h3{font-size:20px;font-weight:800;letter-spacing:-.3px}
.case-list .case-item .ci-client{font-size:12px;color:var(--mute);margin-top:4px;letter-spacing:1px;text-transform:uppercase}
.case-list .case-item .ci-type{font-size:12px;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase}
.case-list .case-item .ci-tag{font-size:11px;letter-spacing:1px;background:var(--ink);color:#fff;padding:4px 8px;text-align:center;justify-self:end}
.case-list .case-item .ci-tag.acc{background:var(--accent);color:var(--accent-ink)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:48px}
.contact-block{padding:36px 32px;border:1px solid var(--line);background:var(--paper)}
.contact-block h3{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.contact-block .big{font-size:32px;font-weight:800;letter-spacing:-.5px;color:var(--ink);margin-bottom:10px;display:block;font-family:"Helvetica Neue",sans-serif}
.contact-block p{font-size:14px;color:var(--ink-soft);line-height:1.7}
.contact-block.dark{background:var(--ink);color:#eee;border-color:var(--ink)}
.contact-block.dark .big{color:var(--accent)}
.contact-block.dark p{color:#bbb}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.form input,.form textarea{
  width:100%;border:1px solid var(--line);background:var(--paper);
  padding:14px 16px;font:inherit;color:var(--ink);
}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}
.form button{
  background:var(--ink);color:#fff;padding:14px 28px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:13px;
}
.form button:hover{background:var(--accent);color:var(--accent-ink)}

/* Footer */
.foot{
  border-top:2px solid var(--ink);
  padding-top:28px;margin-top:32px;
  display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px;
  font-size:12px;color:var(--mute);line-height:1.8;
}
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--accent-ink);background:var(--accent);padding:0 4px}
.foot .f-r{text-align:right}

/* Note callout */
.callout{
  background:var(--beige);border-left:4px solid var(--ink);
  padding:24px 28px;margin-bottom:48px;
}
.callout h3{font-size:18px;font-weight:800;margin-bottom:8px}
.callout p{font-size:14px;color:var(--ink-soft);line-height:1.7}

/* Big quote */
.quote{
  font-size:36px;font-weight:800;line-height:1.2;letter-spacing:-.8px;
  padding:48px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:56px;max-width:840px;
}
.quote::before{content:"" ;display:inline-block;width:32px;height:6px;background:var(--accent);margin-right:14px;vertical-align:middle}
.quote cite{display:block;font-style:normal;font-size:12px;letter-spacing:2px;color:var(--mute);margin-top:18px;text-transform:uppercase;font-weight:600}

/* Responsive */
@media (max-width:960px){
  .shell{flex-direction:column}
  .side{position:static;width:100%;height:auto;max-width:none;padding:24px}
  .main{width:100%;padding:28px 22px}
  .works,.about-grid,.contact-grid,.form-row{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr 1fr;padding:24px}
  .svc-row{grid-template-columns:50px 1fr;gap:14px}
  .svc-row .svc-tags{display:none}
  .case-list .case-item{grid-template-columns:60px 1fr 80px;gap:12px}
  .case-list .case-item .ci-type{display:none}
  .hero h1{font-size:46px;letter-spacing:-1px}
  .feature{padding:32px 24px}
  .feature h2{font-size:28px}
}