@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--paper:#f8f7f4;--ink:#292c35;--muted:#747782;--line:#dbdce1;--accent:#565f7e;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--paper);scroll-behavior:smooth;scroll-padding-top:30px}*{box-sizing:border-box}body{margin:0;text-transform:lowercase}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{background:#dce0eb}header,main,footer{width:min(1320px,calc(100% - 112px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:35px 0;border-bottom:1px solid var(--line)}.wordmark{font-weight:650;font-size:21px;letter-spacing:-.8px;display:flex;align-items:center;gap:17px}.wordmark span{font-size:29px;color:var(--accent);font-weight:400}nav{display:flex;gap:30px;font-size:13px}nav a{padding:6px 0}a:hover{color:var(--accent)}.intro{padding:77px 0 57px;border:0}.eyebrow{font-size:11px;letter-spacing:1.4px;text-transform:lowercase;color:var(--muted);margin:0 0 29px}h1{font-size:clamp(56px,6.6vw,96px);font-weight:450;letter-spacing:-5px;line-height:1.06;margin:0}h1 em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:var(--accent);letter-spacing:-3px}.intro-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:34px;font-size:13px}.intro-bottom p{color:var(--muted)}.intro-bottom a span{margin-left:24px}section{border-top:1px solid var(--line);padding:31px 0 66px;scroll-margin-top:24px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:31px}h2{font-size:15px;font-weight:500;margin:0}.index{color:var(--muted);font-size:11px;margin-right:19px;font-weight:400}.meta{font-size:11px;color:var(--muted)}.projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}.project{background:none;border:0;padding:0;text-align:left}.project-art{aspect-ratio:1.15;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:filter .25s}.project:hover .project-art{filter:brightness(.96)}.art-jim{background:#e5e7ed}.jim-window{width:73%;background:#2b3042;border-radius:6px;box-shadow:0 16px 24px #20283c20;transform:rotate(-5deg);transition:transform .3s}.project:hover .jim-window{transform:rotate(-2deg) translateY(-4px)}.window-top{display:flex;gap:4px;padding:10px;border-bottom:1px solid #ffffff15;align-items:center;font-size:5px;color:#8993b0}.window-top span{font:7px monospace;color:#b8bed1;margin:auto}.jim-body{padding:18px 23px 23px;color:#dce2f3}.tiny{font:6px monospace;letter-spacing:2px}.jim-body strong{display:block;font:700 clamp(35px,4vw,62px) monospace;margin:11px 0}.code-lines i{display:block;height:3px;width:70%;background:#7883a3;margin:6px 0}.code-lines i:nth-child(2){width:45%}.code-lines i:nth-child(3){width:58%}.terminal{display:block;font:6px monospace;margin-top:15px;color:#afb8d0}.art-note{position:absolute;bottom:15px;font-size:7px;letter-spacing:1.5px;opacity:.55}.art-grem{background:#bcafcf}.bot{position:relative;transition:transform .3s}.project:hover .bot{transform:translateY(-6px) rotate(4deg)}.bot-head{width:116px;height:88px;border-radius:29px;background:#565f7e;box-shadow:inset 2px 3px 8px #bec8e1,inset -5px -6px 8px #333c5940,9px 12px 18px #3e496526;position:relative;display:flex;align-items:center;justify-content:center;gap:26px;transform:rotate(-8deg)}.bot-head i{width:12px;height:18px;border-radius:50%;background:#252e49}.bot-head span{position:absolute;width:14px;height:6px;border-bottom:2px solid #252e49;border-radius:50%;bottom:17px}.antenna{position:absolute;height:22px;width:3px;top:-19px;left:53px;transform:rotate(-8deg);background:#565f7e}.antenna:before{content:'';position:absolute;width:10px;height:10px;background:#7481a3;border-radius:50%;top:-7px;left:-4px}.bot-shadow{position:absolute;width:90px;height:10px;background:#424e7025;filter:blur(7px);bottom:-30px;left:16px;border-radius:50%}.art-holo{background:#e8e8ee;flex-direction:column}.holo-star{font-size:125px;line-height:1;color:#727d9c;z-index:1;transition:transform .6s;font-family:Georgia,serif;text-shadow:2px 3px 1px #ffffffa0}.project:hover .holo-star{transform:rotate(45deg)}.holo-type{font-family:'Instrument Serif',Georgia,serif;font-size:24px;z-index:1}.orbit{position:absolute;width:195px;height:100px;border:1px solid #a2aac1;border-radius:50%;top:calc(50% - 65px);transform:rotate(-35deg)}.orbit.second{transform:rotate(35deg);opacity:.5}.card-caption{display:flex;align-items:center;justify-content:space-between;margin-top:17px}.card-caption h3{font-size:14px;font-weight:550;margin:0}.card-caption>span{font-size:17px}.project p{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:8px 0 0}.photo-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:23px}.photo{border:0;background:none;padding:0;text-align:left;min-width:0}.photo img{display:block;width:100%;height:360px;object-fit:cover;filter:saturate(.6);transition:filter .3s}.photo:hover img{filter:saturate(1)}.photo>span{display:flex;justify-content:space-between;font-size:11px;padding-top:13px}.photo>span>span:last-child{font-size:10px;color:var(--muted)}.sample-note{font-size:10px;color:var(--muted);margin:25px 0 0}.about{display:grid;grid-template-columns:1fr 1.7fr;padding-top:37px;padding-bottom:70px}.about-lead{font-family:'Instrument Serif',Georgia,serif;font-size:48px;margin:0 0 18px;letter-spacing:-1px}.about-copy{font-size:20px;line-height:1.6;max-width:560px;margin:0 0 20px}.about-copy:has(+.about-copy){margin-bottom:12px}.text-link{display:inline-block;font-size:12px;margin-top:16px;border-bottom:1px solid var(--line);padding-bottom:6px}.blog-empty{display:flex;align-items:center;gap:25px;padding:28px 0 12px}.journal-symbol{font-family:'Instrument Serif',Georgia,serif;font-size:60px;color:#929bb3}.blog-empty h3{font-size:19px;letter-spacing:-.3px;font-weight:450;margin:0 0 10px}.blog-empty p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.blog-empty>.meta{margin-left:auto;align-self:flex-start;padding-top:9px}.contact{padding-top:40px;padding-bottom:42px}.contact-main{display:flex;align-items:center;justify-content:space-between}.contact h2{font-size:clamp(45px,6vw,80px);letter-spacing:-3px;line-height:1.1;font-weight:450}.contact-arrow{font-size:80px;margin-right:14px;transition:transform .25s}.contact-arrow:hover{transform:translate(5px,-5px)}.contact-bottom{display:flex;align-items:center;gap:30px;margin-top:28px;font-size:14px}footer{border-top:1px solid var(--line);padding:24px 0 30px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.skip{position:fixed;left:20px;top:-100px;z-index:10;background:var(--paper);padding:15px}.skip:focus{top:15px}dialog{width:min(760px,calc(100% - 32px));max-height:90vh;border:1px solid var(--line);background:var(--paper);padding:35px;color:var(--ink)}dialog::backdrop{background:#222838d9;backdrop-filter:blur(4px)}body:has(dialog[open]){overflow:hidden}.close-dialog{display:block;margin-left:auto;background:none;border:0;font-size:12px;padding:8px 0 22px}dialog h2{font-size:36px;letter-spacing:-1px;margin:20px 0}dialog p{color:var(--muted);line-height:1.8;font-size:14px}dialog img{width:100%;max-height:65vh;object-fit:contain}
dialog[open]{animation:dialog-in .22s cubic-bezier(.22,.8,.28,1)}dialog[open]::backdrop{animation:backdrop-in .18s ease-out}dialog.is-closing{animation:dialog-out .18s ease-in forwards}dialog.is-closing::backdrop{animation:backdrop-out .18s ease-in forwards}@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}@keyframes dialog-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(7px) scale(.99)}}@keyframes backdrop-in{from{opacity:0}to{opacity:1}}@keyframes backdrop-out{from{opacity:1}to{opacity:0}}
@media(max-width:900px){header,main,footer{width:calc(100% - 56px)}nav{gap:18px;font-size:11px}.wordmark{font-size:18px}.intro{padding-top:60px}h1{letter-spacing:-3px}.project-art{aspect-ratio:1}.jim-window{width:82%}.jim-body{padding:12px}.art-note{font-size:5px;letter-spacing:1px}.photo img{height:290px}.project p{flex-direction:column;gap:5px}.about{grid-template-columns:1fr 1.4fr}.about-copy{font-size:18px}footer>span:nth-child(2){display:none}}@media(max-width:600px){header,main,footer{width:calc(100% - 40px)}header{align-items:flex-start;flex-direction:column;gap:22px;padding:23px 0}.wordmark{font-size:20px}nav{width:100%;justify-content:space-between;gap:8px;font-size:11px}.intro{padding:45px 0 36px}h1{font-size:clamp(46px,12.7vw,61px);letter-spacing:-3.7px}.eyebrow{font-size:9px;margin-bottom:22px}.intro-bottom{align-items:flex-start;flex-direction:column;gap:10px;font-size:12px;margin-top:22px}section{padding:26px 0 40px}.section-heading{align-items:flex-start;gap:14px;margin-bottom:24px}.section-heading>.meta{font-size:9px;max-width:100px;text-align:right;line-height:1.6}h2{font-size:13px}.index{margin-right:11px}.projects-grid{grid-template-columns:1fr;gap:29px}.project-art{aspect-ratio:1.3}.jim-window{width:65%;max-width:260px}.jim-body{padding:18px 23px}.jim-body strong{font-size:55px}.art-note{font-size:7px}.project p{flex-direction:row}.photo-grid{grid-template-columns:1fr;gap:27px}.photo img{height:auto;aspect-ratio:1.2;object-fit:cover}.about{grid-template-columns:1fr;gap:30px}.about-lead{font-size:42px}.about-copy{font-size:18px}.blog-empty{gap:18px;flex-wrap:wrap}.blog-empty h3{font-size:17px}.blog-empty>.meta{margin-left:47px;padding:0}.journal-symbol{font-size:46px}.contact h2{font-size:52px}.contact-arrow{font-size:60px;margin:0}.contact-bottom{gap:20px;font-size:12px}footer{font-size:9px}dialog{padding:22px}}@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* screen approximation of pantone 18-3917 tcx gray blue */
.contact-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:var(--accent);color:#fff;padding:14px 22px;border:1px solid var(--accent);font-size:12px;transition:background .2s}.contact-button:hover{background:#414a67;color:#fff}

