@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Montserrat:wght@300;400;500;600&display=swap");

:root{
  --paper:#F7F7F5;
  --paper-2:#EEEEEB;
  --ink:#0C0C0C;
  --grey:#4A4A4A;
  --rule:#D8D8D4;
  --accent:#FD135B;
  --accent-ink:#C60C46;
  --display:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-weight:300;line-height:1.7}
a{color:inherit}
.page{width:min(1040px,88vw);margin:0 auto;padding:clamp(36px,7vw,84px) 0}
.top{position:sticky;top:0;z-index:10;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(46px,8vw,96px);padding:12px 0;background:rgba(247,247,245,.96);box-shadow:0 8px 20px rgba(12,12,12,.05);backdrop-filter:blur(8px)}
.mark{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:13px;letter-spacing:.36em;text-transform:uppercase;color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.back{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-height:42px;padding:9px 16px;border:1px solid rgba(253,19,91,.72);
  background:linear-gradient(135deg,rgba(253,19,91,.22),rgba(253,19,91,.07));box-shadow:0 8px 22px rgba(253,19,91,.12);
  font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
  text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.back:hover{background:linear-gradient(135deg,var(--accent),rgba(198,12,70,.88));border-color:var(--accent);color:var(--paper);box-shadow:0 10px 26px rgba(253,19,91,.24)}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(42px,8vw,112px);line-height:.92;font-weight:400;letter-spacing:-.045em;margin:0 0 clamp(28px,5vw,58px);text-transform:uppercase}
h1 span{color:var(--accent)}
h2{font-size:clamp(22px,3vw,34px);line-height:1.15;font-weight:400;margin:46px 0 16px}
p,li{font-size:clamp(16px,1.6vw,20px);color:var(--grey)}
p{margin:0 0 16px}
ul{padding-left:1.1em;margin:0 0 18px}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin:24px 0 38px}
.meta div{padding:15px 16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:rgba(255,255,255,.32)}
.meta b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:4px}
.meta span{font-size:17px;color:var(--ink)}
.notice{border-left:4px solid var(--accent);padding:16px 18px;background:rgba(253,19,91,.06);margin:30px 0}
.notice p{margin:0;color:var(--ink)}
.doc-date{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:48px}

@media (max-width:700px){
  .top{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;margin-bottom:42px}
  .mark{font-size:14px;letter-spacing:.28em}
  .back{min-width:82px;min-height:32px;font-size:11px;padding:5px 10px;border-width:1.5px;
    background:linear-gradient(135deg,rgba(253,19,91,.28),rgba(253,19,91,.1));
    box-shadow:0 10px 26px rgba(253,19,91,.18)}
  .meta{grid-template-columns:1fr}
  h1{letter-spacing:-.03em}
}