/* ============================================================
   施工事例 pages (/works/) and the 404 page
   Built on the homepage tokens in akatsuki.css.
============================================================ */
.gb-page{ background:var(--cream); }

/* header */
.gb-header{
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,5vw,56px); padding-top:calc(14px + env(safe-area-inset-top,0px));
  background:rgba(23,17,12,.94); color:var(--cream);
  border-bottom:1px solid rgba(198,154,82,.25);
}
.gb-brand img{ height:40px; width:auto; }
.gb-nav{ display:flex; align-items:center; gap:clamp(12px,2.4vw,28px); font-size:.86rem; letter-spacing:.06em; }
.gb-nav a{ color:rgba(246,241,230,.85); transition:color .25s; white-space:nowrap; }
.gb-nav a:hover{ color:var(--dawn); }
.gb-tel{ font-family:var(--serif-en); font-size:1.05rem; color:var(--dawn) !important; }
@media (max-width:640px){
  .gb-brand img{ height:34px; }
  .gb-nav a:not(.gb-tel){ display:none; }
}

/* layout */
.gb-main{ max-width:1180px; margin:0 auto; padding:24px clamp(16px,5vw,56px) 0; }
.gb-crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:.78rem; color:var(--ink-soft); margin-bottom:36px; }
.gb-crumbs a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(36,26,18,.25); }
.gb-crumbs span[aria-current]{ color:var(--ink); }

.gb-head{ max-width:760px; margin-bottom:44px; }
.gb-title{ font-family:var(--serif-jp); font-weight:600; font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.45; margin:4px 0 16px; text-wrap:balance; }
.gb-lead{ font-size:1rem; line-height:2.05; color:var(--ink-soft); text-wrap:pretty; }
.gb-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:22px; }
.gb-chip{ background:var(--ink); color:var(--cream); font-size:.74rem; padding:5px 12px; letter-spacing:.05em; }
.gb-chip-line{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.gb-date{ font-family:var(--serif-en); font-size:.9rem; color:var(--ink-soft); letter-spacing:.06em; }

/* photos: natural shape, nothing cropped */
.gb-photos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(12px,2vw,22px); }
.gb-photo, .gb-pair{ margin:0; background:#e9e1d2; }
.gb-photo img{ width:100%; height:auto; }
.gb-photos > .gb-photo:first-child{ grid-column:1 / -1; }
.gb-photos > .gb-photo:first-child img{ max-height:82vh; width:100%; object-fit:contain; background:var(--espresso-2); }
.gb-pair{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--espresso-2); }
.gb-pair > div{ position:relative; }
.gb-pair img{ width:100%; height:100%; object-fit:cover; }
.gb-pair figcaption{
  position:absolute; left:12px; bottom:12px; padding:5px 12px;
  font-size:.74rem; letter-spacing:.2em; color:#fff; background:rgba(23,17,12,.65);
}
@media (max-width:640px){
  .gb-photos{ grid-template-columns:1fr; }
  .gb-pair{ grid-template-columns:1fr; }
}