/* project detail copy */
dialog h3{font-size:15px;font-weight:500;margin:28px 0 14px}

.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;margin:28px 0}.project-gallery figure{margin:0;min-width:0}.project-gallery figure:first-child{grid-column:1/-1}.project-gallery a{display:block}.project-gallery img{display:block;width:100%;height:auto;max-height:none;border-radius:6px}.project-gallery figcaption{font-size:12px;line-height:1.6;color:var(--muted);margin-top:10px}@media(max-width:600px){.project-gallery{grid-template-columns:1fr}}
dialog:has(.case-study-features){width:min(920px,calc(100% - 32px))}.case-study-features{list-style:none;padding:0;margin:0 0 30px}.case-study-feature{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;padding:24px 0;border-top:1px solid var(--line)}.case-study-feature:last-child{border-bottom:1px solid var(--line)}.case-study-feature-number{grid-column:1;grid-row:1/3;font-size:10px;letter-spacing:1px;color:var(--muted);padding-top:4px}.case-study-feature h3{grid-column:2;margin:0;font-size:16px;font-weight:550;color:var(--ink)}.case-study-feature-copy,.case-study-points{grid-column:2;margin:7px 0 0}.case-study-points{padding-left:17px;color:var(--muted);font-size:14px;line-height:1.8}.case-study-points li+li{margin-top:7px}.case-study-feature>.project-gallery{grid-column:2}.holowish-gallery{grid-template-columns:repeat(auto-fit,minmax(120px,180px));gap:16px;margin:18px 0 2px}.holowish-gallery figure:first-child{grid-column:auto}.holowish-gallery img{width:100%;height:300px;max-height:none;object-fit:contain;margin:0 auto;background:#e8e8ee}.holowish-gallery figcaption{font-size:10px;letter-spacing:.3px;margin-top:7px}.grembot-gallery{grid-template-columns:minmax(0,1fr);margin:18px 0 2px}.grembot-gallery figure:first-child{grid-column:auto}.grembot-gallery .grem-response{width:min(100%,360px)}@media(max-width:600px){.case-study-feature{grid-template-columns:24px minmax(0,1fr);column-gap:10px;padding:20px 0}.case-study-feature>.project-gallery{grid-column:1/-1}.holowish-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px;margin-top:16px}.holowish-gallery img{height:240px}}

.project-cover{display:block;width:100%;height:100%;object-fit:contain}
.art-grem .project-cover{transition:transform .3s ease}
@media(prefers-reduced-motion:no-preference){
  .project:is(:hover,:focus-visible) .art-grem .project-cover{transform:translateY(-5px) rotate(-1deg) scale(1.025)}
}

.about-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:27px}.social-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--accent);transition:background .2s,border-color .2s}.social-link:hover{background:#e5e7ed;border-color:var(--accent)}.social-link svg{display:block}

/* ProjectJim device imagery */
.art-jim{background:#282423}
.jim-cover-phone,.jim-cover-watch{position:absolute;display:block;object-fit:contain;transition:transform .3s}
.jim-cover-phone{height:91%;width:auto;left:12%;bottom:4%;transform:rotate(-2deg)}
.jim-cover-watch{height:45%;width:auto;right:8%;top:9%;transform:rotate(4deg)}
.project:hover .jim-cover-phone{transform:rotate(0) translateY(-4px)}
.project:hover .jim-cover-watch{transform:rotate(1deg) translateY(-5px)}

.jim-gallery{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;margin:22px 0 28px}
.jim-gallery figure:first-child{grid-column:auto}
.jim-gallery figure:only-child{grid-column:1/-1}
.jim-gallery a{display:flex;align-items:center;justify-content:center;height:250px;padding:18px;background:#282423;border-radius:8px}
.jim-gallery:has(.jim-phone) a{height:390px}
.jim-gallery .jim-phone a{background:#2a2927}
.jim-gallery img{height:auto;max-height:100%;width:auto;max-width:100%;border-radius:0}
.jim-gallery .jim-watch img{max-height:210px}

@media(max-width:600px){
  .jim-gallery{grid-template-columns:1fr}
  .jim-gallery a,.jim-gallery:has(.jim-phone) a{height:250px}
  .jim-gallery .jim-phone a{height:390px}
}

/* photography collection */
.photo-metadata{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 24px;border-top:1px solid var(--line);padding-top:20px;margin-top:24px;font-size:12px;line-height:1.6}
.photo-metadata dt{color:var(--muted)}
.photo-metadata dd{margin:0;text-transform:none;overflow-wrap:anywhere}
.photo-collections{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.photo-collections button{border:1px solid var(--line);border-radius:20px;background:none;padding:9px 16px;font-size:12px;color:var(--muted)}
.photo-collections button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:white}
.photo-collections button:disabled{cursor:default}
.photo-viewport{position:relative}
.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.photo-grid--outgoing{position:absolute;inset:0;pointer-events:none}
.photo img{height:auto;aspect-ratio:3/2;object-fit:cover;filter:none}
.photo:is(:hover,:focus-visible) img{filter:none}
.photo-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:28px;font-size:11px;color:var(--muted)}
.photo-control{border:0;background:none;padding:8px 0;color:var(--ink)}
.photo-control:first-child{justify-self:start}.photo-control:last-child{justify-self:end}
.photo-control:disabled{color:var(--muted);cursor:default;opacity:.45}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.photo-grid{grid-template-columns:1fr}.photo-controls{margin-top:20px}}

/* Vector icons stay consistent across platform fonts and emoji sets. */
.icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex-shrink:0}
.wordmark>span{display:flex;align-items:center}
.contact-arrow .icon{display:block}

/* A quiet Japanese wordmark: flower and bloom. */
.wordmark .brand-name {
  font: inherit;
  color: var(--ink);
}
.wordmark .brand-bloom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.wordmark .brand-kanji {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", "MS Mincho", serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .15em;
  padding-left: .15em;
  color: var(--accent);
}
.wordmark .brand-reading {
  font-size: 8px;
  line-height: 1;
  letter-spacing: .15em;
  color: var(--accent);
}
@media (max-width: 900px) {
  .wordmark { gap: 12px; }
  .wordmark .brand-bloom { padding-left: 12px; }
  .wordmark .brand-kanji { font-size: 25px; }
}

/* A shared blossom motif, kept away from photography and reading content. */
.bloom-mark {
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url("assets/blossom.svg") center / contain no-repeat;
  vertical-align: middle;
  flex-shrink: 0;
}
.intro { position: relative; }
.intro > .eyebrow { display: flex; align-items: center; gap: 13px; }
.intro-bloom {
  position: absolute;
  top: 105px;
  right: 45px;
  width: 200px;
  height: 200px;
  pointer-events: none;
}
.intro-bloom img { display: block; width: 100%; height: 100%; opacity: .58; transform: rotate(-12deg); }
.loose-petal {
  position: absolute;
  width: 12px;
  height: 21px;
  border: 1px solid var(--accent);
  border-radius: 85% 15% 80% 20%;
  opacity: .3;
}
.petal-one { right: -22px; top: 42px; transform: rotate(32deg); }
.petal-two { right: 6px; bottom: -14px; transform: rotate(75deg); width: 9px; height: 16px; }
main > section:not(.intro) { position: relative; }
main > section:not(.intro)::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--paper) url("assets/blossom.svg") center / 18px no-repeat;
  box-shadow: 0 0 0 7px var(--paper);
}
.journal-symbol.bloom-mark { width: 44px; height: 44px; opacity: .7; }
footer > span:nth-child(2) { display: flex; align-items: center; gap: 9px; }
.contact-button { gap: 12px; }
.contact-button::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("assets/blossom.svg") center / contain no-repeat;
  filter: brightness(0) invert(1);
  transition: transform .3s ease;
}
.contact-button:hover::before { transform: rotate(30deg); }
@media (max-width: 1000px) {
  .intro-bloom { width: 130px; height: 130px; right: 5px; top: 115px; }
}
@media (max-width: 700px) {
  .intro-bloom { display: none; }
}
@media (max-width: 900px) {
  footer > span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-button::before { transition: none; }
}

