/* Product catalogue. All selectors stay inside #works; the masthead is untouched. */
#works { --product-ink:#263633; --product-muted:#59665e; --product-line:#d9d0c2; display:block; width:100%; max-width:none; margin:0; position:relative; z-index:1; background:#f5efe5; padding:88px 0 96px; scroll-margin-top:84px; }
#works .portfolio-shell { max-width:1160px; margin-inline:auto; padding-inline:32px; }
#works .portfolio-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:40px; padding-bottom:28px; border-bottom:1px solid var(--product-line); }
#works .portfolio-eyebrow { display:flex; align-items:center; gap:12px; color:#8e6a38; font-size:14px; letter-spacing:.12em; font-weight:600; margin:0 0 18px; }
#works .portfolio-eyebrow::before { content:''; width:24px; height:1px; background:currentColor; }
#works .portfolio-title { font-size:clamp(32px,4vw,48px); font-weight:600; line-height:1.22; letter-spacing:-.035em; color:var(--product-ink); margin:0; }
#works .portfolio-intro { max-width:360px; font-size:16px; line-height:1.8; color:var(--product-muted); margin:0; }
#works .portfolio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#works .product-card { min-width:0; display:flex; flex-direction:column; position:relative; background:#fffaf3; border:1px solid var(--product-line); border-radius:8px; padding:30px; transition:border-color .2s,box-shadow .2s,transform .2s; }
#works .product-card:hover { border-color:#a49b8a; box-shadow:0 10px 28px #473e2f0a; transform:translateY(-2px); }
#works .product-card[data-project="jogen"] { background:#f7e9df; border-color:#ddc9bb; }
#works .product-card[data-project="rinoken"] { background:#eaf0e7; border-color:#cbd5c7; }
#works .product-topline { display:flex; justify-content:space-between; gap:16px; margin-bottom:30px; color:var(--product-muted); font-size:14px; line-height:1.5; }
#works .product-number { font-variant-numeric:tabular-nums; letter-spacing:.08em; color:var(--product-muted); }
#works .product-brand { display:flex; align-items:center; gap:20px; margin-bottom:28px; }
#works .product-icon { display:block; flex:0 0 72px; width:72px; height:72px; border-radius:17px; object-fit:contain; background:#fffaf3; box-shadow:0 3px 12px #2636330a; }
#works .product-name { margin:0; color:var(--product-ink); font-size:25px; font-weight:650; line-height:1.35; letter-spacing:-.025em; overflow-wrap:anywhere; }
#works .product-domain { display:block; color:var(--product-muted); font-size:14px; line-height:1.5; margin-top:6px; overflow-wrap:anywhere; }
#works .product-tagline { color:var(--product-ink); font-size:21px; line-height:1.55; font-weight:500; letter-spacing:-.015em; margin:0 0 14px; }
#works .product-description { font-size:16px; line-height:1.85; color:#5b665f; margin:0 0 28px; }
#works .product-footer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; border-top:1px solid #26363318; padding-top:20px; margin-top:auto; }
#works .product-link { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-width:0; color:var(--product-ink); font-size:14px; font-weight:600; line-height:1.5; white-space:nowrap; text-decoration:none; padding:8px 6px; min-height:64px; border:1px solid #26363340; border-radius:4px; }
#works a.product-link:hover { color:#fffaf3; background:var(--product-ink); }
#works .product-unavailable { color:var(--product-muted); border-style:dashed; border-color:#26363328; }
#works .product-unavailable small { display:block; font-size:14px; font-weight:400; white-space:normal; text-align:center; }
#works .product-link svg { width:17px; height:17px; flex-shrink:0; transition:transform .2s; }
#works .product-link:hover svg { transform:translate(2px,-2px); }
#works .product-download { color:#fffaf3; background:var(--product-ink); padding:11px 16px; border-radius:4px; }
#works .product-download:hover { color:#fffaf3; background:#46574f; }
#works .product-status { width:100%; color:var(--product-muted); font-size:14px; line-height:1.5; }
#works a:focus-visible { outline:2px solid #8e512f; outline-offset:5px; }
@media(max-width:760px) {
  #works { padding:56px 0 64px; }
  #works .portfolio-shell { padding-inline:20px; }
  #works .portfolio-heading { display:block; margin-bottom:28px; padding-bottom:24px; }
  #works .portfolio-intro { margin-top:20px; max-width:100%; }
  #works .portfolio-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  #works .product-card { padding:24px; }
  #works .product-topline { margin-bottom:24px; }
  #works .product-brand { gap:16px; margin-bottom:24px; }
  #works .product-icon { flex-basis:64px; width:64px; height:64px; border-radius:15px; }
  #works .product-name { font-size:24px; }
  #works .product-tagline { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) { #works .product-card,#works .product-link svg { transition:none; transform:none; } }