/* ============ Tokens ============ */
:root{
  --paper:#efece0;
  --paper-raised:#e2ddc8;
  --paper-line:#c7bfa1;
  --ink:#1c2a38;
  --ink-soft:#51606d;
  --blue:#2c5a82;
  --blue-deep:#173a55;
  --brass:#7a5717;
  --brass-bright:#c9a052;
  --shadow:rgba(28,42,56,.16);
  --danger:#a3401f;
  --radius:2px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0f2338;
    --paper-raised:#173352;
    --paper-line:#3a5c80;
    --ink:#e9f0f7;
    --ink-soft:#a9c1d6;
    --blue:#8fc7ee;
    --blue-deep:#d5ecfb;
    --brass:#e8c682;
    --brass-bright:#a9822f;
    --shadow:rgba(0,0,0,.45);
    --danger:#e28a63;
  }
}
:root[data-theme="dark"]{
  --paper:#0f2338;
  --paper-raised:#173352;
  --paper-line:#3a5c80;
  --ink:#e9f0f7;
  --ink-soft:#a9c1d6;
  --blue:#8fc7ee;
  --blue-deep:#d5ecfb;
  --brass:#e8c682;
  --brass-bright:#a9822f;
  --shadow:rgba(0,0,0,.45);
  --danger:#e28a63;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(120,120,120,.06) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(120,120,120,.06) 0 1px, transparent 1px 32px);
  color:var(--ink);
  font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{
  font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:600;
  line-height:1.4;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
.mono{font-family:"JetBrains Mono","SF Mono",Consolas,monospace; font-variant-numeric:tabular-nums;}
a{color:var(--blue);}
p{margin:0 0 1em; max-width:38em;}
img{max-width:100%;display:block;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
::selection{background:var(--brass-bright); color:var(--ink);}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* corner-tick "plate" panel */
.plate{
  position:relative;
  background-color:var(--paper-raised);
  border:1px solid var(--paper-line);
  background-image:
    linear-gradient(var(--ink),var(--ink)), linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)), linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)), linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)), linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;
  background-size:14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px;
  background-position:
    top -1px left -1px, top -1px left -1px,
    top -1px right -1px, top -1px right -1px,
    bottom -1px left -1px, bottom -1px left -1px,
    bottom -1px right -1px, bottom -1px right -1px;
}

.title-block{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--paper-line);
  padding:0 0 14px; margin-bottom:28px; flex-wrap:wrap;
}
.title-block .code{font-size:.8rem; letter-spacing:.08em; color:var(--brass);}
.title-block h2{font-size:clamp(1.4rem,2.6vw,2rem);}
.title-block .meta{font-size:.72rem; color:var(--ink-soft); letter-spacing:.06em; text-align:right;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; letter-spacing:.12em; color:var(--brass);
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--brass);}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--paper); border-bottom:1px solid var(--paper-line);
}
.topbar-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.brand-mark{
  width:34px; height:34px; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center;
  font-family:"Shippori Mincho",serif; font-weight:700; font-size:1rem; flex:none;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text strong{font-family:"Shippori Mincho",serif; font-size:1rem; letter-spacing:.02em;}
.brand-text span{font-size:.62rem; letter-spacing:.14em; color:var(--ink-soft);}

nav.sitenav{display:flex; gap:2px; flex-wrap:wrap;}
nav.sitenav a{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  text-decoration:none; color:var(--ink-soft); font-size:.72rem; letter-spacing:.03em;
  padding:6px 10px; border-radius:var(--radius); white-space:nowrap;
}
nav.sitenav a .code{font-size:.62rem; color:var(--brass);}
nav.sitenav a.active{color:var(--ink); background:var(--paper-raised);}
nav.sitenav a:hover{color:var(--ink);}

.contact-cta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--brass); color:var(--paper); text-decoration:none;
  font-size:.74rem; letter-spacing:.05em; padding:8px 14px; border-radius:999px; flex:none;
}
.contact-cta:hover{opacity:.88;}

.nav-toggle{display:none; align-items:center; justify-content:center; width:36px; height:36px; background:none; border:1px solid var(--paper-line); color:var(--ink); flex:none; cursor:pointer;}
.mobile-nav{display:none;}
.topbar-tools{display:flex; align-items:center; gap:10px;}