/* Personal details stay secondary to the short biography. */
.about-details {
  display: grid;
  gap: 16px;
  max-width: 600px;
  margin: 28px 0;
  font-size: 12px;
  line-height: 1.8;
}
.about-details > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 18px;
}
.about-details dt { color: var(--muted); }
.about-details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .about-details > div { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
}

/* Readable supporting type without losing the quiet editorial hierarchy. */
:root { --muted: #626775; scroll-padding-top: 110px; }
[hidden] { display: none !important; }
header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 19px 0;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--paper);
}
header::before {
  content: "";
  position: absolute;
  inset: 0 -56px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  z-index: -1;
}
nav { font-size: 14px; }
#main-navigation a { min-height: 44px; display: inline-flex; align-items: center; gap: 5px; position: relative; }
#main-navigation a[aria-current="location"] { color: var(--accent); }
#main-navigation a[aria-current="location"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--accent);
}
.menu-toggle { display: none; }
.meta, .index, .eyebrow { font-size: 12px; }
.section-heading h2, .about > h2 { font-size: 16px; }
.intro-bottom { font-size: 14px; }
.card-caption h3 { font-size: 17px; }
.project { display: block; min-width: 0; }
.project p { font-size: 13px; }
.project .project-description { display: block; color: var(--ink); font-size: 15px; line-height: 1.6; margin-top: 10px; }
.photo > span { font-size: 14px; gap: 12px; line-height: 1.5; }
.photo > span > span:last-child { font-size: 12px; }
.about-details, .photo-metadata, .project-gallery figcaption, .holowish-gallery figcaption { font-size: 14px; }
.gear-details { max-width: 600px; }
.gear-details > summary { display: none; }
.gear-details .about-details { margin-top: 0; }
.blog-empty p { font-size: 14px; }
footer { font-size: 12px; gap: 16px; }
.photo-control, .photo-collections button, .close-dialog, .contact-button { min-height: 44px; font-size: 14px; }
.photo-collections { align-items: center; }
.photo-viewport { touch-action: pan-y pinch-zoom; }
.photo-grid--all { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
.photo-controls { font-size: 13px; }
#photo-position { grid-column: 2; grid-row: 1; }
#previous-photos { grid-column: 1; grid-row: 1; padding-right: 12px; }
#next-photos { grid-column: 3; grid-row: 1; padding-left: 12px; }
.close-dialog { position: sticky; top: -1px; z-index: 2; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); }
dialog p { font-size: 16px; }

