/* The page background, header and footer belong to atelier.css. */
.works-main {
  --works-cocoa: #2c221a;
  --works-panel: #34271e;
  --works-gold: #c7a373;
  --works-line: rgba(199, 163, 115, .5);
  --works-sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: var(--text);
  font-family: var(--works-sans);
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}

.works-main [hidden] { display: none !important; }
.works-main :is(h1, h2, h3, h4, p, figure, dl, dd, ul) { margin: 0; }
.works-main :is(h2, h3, h4) {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .045em;
}
.works-main :is(a, button):focus-visible { outline: 2px solid var(--gold2); outline-offset: 5px; }
.works-wrap { width: min(1272px, calc(100% - 112px)); margin-inline: auto; padding-bottom: 76px; }
.works-main .works-eyebrow {
  color: var(--works-gold);
  font: 400 13px/1.6 Georgia, "Times New Roman", serif;
  letter-spacing: .26em;
}
.works-main .works-lead { color: var(--muted); font-size: 18px; line-height: 1.95; }

/* Full-width atelier hero; allow the copy and filters to grow at narrow widths. */
.works-page-head.at-hero {
  display: flex;
  min-height: calc(100vw * 721 / 2180);
  margin-bottom: 76px;
  font-family: var(--serif);
  line-height: 1.8;
  letter-spacing: .06em;
}
.works-page-head .at-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.works-page-head .works-page-copy { position: relative; inset: auto; width: 100%; padding: 48px 5.4vw; }
.works-page-head .at-eyebrow { margin-bottom: 10px; }
.works-page-head :is(h1, .sub) { text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .5); }
.works-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.works-filters button {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--works-gold);
  border-radius: 0;
  background: rgba(23, 14, 8, .8);
  color: #fff5e4;
  font-family: var(--works-sans);
  font-size: 14px;
  line-height: 1.7;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.works-filters button:hover { border-color: var(--works-gold); background: var(--works-panel); }
.works-filters button[aria-pressed="true"] { background: #5b402b; border-color: var(--works-gold); color: #fff5e4; }
.works-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.works-intro-rule { padding-bottom: 17px; border-bottom: 1px solid var(--works-line); margin-bottom: 68px; }
.works-intro-rule h2 { font-size: 28px; }

/* Two featured sections: dome, then single model. */
.works-feature { padding-bottom: 72px; margin-bottom: 72px; border-bottom: 1px solid var(--works-line); }
.works-section-head { margin-bottom: 38px; }
.works-section-head h2 { font-size: clamp(28px, 2.75vw, 38px); margin-block: 17px 18px; }
.works-main .works-frame {
  min-width: 0;
  padding: 14px 14px 0;
  border: 1px solid var(--works-gold);
  background: var(--works-cocoa);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--works-line);
}
.works-media { aspect-ratio: 2.2 / 1; overflow: hidden; background: #211d17; }
.works-media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: contain; }
.works-media video { object-fit: cover; }
.works-frame figcaption { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 68px; padding: 15px 6px 18px; }
.works-caption-title { min-width: 0; font-family: var(--serif); font-size: 23px; line-height: 1.6; letter-spacing: .05em; }
.works-media-type { flex-shrink: 0; color: var(--muted); font-size: 11px; letter-spacing: .16em; line-height: 1.6; }
.works-frame-dome .works-media { aspect-ratio: 1600 / 752; }
.works-frame-dome .works-media img { object-fit: cover; }
.works-frame-dome .works-caption-title { font-size: 25px; }
.works-ideas-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 38px 0 20px; }
.works-ideas-head h3 { font-size: 28px; }
.works-ideas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.works-idea { padding: 27px 23px 28px; border-top: 1px solid var(--works-gold); background: var(--works-panel); }
.works-idea h4 { margin-block: 17px 16px; font-size: 23px; }
.works-idea > p:not(.works-eyebrow) { color: var(--muted); }
.works-single .works-section-head { margin-bottom: 76px; }
.works-single-grid { display: grid; grid-template-columns: minmax(0, 1.46fr) minmax(0, 1fr); align-items: center; gap: 42px; }
.works-frame-wagon .works-media { aspect-ratio: 1200 / 978; }
.works-frame-wagon .works-media img { object-fit: cover; }
.works-use-ideas h3 { font-size: 30px; line-height: 1.6; margin-block: 4px 25px; }
.works-use-ideas dl { margin-bottom: 20px; }
.works-use-ideas dl > div { border-top: 1px solid var(--works-line); padding-block: 16px; }
.works-use-ideas dt { font-size: 17px; }
.works-use-ideas dd { margin-top: 6px; color: var(--muted); font-size: 15px; }

