@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Noto+Serif+JP:wght@400;600&display=swap');
:root{
  --max: 68rem; --gutter: 1.25rem; --lh: 1.6;
  --ink: #0a0a0a; --muted:#6b6b6b; --rule:#eaeaea;
  --sans:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  --serif: "Noto Serif JP","Source Serif 4","Yu Mincho","Hiragino Mincho ProN",serif;
}
*{box-sizing:border-box} html{font-size:16px} body{margin:0;color:var(--ink);font:400 16px/var(--lh) var(--sans); background:#fff}
a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-color:currentColor}
.container{max-width:var(--max);padding:0 var(--gutter);margin:0 auto}
.header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--rule)}
.nav{display:flex;gap:1.2rem;align-items:center;height:3.5rem}
.brand{font-weight:600;letter-spacing:.2px}
.grid{display:grid;gap:1rem}
@media(min-width:720px){.grid.cols-2{grid-template-columns:repeat(2,1fr)} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.h1{font:600 clamp(28px,4vw,46px)/1.15 var(--sans); letter-spacing:.2px}
.h2{font:600 22px/1.2 var(--sans); margin:0 0 .35rem}
.muted{color:var(--muted)}
.section{padding:3rem 0;border-top:1px solid var(--rule)}
.card{padding:1.1rem;border:1px solid var(--rule);border-radius:10px; transition:transform .15s ease}
.card:hover{transform:translateY(-2px)}
.footer{border-top:1px solid var(--rule);color:var(--muted)}
/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.thumb{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:8px;border:1px solid var(--rule)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.thumb:hover img{transform:scale(1.02)}
/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(255,255,255,.98);display:none;align-items:center;justify-content:center;z-index:9999}
.lb.open{display:flex}
.lb img{max-width:min(92vw,1400px);max-height:92vh;box-shadow:0 10px 40px rgba(0,0,0,.15);border-radius:8px}
.lb .x{position:absolute;top:14px;right:18px;border:1px solid var(--rule);padding:.35rem .6rem;border-radius:999px;cursor:pointer}
.lb .arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:28px;padding:.2rem .6rem;border:1px solid var(--rule);border-radius:999px;cursor:pointer;background:#fff}
.lb .prev{left:14px} .lb .next{right:14px}
/* === THEME: Forest-Brass === */
:root{
  --bg:#0f1110; --surface:#141715; --rule:#2a2e2b;
  --ink:#e9e7e1; --muted:#a6ad9d;
  --accent:#8ca370;  /* moss */
  --accent2:#b8a46c; /* brass */
}
body{background:var(--bg);color:var(--ink)}
.header{background:rgba(15,17,16,.76);border-bottom-color:var(--rule)}
.card{background:var(--surface);border-color:var(--rule)}
a{border-bottom-color:transparent}
a:hover{border-color:var(--accent2)}
.brand{letter-spacing:.4px}
.h1{position:relative;padding-left:0.75rem}
.h1:before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:2px;
  background:linear-gradient(var(--accent),var(--accent2))}
