/* =====================================
   LAYOUT : app / header / pages
===================================== */

#app{width:100%;min-height:100dvh;background:var(--paper);position:relative;overflow:hidden}
#app:before{content:"";position:fixed;inset:0;background-image:radial-gradient(rgba(20,20,20,.14) 1px, transparent 1.3px);background-size:18px 18px;opacity:.45;pointer-events:none;z-index:0}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--header-h);display:grid;grid-template-columns: minmax(160px, .95fr) minmax(150px, .85fr) 66px;gap:14px;align-items:start;padding:22px 22px 12px;background:linear-gradient(var(--paper) 78%,rgba(246,242,233,0));}
.brand{height:66px;border:3px solid var(--line);background:rgba(246,242,233,.9);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:7px 12px;letter-spacing:.24em;font-size:22px;line-height:1.15;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset;white-space:nowrap}
.connection{font-size:13px;line-height:1.75;letter-spacing:.22em;color:#151515;opacity:.78;white-space:nowrap;padding-top:1px}
.connection i{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--orange);vertical-align:-2px;margin-left:8px}
.menu-button{width:58px;height:58px;border:3px solid var(--line);background:var(--paper);display:grid;place-content:center;gap:7px;justify-self:end;position:relative;z-index:4}
.menu-button span{display:block;width:31px;height:4px;background:var(--line)}
.page{position:relative;z-index:1;min-height:100dvh;padding:var(--header-h) 22px 24px;animation:fade .18s ease both}
@keyframes fade{from{opacity:.72;transform:translateY(5px)}to{opacity:1;transform:none}}
.dark-page{background:var(--dark);color:var(--white)}
.dark-page:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;pointer-events:none;opacity:.45}
.dark-page .site-heading,.site-heading{font-size:38px;letter-spacing:.02em;margin:26px 0 26px;line-height:1}.site-heading b{color:var(--orange);font-weight:500;margin-right:12px}
.subline{color:rgba(255,250,240,.62);letter-spacing:.12em;margin-top:16px;margin-bottom:30px}.paper-subline{color:var(--muted);letter-spacing:.12em;margin-top:-12px;margin-bottom:26px}
.paper-page{background:var(--paper);color:var(--ink)}

/* 404 */
.error-page{display:grid;place-content:center;text-align:center;min-height:100dvh;background:var(--paper);padding:90px 30px}.error-page h1{font-size:78px;margin:0}.error-page p{line-height:1.6}.error-page button{border:2px solid var(--line);padding:14px 22px;margin-top:24px}.fishbone{font-size:60px;opacity:.8}

/* responsive frame */
@media (max-width:390px){:root{--header-h:92px}.site-header{padding:18px 16px 8px;grid-template-columns: minmax(150px,.9fr) minmax(118px,.7fr) 58px;gap:10px}.brand{height:58px;font-size:18px}.connection{font-size:11px}.menu-button{width:52px;height:52px}.site-heading{font-size:34px}}
@media (min-width:700px){#app{max-width:430px;margin:0 auto}.site-header,.work-header{left:50%;right:auto;width:430px;transform:translateX(-50%)}.menu-panel{left:50%;right:auto;width:430px;transform:translateX(50%)}.menu-panel.open{transform:translateX(-50%)}}

/* About / Connections pages */
.profile-card,.connection-card{border:2px solid var(--line);background:rgba(255,255,255,.34);padding:20px;margin-top:18px}
.profile-row{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:start}
.profile-row img{width:92px;height:92px;object-fit:cover;border:2px solid var(--line)}
.sketch-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sketch-list img{width:100%;aspect-ratio:1/1.25;object-fit:cover;border:2px solid var(--line);filter:grayscale(.1)}
.connection-card{
  border:2px solid var(--line);
  background:rgba(255,255,255,.34);
  padding:18px;
  margin-top:20px;
}

.connection-card .label{
  margin:0 0 16px;
  color:var(--orange);
  font-size:18px;
  letter-spacing:.12em;
}

.my-banner{
  border:2px solid var(--line);
  background:var(--paper);
  padding:14px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
}

.my-banner img{
  width:100%;
  max-width:100%;
  height:auto;
  image-rendering:auto;
}

.site-info{
  display:grid;
  gap:6px;
  font-size:14px;
  line-height:1.6;
}

.site-info b{
  font-size:18px;
  letter-spacing:.04em;
}

.site-info span{
  color:var(--muted);
  word-break:break-all;
}

.site-info small{
  color:var(--orange);
  letter-spacing:.08em;
}

.connection-link{
  min-height:64px;
  border:2px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  margin-top:12px;
  font-weight:700;
  letter-spacing:.04em;
  background:rgba(246,242,233,.75);
}

.connection-link b{
  color:var(--orange);
  font-size:13px;
  letter-spacing:.08em;
}

.search-banner{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:14px;
  align-items:center;
  border:2px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  padding:12px;
  margin-top:12px;
  background:rgba(246,242,233,.75);
}

.search-banner img{
  width:88px;
  height:31px;
  object-fit:contain;
  background:white;
  border:1px solid rgba(0,0,0,.25);
}

.search-banner span{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
}