@media (max-width:560px){
  nav.sitenav{display:none;}
  .nav-toggle{display:flex;}
  .brand-text span{display:none;}
}
.mobile-nav.open{display:block; border-top:1px solid var(--paper-line);}
.mobile-nav a{display:flex; justify-content:space-between; text-decoration:none; color:var(--ink); padding:12px 20px; border-bottom:1px solid var(--paper-line); font-size:.85rem;}
.mobile-nav a .code{color:var(--brass); font-size:.7rem;}
.mobile-nav .pill-row{padding:12px 20px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer;
  font-size:.85rem; letter-spacing:.03em; padding:13px 22px; border:1px solid var(--ink); color:var(--ink); background:none;
}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn-solid{background:var(--ink); color:var(--paper);}
.btn-solid:hover{background:var(--blue-deep); border-color:var(--blue-deep);}
.btn-brass{background:var(--brass); border-color:var(--brass); color:var(--paper);}
.btn-brass:hover{opacity:.85; background:var(--brass);}

/* ---------- Hero ---------- */
.hero{padding:56px 0 44px; border-bottom:1px solid var(--paper-line);}
.hero-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:end;}
.hero h1{font-size:clamp(2rem,4.4vw,3.1rem);}
.hero .lede{font-size:1.02rem; color:var(--ink-soft); margin-top:16px;}
.hero-actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.hero-fact{padding:18px; font-size:.82rem;}
.hero-fact dl{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0;}
.hero-fact dt{color:var(--ink-soft);}
.hero-fact dd{margin:0; text-align:right;}
@media (max-width:700px){ .hero-grid{grid-template-columns:1fr;} }

/* ---------- Sections / grids ---------- */
section{padding:52px 0;}
section + section{border-top:1px solid var(--paper-line);}
.grid{display:grid; gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:820px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} }

.card{padding:20px; display:flex; flex-direction:column; gap:8px;}
.card .num{font-size:.7rem; color:var(--brass);}
.card h3{font-size:1.02rem;}
.card p{font-size:.86rem; color:var(--ink-soft); margin:0;}

.icon{
  width:38px; height:38px; border:1px solid var(--ink); display:flex; align-items:center; justify-content:center; flex:none;
}
.icon svg{width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:1.4;}

/* ---------- Works gallery ---------- */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
.filters button{
  background:none; border:1px solid var(--paper-line); color:var(--ink-soft); font-size:.76rem; letter-spacing:.03em;
  padding:7px 14px; cursor:pointer;
}
.filters button.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.work-tile{overflow:hidden; display:flex; flex-direction:column;}
.work-swatch{
  height:132px; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, rgba(122,87,23,.10) 0 8px, transparent 8px 16px),
    var(--paper);
  border-bottom:1px solid var(--paper-line);
}
.work-swatch svg{width:38px; height:38px; stroke:var(--brass); fill:none; stroke-width:1.3;}
.work-body{padding:16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.work-tag{font-size:.66rem; letter-spacing:.06em; color:var(--brass);}
.work-body h3{font-size:.95rem;}
.work-year{font-size:.74rem; color:var(--ink-soft);}
.note{font-size:.76rem; color:var(--ink-soft); margin-top:18px;}

/* ---------- Table (company info) ---------- */
.infotable{width:100%; border-collapse:collapse; font-size:.9rem;}
.infotable th,.infotable td{text-align:left; padding:14px 4px; border-bottom:1px solid var(--paper-line); vertical-align:top;}
.infotable th{width:9.5em; color:var(--ink-soft); font-weight:400; letter-spacing:.03em;}
.infotable td a{color:var(--blue);}

/* ---------- Staff ---------- */
.staff-card{padding:20px; text-align:left;}
.staff-avatar{
  width:52px; height:52px; border:1px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.staff-avatar svg{width:26px; height:26px; stroke:var(--ink); fill:none; stroke-width:1.3;}
.staff-card h3{font-size:.98rem; margin-bottom:6px;}
.staff-card p{font-size:.84rem; color:var(--ink-soft);}

/* ---------- Contact ---------- */
.contact-link{text-decoration:none; color:var(--ink);}
.contact-value{color:var(--ink); font-size:1rem; margin:0 0 4px;}
.contact-side dl{display:grid; grid-template-columns:auto 1fr; gap:10px 14px; font-size:.9rem; margin:0 0 20px;}
.contact-side dt{color:var(--ink-soft);}
.contact-side dd{margin:0;}
.mapcard{height:160px; margin-top:0; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.mapcard svg{width:100%;height:100%;position:absolute;inset:0;opacity:.5;}
.mapcard .pin{position:relative; z-index:1; font-size:.78rem; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:4px;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--paper-line); padding:36px 0 30px;}
.foot-row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-soft);}
.foot-note{font-size:.68rem; color:var(--ink-soft); margin-top:18px; opacity:.85;}

@media (prefers-reduced-motion:no-preference){
  .page-enter{animation:fadeUp .5s ease both;}
}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}