.thumb{border-color:var(--rule)}
.lb{background:rgba(0,0,0,.92)}
/* === THEME: Mono Brut Dark === */
:root{ --bg:#111213; --surface:#16181a; --rule:#242628; --ink:#e6e6e6; --muted:#9aa0a6; --accent:#b0b7bf }
body{background:var(--bg);color:var(--ink);letter-spacing:.1px}
.header{background:rgba(17,18,19,.78);border-bottom-color:var(--rule)}
.card{background:var(--surface);border-color:var(--rule)}
.thumb{background:var(--surface);border-color:var(--rule)}
a:hover{border-color:var(--ink)}
.h1{letter-spacing:.2px}
.lb{background:rgba(0,0,0,.9)}

/* === THEME: Graphite Dark === */
:root{
  --bg:#0f1115; --surface:#151820; --rule:#242833;
  --ink:#e8e8e8; --muted:#a5abb6; --accent:#8ea4b8;
}
body{background:var(--bg);color:var(--ink)}
.header{background:rgba(15,17,21,.75);border-bottom-color:var(--rule)}
.card{background:var(--surface);border-color:var(--rule)}
.thumb{background:var(--surface);border-color:var(--rule)}
a:hover{border-color:var(--ink)}
.h1{font:600 clamp(32px,5.5vw,64px)/1.05 var(--sans)}
.lb{background:rgba(0,0,0,.9)}
/* === THEME: Mono Brut Dark === */
:root{ --bg:#111213; --surface:#16181a; --rule:#242628; --ink:#e6e6e6; --muted:#9aa0a6; --accent:#b0b7bf }
body{background:var(--bg);color:var(--ink);letter-spacing:.1px}
.header{background:rgba(17,18,19,.78);border-bottom-color:var(--rule)}
.card{background:var(--surface);border-color:var(--rule)}
.thumb{background:var(--surface);border-color:var(--rule)}
a:hover{border-color:var(--ink)}
.h1{letter-spacing:.2px}
.lb{background:rgba(0,0,0,.9)}

/* === THEME: Mono-Forest Minimal (B+C) === */
:root{
  --bg:#0f1110;        /* deep charcoal */
  --surface:#141715;   /* slightly lighter panel */
  --ink:#e9e7e1;       /* warm off-white text */
  --muted:#a6ad9d;     /* soft moss gray */
  --accent:#8ca370;    /* moss */
  --accent2:#b8a46c;   /* brass */
}

/* Base */
html,body{background:var(--bg);color:var(--ink)}
body{letter-spacing:.05px}

/* Links: understated underline, brass on hover */
a{border-bottom:none;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent2)}

/* Header/footer: no borders */
.header{background:rgba(15,17,16,.70);border-bottom:none}
.footer{border-top:none;color:var(--muted)}

/* Cards & thumbs: no borders, no shadows; soft radius */
.card{background:var(--surface);border:none;border-radius:10px;box-shadow:none}
.thumb{background:var(--surface);border:none;border-radius:10px}
.thumb img{transform:none}

/* Text scale */
.h1{font:600 clamp(32px,5vw,60px)/1.08 var(--sans);letter-spacing:.1px}
.h2{font:600 20px/1.2 var(--sans)}
.muted{color:var(--muted)}

/* Lightbox */
.lb{background:rgba(0,0,0,.92)}
/* domain list (understated) */
.domain-list{margin-top:1rem;padding-left:.25rem}
.domain-list li{list-style:none;margin:.25rem 0;color:var(--muted)}
.domain-list li::before{content:"- ";color:var(--muted)}
.domain-list a{text-decoration:none;color:var(--ink)}
.domain-list a:hover{color:var(--accent2);text-decoration:underline}
/* Masonry gallery (no cropping; responsive columns) */
.masonry{ column-width: 280px; column-gap: 12px; }
@media (max-width: 720px){ .masonry{ column-width: 180px; } }
.masonry a{ display:inline-block; width:100%; margin:0 0 12px; break-inside: avoid; }
.masonry a img{ width:100%; height:auto; display:block; border-radius:10px; }
/* Masonry no-crop overrides */
.masonry .thumb{ aspect-ratio:auto; overflow:visible; }      /* disable forced 4:3 */
.masonry .thumb img{ height:auto; object-fit:contain; }      /* respect natural ratio */

/* Preferred class for new tiles */
.masonry .tile{ display:inline-block; width:100%; margin:0 0 12px; break-inside:avoid; }
.masonry .tile img{ width:100%; height:auto; display:block; border-radius:10px; }
/* --- Site background image --- */
html{ background: var(--bg); } /* fallback color */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(15,17,16,.30), rgba(15,17,16,.30)), /* darken */
    url("/bg4.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:saturate(.95) contrast(1.05);
}
/* --- Full-page background image (works on mobile) --- */
html{
  /* layered: dark overlay + your image */
  background-image:
    linear-gradient(rgba(15,17,16,.62), rgba(15,17,16,.62)),
    url("/bg4.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* desktop parallax */
  background-color: var(--bg);  /* fallback */
}
/* iOS/Android: avoid fixed attachment quirks */
@media (max-width: 900px){
  html{ background-attachment: scroll; }
}

/* let the background show through more */
body{ background: transparent !important; }
.header{ background: rgba(15,17,16,.45); }       /* was ~.70 */
.card{ background: rgba(20,23,21,.30); }         /* tiles/panels */
.thumb{ background: rgba(20,23,21,.30); }
.footer{ background: transparent; }
/* Compact masonry (≈50% smaller thumbnails) */
.masonry{ column-width:140px; column-gap:8px; }
.masonry a{ margin:0 0 8px; }
@media (max-width:720px){ .masonry{ column-width:110px; } }