/* list page cards */
.gb-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,250px),1fr)); gap:clamp(18px,2.4vw,30px); }
.gb-card{ display:flex; flex-direction:column; gap:8px; }
.gb-card-photo{ display:block; aspect-ratio:760/1000; overflow:hidden; background:#dcc79f; }
.gb-card-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gb-card .gb-chips{ margin:6px 0 0; }
.gb-card-name{ font-family:var(--serif-jp); font-weight:600; font-size:1.08rem; line-height:1.5; }
.gb-card-type{ font-size:.84rem; color:var(--ink-soft); }
.gb-card-more{ margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border:1px solid var(--ink); font-size:.86rem; letter-spacing:.08em;
  transition:background .25s, color .25s; }
.gb-card-type{ margin-bottom:6px; }
.gb-arrow{ transition:transform .25s var(--ease); }
.gb-card:hover .gb-card-more, .gb-card:focus-visible .gb-card-more{ background:var(--ink); color:var(--cream); }
.gb-card:hover .gb-arrow{ transform:translateX(4px); }
@media (hover:hover) and (pointer:fine){ .gb-card:hover .gb-card-photo img{ transform:scale(1.04); } }
@media (max-width:640px){
  .gb-grid{ row-gap:0; }
  .gb-card{ padding-bottom:44px; margin-bottom:44px; border-bottom:1px solid var(--line); }
  .gb-card:last-child{ border-bottom:0; margin-bottom:0; }
}

/* prev / next */
.gb-pager{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin:56px 0 0; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gb-pager a{ font-family:var(--serif-jp); font-size:.95rem; line-height:1.5; min-width:0; }
.gb-pager small{ display:block; font-family:var(--sans-jp); font-size:.7rem; letter-spacing:.12em; color:var(--brass-dim); margin-bottom:2px; }
.gb-next{ text-align:right; }
.gb-all{ padding:8px 18px; border:1px solid var(--ink); font-size:.82rem !important; font-family:var(--sans-jp) !important; }
.gb-all:hover{ background:var(--ink); color:var(--cream); }

/* call to action */
.gb-cta{ margin:64px 0 72px; padding:clamp(32px,5vw,56px); background:var(--espresso); color:var(--cream); text-align:center; }
.gb-cta-eyebrow{ font-family:var(--serif-en); letter-spacing:.38em; font-size:.8rem; color:var(--brass); margin-bottom:10px; }
.gb-cta-title{ font-family:var(--serif-jp); font-weight:600; font-size:clamp(1.25rem,3vw,1.7rem); margin-bottom:12px; text-wrap:balance; }
.gb-cta-text{ font-size:.9rem; color:rgba(246,241,230,.75); margin-bottom:26px; text-wrap:pretty; }
.gb-cta-text span, .gb-lead span{ display:inline-block; }
/* all buttons the same size: three equal columns on PC, full-width stack on phone */
.gb-cta-btns{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; max-width:820px; margin:0 auto; }
@media (max-width:720px){ .gb-cta-btns{ grid-template-columns:1fr; max-width:400px; } }
.gb-btn{ min-height:56px; text-align:center; line-height:1.4; display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; font-size:.9rem; letter-spacing:.05em; border:1px solid var(--brass); }
.gb-btn-dark{ background:var(--cream); color:var(--espresso); border-color:var(--cream); }
.gb-btn-gold{ background:var(--brass); color:var(--espresso); }
.gb-btn-line{ color:var(--cream); }
.gb-btn:hover{ filter:brightness(1.08); }

/* footer */
.gb-footer{ background:var(--night); color:rgba(246,241,230,.65); text-align:center; padding:48px 16px calc(28px + env(safe-area-inset-bottom,0px)); font-size:.82rem; line-height:2; }
.gb-foot-logo{ height:44px; width:auto; margin:0 auto 18px; }
.gb-copy{ margin-top:18px; font-size:.74rem; opacity:.7; }

/* ============================================================
   404
============================================================ */
.nf{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:48px 20px; background:radial-gradient(ellipse at 50% 120%, rgba(232,140,70,.30) 0%, rgba(178,58,46,.12) 32%, transparent 62%), var(--night); color:var(--cream); }
.nf-sun{ display:block; width:140px; height:140px; border-radius:50%; margin-bottom:28px;
  box-shadow:0 0 70px rgba(232,140,70,.35); animation:nfRise 1.6s cubic-bezier(.2,.7,.2,1) both; }
.nf-sun img{ width:100%; height:100%; display:block; }
@keyframes nfRise{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
.nf-code{ font-family:var(--serif-en); font-size:clamp(3.4rem,10vw,5.2rem); letter-spacing:.2em; color:var(--brass); line-height:1; margin-bottom:10px; padding-left:.2em; }
.nf-title{ font-family:var(--serif-jp); font-weight:600; font-size:clamp(1.25rem,3.4vw,1.7rem); margin-bottom:12px; }
.nf-text{ color:rgba(246,241,230,.72); font-size:.92rem; line-height:2; margin-bottom:30px; max-width:34em; text-wrap:pretty; }
.nf-text span{ display:inline-block; }
.nf .gb-cta-btns{ max-width:640px; }
@media (prefers-reduced-motion:reduce){ .nf-sun{ animation:none; } }
body.gb-page{ padding-bottom:0; }  /* no phone bar on these pages */

/* soft reveal as you scroll (same feel as the homepage) */
.gb-rv .gb-photo, .gb-rv .gb-pair, .gb-rv .gb-card{
  opacity:0; transform:translateY(32px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.gb-rv .gb-photo.in, .gb-rv .gb-pair.in, .gb-rv .gb-card.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .gb-rv .gb-photo, .gb-rv .gb-pair, .gb-rv .gb-card{ opacity:1; transform:none; transition:none; }
}