/* Dedicated case-study pages retain a persistent return path on every screen. */
.project-page-header { gap: 24px; }
.project-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.project-home { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.project-home span { color: var(--accent); font-family: "Yu Mincho", serif; font-size: 26px; }
.project-article { max-width: 920px; padding: 64px 0 72px; }
.project-article h1 { font-size: clamp(44px, 6vw, 76px); margin-bottom: 32px; letter-spacing: -2px; overflow-wrap: anywhere; }
.project-article p { font-size: 17px; line-height: 1.85; max-width: 720px; }
.project-article > .eyebrow { font-size: 12px; }
.project-article h2 { font-size: 22px; margin: 40px 0 22px; }
.project-article .case-study-points { font-size: 16px; }
.project-article .case-study-feature h3 { font-size: 18px; }
.project-article .case-study-feature-copy { font-size: 16px; }
.project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; }
.project-repo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 14px 22px; border: 1px solid var(--line); font-size: 14px; color: var(--ink); transition: border-color .2s; }
.project-repo:hover { border-color: var(--ink); }
@media (max-width: 600px) { .project-actions a { flex: 1 1 100%; justify-content: center; } }
.project-pagination { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); margin-top: 52px; padding-top: 24px; }
.project-pagination a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 900px) {
  header::before { inset-inline: -28px; }
  .photo-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { scroll-padding-top: 100px; }
  header { flex-direction: row; align-items: center; gap: 12px; padding: 14px 0; }
  .wordmark { font-size: 18px; white-space: nowrap; }
  .wordmark .brand-kanji { font-size: 23px; }
  .wordmark .brand-bloom { padding-left: 10px; }
  .menu-toggle { display: inline-flex; gap: 12px; justify-content: center; align-items: center; min-height: 44px; padding: 8px 10px; font-size: 14px; background: transparent; border: 1px solid var(--line); }
  #main-navigation { display: none; position: absolute; top: 100%; left: -28px; right: -28px; width: auto; background: var(--paper); padding: 12px 28px 20px; border-bottom: 1px solid var(--line); box-shadow: 0 15px 20px #292c3508; }
  #main-navigation.is-open { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 16px; }
  #main-navigation a { padding: 8px 0; }
  #main-navigation a[aria-current="location"]::after { right: auto; width: 24px; }
  .gear-details { margin-top: 24px; border-block: 1px solid var(--line); }
  .gear-details > summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; font-size: 14px; list-style: none; }
  .gear-details > summary::-webkit-details-marker { display: none; }
  .gear-details > summary::after { content: "+"; color: var(--accent); font-size: 20px; }
  .gear-details[open] > summary::after { content: "−"; }
  .gear-details .about-details { margin: 8px 0 24px; }
  .project-article { padding-top: 36px; }
  .project-page-header { flex-direction: row; }
  .project-article p { font-size: 16px; }
}
@media (max-width: 600px) {
  header::before { inset-inline: -20px; }
  #main-navigation { left: -20px; right: -20px; padding-inline: 20px; }
  .meta, .index, .eyebrow, .section-heading > .meta { font-size: 12px; }
  .section-heading > .meta { max-width: 130px; }
  .section-heading h2, .about > h2 { font-size: 15px; }
  .intro-bottom { font-size: 14px; }
  .about-details { font-size: 14px; }
  .about-details > div { grid-template-columns: 80px minmax(0, 1fr); }
  .photo > span > span:last-child { font-size: 13px; }
  .photo-collections { gap: 8px; }
  .photo-collections button { padding: 8px 12px; }
  .photo-grid--all { gap: 22px 12px; }
  .photo-grid--all .photo > span { display: block; }
  .photo-grid--all .photo > span > span { display: block; }
  .photo-grid--all .photo > span > span:last-child { font-size: 11px; margin-top: 3px; }
  dialog, dialog:has(.case-study-features) { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; padding: 16px 20px 28px; }
  .close-dialog { top: 0; }
  .project-article .case-study-feature { grid-template-columns: 1fr; }
  .project-article .case-study-feature-number { grid-column: 1; grid-row: auto; margin-bottom: 8px; }
  .project-article .case-study-feature h3, .project-article .case-study-feature-copy, .project-article .case-study-points, .project-article .case-study-feature > .project-gallery { grid-column: 1; }
  footer { font-size: 12px; }
}
@media (max-width: 360px) {
  .wordmark { font-size: 16px; gap: 8px; }
  .menu-toggle { gap: 6px; padding-inline: 8px; }
}
dialog #dialog-content > img { display: block; width: 100%; height: auto; max-height: 65vh; object-fit: contain; margin: 20px 0; }
@media (max-width: 360px) { .contact h2 { font-size: 42px; letter-spacing: -2px; } .contact-arrow { font-size: 44px; } }

