:root {
  --msr-ceramic: #f4f7f4;
  --msr-porcelain: #ffffff;
  --msr-sesame: #171b1d;
  --msr-ink: #20272b;
  --msr-muted: #657075;
  --msr-steel: #d7dfdf;
  --msr-steel-2: #b9c6c8;
  --msr-indigo: #275d8b;
  --msr-persimmon: #d85b35;
  --msr-shiso: #4f8d63;
  --msr-rice: #e7ece7;
  --msr-shadow: rgba(22, 27, 29, 0.12);
  --msr-radius: 18px;
  --msr-font: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Arial Narrow', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--msr-ceramic);
  color: var(--msr-ink);
  font-family: var(--msr-font);
  line-height: 1.58;
}

a { color: inherit; }

.msr-home,
.msr-article {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
}

.msr-small-label,
.msr-kicker,
.msr-persona,
.msr-card__code,
.msr-rail-title {
  margin: 0;
  color: var(--msr-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.msr-entry {
  padding: 28px 0 34px;
}

.msr-entry__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--msr-steel);
}

.msr-entry__plate {
  position: relative;
  display: grid;
  grid-template-columns: 0.7fr 2.3fr 1.15fr;
  gap: 28px;
  align-items: end;
  margin-top: 18px;
  padding: 46px;
  overflow: hidden;
  background: var(--msr-porcelain);
  border: 1px solid var(--msr-steel);
  border-radius: 28px;
  box-shadow: 0 22px 60px var(--msr-shadow);
}

.msr-entry__plate::before {
  content: '';
  position: absolute;
  top: 18px;
  right: 24px;
  width: 12px;
  height: 72%;
  background: var(--msr-persimmon);
  border-radius: 999px;
}

.msr-entry__plate::after {
  content: '';
  position: absolute;
  right: 46px;
  bottom: 24px;
  width: 88px;
  height: 14px;
  background: var(--msr-indigo);
  border-radius: 999px;
}

.msr-entry h1,
.msr-flight h2,
.msr-measures h2,
.msr-feature h2,
.msr-condition h2,
.msr-archive h2,
.msr-article h1 {
  margin: 0;
  color: var(--msr-sesame);
  font-family: var(--msr-font);
  font-weight: 900;
  letter-spacing: -0.055em;
}

.msr-entry h1 {
  max-width: 780px;
  font-size: clamp(3.2rem, 8vw, 7.6rem);
  line-height: 0.86;
}

.msr-dek {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 34rem;
  color: #374044;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 650;
}

.msr-topic-counter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.msr-topic-counter a,
.msr-topic-counter span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 14px;
  color: var(--msr-ink);
  text-decoration: none;
  background: var(--msr-rice);
  border: 1px solid var(--msr-steel-2);
  border-radius: 999px;
}

.msr-flight {
  display: grid;
  grid-template-columns: 0.95fr 1.7fr;
  gap: 28px;
  align-items: center;
  margin-top: 18px;
  padding: 34px;
  background: #e9eeee;
  border: 1px solid var(--msr-steel-2);
  border-radius: 26px;
}

.msr-flight__fan {
  min-height: 310px;
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  padding-bottom: 26px;
}

.msr-flight__fan span {
  position: absolute;
  bottom: 26px;
  width: 42px;
  height: 238px;
  border: 1px solid var(--msr-steel-2);
  border-radius: 24px 24px 10px 10px;
  transform-origin: center 95%;
  box-shadow: 0 12px 24px var(--msr-shadow);
}

