/* =========================================================
   アトリエ — storefront（日本語主体・産霊トンマナ）
   two-column catalog: left category sidebar + right grid,
   full-bleed, library-first. near-black bg, silver/peach
   iridescent accents, glass, light-weight display type.
   和欧混植：見出しと商品名は明朝、本文と数字はゴシック、ラテンは小さく併走。
   original copy / own brand / self-contained visuals.
   ========================================================= */

:root{
  color-scheme:dark;
  --background:#060507;
  --surface-1:#0c0b10;
  --surface-2:#131218;
  --text-primary:#f5f4f7;
  --text-secondary:#a3a1ad;
  --text-muted:#6a6873;
  /* 小さい字（ラテン名・振り仮名・注記）用。--text-muted は 3.72:1 しか無くAAを割るので分けた */
  --text-fine:#9d9ba7;
  --border-soft:#ffffff14;
  --border-soft-2:#ffffff26;

  --accent-1:#e8eaef;
  --accent-2:#bcc0ca;
  --accent-premium:linear-gradient(90deg,#bcc0ca -1%,#feeae1 42%,#c0cef2 102%);
  --accent-secondary:linear-gradient(135deg,#ffb07a 0%,#ff7a4e 100%);
  --accent-warm:#ffa582;
  --accent-cool-glow:#5e80f066;
  --accent-warm-glow:#ffa58273;
  --heart-red:#ff4d6d;

  --glass-tint:#ffffff0b;
  --glass-tint-strong:#ffffff12;
  --glass-edge:#ffffff66;
  --glass-blur:18px;

  --radius-card:12px;
  --radius-control:8px;
  --radius-pill:999px;
  --radius-stage:24px;
  --header-height:4.75rem;
  --pad-x:clamp(1rem,2.4vw,2rem);
  --sidebar-w:208px;
  --readw:1180px;

  /* 本文・数字＝ゴシック（ラテンを先頭に置いて和欧混植を成立させる） */
  --font:"Helvetica Neue","Segoe UI","Inter","Hiragino Kaku Gothic ProN",
         "Yu Gothic UI","Yu Gothic","Noto Sans JP",system-ui,-apple-system,sans-serif;
  /* 見出し・商品名＝明朝（Win=游明朝 Demibold / Mac=ヒラギノ明朝 W6） */
  --font-wa:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",
            "Noto Serif CJK JP","BIZ UDMincho",serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ロゴマーク（差し替え点：ここだけ変えれば全ページのマークが変わる） */
  --logo-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M12.06 14.65C12.56 15.09 13.27 15.86 13.52 16.59C13.77 17.32 13.79 18.28 13.56 19.02C13.34 19.75 12.78 20.54 12.17 21.01C11.55 21.47 10.64 21.79 9.87 21.8C9.1 21.81 8.28 21.56 7.54 21.09C6.6 20.49 5.59 19.24 4.91 18.14C4.25 17.05 3.75 15.77 3.52 14.52C3.28 13.29 3.27 11.94 3.48 10.72C3.69 9.51 4.14 8.27 4.76 7.21C5.36 6.17 6.21 5.19 7.14 4.44C8.05 3.69 9.17 3.08 10.28 2.71C11.38 2.34 12.61 2.16 13.76 2.2C14.9 2.24 16.09 2.5 17.13 2.93C18.16 3.35 19.44 4.16 19.98 4.75C20.3 5.1 20.49 5.43 20.52 5.78C20.55 6.14 20.4 6.62 20.17 6.9C19.94 7.17 19.49 7.4 19.14 7.43C18.78 7.47 18.45 7.24 18.03 7.08C17.44 6.87 16.66 6.39 15.96 6.25C15.27 6.12 14.51 6.12 13.84 6.24C13.18 6.36 12.52 6.61 11.96 6.95C11.43 7.28 10.93 7.73 10.57 8.22C10.21 8.68 9.93 9.25 9.78 9.8C9.63 10.33 9.58 10.91 9.63 11.44C9.68 11.95 9.84 12.47 10.07 12.9C10.28 13.32 10.6 13.71 10.94 14.01C11.26 14.29 11.69 14.32 12.06 14.65ZM7.47 18.83A1.65 1.65 0 1 0 10.78 18.83A1.65 1.65 0 1 0 7.47 18.83Z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* アンカー遷移の着地点が固定ヘッダの下に潜らないように */
#top,#projects,#pricing,#footer{scroll-margin-top:calc(var(--header-height) + 1rem)}
body{
  font-family:var(--font);background:var(--background);color:var(--text-primary);
  line-height:1.8;letter-spacing:.02em;overflow-x:hidden;line-break:strict;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
::selection{background:#ffa58255;color:#fff}

/* 和文の型：明朝＋プロポーショナル詰め（palt）。これを使う所だけが"見出し・商品名" */
.wa{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;letter-spacing:.06em}

.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- glass / border glow ---------- */
.glass{background:var(--glass-tint);position:relative;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);backdrop-filter:blur(var(--glass-blur)) saturate(150%)}
.border-glow{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.5;transition:opacity .4s var(--ease)}
.border-glow-blob{position:absolute;top:50%;left:50%;width:150%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,#ffa582,#c0cef2,#feeae1,transparent 75%);
  transform:translate(-50%,-50%);animation:spin 6s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
:hover>.border-glow,.plan--featured .border-glow{opacity:1}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);
  font-size:.86rem;font-weight:500;letter-spacing:.06em;padding:.65em 1.35em;border-radius:var(--radius-pill);
  border:1px solid transparent;cursor:pointer;transition:.35s var(--ease);white-space:nowrap;background:none;color:inherit}
.btn--lg{font-size:.98rem;padding:.85em 1.6em}
.btn--block{width:100%;justify-content:center}
.btn__arrow{transition:transform .35s var(--ease)}
.btn:hover .btn__arrow{transform:translate(2px,-2px)}
.btn--solid{background:var(--accent-1);color:#0a0a0e;font-weight:600}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px #e8eaefaa}
.btn--ghost{border-color:var(--border-soft-2);color:var(--text-primary);background:#ffffff05}
.btn--ghost:hover{background:#ffffff0d;border-color:var(--glass-edge);transform:translateY(-2px)}
.btn--glow{background:var(--glass-tint-strong);color:var(--text-primary);font-weight:600;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--glow .btn__label{position:relative;z-index:1}
.btn--glow:hover{transform:translateY(-2px)}

/* ---------- header / ロゴ ---------- */
.site-header{position:fixed;inset-inline:0;top:0;z-index:100;height:var(--header-height);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:0 var(--pad-x);transition:.4s var(--ease)}
.site-header.is-stuck{background:#08070ac2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-soft)}

.logo{display:inline-flex;align-items:center;gap:.62rem;justify-self:start}
/* マークは mask で抜く＝銀桃の虹彩グラデがそのまま形になる */
.logo__mark{width:22px;height:22px;flex:none;background:var(--accent-premium);
  -webkit-mask:var(--logo-mask) center/contain no-repeat;mask:var(--logo-mask) center/contain no-repeat;
  filter:drop-shadow(0 0 10px #c0cef255)}
.logo__lockup{display:flex;flex-direction:column;justify-content:center;line-height:1}
.logo__name{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:1.05rem;letter-spacing:.18em;color:var(--text-primary)}
.logo__latin{font-size:.56rem;letter-spacing:.4em;color:var(--text-fine);margin-top:.42em;text-transform:lowercase}

.pill-nav{justify-self:center;display:flex;align-items:center;gap:.1rem;padding:.35rem;
  border-radius:var(--radius-pill);border:1px solid var(--border-soft)}
.pill-nav a{display:inline-flex;align-items:baseline;gap:.5em;font-size:.82rem;letter-spacing:.1em;
  color:var(--text-secondary);padding:.5em 1.05em;border-radius:var(--radius-pill);transition:.28s var(--ease)}
.pill-nav a span{font-size:.62rem;letter-spacing:.16em;color:var(--text-fine);transition:.28s var(--ease)}
.pill-nav a:hover{color:var(--text-primary);background:#ffffff0d}
.pill-nav a:hover span{color:var(--text-secondary)}
.header__cta{justify-self:end;display:flex;align-items:center;gap:.6rem}
.header__burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:var(--radius-control)}
.header__burger span{width:22px;height:2px;background:var(--text-primary);border-radius:2px}

/* ---------- shared ---------- */
.kicker{font-size:.72rem;letter-spacing:.18em;color:var(--text-fine);font-weight:600;margin-bottom:1rem}
.section-title{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:clamp(1.55rem,2.9vw,2.5rem);letter-spacing:.1em;line-height:1.45;color:#fff}
.section-title em{font-style:normal;background:var(--accent-premium);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 語の途中で折れないように、意味のかたまりごとに inline-block で包む */
.section-title .phrase{display:inline-block}
.pill{display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;letter-spacing:.05em;color:var(--text-secondary);
  padding:.45em 1.1em;border:1px solid var(--border-soft);border-radius:var(--radius-pill);background:#ffffff05;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* 和文の字送りの中に半角数字が入ると前後が空くので、数字だけ字送りを外す */
.pill #pillCount{letter-spacing:0;font-variant-numeric:tabular-nums}
.pill__dot{width:6px;height:6px;border-radius:50%;background:var(--accent-warm);box-shadow:0 0 10px var(--accent-warm);flex:none}

/* ---------- LIBRARY ---------- */
.library{width:100%;padding:calc(var(--header-height) + 2.2rem) var(--pad-x) clamp(3rem,6vw,5rem)}
.library__topbar{margin-bottom:1.8rem}
/* 見出しはピルに少し寄せる（明朝の半行送りぶん、実測の余白は数値より広く見えるため） */
.library__titlerow{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.6rem}
.sort{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);font-size:.78rem;letter-spacing:.12em;
  color:var(--text-secondary);background:#ffffff05;border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);padding:.5em 1.15em;white-space:nowrap}

/* two-column body */
.library__body{display:flex;flex-direction:column;gap:1.6rem}
@media(min-width:1024px){.library__body{flex-direction:row;align-items:flex-start;gap:2.6rem}}

/* sidebar */
.filter-sidebar{flex:none;display:flex;flex-direction:column;gap:.15rem}
@media(min-width:1024px){.filter-sidebar{width:var(--sidebar-w);position:sticky;top:calc(var(--header-height) + 1rem)}}
.filter-sidebar-title{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:.82rem;letter-spacing:.16em;color:var(--text-fine);margin:.2rem 0 .9rem .7rem}
.cat{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;font-family:var(--font);
  color:var(--text-secondary);cursor:pointer;background:none;border:0;
  padding:.6em .7em;border-radius:var(--radius-control);transition:.2s var(--ease)}
.cat__label{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.cat__jp{font-size:.94rem;letter-spacing:.16em;font-weight:500}
.cat__latin{font-size:.64rem;letter-spacing:.14em;color:var(--text-fine);margin-top:.42em;transition:.2s var(--ease)}
.cat__n{font-size:.78rem;color:var(--text-fine);font-variant-numeric:tabular-nums}
.cat__n i{font-style:normal;font-size:.62rem;margin-left:.15em;opacity:.7}
.cat:hover{color:var(--text-primary);background:#ffffff08}
.cat.is-active{color:var(--text-primary);background:#ffffff10}
.cat.is-active .cat__jp{font-weight:600}
.cat.is-active .cat__latin{color:var(--text-secondary)}

/* sidebar becomes horizontal chips on small */
@media(max-width:1023px){
  .filter-sidebar{flex-direction:row;flex-wrap:wrap;overflow-x:auto;gap:.5rem;scrollbar-width:none;padding-bottom:2px}
  .filter-sidebar::-webkit-scrollbar{display:none}
  .filter-sidebar-title{display:none}
  .cat{width:auto;white-space:nowrap;border:1px solid var(--border-soft);border-radius:var(--radius-pill);padding:.45em 1.05em}
  .cat__latin{display:none}
  .cat__label{flex-direction:row;align-items:center;flex:none}
  .cat.is-active{background:var(--accent-1);color:#0a0a0e}
  .cat.is-active .cat__n{color:#0a0a0e99}
}

/* main + grid */
.library__main{flex:1;min-width:0}
/* 絞り込みでカードを消したとき、ブラウザのスクロールアンカリングが位置を勝手に補正するのを止める */
.grid{display:grid;grid-template-columns:1fr;gap:1.15rem 1rem;overflow-anchor:none}
@media(min-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1600px){.grid{grid-template-columns:repeat(4,1fr)}}

/* project card */
.project-card{position:relative;display:flex;flex-direction:column;
  opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.project-card.in{opacity:1;transform:none}
.card-thumb{position:relative;aspect-ratio:960/684;border-radius:var(--radius-card);overflow:hidden;
  border:1px solid var(--border-soft);transition:.45s var(--ease)}
.card-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,#060507b3)}
.card-thumb-img{position:absolute;inset:0;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.05) translate(-1%,-1%)}to{transform:scale(1.12) translate(1%,1%)}}
.card-thumb-img--real{width:100%;height:100%;object-fit:cover;animation:none}
.card-thumb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s var(--ease)}
.card-thumb-video.is-playing{opacity:1}
@media(prefers-reduced-motion:reduce){.card-thumb-video{display:none}}
.card-grain{position:absolute;inset:0;opacity:.15;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.project-card:hover .card-thumb{border-color:var(--border-soft-2);transform:translateY(-4px);box-shadow:0 30px 60px -34px #000}
.card-new-badge{position:absolute;top:.7rem;left:.7rem;z-index:2;display:inline-flex;align-items:center;gap:.45em;
  font-weight:600;font-size:.66rem;letter-spacing:.08em;color:#fff;
  padding:.3em .7em;border-radius:var(--radius-pill);
  background:#0a0a0eaa;border:1px solid var(--border-soft-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card-new-badge-dot{width:5px;height:5px;border-radius:50%;background:var(--accent-warm);box-shadow:0 0 8px var(--accent-warm);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

.card-body{display:flex;flex-direction:column;gap:.42rem;padding:.95rem .25rem .2rem}
.card-titlerow{display:flex;align-items:baseline;gap:.7rem}
/* 商品名＝和名(明朝・大) ＋ ラテン(小)。ラテンは捨てない */
.card-title{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:1.22rem;letter-spacing:.14em;line-height:1.3;color:var(--text-primary);white-space:nowrap}
/* 4字以上の長い正名（電気コバルト等）は少し詰めて、ラテン名を押し出さない */
.card-title--long{font-size:1.02rem;letter-spacing:.06em}
/* 和名を持たない商品は、ラテン名を見出しの位置へ。併走ラテンは出さないので、この一枚で行を埋める */
.card-title--latin-only{font-family:var(--font);font-weight:500;font-size:1.06rem;letter-spacing:.16em;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.card-title-latin{font-size:.7rem;letter-spacing:.16em;color:var(--text-fine);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-desc{font-size:.8rem;line-height:1.7;color:var(--text-secondary);letter-spacing:.04em}
.card-cat-chip{align-self:flex-start;margin-top:.15rem;font-size:.68rem;letter-spacing:.12em;color:var(--text-fine);
  background:#ffffff05;border:1px solid var(--border-soft-2);border-radius:var(--radius-pill);padding:.24em .85em}
.tier-badge{font-size:.58rem;font-weight:600;letter-spacing:.1em;padding:.34em .72em;border-radius:var(--radius-pill);
  border:1px solid var(--border-soft);color:var(--text-muted);white-space:nowrap;flex:none;align-self:center}
/* 有償側は"塗り"でなく"文字"で光らせる＝並べても騒がない */
.tier-badge--premium{border-color:var(--border-soft-2);color:#e8eaef}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tier-badge--premium{background:var(--accent-premium);-webkit-background-clip:text;background-clip:text;color:transparent}
}

/* ---------- pricing ---------- */
.pricing{width:100%;padding:clamp(3rem,6vw,5.5rem) var(--pad-x)}
.pricing__inner{max-width:var(--readw);margin:0 auto}
.pricing__head{max-width:680px;margin-bottom:2.8rem}
.pricing__lead{margin-top:1.2rem;color:var(--text-secondary);font-size:.92rem}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;align-items:start;max-width:880px;margin:0 auto}
.plan{position:relative;border:1px solid var(--border-soft);border-radius:var(--radius-stage);padding:2.1rem 1.9rem;background:var(--surface-1)}
.plan--featured{background:var(--surface-2);transform:translateY(-8px);box-shadow:0 40px 90px -50px #c0cef255}
.plan__flag{position:absolute;top:-.8rem;left:1.9rem;font-size:.64rem;font-weight:700;letter-spacing:.14em;
  padding:.34em 1em;border-radius:var(--radius-pill);background:var(--accent-premium);color:#0a0a0e}
.plan__name{display:flex;align-items:baseline;gap:.7em;font-size:.8rem;letter-spacing:.2em;color:var(--text-secondary);font-weight:600}
.plan__name i{font-style:normal;font-size:.84rem;letter-spacing:.1em;color:var(--text-fine)}
.plan__price{font-size:2.7rem;font-weight:300;letter-spacing:-.02em;margin:.55rem 0 .1rem;font-variant-numeric:tabular-nums}
.plan__price span{font-size:.86rem;color:var(--text-muted);margin-left:.35em;letter-spacing:.08em}
.plan__note{color:var(--text-secondary);font-size:.86rem;margin-bottom:1.4rem}
.plan__alt{color:var(--text-secondary);font-size:.8rem;margin-bottom:1.4rem}
.plan__ctas{display:flex;flex-direction:column;gap:.6rem}
.plan__list{list-style:none;display:flex;flex-direction:column;gap:.72rem;margin-bottom:1.9rem}
.plan__list li{position:relative;padding-left:1.5em;color:var(--text-secondary);font-size:.86rem;line-height:1.7}
.plan__list li b{color:var(--text-primary);font-weight:600}
.plan__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent-premium)}
.pricing__fine{text-align:center;color:var(--text-fine);font-size:.78rem;margin-top:1.9rem;line-height:1.9}
.pricing__fine + .pricing__fine{margin-top:.5rem}
.pricing__cancel-link{color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px}
.pricing__cancel-link:hover{color:var(--text-primary)}

/* ---------- footer ---------- */
.site-footer{width:100%;padding:clamp(2.5rem,5vw,4.5rem) var(--pad-x) 2rem}
.footer__inner{max-width:var(--readw);margin:0 auto}
.footer__grid{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.footer__brand{max-width:300px}
.footer__brand .logo{margin-bottom:.9rem}
.footer__brand p{color:var(--text-fine);font-size:.84rem;line-height:1.9}
.footer__grid h3{font-family:var(--font-wa);font-weight:600;font-feature-settings:"palt" 1;
  font-size:.84rem;letter-spacing:.14em;color:var(--text-fine);margin-bottom:1.05rem}
.footer__grid nav a{display:block;color:var(--text-secondary);font-size:.84rem;letter-spacing:.06em;padding:.3em 0;transition:.25s}
.footer__grid nav a:hover{color:var(--text-primary)}
.footer__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border-soft);color:var(--text-fine);font-size:.78rem}

/* ---------- entrance ---------- */
.anim{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.anim[data-anim="1"]{transition-delay:.08s}
.anim[data-anim="2"]{transition-delay:.16s}
.anim.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .plans{grid-template-columns:1fr}
  /* nav を隠すと3カラムの2列目が消えてCTAが中央に落ちるので、2カラムに組み替える */
  .site-header{grid-template-columns:1fr auto}
  .pill-nav{display:none}
  /* ナビが消える幅では必ずバーガーを出す（960〜601px でヘッダの操作子が消えていた） */
  .header__burger{display:flex}
  .plan--featured{transform:none}
}
@media(max-width:600px){
  .header__burger{display:flex}
  .header__cta .btn--glow{display:none}
  /* 見出しが2行になる幅では、静的ラベルの「掲載順」が1行を占めて座りが悪いので出さない */
  .sort{display:none}
  .library__titlerow{flex-wrap:wrap;gap:.6rem}
  .footer__grid{flex-direction:column;gap:1.8rem}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:.7rem}
  .card-title{font-size:1.14rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .anim,.project-card{opacity:1!important;transform:none!important}
}

/* 画面には出さず、読み上げにだけ届ける（絞り込み結果の件数） */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}