/* Motion is limited to the large decorative bloom and gallery view change. */
.intro-bottom { justify-content: flex-end; }
@keyframes bloom-turn {
  from { transform: rotate(-12deg); }
  to { transform: rotate(348deg); }
}
.intro-bloom img { animation: bloom-turn 30s linear infinite; }
.photo-page-link { margin: 22px 0 0; text-align: right; font-size: 14px; }

/* The separate photo archive shares the homepage's cards and color palette. */
.gallery-article { padding: 64px 0 80px; }
.gallery-article h1 { font-size: clamp(48px, 6vw, 80px); letter-spacing: -3px; }
.gallery-article h1 em { font-family: 'Instrument Serif', Georgia, serif; color: var(--accent); font-weight: 400; }
.gallery-intro { margin: 20px 0 46px; color: var(--muted); font-size: 16px; }
.gallery-article .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
.gallery-article .photo-grid .photo > span { display: flex; }
.gallery-article .photo-collections { margin-bottom: 30px; }
.gallery-count { color: var(--muted); font-size: 13px; margin-top: 30px; }
@media (max-width: 900px) {
  .gallery-article .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .gallery-article { padding-top: 38px; }
  .gallery-article .photo-grid { gap: 24px 12px; }
  .gallery-article .photo-grid .photo > span { display: block; }
  .gallery-article .photo-grid .photo > span > span { display: block; }
  .gallery-article .photo-grid .photo > span > span:last-child { margin-top: 3px; font-size: 11px; }
  .photo-page-link { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-bloom img { animation: none; }
}

/* Page load fade */
@media (prefers-reduced-motion: no-preference) {
  body { animation: page-in .45s cubic-bezier(.25,.1,.25,1) both; }
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* Theme toggle + dark palette (theme.js sets data-theme on <html>) */
:root { --on-accent: #fff; --accent-strong: #414a67; --selection: #dce0eb; --soft: #e5e7ed; color-scheme: light; }
:root[data-theme="dark"] { --paper: #16181d; --ink: #e4e5ea; --muted: #9a9eab; --line: #2f333d; --accent: #a7b1d6; --on-accent: #16181d; --accent-strong: #c3cbe8; --selection: #343b55; --soft: #232731; color-scheme: dark; }
::selection { background: var(--selection); }
.contact-button, .contact-button:hover, .photo-collections button[aria-pressed="true"] { color: var(--on-accent); }
.contact-button:hover { background: var(--accent-strong); }
.social-link:hover { background: var(--soft); }
header > .wordmark, header > .project-back { margin-right: auto; }
.theme-toggle { order: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin-left: 18px; background: transparent; border: 1px solid var(--line); border-radius: 50%; transition: border-color .2s, color .2s; }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle .icon { width: 20px; height: 20px; }
.theme-toggle .icon-sun, :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .intro-bloom img { filter: brightness(1.7); }
:root[data-theme="dark"] .project-art, :root[data-theme="dark"] .photo img { filter: brightness(.92); }
@media (max-width: 760px) {
  .theme-toggle { margin-left: 0; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
.theme-fading, .theme-fading *, .theme-fading *::before, .theme-fading *::after { transition: background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease !important; }
/* The holowish tile stays light in both themes, so its label keeps light-theme colors. */
.holo-type { color: #292c35; transition: color .2s; }
.project:hover .holo-type { color: #565f7e; }
/* Drop the letterbox behind holowish demos; images keep their slot height and center in the same grid cell. */
.holowish-gallery img { width: auto; max-width: 100%; background: transparent; }
@media (min-width: 601px) { .holowish-gallery { grid-template-columns: repeat(auto-fit, minmax(160px, 200px)); gap: 28px 24px; } .holowish-gallery img { height: 400px; } }
.holowish-gallery img { margin: 0 auto; }
.holowish-gallery figcaption { text-align: center; }