/* Artwork on the left, its possible uses on the right. */
.works-group { margin-bottom: 64px; }
.works-group-head { margin-bottom: 44px; }
.works-group-head h2 { font-size: 30px; font-weight: 500; margin-top: 14px; }
.works-group-head > p:last-child { margin-top: 4px; color: var(--muted); }
.works-row { display: grid; grid-template-columns: minmax(0, 1.46fr) minmax(0, 1fr); align-items: start; gap: 42px; padding-bottom: 38px; margin-bottom: 38px; border-bottom: 1px solid var(--works-line); }
.works-row-copy { min-width: 0; padding-top: 3px; }
.works-main .works-number { font: 400 14px/1.6 Georgia, "Times New Roman", serif; letter-spacing: .15em; color: var(--works-gold); margin-bottom: 15px; }
.works-row-copy h3 { font-size: clamp(22px, 1.95vw, 27px); margin-bottom: 18px; }
.works-row-copy > p:not(.works-number) { color: var(--muted); font-size: 15px; line-height: 1.95; }
.works-main .works-row-lead { margin-bottom: 17px; }
.works-main .works-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-bottom: 15px; list-style: none; }
.works-tags li { border: 1px solid var(--works-line); padding: 3px 10px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.works-main .works-text-link { display: inline-flex; align-items: baseline; gap: 16px; max-width: 100%; min-height: 44px; padding-block: 9px 4px; border-bottom: 1px solid var(--works-gold); margin-top: 12px; color: var(--gold2); font-size: 14px; line-height: 1.8; }
.works-text-link span { flex-shrink: 0; }
.works-text-link:hover { color: #fff4df; border-bottom-color: #fff4df; }
.works-main .works-model-accent { width: min(100%, 260px); margin-top: 24px; border: 1px solid var(--works-line); border-radius: 4px; overflow: hidden; background: var(--works-panel); }
.works-model-accent img { display: block; width: 100%; height: auto; }
.works-model-accent figcaption { padding: 10px 12px; color: var(--muted); font-size: 12px; line-height: 1.7; letter-spacing: 0; }

/* Double-rule contact panels and the original explanatory notes. */
.works-cta { margin-top: 38px; padding: 36px 28px 32px; text-align: center; background: var(--works-panel); border: 1px solid var(--works-gold); outline: 1px solid var(--works-line); outline-offset: 6px; }
.works-cta :is(h2, h3) { font-size: clamp(23px, 2.25vw, 30px); margin-bottom: 16px; }
.works-cta > p:not(.works-eyebrow) { font-size: 16px; }
.works-main .works-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; max-width: 100%; padding: 12px 27px; margin-top: 23px; border: 1px solid var(--works-gold); border-radius: 2px; color: #fff3e1; background: linear-gradient(110deg, #68492f, #3a291c); font-size: 15px; line-height: 1.8; letter-spacing: .04em; }
.works-button span { flex-shrink: 0; }
.works-button:hover { background: #68492f; }
.works-main .works-notes { margin-top: 26px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.works-notes p + p { margin-top: 3px; }
.works-main .works-group-note { margin-top: -8px; }
.works-cta-final { margin-top: 72px; padding-block: 38px 32px; }
.works-cta-final .works-eyebrow { margin-bottom: 13px; }
.works-cta-final .works-cta-note { margin-top: 16px; color: var(--muted); font-size: 12px; }

@media (max-width: 1200px) {
  .works-wrap { width: calc(100% - 80px); }
  .works-main .works-lead { font-size: 16px; }
  .works-single-grid, .works-row { gap: 30px; }
  .works-ideas-grid { gap: 20px; }
  .works-idea { padding: 23px 20px; }
  .works-idea h4 { font-size: 21px; }
  .works-use-ideas h3 { font-size: 26px; }
  .works-use-ideas dl > div { padding-block: 12px; }
  .works-use-ideas dt { font-size: 16px; }
  .works-use-ideas dd { font-size: 14px; }
  .works-row-copy h3 { font-size: 23px; }
  .works-caption-title { font-size: 21px; }
}

@media (max-width: 760px) {
  .works-main { font-size: 15px; }
  .works-wrap { width: calc(100% - 40px); padding-bottom: 48px; }
  .works-page-head.at-hero { margin-bottom: 44px; }
  .works-main .works-eyebrow { font-size: 11px; letter-spacing: .2em; }
  .works-main .works-lead { font-size: 15px; }
  .works-lead br { display: none; }
  .works-filters { gap: 9px; margin-top: 24px; }
  .works-filters button { font-size: 12px; padding-inline: 12px; }
  .works-intro-rule { margin-bottom: 40px; padding-bottom: 16px; }
  .works-intro-rule h2 { font-size: 22px; }
  .works-feature { padding-bottom: 44px; margin-bottom: 44px; }
  .works-section-head, .works-single .works-section-head { margin-bottom: 28px; }
  .works-section-head h2 { font-size: 27px; margin-block: 14px; }
  .works-main .works-frame { padding: 9px 9px 0; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--works-line); }
  .works-frame figcaption { flex-wrap: wrap; gap: 5px 12px; min-height: 61px; padding: 12px 3px 14px; }
  .works-caption-title, .works-frame-dome .works-caption-title { font-size: 18px; }
  .works-media-type { margin-left: auto; font-size: 9px; letter-spacing: .12em; }
  .works-ideas-head { margin-top: 30px; flex-wrap: wrap; gap: 8px 18px; }
  .works-ideas-head h3 { font-size: 22px; }
  .works-ideas-grid, .works-single-grid, .works-row { grid-template-columns: minmax(0, 1fr); }
  .works-ideas-grid { gap: 16px; }
  .works-idea { padding: 22px; }
  .works-idea h4 { font-size: 22px; margin-block: 12px; }
  .works-single-grid { gap: 30px; }
  .works-use-ideas h3 { font-size: 26px; margin-bottom: 22px; }
  .works-use-ideas dd { font-size: 15px; }
  .works-group { margin-bottom: 44px; }
  .works-group-head { margin-bottom: 28px; }
  .works-group-head h2 { font-size: 25px; }
  .works-group-head > p:last-child { margin-top: 10px; font-size: 14px; }
  .works-row { gap: 24px; padding-bottom: 30px; margin-bottom: 30px; }
  .works-row-copy { padding-top: 0; }
  .works-main .works-number { font-size: 12px; margin-bottom: 10px; }
  .works-row-copy h3 { font-size: 23px; margin-bottom: 12px; }
  .works-cta { margin-top: 30px; padding: 28px 19px; outline-offset: 4px; }
  .works-cta :is(h2, h3) { font-size: 23px; }
  .works-cta > p:not(.works-eyebrow) { font-size: 14px; }
  .works-cta > p br { display: none; }
  .works-main .works-button { width: 100%; padding-inline: 16px; gap: 14px; font-size: 13px; }
  .works-main .works-notes { font-size: 11px; margin-top: 24px; }
  .works-main .works-group-note { margin-top: -4px; }
  .works-cta-final { margin-top: 42px; }
  .works-cta-final .works-cta-note { font-size: 11px; }
}

@media (max-width: 700px) {
  .works-page-head.at-hero { min-height: 300px; }
  .works-page-head .sub br { display: none; }
}