:root {
  font-family: "Yu Gothic", "Noto Sans CJK JP", Meiryo, sans-serif;
  color: #202c39;
  background: #e9edf0;
  --ink: #202c39;
  --muted: #536579;
  --accent: #315c8c;
  --edge: #cdd8df;
  --paper: #fff;
  --wash: #eff3f6;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
a { color: var(--accent); text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
a, button { -webkit-tap-highlight-color: #285e5026; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
main:focus { outline: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.5; text-wrap: pretty; }
h1 { font-size: clamp(25px, 2.7vw, 34px); letter-spacing: .025em; margin: 8px 0 18px; }
h2 { font-size: 20px; margin: 0 0 16px; }
h3 { font-size: 16px; margin: 0 0 8px; }
p { margin: 0 0 16px; }
figure { margin: 0; }
figcaption, .muted { color: var(--muted); font-size: 13px; line-height: 1.8; }
figcaption { margin-top: 10px; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; margin: 0 0 12px; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 50; padding: 10px 18px; background: var(--paper); transform: translateY(-160%); border: 1px solid var(--accent); }
.skip-link:focus { transform: translateY(0); }
header { background: var(--paper); border-bottom: 1px solid var(--edge); }
header .inner { max-width: 1120px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 32px; }
header a { text-decoration: none; color: var(--ink); }
.brand { font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
header nav { display: flex; gap: 22px; }
header nav a { display: inline-flex; align-items: center; min-height: 44px; position: relative; padding: 0 2px; }
header nav a:hover { color: var(--accent); }
header nav a[aria-current] { color: var(--accent); font-weight: 700; }
header nav a[aria-current]::after { content: ""; position: absolute; height: 2px; bottom: 3px; left: 2px; right: 2px; background: var(--accent); }
.site-main, .page.detail-wide { max-width: 1120px; margin: 0 auto; padding: 48px 32px 72px; }
.home-intro, .page-head { border-bottom: 1px solid var(--edge); padding: 12px 0 32px; }
.home-intro h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.6; margin: 8px 0 20px; }
.home-intro h1 span { white-space: nowrap; }
.home-intro p:last-child, .page-head p:last-child { max-width: 700px; margin-bottom: 0; }
.home-columns { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; margin-top: 36px; }
.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; }
.section-heading a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.home-work-list { display: grid; }
.feature-link { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--edge); color: inherit; text-decoration: none; }
.feature-link img { width: 100%; height: 128px; object-fit: cover; object-position: top; border: 1px solid var(--edge); border-radius: 4px; }
.feature-link img.home-work-cover { object-fit: contain; padding: 6px; background: #f1efea; }
.feature-link img.home-work-monitor { height: auto; aspect-ratio: 653 / 114; object-fit: contain; object-position: center; background: #10171c; }
.feature-link > span, .work-summary { display: flex; flex-direction: column; gap: 7px; }
.feature-link strong, .works-row strong { font-size: 18px; line-height: 1.6; }
.feature-link small, .works-row small { font-size: 12px; color: var(--muted); }
.feature-link > span > span { font-size: 13px; }
.feature-link .work-cta { color: var(--accent); font-weight: 700; margin-top: 4px; }
.feature-link, .works-row, .work-pagination a { transition: background-color .15s; }
.feature-link:hover, .works-row:hover, .work-pagination a:hover { background: var(--wash); }
.side-info { align-self: start; border-left: 1px solid var(--edge); padding: 8px 0 8px 24px; }
.side-info h2 { font-size: 17px; }
.side-info p { font-size: 14px; }
.side-info a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.works-list { display: grid; }
.works-row { display: grid; grid-template-columns: 28px 220px minmax(0, 1fr) 24px; align-items: center; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--edge); color: inherit; text-decoration: none; }
.works-row img { width: 100%; height: 166px; object-fit: cover; object-position: top; border: 1px solid var(--edge); border-radius: 4px; }
.works-row[href="natsumatsuri.html"] img { object-fit: contain; padding: 8px; background: #f1efea; }
.works-row img.monitor-work-thumb { height: auto; aspect-ratio: 653 / 114; object-fit: contain; background: #10171c; }
.works-row > span:nth-child(3) { display: flex; flex-direction: column; gap: 8px; }
.works-row > span:nth-child(3) > span { font-size: 14px; }
.works-row > span:last-child { color: var(--accent); font-size: 24px; }
.work-number { color: var(--muted); font-size: 12px; font-weight: 700; align-self: start; padding-top: 3px; }
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; margin-top: 36px; }
.about-text > section + section { border-top: 1px solid var(--edge); margin-top: 28px; padding-top: 28px; }
.about-text p { max-width: 65ch; }
.about-text ul { padding-left: 1.4em; margin: 0; }
.about-text li + li { margin-top: 12px; }
.about-aside { align-self: start; padding: 24px; background: var(--wash); border-top: 3px solid var(--accent); }
.about-aside h2 { font-size: 17px; }
.about-aside p { font-size: 14px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; }
.panel { padding: 32px; background: var(--paper); border: 1px solid var(--edge); }
.back-nav { font-size: 13px; margin: -8px 0 20px; }
.back-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.panel > h1 { margin-top: 8px; }
.panel > p:not(.eyebrow):not(.back-nav):not(.muted) { max-width: 72ch; }
.details { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 32px; }
.details h2 { font-size: 18px; }
.overview p { font-size: 14px; }
.specs { margin: 0 0 24px; font-size: 14px; }
.specs > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--edge); }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; }
.purchase-links { display: flex; flex-direction: column; gap: 8px; }
.purchase-links a { display: inline-flex; align-items: center; min-height: 44px; }
.note { border-left: 3px solid #8ca99b; padding: 4px 0 4px 14px; color: var(--muted); }
.image-trigger { display: block; position: relative; color: inherit; border-radius: 3px; cursor: zoom-in; text-decoration: none; }
.image-trigger img { width: 100%; }
.image-hint { display: block; width: fit-content; margin: 8px 0 0 auto; color: var(--accent); font-size: 12px; font-weight: 700; line-height: 1.7; }
.shot { border: 1px solid var(--edge); }
.gallery-area, .case-notes, .monitor-origin { border-top: 1px solid var(--edge); margin-top: 36px; padding-top: 28px; }
.shot-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.shot-gallery .shot { height: 240px; object-fit: cover; object-position: top; }
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
.note-grid p, .monitor-origin p { font-size: 14px; margin-bottom: 0; }
.monitor-origin p + p { margin-top: 16px; }
.case-notes > .muted { margin: 20px 0 0; }
.natsu-cover { width: min(290px, 100%); margin-inline: auto; }
.details > section > .image-trigger:has(.natsu-cover) { max-width: 290px; margin-inline: auto; }
.details > section > .image-trigger:has(.natsu-cover) + .muted { margin-top: 12px; }
.sample-editorial { margin-top: 24px; }
.sample-feature .natsu-photo { max-height: 640px; object-fit: contain; background: #f1efea; }
.sample-subrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: 32px; align-items: start; margin-top: 32px; }
.sample-sub-accent { margin-top: 56px; }
.sample-sub .natsu-photo { max-height: 580px; object-fit: contain; object-position: top; }
.monitor-screen { margin: 0 0 16px; }
.monitor-screen img { border: 1px solid #31424b; background: #10171c; }
.monitor-screen figcaption { font-size: 13px; }
.work-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--edge); margin-top: 36px; padding-top: 24px; }
.work-pagination a { display: flex; flex-direction: column; justify-content: center; min-height: 88px; padding: 14px 18px; border: 1px solid var(--edge); border-radius: 4px; color: inherit; text-decoration: none; }
.work-pagination span { color: var(--muted); font-size: 12px; }
.work-pagination strong { font-size: 14px; }
footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 1056px; margin: 0 auto; padding: 24px 0; border-top: 1px solid var(--edge); color: var(--muted); font-size: 12px; }
footer a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-brand { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
footer > a:last-child { margin-left: auto; }
.release-status { border: 1px solid var(--edge); padding: 2px 8px; border-radius: 3px; }
/* The dialog starts fitted to the viewport. Only the explicit original-size mode scrolls. */
body.viewer-open { overflow: hidden; }
#image-viewer { width: min(1100px, 96vw); max-width: 96vw; max-height: 94dvh; padding: 0; border: 1px solid #a6b5ad; background: var(--paper); color: var(--ink); box-shadow: 0 24px 100px #07150f66; }
#image-viewer[open] { display: flex; flex-direction: column; }
#image-viewer::backdrop { background: #101c18e6; }
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--edge); }
.viewer-bar h2 { font-size: 15px; margin: 0; }
.viewer-actions { display: flex; gap: 8px; }
.viewer-actions button { min-height: 44px; padding: 6px 12px; border: 1px solid #8da498; border-radius: 3px; background: var(--paper); font-size: 13px; white-space: nowrap; }
.viewer-actions button:hover { background: var(--wash); }
#viewer-help { flex: none; margin: 0; padding: 8px 16px; font-size: 12px; color: var(--muted); }
.viewer-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px; background: #edf0ec; }
.viewer-scroll:focus-visible { outline-offset: -4px; }
.viewer-scroll img { width: auto; max-width: 100%; max-height: min(68dvh, calc(94dvh - 180px)); margin: auto; object-fit: contain; }
#image-viewer.is-original .viewer-scroll img { max-width: none; max-height: none; margin: 0 auto; }
@media (min-width: 751px) {
  .site-main { min-height: calc(100vh - 183px); }
}
@media (max-width: 960px) {
  .home-columns { grid-template-columns: minmax(0, 1fr) 210px; gap: 28px; }
  .feature-link { grid-template-columns: 128px minmax(0, 1fr); gap: 18px; }
  .works-row { grid-template-columns: 24px 180px minmax(0, 1fr) 20px; gap: 18px; }
  .details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .specs > div { grid-template-columns: 1fr; gap: 2px; }
  .panel { padding: 24px; }
  .about-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
}
@media (max-width: 750px) {
  body { font-size: 15px; }
  header .inner { padding: 12px 20px; gap: 12px; }
  header nav { gap: 16px; }
  header nav a { font-size: 13px; }
  .brand { font-size: 20px; }
  .site-main, .page.detail-wide { padding: 28px 20px 48px; }
  .home-intro, .page-head { padding: 4px 0 26px; }
  .home-intro h1 { font-size: 29px; }
  .home-columns, .about-layout { grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
  .feature-link { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
  .feature-link img { height: 120px; }
  .feature-link strong { font-size: 17px; }
  .side-info { border-left: 0; border-top: 1px solid var(--edge); padding: 24px 0 0; }
  .side-info p { max-width: 50ch; }
  .works-row { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 24px 0; }
  .work-number { grid-column: 1; grid-row: 1; }
  .works-row > span:nth-child(3) { grid-column: 2; grid-row: 1; }
  .works-row img { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 240px; object-fit: contain; background: var(--wash); }
  .works-row img.monitor-work-thumb { height: auto; }
  .works-row > span:last-child { display: none; }
  .panel { padding: 20px; }
  .details { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .details h2 { font-size: 18px; }
  .details > .overview { margin-top: 0; }
  .shot-gallery { grid-template-columns: 1fr; }
  .shot-gallery .shot { height: auto; }
  .note-grid { grid-template-columns: 1fr; gap: 24px; }
  .sample-subrow { gap: 20px; }
  .sample-sub-accent { margin-top: 32px; }
  .gallery-area, .case-notes, .monitor-origin { margin-top: 28px; padding-top: 24px; }
  .work-pagination { grid-template-columns: 1fr; margin-top: 28px; gap: 12px; }
  .work-pagination a { min-height: 80px; }
  footer { margin: 0 20px; padding: 18px 0; gap: 8px 16px; }
  footer > a:last-child { margin-left: 0; }
  .viewer-bar { padding: 10px 12px; }
  #viewer-help { padding: 8px 12px; }
  .viewer-scroll img { max-height: min(60dvh, calc(94dvh - 210px)); }
}
@media (max-width: 370px) {
  header .inner { flex-wrap: wrap; }
  header nav { width: 100%; gap: 24px; }
  .site-main, .page.detail-wide { padding-inline: 16px; }
  .panel { padding: 16px; }
  .feature-link { grid-template-columns: 1fr; gap: 16px; }
  .feature-link img { height: 160px; }
  .home-intro h1 { font-size: 27px; }
  .sample-subrow { grid-template-columns: 1fr; gap: 24px; }
  .sample-sub-accent { margin-top: 0; }
  .viewer-bar { gap: 8px; }
  .viewer-bar h2 { width: 100%; }
  .viewer-actions { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media (forced-colors: active) {
  .image-trigger, .feature-link, .works-row { border: 1px solid CanvasText; }
  header nav a[aria-current]::after { background: LinkText; }
}
@media print {
  header, .skip-link, .image-hint, .work-pagination, dialog, footer { display: none !important; }
  body { color: #000; background: #fff; }
  .site-main, .page.detail-wide { max-width: none; padding: 0; }
  .panel { border: 0; padding: 0; }
  .details, .home-columns, .about-layout { display: block; }
  a { color: inherit; }
  img { max-height: 22cm; object-fit: contain; }
  h2, h3 { break-after: avoid; }
  figure, .note-grid > div { break-inside: avoid; }
}

/* Portfolio refresh: differentiated, image-led project surfaces */
body { background:#e9edf0; color:#202c39; }
header { background:#243143; border-bottom:0; }
header .brand, header nav a { color:#f7f8f8; }
header nav a:hover, header nav a[aria-current] { color:#fff; }
header nav a[aria-current]::after { background:#e9b86b; }
.site-main.portfolio-main { max-width:1320px; padding-top:28px; padding-bottom:56px; }
.portfolio-lead { display:flex; justify-content:space-between; align-items:end; gap:36px; padding:12px 0 25px; }
.portfolio-lead-title h1 { font-size:clamp(32px,3.2vw,46px); margin:0; line-height:1.3; }
.portfolio-lead-title .eyebrow { margin-bottom:4px; color:#415e79; }
.portfolio-lead > p { max-width:550px; margin:0 0 3px; font-size:15px; line-height:1.75; }
.portfolio-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.project-card { min-width:0; background:#fff; border:1px solid #cfd7dc; box-shadow:0 3px 0 #cbd3d8; }
.project-card--web { grid-column:1 / -1; }
.project-link { color:inherit; text-decoration:none; display:flex; flex-direction:column; height:100%; }
.project-link--featured { display:grid; grid-template-columns:minmax(0,1.13fr) minmax(0,1fr); }
.project-link:hover .project-action { text-decoration:underline; }
.project-link:focus-visible { outline-offset:3px; }
.project-visual { min-width:0; overflow:hidden; display:grid; place-items:center; border-bottom:1px solid #d7dfe3; }
.project-visual img { width:100%; height:100%; object-fit:contain; }
.project-visual--web { height:385px; border-bottom:0; border-right:1px solid #d7dfe3; background:#edf0eb; padding:15px; }
.project-visual--web img { object-fit:cover; object-position:top center; border:1px solid #cbd4d5; background:white; }
/* Keep the complete portrait cover (including title and credit) visible. */
.project-visual--book { height:380px; background:#ddd5cd; padding:24px; }
.project-visual--book img { display:block; height:100%; width:auto; max-width:100%; max-height:100%; aspect-ratio:992 / 1400; object-fit:contain; box-shadow:0 7px 17px #3e282d40; }
.project-visual--app { height:auto; background:#223449; padding:24px 20px; }
.project-visual--app img { height:auto; width:100%; background:#10171c; border:1px solid #5d6870; }
.project-body { padding:22px 27px 24px; display:flex; flex-direction:column; align-items:flex-start; }
.project-card--web .project-body { padding:27px 34px; }
.project-number { display:flex; width:100%; justify-content:space-between; padding-bottom:10px; margin-bottom:17px; border-bottom:1px solid #d3dce2; color:#697783; font-size:12px; font-weight:700; letter-spacing:.08em; }
.project-category { font-size:12px; color:#536579; font-weight:700; margin:0 0 6px; }
.project-card h2 { font-size:clamp(21px,2.3vw,32px); line-height:1.4; margin:0 0 12px; color:#1b2939; }
.project-copy { font-size:14px; line-height:1.8; margin:0 0 14px; }
.project-scope { font-size:12px; color:#526477; line-height:1.75; padding-top:12px; border-top:1px solid #e2e6ea; }
.project-action { margin-top:auto; padding:9px 15px; background:#315c8c; color:#fff; font-size:13px; font-weight:700; border-radius:3px; }
.project-action span { padding-left:7px; }
.project-card--book .project-action { background:#684957; }
.project-card--app .project-action { background:#305b63; }
footer { max-width:1256px; color:#4b5e68; border-color:#cbd5da; }
footer a { color:#294b69; }
@media (max-width:750px) {
 .portfolio-lead { display:block; padding:8px 0 24px; }
 .portfolio-lead > p { margin-top:14px; }
 .portfolio-grid { grid-template-columns:1fr; gap:17px; }
 .project-card--web { grid-column:auto; }
 .project-link--featured { display:flex; }
 .project-visual--web { height:280px; border-right:0; border-bottom:1px solid #d7dfe3; padding:11px; }
 .project-visual--book { height:320px; padding:20px; }
 .project-visual--app { height:auto; padding:16px 14px; }
 .project-card--web .project-body,.project-body { padding:19px 21px 23px; }
 .project-number { margin-bottom:13px; }
 .project-card h2 { font-size:23px; }
 .project-copy { font-size:14px; }
}
@media (max-width:370px) {
 .project-visual--web { height:235px; }
 .project-visual--app { padding:14px 10px; }
}

/* Align both lower-row cards to the same top and bottom edges.
   The monitor remains a compact wide image; card text and CTA fill the remaining space. */
@media (min-width:751px) {
 .project-card--book,.project-card--app { align-self:stretch; }
 .project-card--app .project-body { flex:1; }
 /* Match the photobook image area so both bodies start on the same line and the CTA follows the copy. */
 .project-visual--app { height:380px; }
}

/* Give each work a distinct palette: accent top line, image area, body, text and button move together. */
.project-body { flex:1; }

.project-card--web { background:#D1E4D5; border-color:#98B9A6; border-top:5px solid #315C4F; box-shadow:0 4px 0 #7FA190; }
.project-card--web .project-visual--web { background:#AECDBB; border-right-color:#98B9A6; border-bottom-color:#98B9A6; }
.project-card--web .project-body { background:#D1E4D5; }
.project-card--web h2 { color:#203B31; }
.project-card--web .project-number,.project-card--web .project-category { color:#315C4F; }
.project-card--web .project-copy { color:#263F36; }
.project-card--web .project-scope { color:#3A5A4E; }
.project-card--web .project-number,.project-card--web .project-scope { border-color:#A9C7B5; }
.project-card--web .project-action { background:#315C4F; color:#fff; }

.project-card--book { background:#EABDAF; border-color:#C58776; border-top:5px solid #783849; box-shadow:0 4px 0 #A86E60; }
.project-card--book .project-visual--book { background:#CA897A; border-bottom-color:#C58776; }
.project-card--book .project-body { background:#EABDAF; }
.project-card--book h2 { color:#382A2B; }
.project-card--book .project-number,.project-card--book .project-category { color:#783849; }
.project-card--book .project-copy { color:#3E2E2F; }
.project-card--book .project-scope { color:#5C3E40; }
.project-card--book .project-number,.project-card--book .project-scope { border-color:#D49D8E; }
.project-card--book .project-action { background:#783849; color:#fff; }

.project-card--app { background:#23384D; border-color:#45647A; border-top:5px solid #D1EEF2; box-shadow:0 4px 0 #101D2B; }
.project-card--app .project-visual--app { background:#192B42; border-bottom-color:#45647A; }
.project-card--app .project-body { background:#23384D; }
.project-card--app h2 { color:#FFFFFF; }
.project-card--app .project-number,.project-card--app .project-category,.project-card--app .project-scope { color:#CAEAF3; }
.project-card--app .project-copy { color:#E2EEF5; }
.project-card--app .project-number,.project-card--app .project-scope { border-color:#45647A; }
.project-card--app .project-action { background:#D1EEF2; color:#20354A; }
.project-card--app .project-link:focus-visible { outline-color:#D1EEF2; }

/* Shared page depth: keep the details quieter than the portfolio grid. */
.panel { border-color:#cdd8df; box-shadow:0 3px 0 #d6dfe5; }
.about-aside { background:#e1e9ee; border-top-color:#315c8c; }
.note { border-left-color:#8da7bb; }
@media (min-width:751px) {
  .page.detail-wide { padding-top:30px; }
}

/* Five-work portfolio: prioritize operating services, then broader craft. */
.project-card--pos { grid-column:1 / -1; background:#D1E8E9; border-color:#73A7B0; border-top:5px solid #145A70; box-shadow:0 4px 0 #54828B; }
.project-card--pos .project-visual--pos { background:#164A60; border-right:1px solid #73A7B0; border-bottom:0; min-height:385px; }
.project-card--pos .project-body { background:#D1E8E9; padding:27px 34px; }
.project-card--pos h2 { color:#193F4B; }
.project-card--pos .project-number,.project-card--pos .project-category { color:#175565; }
.project-card--pos .project-copy { color:#244954; }
.project-card--pos .project-scope,.project-card--pos .project-number { border-color:#99C3C5; }
.project-card--pos .project-action { background:#145A70; color:white; }
.project-card--excel { background:#F5DDA9; border-color:#C7954A; border-top:5px solid #84561F; box-shadow:0 4px 0 #AC7B32; }
.project-card--excel .project-visual--excel { background:#B67931; border-bottom-color:#C7954A; height:380px; }
.project-card--excel .project-body { background:#F5DDA9; }
.project-card--excel h2 { color:#4D3517; }
.project-card--excel .project-number,.project-card--excel .project-category { color:#76501E; }
.project-card--excel .project-copy { color:#4D3D25; }
.project-card--excel .project-scope,.project-card--excel .project-number { border-color:#D3B67B; }
.project-card--excel .project-action { background:#76501E; color:white; }
.project-card--web { grid-column:auto; }
.project-card--web .project-visual--web { height:380px; border-right:0; border-bottom:1px solid #98B9A6; }
.project-card--web .project-body { padding:22px 27px 24px; }
.case-graphic { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; padding:26px; gap:20px; }
.case-graphic p { margin:0; }
.case-graphic--pos { color:#F4FAFA; background:linear-gradient(135deg,#17475B,#0F6071); }
.case-graphic--excel { color:#FFF9EF; background:linear-gradient(135deg,#AC6D25,#CF9746); }
.case-graphic-kicker { font-size:11px; letter-spacing:.19em; font-weight:700; opacity:.88; }
.case-graphic-headline { font-size:clamp(23px,2.5vw,36px); font-weight:800; line-height:1.5; letter-spacing:.03em; }
.case-graphic-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.case-graphic-steps span { border:1px solid currentColor; border-radius:2px; text-align:center; padding:9px 4px; background:#FFFFFF18; font-size:11px; font-weight:700; line-height:1.5; }
.case-graphic-caption { opacity:.75; font-size:10px; line-height:1.5; }
.case-flow { border:1px solid #B9D3D5; background:#EAF3F3; padding:24px; margin:28px 0; }
.case-flow--excel { background:#FFF4DC; border-color:#E4CA98; }
.case-flow h2 { margin-bottom:12px; }
.case-flow ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0; margin:0; list-style:none; }
.case-flow li { background:#fff; border:1px solid #C9DADC; padding:14px; min-width:0; }
.case-flow--excel li { border-color:#E0CAA4; }
.case-flow strong { display:block; margin-bottom:5px; font-size:14px; }
.case-flow span { font-size:12px; color:#495D64; }
.case-flow .muted { margin-top:14px; }
@media (max-width:750px) {
  .project-card--pos { grid-column:auto; }
  .project-link--featured { display:flex; }
  .project-card--pos .project-visual--pos { height:290px; min-height:0; border-right:0; border-bottom:1px solid #73A7B0; }
  .project-card--excel .project-visual--excel { height:290px; }
  .project-card--pos .project-body,.project-card--web .project-body { padding:19px 21px 23px; }
  .case-graphic { padding:20px; gap:16px; }
  .case-graphic-headline { font-size:clamp(22px,5vw,30px); }
  .case-flow ol { grid-template-columns:1fr; }
}
@media (max-width:370px) {
  .case-graphic { padding:15px; }
  .case-graphic-steps span { font-size:10px; padding:7px 2px; }
  .case-graphic-headline { font-size:22px; }
}

/* Public POS one-minute diagnosis, unchanged real interface. */
.project-card--pos .project-visual--pos { padding:16px; }
.project-card--pos .project-visual--pos img { width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center;border:1px solid #A8C1BB;background:white; }
@media (max-width:750px) {.project-card--pos .project-visual--pos {height:auto;min-height:0;padding:10px;} .project-card--pos .project-visual--pos img {height:auto;max-height:none;} }

/* Test-fixture diagnosis result: not real customer data. */
.project-card--excel .project-visual--excel { padding:16px; }
.project-card--excel .project-visual--excel img { width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center;border:1px solid #D9B878;background:white; }
@media (max-width:750px) { .project-card--excel .project-visual--excel { height:auto; min-height:190px; padding:10px; } .project-card--excel .project-visual--excel img { height:auto;max-height:none; } }

/* Additional work identities. No unapproved third-party or generated images. */
.project-card--badbook{background:#DCCFF0;border-color:#A48BC0;border-top:5px solid #64438A;box-shadow:0 4px 0 #8B73AB}
.project-card--badbook .project-visual--badbook{height:380px;background:#765397}
.project-card--badbook .project-body{background:#DCCFF0}
.project-card--badbook .project-number,.project-card--badbook .project-category{color:#553579}
.project-card--badbook .project-action{background:#64438A}
.case-graphic--badbook{color:#FFF;background:linear-gradient(125deg,#533679,#926EB3)}
.project-card--tippett{background:#D8D7D2;border-color:#969B93;border-top:5px solid #455B55;box-shadow:0 4px 0 #858C85}
.project-card--tippett .project-visual--tippett{height:380px;background:#415B56}
.project-card--tippett .project-body{background:#D8D7D2}
.project-card--tippett .project-number,.project-card--tippett .project-category{color:#344D45}
.project-card--tippett .project-action{background:#455B55}
.case-graphic--tippett{color:#FFF;background:linear-gradient(125deg,#2B4845,#68827B)}
.project-card--character-design{background:#F5D7E5;border-color:#CB94B0;border-top:5px solid #9A4778;box-shadow:0 4px 0 #C28BA9}
.project-card--character-design .project-visual--character-design{height:380px;background:#DA8DB0}
.project-card--character-design .project-body{background:#F5D7E5}
.project-card--character-design .project-number,.project-card--character-design .project-category{color:#7E3B63}
.project-card--character-design .project-action{background:#9A4778}
.case-graphic--character-design{color:#FFF;background:linear-gradient(125deg,#A95183,#D78FB2)}
@media(max-width:750px){.project-card--badbook .project-visual--badbook,.project-card--tippett .project-visual--tippett,.project-card--character-design .project-visual--character-design{height:290px}}

/* Existing unlettered character art. Fit within the approved card geometry. */
.project-card--character-design .project-visual--character-design { display:flex;align-items:center;justify-content:center;padding:18px; }
.project-card--character-design .project-visual--character-design img { display:block;height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 18px #66334A44); }
.character-design-figure { margin:26px 0 34px;padding:22px 14px;background:#FBEAF2;text-align:center;border:1px solid #E6BAD0; }
.character-design-figure img { display:block;margin:auto;width:auto;height:auto;max-height:520px;max-width:100%;object-fit:contain; }
.character-design-figure figcaption { color:#694C5D;font-size:12px;margin-top:14px;line-height:1.65; }
@media(max-width:750px){.project-card--character-design .project-visual--character-design {height:290px;padding:12px;}.character-design-figure img{max-height:400px;}}