:root {
  --showcase-ink: #18342e;
  --showcase-deep: #0d2923;
  --showcase-leaf: #2f6f5e;
  --showcase-paper: #f5f0e5;
  --showcase-paper-light: #fffdf7;
  --showcase-rule: rgba(24, 52, 46, .2);
  --showcase-muted: #66746f;
  --showcase-accent: #c98f3d;
}

* { box-sizing: border-box; }
html { background: var(--showcase-paper); color: var(--showcase-ink); }
body.showcase-page { margin: 0; overflow-x: hidden; background: var(--showcase-paper); color: var(--showcase-ink); font-family: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.showcase-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 5vw; border-bottom: 1px solid var(--showcase-rule); background: rgba(245, 240, 229, .94); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); }
.showcase-brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; font-weight: 700; letter-spacing: .08em; }
.showcase-brand__mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--showcase-paper-light); background: var(--showcase-ink); font: 700 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em; }
.showcase-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.6rem); font: 600 14px/1.2 ui-sans-serif, system-ui, sans-serif; }
.showcase-nav a { text-decoration: none; padding: .55rem 0; border-bottom: 1px solid transparent; }
.showcase-nav a[aria-current="page"] { border-color: currentColor; }

.showcase-hero { min-height: 590px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: clamp(3rem, 9vw, 9rem); align-items: end; padding: clamp(5rem, 10vw, 9rem) 8vw 6rem; color: var(--showcase-paper-light); background: var(--showcase-deep); position: relative; isolation: isolate; }
.showcase-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .48; background: radial-gradient(circle at 80% 20%, rgba(201, 143, 61, .22), transparent 25%), repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(255,255,255,.045) calc(12.5% - 1px), rgba(255,255,255,.045) 12.5%); }
.showcase-kicker { margin: 0 0 1.4rem; color: var(--showcase-accent); font: 700 12px/1.3 ui-sans-serif, system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.showcase-hero h1 { max-width: 900px; margin: 0; font-size: clamp(3.1rem, 7.5vw, 7.5rem); font-weight: 500; line-height: 1.08; letter-spacing: -.055em; text-wrap: balance; }
.showcase-hero__lead { max-width: 660px; margin: 2rem 0 0; color: rgba(255, 253, 247, .72); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.95; }
.showcase-principles { display: flex; flex-wrap: wrap; gap: .7rem 1.8rem; margin-top: 2.2rem; font: 600 13px/1.3 ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em; }
.showcase-principles span::before { content: "—"; margin-right: .55rem; color: var(--showcase-accent); }
.showcase-colophon { align-self: end; border-top: 1px solid rgba(255,255,255,.35); padding-top: 1rem; }
.showcase-colophon__number { color: var(--showcase-accent); font: 500 clamp(3rem, 6vw, 5rem)/1 ui-sans-serif, system-ui, sans-serif; }
.showcase-colophon p { margin: 1rem 0 0; color: rgba(255,253,247,.68); line-height: 1.8; }

.showcase-shelf { padding: clamp(4rem, 8vw, 7rem) 6vw; }
.showcase-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; max-width: 1380px; margin: 0 auto 2.5rem; border-bottom: 1px solid var(--showcase-rule); padding-bottom: 1.5rem; }
.showcase-section-heading .showcase-kicker { margin-bottom: .65rem; }
.showcase-section-heading h2, .showcase-studio h2 { margin: 0; font-size: clamp(2rem, 4.6vw, 4.6rem); font-weight: 500; letter-spacing: -.045em; }
.showcase-status { margin: 0; color: var(--showcase-muted); font: 500 14px/1.5 ui-sans-serif, system-ui, sans-serif; text-align: right; }
.showcase-status[data-tone="warning"] { color: #9b352b; }
.showcase-status[data-tone="success"] { color: var(--showcase-leaf); }
.showcase-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--showcase-rule); border: 1px solid var(--showcase-rule); }
.showcase-card { min-height: 290px; display: flex; flex-direction: column; padding: clamp(1.35rem, 2.4vw, 2.2rem); background: var(--showcase-paper-light); }
.showcase-card__eyebrow { margin: 0 0 1.7rem; color: var(--showcase-accent); font: 700 11px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .18em; }
.showcase-card__title { margin: 0 0 1rem; font-size: clamp(1.45rem, 2.2vw, 2.2rem); line-height: 1.26; font-weight: 600; overflow-wrap: anywhere; }
.showcase-card__summary { margin: 0 0 1rem; color: var(--showcase-muted); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.showcase-card__meta, .showcase-detail__meta { margin: 0 0 1.2rem; color: var(--showcase-leaf); font: 700 11px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.showcase-card__byline { margin: auto 0 1.2rem; padding-top: 1rem; border-top: 1px solid var(--showcase-rule); color: var(--showcase-muted); font: 500 12px/1.6 ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; }
.showcase-card__actions, .showcase-detail__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.showcase-tip-note { color: var(--showcase-muted); font: 500 12px/1.4 ui-sans-serif, system-ui, sans-serif; }

.showcase-button { min-height: 44px; border: 1px solid var(--showcase-ink); border-radius: 0; padding: .7rem 1.15rem; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; }
.showcase-button:hover { transform: translateY(-1px); }
.showcase-button:focus-visible, .showcase-page input:focus-visible, .showcase-page textarea:focus-visible, .showcase-page select:focus-visible, .showcase-page a:focus-visible { outline: 3px solid var(--showcase-accent); outline-offset: 3px; }
.showcase-button:disabled { cursor: wait; opacity: .5; transform: none; }
.showcase-button--primary { background: var(--showcase-ink); color: var(--showcase-paper-light); }
.showcase-button--quiet { background: transparent; color: var(--showcase-ink); }
.showcase-button--quiet:hover { background: var(--showcase-ink); color: var(--showcase-paper-light); }
.showcase-pagination { max-width: 1380px; margin: 2rem auto 0; display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--showcase-muted); font: 500 13px/1 ui-sans-serif, system-ui, sans-serif; }
.showcase-empty { grid-column: 1 / -1; padding: 4rem 2rem; background: var(--showcase-paper-light); color: var(--showcase-muted); text-align: center; line-height: 1.8; }
.showcase-empty--error { color: #9b352b; }

.showcase-detail { max-width: 900px; margin: 3rem auto 0; padding: clamp(2rem, 5vw, 4.5rem); background: var(--showcase-paper-light); border: 1px solid var(--showcase-rule); position: relative; }
.showcase-detail__close { position: absolute; top: 1rem; right: 1rem; border: 0; border-bottom: 1px solid currentColor; padding: .3rem 0; background: transparent; cursor: pointer; }
.showcase-detail__title { max-width: 750px; margin: 0 0 .8rem; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.15; font-weight: 500; overflow-wrap: anywhere; }
.showcase-detail__byline { color: var(--showcase-accent); }
.showcase-detail__meta { margin-top: 1.1rem; margin-bottom: 0; }
.showcase-detail__summary { margin: 2rem 0; color: var(--showcase-muted); font-size: 1.08rem; line-height: 1.9; white-space: pre-wrap; }
.showcase-detail__boundary { margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--showcase-rule); color: var(--showcase-muted); font-size: .85rem; line-height: 1.7; }
.showcase-support { margin-top: 2.5rem; padding: 1.5rem; background: #edf3ed; }
.showcase-support h3 { margin: 0; }
.showcase-support p { color: var(--showcase-muted); line-height: 1.7; }
.showcase-support__image { display: block; width: min(280px, 100%); height: auto; margin-top: 1rem; background: white; }

.showcase-studio { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr); gap: clamp(3rem, 8vw, 8rem); padding: clamp(4rem, 8vw, 8rem) 8vw; background: #e7ede6; border-top: 1px solid var(--showcase-rule); }
.showcase-studio__intro > p:not(.showcase-kicker), .showcase-studio__intro li { color: var(--showcase-muted); line-height: 1.8; }
.showcase-studio__intro ul { margin: 2rem 0 0; padding-left: 1.2rem; }
.showcase-studio__workbench { max-width: 820px; width: 100%; justify-self: end; }
.showcase-auth-gate, .showcase-form, .showcase-own { padding: clamp(1.5rem, 4vw, 3rem); background: var(--showcase-paper-light); border: 1px solid var(--showcase-rule); }
.showcase-auth-gate h3, .showcase-own h3 { margin-top: 0; font-size: 1.4rem; }
.showcase-auth-gate p { color: var(--showcase-muted); line-height: 1.8; }
.showcase-form { display: grid; gap: 1.35rem; }
.showcase-form label { display: grid; gap: .55rem; font-weight: 600; }
.showcase-form input:not([type="checkbox"]), .showcase-form textarea, .showcase-form select { width: 100%; min-height: 46px; border: 1px solid var(--showcase-rule); border-radius: 0; padding: .75rem .8rem; background: #fff; color: var(--showcase-ink); }
.showcase-form textarea { min-height: 200px; field-sizing: content; resize: none; }
.showcase-field-hint, .showcase-form .form-status { color: var(--showcase-muted); font: 500 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
.showcase-form [aria-invalid="true"] { border-color: #9b352b; box-shadow: 0 0 0 2px rgba(155, 53, 43, .12); }
.showcase-form .form-status[data-tone="warning"] { color: #9b352b; }
.showcase-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.showcase-field-row--tip { align-items: end; }
.showcase-file-field small { color: var(--showcase-muted); font: 500 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
.showcase-consent { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 400 !important; color: var(--showcase-muted); line-height: 1.65; }
.showcase-consent input { width: 18px; height: 18px; margin-top: .25rem; accent-color: var(--showcase-leaf); }
.showcase-own { margin-top: 1rem; }
.showcase-own-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--showcase-rule); }
.showcase-own-card strong { display: block; margin-bottom: .25rem; }
.showcase-own-card__status { color: var(--showcase-muted); font: 500 12px/1.4 ui-sans-serif, system-ui, sans-serif; }

.showcase-footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem 5vw; color: rgba(255,253,247,.72); background: var(--showcase-deep); font: 500 12px/1.6 ui-sans-serif, system-ui, sans-serif; }
.showcase-footer nav { display: flex; gap: 1.5rem; }

@media (max-width: 900px) {
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-hero { min-height: auto; grid-template-columns: 1fr; align-items: start; }
  .showcase-colophon { max-width: 560px; }
  .showcase-studio { grid-template-columns: 1fr; }
  .showcase-studio__workbench { max-width: none; }
}

@media (max-width: 620px) {
  .showcase-header { min-height: 64px; padding: .75rem 1rem; }
  .showcase-brand > span:last-child { display: none; }
  .showcase-nav { gap: .8rem; font-size: 12px; }
  .showcase-nav a:nth-child(2) { display: none; }
  .showcase-hero { padding: 4.5rem 1.2rem 3.5rem; gap: 3rem; }
  .showcase-hero h1 { font-size: clamp(2.2rem, 11.5vw, 3.2rem); }
  .showcase-shelf, .showcase-studio { padding: 3.5rem 1rem; }
  .showcase-section-heading { display: block; }
  .showcase-status { margin-top: 1rem; text-align: left; }
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-card { min-height: 310px; }
  .showcase-field-row { grid-template-columns: 1fr; }
  .showcase-footer { display: block; }
  .showcase-footer nav { margin-top: 1rem; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .showcase-grid, .showcase-card, .showcase-detail, .showcase-form, .showcase-auth-gate, .showcase-own { border: 1px solid CanvasText; }
}