/* OH! OCEAN — 共通スタイル（works / archive / 404 / 旧記事ページ。index.html はヘッダー部分のみ使用）
   色・書体・余白はトップ（index.html）のデザイントークンをそのまま使っています。 */

:root {
  --deep: #0B1F2A;
  --deep-2: #0d2632;
  --deep-3: #163644;
  --deep-4: #1b4152;
  --sand: #F3EDE2;
  --ink: #14222B;
  --coral: #F0724F;
  --coral-ink: #B84B2B;
  --teal: #0A7F93;
  --card: #FBFAF7;
  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(80px, 11vw, 160px);
  --f-head: "Zen Kaku Gothic New", sans-serif;
  --f-mono: "DM Mono", monospace;
}

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--deep); color: var(--sand); font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
/* 改行：日本語は文節の区切りで折り返す（対応ブラウザのみ）。br-pc はパソコン幅だけで効く意図的な改行 */
body { word-break: auto-phrase; }
.br-pc { display: none; }
@media (min-width: 768px) { .br-pc { display: inline; } }
::selection { background: var(--coral); color: #fff; }

@keyframes rise { from { opacity: 0; transform: translate3d(0,26px,0); } to { opacity: 1; transform: none; } }
@keyframes caustic { from { transform: translate3d(-4%, -3%, 0) scale(1.08); } to { transform: translate3d(4%, 3%, 0) scale(1.18); } }
@keyframes ripple-out { from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.1); } to { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

.page { position: relative; overflow: clip; }
.wrap { max-width: 1180px; margin: 0 auto; }

/* --- progress bar --- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50; background: rgba(243,237,226,0.08); }
.progress > div { height: 100%; width: 0%; background: var(--coral); }

/* --- header --- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--gutter); }
/* 4ページ共通のヘッダー（index.html も同じ）。明るい空の上でも読めるよう影を付ける */
.site-logo { font-family: var(--f-head); font-weight: 900; font-size: 19px; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 3px rgba(4,20,36,0.7); }
.site-nav { display: flex; gap: clamp(16px, 3vw, 32px); }
.site-nav a { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(4,20,36,0.7); border-bottom: 1px solid transparent; padding-bottom: 3px; transition: border-color .2s, color .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; border-color: rgba(255,255,255,0.45); }
.site-nav a:hover { border-color: var(--coral); }
@media (max-width: 480px) {
  .site-logo { font-size: 16px; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 10px; letter-spacing: 0.14em; }
}

/* --- page head --- */
.page-head { position: relative; padding: clamp(120px, 16vw, 200px) var(--gutter) clamp(56px, 7vw, 96px); background:
    radial-gradient(120% 90% at 82% 8%, rgba(10,160,184,0.22), rgba(11,31,42,0) 60%),
    radial-gradient(90% 70% at 8% 96%, rgba(240,114,79,0.1), rgba(11,31,42,0) 62%),
    linear-gradient(#08161f, var(--deep) 70%, var(--deep-2)); }
.page-head .wrap { display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: start; }
.page-head h1 { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(28px, 4vw, 52px); line-height: 1.4; }
.page-head p { margin: 0; font-size: clamp(14px, 1.1vw, 17px); line-height: 2.1; color: rgba(243,237,226,0.82); max-width: 40em; }
.back-link { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243,237,226,0.55); transition: color .2s; }
.back-link:hover { color: var(--sand); }

/* --- shared type --- */
.eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.55; }
.eyebrow--teal { color: var(--teal); opacity: 1; }
.section { position: relative; padding: var(--section-y) var(--gutter); }
.section-head { display: grid; gap: clamp(18px, 2.2vw, 26px); justify-items: start; max-width: 46em; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(24px, 3vw, 40px); line-height: 1.45; }
.section-head h2 small { display: block; font-size: 0.56em; font-weight: 500; opacity: 0.7; }
.section-head p { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 2.1; opacity: 0.86; max-width: 40em; }
.empty-note { margin: 0; font-size: 13px; line-height: 1.9; opacity: 0.6; }

/* --- light section (海のためのプロジェクト) --- */
/* トップの「これから」と同じ砂色（下に行くほど少し深く） */
.section--light { background: linear-gradient(#F3EDE2 0%, #F0EBE2 60%, #ECE7DE 100%); color: var(--ink); }

/* project card */
.project-list { display: grid; gap: clamp(28px, 4vw, 48px); }
.project-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 3.5vw, 48px); border-radius: 6px; background: var(--card); border: 1px solid rgba(20,34,43,0.1); box-shadow: 0 24px 60px -40px rgba(10,60,74,0.5); }
.project-body { display: grid; gap: 18px; align-content: start; }
.project-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pill { padding: 6px 12px; border-radius: 999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; background: rgba(240,114,79,0.14); color: var(--coral-ink); }
.project-card h3 { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.5; }
.project-card .client { font-size: 13px; line-height: 1.8; color: rgba(20,34,43,0.6); }
.project-card p { margin: 0; font-size: clamp(13px, 1vw, 15px); line-height: 2.1; color: rgba(20,34,43,0.82); }
.project-facts { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid rgba(20,34,43,0.12); }
.project-facts dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.project-facts dd { margin: 0 0 6px; font-size: 13px; line-height: 1.9; color: rgba(20,34,43,0.7); }
.cta-solid { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; background: var(--deep); color: var(--sand); font-size: 13px; transition: background .2s, color .2s; }
.cta-solid:hover { background: var(--coral); color: var(--deep); }
.cta-solid span { font-family: var(--f-mono); font-size: 11px; }
/* 問い合わせフォームへの主導線（トップの .cta-accent と同じ見た目） */
.form-cta { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; background: var(--coral); color: #0B1F2A; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; transition: background .2s, color .2s; }
.form-cta:hover { background: #0B1F2A; color: var(--coral); }
.form-cta span { font-family: var(--f-mono); font-size: 12px; }
/* メールは副導線として控えめに */
.email-link.email-link--sub { font-size: clamp(13px, 1.2vw, 16px); opacity: 0.7; border-bottom-color: rgba(243,237,226,0.3); padding-bottom: 4px; }

/* abstract placeholder — 実写に見せかけないためのパターン地 */
.placeholder { position: relative; overflow: hidden; min-height: 220px; border-radius: 4px; display: grid; place-content: center; padding: 20px; text-align: center; background-color: #E4F0F1; background-image: repeating-linear-gradient(135deg, rgba(10,127,147,0.14) 0 1px, rgba(0,0,0,0) 1px 9px); }
.placeholder::before { content: ""; position: absolute; inset: -12%; pointer-events: none; mix-blend-mode: soft-light; animation: caustic 19s ease-in-out infinite alternate; background-image:
    radial-gradient(28% 16% at 22% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%),
    radial-gradient(22% 13% at 68% 22%, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%),
    radial-gradient(34% 18% at 55% 74%, rgba(255,255,255,0.85), rgba(255,255,255,0) 72%),
    radial-gradient(18% 12% at 86% 62%, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%); }
.placeholder span { position: relative; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--teal); }
/* アプリ画面：スマホ枠を斜めに重ねる（data の screens。phone--0 が手前） */
.phone-stack { position: relative; overflow: hidden; height: clamp(320px, 36vw, 440px); border-radius: 4px; perspective: 1600px;
  background: radial-gradient(70% 60% at 70% 20%, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%), linear-gradient(160deg, #E4F0F1 0%, #CFE5EA 55%, #BBD8E0 100%); }
.phone { position: absolute; top: 50%; left: 50%; height: 80%; aspect-ratio: 600 / 1280; padding: 5px; border-radius: 22px; background: var(--ink);
  box-shadow: 0 30px 50px -24px rgba(10,50,64,0.55), inset 0 0 0 1px rgba(255,255,255,0.08); }
.phone-stack .phone img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: top; border-radius: 17px; display: block; }
.phone--0 { transform: translate(-50%, -48%) rotateX(10deg) rotateY(-22deg) rotateZ(7deg); z-index: 3; }
.phone--1 { transform: translate(-112%, -54%) rotateX(10deg) rotateY(-22deg) rotateZ(7deg) scale(0.88); z-index: 2; filter: saturate(0.9) brightness(0.97); }
.phone--2 { transform: translate(12%, -44%) rotateX(10deg) rotateY(-22deg) rotateZ(7deg) scale(0.88); z-index: 1; filter: saturate(0.9) brightness(0.97); }

/* Webサイト画面：ブラウザ枠を斜めに重ねる（data の browsers。browser--0 が手前） */
.browser-stack { position: relative; overflow: hidden; height: clamp(300px, 34vw, 420px); border-radius: 4px; perspective: 1800px;
  background: radial-gradient(70% 60% at 30% 20%, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%), linear-gradient(160deg, #E4F0F1 0%, #CFE5EA 55%, #BBD8E0 100%); }
.browser { position: absolute; top: 50%; left: 50%; width: 78%; border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 50px -24px rgba(10,50,64,0.55), 0 0 0 1px rgba(20,34,43,0.08); }
.browser-bar { display: block; height: 18px; box-shadow: inset 0 -1px 0 rgba(20,34,43,0.08);
  background: radial-gradient(circle, rgba(20,34,43,0.22) 3px, transparent 3.5px) 6px 50% / 12px 12px no-repeat,
    radial-gradient(circle, rgba(20,34,43,0.22) 3px, transparent 3.5px) 18px 50% / 12px 12px no-repeat,
    radial-gradient(circle, rgba(20,34,43,0.22) 3px, transparent 3.5px) 30px 50% / 12px 12px no-repeat, #F3F1EC; }
.browser-stack .browser img { display: block; width: 100%; height: auto; min-height: 0; border-radius: 0; }
.browser--0 { transform: translate(-44%, -38%) rotateX(8deg) rotateY(-16deg) rotateZ(3deg); z-index: 2; }
.browser--1 { transform: translate(-62%, -64%) rotateX(8deg) rotateY(-16deg) rotateZ(3deg) scale(0.92); z-index: 1; filter: saturate(0.9) brightness(0.97); }

.project-card img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 4px; display: block; }

/* --- dark section (ディレクション実績) --- */
/* トップの「これまで」と同じ濃紺（下に行くほど深く） */
.section--dark { background: linear-gradient(#163644 0%, #102B38 55%, #0B1F2A 100%); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3vw, 36px); }
.filter { font: inherit; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243,237,226,0.75); background: transparent; border: 1px solid rgba(243,237,226,0.25); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.filter:hover { border-color: var(--coral); color: #fff; }
.filter[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: var(--deep); }
.filter .count { opacity: 0.6; margin-left: 6px; }

.work-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(18px, 2vw, 28px); }
.work-card[hidden] { display: none; }
.work-open { all: unset; box-sizing: border-box; width: 100%; display: grid; gap: 10px; cursor: pointer; color: var(--sand); }
.work-open:focus-visible { outline: 2px solid var(--coral); outline-offset: 6px; border-radius: 4px; }
.work-thumb { width: 100%; aspect-ratio: 1200 / 648; height: auto; min-height: 0; object-fit: cover; border-radius: 4px; display: block; background: var(--deep-2); box-shadow: 0 18px 40px -28px rgba(0,0,0,0.8); transition: transform .35s cubic-bezier(0.22,0.8,0.24,1), box-shadow .35s; }
.work-open:hover .work-thumb { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(0,0,0,0.9); }
.work-client { margin-top: 6px; font-family: var(--f-head); font-weight: 500; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; transition: color .2s; }
.work-open:hover .work-client { color: #fff; }
.work-type { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 12px; line-height: 1.7; color: rgba(243,237,226,0.6); }
.work-tags { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; white-space: nowrap; }

/* 実績の詳細ダイアログ */
.work-dialog { width: min(100% - 32px, 1240px); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 6px; background: var(--card); color: var(--ink); box-shadow: 0 40px 120px -40px rgba(0,0,0,0.8); overflow: auto; }
.work-dialog::backdrop { background: rgba(5,15,22,0.72); backdrop-filter: blur(3px); }
.work-dialog[open] { animation: rise .45s cubic-bezier(0.22,0.8,0.24,1) both; }
/* 閉じるボタンは右上に重ねるだけ（float だと中身がボタンをよけて右に余白ができる）。下の負のマージンで高さを打ち消す */
.dialog-close { position: sticky; top: 12px; display: block; margin: 12px 12px -52px auto; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(20,34,43,0.2); background: rgba(251,250,247,0.9); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.dialog-close:hover { border-color: var(--coral); color: var(--coral-ink); }
.dialog-body { display: grid; gap: clamp(20px, 3vw, 40px); padding: clamp(20px, 3.5vw, 44px); }
@media (min-width: 900px) { .dialog-body { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
/* キャプチャは切らずに縦に積む。スマホでは文章 → 画像の順 */
.dialog-stack { display: grid; gap: 16px; }
.dialog-stack img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--deep-2); box-shadow: 0 12px 30px -20px rgba(10,50,64,0.5); }
.dialog-visual { width: 100%; aspect-ratio: 1200 / 648; height: auto; object-fit: cover; border-radius: 4px; display: block; }
@media (max-width: 899px) { .dialog-stack, .dialog-visual { order: 2; } }
@media (min-width: 900px) { .dialog-text { position: sticky; top: 24px; } }
.dialog-text { display: grid; gap: 14px; align-content: start; }
.dialog-text h3 { padding-right: 44px; margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.5; }
.dialog-text p { margin: 0; font-size: 14px; line-height: 2; color: rgba(20,34,43,0.82); }
.dialog-text .dialog-headline { font-family: var(--f-head); font-weight: 500; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.8; color: var(--ink); }
.dialog-facts { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid rgba(20,34,43,0.12); display: grid; gap: 4px; }
.dialog-facts dt { margin-top: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); }
.dialog-facts dd { margin: 0; font-size: 13px; line-height: 1.9; color: rgba(20,34,43,0.75); }
.stance-note { text-align: center; margin-top: clamp(32px, 4vw, 48px); padding: clamp(22px, 3vw, 34px); border-radius: 4px; background: rgba(11,31,42,0.5); border: 1px solid rgba(243,237,226,0.16); font-size: clamp(13px, 1vw, 15px); line-height: 2.1; color: rgba(243,237,226,0.86); }

/* --- archive --- */
.archive-group { display: grid; gap: 18px; padding: clamp(28px, 3.5vw, 44px) 0; border-top: 1px solid rgba(243,237,226,0.2); }
.archive-group:last-child { border-bottom: 1px solid rgba(243,237,226,0.2); }
.archive-group h2 { margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-family: var(--f-head); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.5; }
.archive-group h2 .eyebrow { font-weight: 400; }
.archive-group h3 { margin: 12px 0 0; display: flex; align-items: baseline; gap: 12px; font-family: var(--f-head); font-weight: 500; font-size: clamp(15px, 1.4vw, 18px); color: rgba(243,237,226,0.85); }
.archive-sub { display: grid; gap: 8px; padding-left: clamp(0px, 2vw, 24px); }
.article-list { list-style: none; margin: 0; padding: 0; display: grid; }
.article-list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-items: baseline; padding: 12px 4px; border-bottom: 1px solid rgba(243,237,226,0.08); }
.article-list time { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(243,237,226,0.5); }
.article-list a { font-size: 14px; line-height: 1.8; }
.article-list a:hover { color: var(--coral); }

/* --- archive article（旧記事ページ。長文を読みやすいよう明るい面に置く） --- */
.article-head h1 { font-size: clamp(22px, 3vw, 38px); line-height: 1.6; max-width: 32em; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: rgba(243,237,226,0.6); }
.archive-notice { margin: 0 auto clamp(28px, 4vw, 44px); max-width: 46em; padding: 14px 18px; border-radius: 4px; background: rgba(20,34,43,0.06); font-size: 12px; line-height: 1.9; color: rgba(20,34,43,0.7); }
.article-body { max-width: 46em; margin: 0 auto; font-size: 15px; line-height: 2.05; color: rgba(20,34,43,0.88); overflow-wrap: anywhere; }
.article-body > * { margin: 0 0 1.4em; }
.article-body h2, .article-body h3, .article-body h4, .article-body h5 { font-family: var(--f-head); font-weight: 700; line-height: 1.6; color: var(--ink); margin: 2.4em 0 0.9em; }
.article-body h2 { font-size: clamp(19px, 2vw, 24px); padding-top: 1em; border-top: 1px solid rgba(20,34,43,0.14); }
.article-body h3 { font-size: 18px; }
.article-body h4, .article-body h5 { font-size: 16px; }
.article-body a { color: var(--teal); border-bottom: 1px solid rgba(10,127,147,0.35); }
.article-body a:hover { color: var(--coral-ink); border-color: var(--coral); }
.article-body a:has(img) { border: 0; }
.article-body img, .article-body video { max-width: 100%; height: auto; border-radius: 4px; display: block; }
.article-body figure { margin: 0 0 1.6em; }
.article-body figcaption { margin-top: 8px; font-size: 12px; line-height: 1.8; color: rgba(20,34,43,0.6); text-align: center; }
.article-body .wp-block-gallery { display: grid; gap: 12px; }
.article-body .wp-block-gallery.columns-2, .article-body .wp-block-gallery.columns-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.article-body blockquote { margin-left: 0; padding: 4px 0 4px 20px; border-left: 3px solid rgba(10,127,147,0.4); color: rgba(20,34,43,0.75); }
.article-body iframe { max-width: 100%; border: 0; border-radius: 4px; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.article-body td, .article-body th { padding: 8px 10px; border: 1px solid rgba(20,34,43,0.15); }
.article-body .wp-block-spacer { display: none; }
.article-nav { max-width: 46em; margin: clamp(48px, 6vw, 72px) auto 0; padding-top: 24px; border-top: 1px solid rgba(20,34,43,0.14); display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.article-nav a { color: var(--teal); }

/* --- contact strip + footer --- */
.contact-strip { position: relative; padding: clamp(64px, 8vw, 120px) var(--gutter) 0; background: linear-gradient(#0E7286 0%, #0B4C5E 45%, #08202B 100%); }
.contact-strip .wrap { display: grid; gap: clamp(18px, 2.4vw, 26px); justify-items: start; }
.contact-strip p { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.6; }  /* トップの CONTACT と同じ */
.email-link { font-family: var(--f-mono); font-size: clamp(16px, 2.4vw, 34px); letter-spacing: 0.02em; border-bottom: 1px solid rgba(243,237,226,0.4); padding-bottom: 6px; word-break: break-all; transition: border-color .2s, color .2s; }
.email-link:hover { border-color: var(--coral); color: var(--coral); }
.site-footer { margin-top: clamp(48px, 8vw, 96px); padding: 28px 0 32px; border-top: 1px solid rgba(243,237,226,0.16); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: rgba(243,237,226,0.55); }
.footer-info { display: grid; gap: 6px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.archive-link { opacity: 0.6; }
.archive-link:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .placeholder::before { animation: none; }
  .work-thumb, .filter, .cta-solid { transition: none; }
  .work-dialog[open] { animation: none; }
}