.msr-flight__fan span:nth-child(1) { background: #f9fbf9; transform: rotate(-34deg) translateX(-18px); }
.msr-flight__fan span:nth-child(2) { background: #dfe9e6; transform: rotate(-22deg) translateX(-10px); }
.msr-flight__fan span:nth-child(3) { background: #f5f7f4; transform: rotate(-10deg); }
.msr-flight__fan span:nth-child(4) { background: var(--msr-indigo); transform: rotate(0deg); }
.msr-flight__fan span:nth-child(5) { background: #f4f7f3; transform: rotate(10deg); }
.msr-flight__fan span:nth-child(6) { background: var(--msr-shiso); transform: rotate(22deg) translateX(10px); }
.msr-flight__fan span:nth-child(7) { background: var(--msr-persimmon); transform: rotate(34deg) translateX(18px); }

.msr-flight__copy h2,
.msr-measures h2,
.msr-feature h2,
.msr-condition h2,
.msr-archive h2 {
  font-size: clamp(2rem, 4vw, 4.35rem);
  line-height: 0.95;
}

.msr-flight__copy p:not(.msr-small-label),
.msr-feature p:not(.msr-small-label),
.msr-condition p {
  max-width: 56rem;
  color: #3b4448;
  font-size: 1.05rem;
}

.msr-measures {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: 26px;
  margin-top: 30px;
  padding: 32px 0;
}

.msr-measure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.msr-measure-grid article {
  min-height: 190px;
  padding: 20px;
  background: var(--msr-porcelain);
  border: 1px solid var(--msr-steel);
  border-radius: var(--msr-radius);
}

.msr-measure-grid span {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--msr-porcelain);
  font-size: 0.78rem;
  font-weight: 900;
  background: var(--msr-sesame);
  border-radius: 50%;
}

.msr-measure-grid h3,
.msr-card h3 {
  margin: 16px 0 8px;
  color: var(--msr-sesame);
  font-size: 1.12rem;
  letter-spacing: -0.025em;
}

.msr-measure-grid p,
.msr-card p {
  margin: 0;
  color: #4d575c;
}

.msr-feature {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 28px;
  align-items: center;
  margin: 26px 0;
  padding: 28px;
  color: var(--msr-porcelain);
  background: var(--msr-sesame);
  border-radius: 28px;
}

.msr-feature h2,
.msr-feature p,
.msr-feature .msr-small-label { color: var(--msr-porcelain); }
.msr-feature p:not(.msr-small-label) { color: #dce4e4; }

.msr-feature__mark {
  display: flex;
  gap: 12px;
  align-items: end;
  justify-content: center;
  min-height: 220px;
}

.msr-feature__mark span {
  display: block;
  width: 34px;
  border-radius: 999px 999px 12px 12px;
}

.msr-feature__mark span:nth-child(1) { height: 130px; background: var(--msr-indigo); }
.msr-feature__mark span:nth-child(2) { height: 190px; background: var(--msr-persimmon); }
.msr-feature__mark span:nth-child(3) { height: 95px; background: var(--msr-shiso); }

.msr-condition {
  margin: 28px 0;
  padding: 30px;
  background: var(--msr-porcelain);
  border: 1px solid var(--msr-steel);
  border-radius: 24px;
}

.msr-condition__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.msr-condition__row p {
  min-height: 150px;
  margin: 0;
  padding: 16px;
  background: var(--msr-rice);
  border-top: 6px solid var(--msr-indigo);
  border-radius: 12px;
}

.msr-condition__row p:nth-child(2) { border-top-color: var(--msr-shiso); }
.msr-condition__row p:nth-child(3) { border-top-color: var(--msr-persimmon); }
.msr-condition__row p:nth-child(4) { border-top-color: var(--msr-sesame); }

.msr-archive {
  padding: 34px 0 70px;
}

.msr-archive__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.msr-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.msr-card {
  min-height: 100%;
}

.msr-card__link {
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: 18px;
  text-decoration: none;
  background: var(--msr-porcelain);
  border: 1px solid var(--msr-steel);
  border-radius: 20px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.msr-card__link:hover {
  transform: translateY(-3px);
  border-color: var(--msr-indigo);
  box-shadow: 0 18px 36px var(--msr-shadow);
}

.msr-card__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--msr-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.msr-card__pours {
  display: flex;
  gap: 7px;
  align-items: end;
  height: 86px;
  margin: 20px 0 4px;
  padding-left: 3px;
  border-bottom: 1px solid var(--msr-steel);
}

.msr-card__pours span {
  width: 18px;
  border-radius: 999px 999px 4px 4px;
  background: var(--msr-steel-2);
}

.msr-card__pours span:nth-child(1) { height: 34px; background: var(--msr-indigo); }
.msr-card__pours span:nth-child(2) { height: 58px; background: var(--msr-rice); border: 1px solid var(--msr-steel-2); }
.msr-card__pours span:nth-child(3) { height: 76px; background: var(--msr-persimmon); }
.msr-card__pours span:nth-child(4) { height: 46px; background: var(--msr-shiso); }
.msr-card__pours span:nth-child(5) { height: 65px; background: var(--msr-sesame); }

.msr-card h3 {
  font-size: 1.36rem;
  line-height: 1.08;
}

.msr-card__footer {
  margin-top: auto;
  padding-top: 18px;
  color: var(--msr-indigo);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.msr-article {
  padding: 26px 0 80px;
}

.msr-article__header {
  padding: 24px 28px 18px;
  background: var(--msr-porcelain);
  border: 1px solid var(--msr-steel);
  border-radius: 26px 26px 12px 12px;
}

.msr-article__nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 36px;
  color: var(--msr-muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.msr-article__nav a { text-decoration-thickness: 2px; text-underline-offset: 4px; }

.msr-article h1 {
  max-width: 980px;
  margin-top: 10px;
  font-size: clamp(2.8rem, 7vw, 6.6rem);
  line-height: 0.9;
}

.msr-article__meta {
  margin-top: 18px;
  color: var(--msr-muted);
  font-weight: 700;
}

.msr-serving-strip {
  display: flex;
  gap: 10px;
  align-items: end;
  height: 54px;
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--msr-steel);
}

.msr-serving-strip span {
  width: 42px;
  border-radius: 999px 999px 8px 8px;
}

.msr-serving-strip span:nth-child(1) { height: 18px; background: var(--msr-indigo); }
.msr-serving-strip span:nth-child(2) { height: 34px; background: var(--msr-steel-2); }
.msr-serving-strip span:nth-child(3) { height: 26px; background: var(--msr-shiso); }
.msr-serving-strip span:nth-child(4) { height: 42px; background: var(--msr-persimmon); }
.msr-serving-strip span:nth-child(5) { height: 22px; background: var(--msr-sesame); }
.msr-serving-strip span:nth-child(6) { height: 38px; background: var(--msr-rice); border: 1px solid var(--msr-steel-2); }

.msr-article__frame {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 230px;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.msr-article__left,
.msr-article__right,
.msr-article__body {
  background: var(--msr-porcelain);
  border: 1px solid var(--msr-steel);
  border-radius: 18px;
}

.msr-article__left,
.msr-article__right {
  position: sticky;
  top: 18px;
  padding: 16px;
}

.msr-article__left ol {
  margin: 16px 0 0;
  padding-left: 20px;
}

.msr-article__left li {
  margin: 0 0 12px;
  color: #3f4a4e;
  font-weight: 750;
}

.msr-article__right dl {
  margin: 16px 0 0;
}

.msr-article__right dt {
  margin-top: 14px;
  color: var(--msr-sesame);
  font-weight: 900;
}

.msr-article__right dd {
  margin: 2px 0 0;
  color: #4e585d;
}

.msr-article__body {
  padding: clamp(24px, 4vw, 54px);
  font-size: 1.06rem;
}

.msr-article__body > *:first-child { margin-top: 0; }
.msr-article__body > *:last-child { margin-bottom: 0; }

.msr-article__body h2,
.msr-article__body h3 {
  color: var(--msr-sesame);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.msr-article__body h2 {
  margin-top: 2.2em;
  font-size: clamp(1.9rem, 3vw, 3rem);
}

.msr-article__body h3 {
  margin-top: 1.8em;
  font-size: 1.45rem;
}

.msr-article__body p,
.msr-article__body li {
  color: #30393d;
}

.msr-article__body blockquote {
  margin: 2rem 0;
  padding: 18px 22px;
  color: var(--msr-sesame);
  font-weight: 800;
  background: var(--msr-rice);
  border-left: 8px solid var(--msr-persimmon);
  border-radius: 12px;
}

@media (max-width: 920px) {
  .msr-entry__plate,
  .msr-flight,
  .msr-measures,
  .msr-feature,
  .msr-article__frame {
    grid-template-columns: 1fr;
  }

  .msr-entry__plate { padding: 30px; }
  .msr-entry__plate::before,
  .msr-entry__plate::after { display: none; }
  .msr-condition__row,
  .msr-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msr-article__left,
  .msr-article__right { position: static; }
}

@media (max-width: 640px) {
  .msr-home,
  .msr-article { width: min(100% - 20px, 1180px); }
  .msr-entry__topline,
  .msr-archive__head,
  .msr-article__nav { align-items: flex-start; flex-direction: column; }
  .msr-measure-grid,
  .msr-condition__row,
  .msr-card-grid { grid-template-columns: 1fr; }
  .msr-flight__fan { min-height: 230px; transform: scale(0.84); }
  .msr-feature { padding: 22px; }
  .msr-feature__mark { min-height: 130px; justify-content: flex-start; }
}