/* Site footer, shared by every page. Measured from oimachi.co at 1440 wide on 10 Oct 2026:
   four equal columns with 8px gaps, 34px headings, link rows 42px tall with a 0.67px rule,
   26px icon tiles (3.2px radius), 14px link text at weight 500 in grey until hover.
   Closing block: 152px animated mark in column one, heading and contact bar from column two,
   local time and city at the far right. */
html[data-theme="dark"]{--ft-line:#2c2b2a;--ft-tx:#868481;--ft-tile:#000;--ft-time:#868481}
html[data-theme="light"]{--ft-line:#dcdbd9;--ft-tx:#696764;--ft-tile:#fff;--ft-time:#696764}

.ft{position:relative;z-index:2;padding:10rem .5rem .75rem;background:var(--bg)}
.ft__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.ft__col{min-width:0}
.ft__col h2{margin:0 0 1rem;font:450 2.125rem/1.05 var(--font);letter-spacing:-.03em}
.ft__row{display:flex;align-items:center;gap:.5rem;height:2.625rem;border-bottom:.67px solid var(--ft-line);
  color:var(--ft-tx);text-decoration:none;font:500 .875rem/1 var(--font);letter-spacing:-.005em;transition:color .2s}
.ft__row:hover,.ft__row:focus-visible{color:var(--fg)}
.ft__row:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
.ft__tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft__ic{flex:none;width:1.625rem;height:1.625rem;border-radius:.2rem;display:grid;place-items:center;overflow:hidden;background:var(--ft-tile);color:var(--fg)}
.ft__ic img{width:76%;height:76%;object-fit:contain}
.ft__ic svg{width:.95rem;height:.95rem}
.ft__ic b{font:600 .95rem/1 var(--font);color:#000}

.ft__cta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-top:9.25rem;align-items:end}
.ft__mark{width:9.5rem;height:9.5rem;color:var(--fg)}
.ft__mark svg{display:block;width:100%;height:100%;overflow:visible}
.ft__mark .ft__dot{transform-origin:9px 9px;animation:ft-orbit 7s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ft-orbit{0%,22%{transform:rotate(0)}60%,100%{transform:rotate(360deg)}}
.ft__mark:hover .ft__dot{animation-duration:2.4s}
.ft__main{grid-column:2/4}
.ft__main h2{margin:0 0 3.6rem;max-width:26.25rem;font:450 2.125rem/1.05 var(--font);letter-spacing:-.03em}
.ft__bar{display:flex;align-items:center;gap:2.2rem;font:500 .75rem/1 var(--font)}
.ft__bar a{color:var(--fg);text-decoration:none}
.ft__bar a:hover{opacity:.6}
.ft__btn{display:inline-flex;align-items:center;height:1.45rem;padding:0 .45rem;border-radius:.2rem;background:#000;color:#fff!important;letter-spacing:-.01em;box-shadow:0 0 0 1px var(--ft-btn-line,transparent)}
html[data-theme="dark"]{--ft-btn-line:rgba(255,255,255,.16)}
.ft__btn:hover{opacity:.85!important}
.ft__city{justify-self:end;display:flex;gap:.5rem;font:500 .75rem/1 var(--font)}
.ft__city span{color:var(--ft-time);font-weight:400}

@media (prefers-reduced-motion:reduce){.ft__mark .ft__dot{animation:none}}
@media (max-width:991px){
  .ft{padding-top:6rem}
  .ft__cols{grid-template-columns:1fr 1fr;row-gap:3rem}
  .ft__cta{grid-template-columns:1fr 1fr;margin-top:5rem;row-gap:2rem}
  .ft__mark{width:6rem;height:6rem}
  .ft__main{grid-column:1/3;order:-1}
  .ft__main h2{margin-bottom:2rem}
  .ft__bar{flex-wrap:wrap;gap:1rem 1.6rem}
  .ft__city{align-self:end}
}

/* Inner pages (oimachi.co/work, 10 Oct): inside the black panel, 152px tall block, heading 34px at the panel's
   left edge, the bar on the block's bottom line, time and city at the right. */
.ftc{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin:7.5rem 0 0;padding:0 .5rem .75rem}
.ftc__main{display:flex;flex-direction:column;justify-content:space-between;min-height:9.5rem}
.ftc h2{margin:0 0 2rem;max-width:26.25rem;font:450 2.125rem/1.05 var(--font);letter-spacing:-.03em}

/* Phones, after oimachi.co at 375 wide (11 Oct 2026): Work and Products columns hidden (ours: Work and Labs),
   Services then Posts full width, 29px headings, 38px rows, no big mark, Book a call as a 36px button,
   email and phone on their own lines, time and city small at the bottom left. */
@media (max-width:767px){
  .ft{padding-top:6rem}
  .ft__cols{grid-template-columns:1fr;row-gap:3rem}
  .ft__col:nth-child(1),.ft__col:nth-child(3){display:none}
  .ft__col h2{font-size:1.79rem;margin-bottom:.9rem}
  .ft__row{height:2.375rem;font-size:.785rem}
  .ft__ic{width:1.45rem;height:1.45rem}
  .ft__cta{display:block;margin-top:5rem}
  .ft__mark{display:none}
  .ft__main h2{font-size:1.79rem;margin-bottom:1.4rem;max-width:22rem}
  .ft__bar,.ftc .ft__bar{flex-direction:column;align-items:flex-start;gap:.3rem;font-size:.9rem}
  .ft__btn{height:2.25rem;padding:0 .9rem;font-size:.8rem;margin-bottom:1.6rem}
  .ft__city{justify-content:flex-start;margin-top:3rem;font-size:.67rem}
  .ftc{display:block;margin-top:5rem}
  .ftc__main{min-height:0}
  .ftc h2{font-size:1.79rem;margin-bottom:1.4rem}
}

/* 16 Oct, after oimachi.co: a rule above the closing, the animated mark at the bottom right on phones,
   and the slim mark + email + phone bar under "Work with Hatsumei" */
.ftc{position:relative;border-top:1px solid var(--rule,rgba(127,127,127,.25));padding-top:1.6rem}
.ftc__mark{display:none}
.wwbar{display:flex;align-items:center;gap:1.6rem;margin:1rem 0 0;padding:.9rem .5rem 1rem;color:var(--muted);font:500 .875rem/1 var(--font)}
.wwbar a{color:var(--muted);text-decoration:none}.wwbar a:hover{color:var(--fg)}
.wwbar .ft__mark{width:1.1rem;height:1.1rem;color:var(--fg);flex:none}
@media (max-width:767px){
  .ft__cta{position:relative}
  .ft__cta .ft__mark{display:block;position:absolute;right:0;bottom:-.2rem;width:3.6rem;height:3.6rem}
  .ftc__mark{display:block;position:absolute;right:.5rem;bottom:.6rem;width:3.6rem;height:3.6rem}
  .wwbar{gap:1.1rem;font-size:.8rem}
  .ft__city,.ftc .ft__city{justify-content:flex-start;justify-self:start;text-align:left}
}