:root {
  --ink:#142019;
  --paper:#efe9db;
  --paper-2:#e4dccb;
  --green:#123c2c;
  --green-2:#1f684d;
  --gold:#c49a47;
  --red:#c65240;
  --line:rgba(20,32,25,.26);
  --muted:#637168;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 88% 4%,rgba(196,154,71,.18),transparent 28rem),
    linear-gradient(145deg,#f4efe4,var(--paper));
  font-family:"Songti SC","STSong",serif;
}
a { color:inherit; }
.recommend-grain {
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.35;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
.recommend-header,.recommend-footer,main {
  width:min(1320px,calc(100% - 48px));
  margin-inline:auto;
}
.recommend-header {
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid var(--line);
}
.recommend-brand {
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
}
.recommend-brand>span {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  color:#f7edda;
  background:var(--green);
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(18,60,44,.08);
  font:900 23px "STKaiti","KaiTi",serif;
  transform:rotate(-4deg);
}
.recommend-brand strong { font-size:18px; letter-spacing:.05em; }
.recommend-brand small {
  display:block;
  margin-top:3px;
  color:#728078;
  font:800 7px ui-monospace,monospace;
  letter-spacing:.24em;
}
.recommend-header nav { display:flex; gap:20px; }
.recommend-header nav a,.recommend-footer a {
  color:#536159;
  font:700 10px ui-sans-serif,system-ui,sans-serif;
  text-decoration:none;
}
.recommend-header nav a:hover,.recommend-footer a:hover { color:var(--red); }
.recommend-hero {
  position:relative;
  min-height:590px;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(310px,.55fr);
  align-items:center;
  gap:8%;
  padding:80px 5%;
  border-right:1px solid var(--line);
  border-left:1px solid var(--line);
  overflow:hidden;
}
.recommend-hero::before {
  content:"精选";
  position:absolute;
  right:-.05em;
  bottom:-.2em;
  color:rgba(18,60,44,.035);
  font:900 280px/1 "STKaiti","KaiTi",serif;
  pointer-events:none;
}
.hero-index {
  margin:0 0 20px;
  color:var(--red);
  font:900 9px ui-monospace,monospace;
  letter-spacing:.22em;
}
.hero-copy h1 {
  max-width:820px;
  margin:0;
  font:900 clamp(48px,7.2vw,100px)/.95 "STKaiti","KaiTi",serif;
  letter-spacing:-.055em;
}
.hero-copy h1 em { color:var(--green-2); font-style:normal; }
.hero-copy>p:not(.hero-index) {
  max-width:650px;
  margin:30px 0 0;
  color:var(--muted);
  font:500 13px/2 ui-sans-serif,system-ui,sans-serif;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.hero-actions a {
  padding:13px 19px;
  color:#f5efdf;
  background:var(--green);
  border:1px solid var(--green);
  font:750 10px ui-sans-serif,system-ui,sans-serif;
  text-decoration:none;
}
.hero-actions a+ a { color:var(--green); background:transparent; }
.hero-ledger {
  position:relative;
  z-index:1;
  padding:32px;
  color:#f2ecdc;
  background:linear-gradient(145deg,#173e2f,#0e2b20);
  box-shadow:13px 14px 0 var(--gold),0 30px 70px rgba(18,32,24,.25);
  transform:rotate(1.2deg);
}
.hero-ledger>p { margin:0 0 25px; color:#ddbf75; font:800 8px ui-monospace,monospace; letter-spacing:.2em; }
.hero-ledger ol { margin:0; padding:0; list-style:none; }
.hero-ledger li { display:flex; gap:15px; padding:17px 0; border-top:1px solid rgba(255,255,255,.15); font-size:12px; }
.hero-ledger li span { color:#ddbf75; font:800 9px ui-monospace,monospace; }
.hero-ledger small { display:block; margin-top:24px; color:#9aada3; font:500 9px/1.8 ui-sans-serif,system-ui,sans-serif; }
.recommend-directory { padding:90px 0; border-top:1px solid var(--line); }
.directory-toolbar { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.directory-toolbar>div>p,.recommend-note>div>p {
  margin:0 0 8px;
  color:var(--red);
  font:850 8px ui-monospace,monospace;
  letter-spacing:.2em;
}
.directory-toolbar h2,.recommend-note h2 {
  margin:0;
  font:900 clamp(32px,5vw,58px)/1 "STKaiti","KaiTi",serif;
}
.directory-toolbar label {
  width:min(400px,100%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border-bottom:1px solid var(--ink);
}
.directory-toolbar label span { color:var(--red); }
.directory-toolbar input {
  width:100%;
  height:48px;
  padding:0;
  color:var(--ink);
  background:transparent;
  border:0;
  outline:0;
  font:600 12px ui-sans-serif,system-ui,sans-serif;
}
.recommend-filters { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 55px; }
.recommend-filters button {
  min-width:104px;
  min-height:40px;
  padding:9px 14px;
  color:#56645c;
  background:transparent;
  border:1px solid var(--line);
  font:750 10px ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;
}
.recommend-filters button:hover,.recommend-filters button.active { color:#f5eedf; background:var(--green); border-color:var(--green); }
.recommend-group { margin-top:70px; }
.recommend-group:first-child { margin-top:0; }
.recommend-group>header {
  display:grid;
  grid-template-columns:95px 230px minmax(0,1fr);
  align-items:end;
  gap:20px;
  margin-bottom:22px;
  padding-bottom:15px;
  border-bottom:1px solid var(--ink);
}
.recommend-group>header span { color:var(--red); font:800 8px ui-monospace,monospace; letter-spacing:.16em; }
.recommend-group>header h2 { margin:0; font:900 25px "STKaiti","KaiTi",serif; }
.recommend-group>header p { max-width:660px; justify-self:end; margin:0; color:var(--muted); font:500 10px/1.75 ui-sans-serif,system-ui,sans-serif; text-align:right; }
.recommend-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.recommend-card {
  min-width:0;
  background:rgba(255,255,255,.3);
  border:1px solid rgba(20,32,25,.2);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.recommend-card:hover {
  z-index:2;
  border-color:var(--gold);
  box-shadow:0 20px 55px rgba(31,51,41,.13);
  transform:translateY(-4px);
}
.recommend-card a {
  position:relative;
  min-height:200px;
  display:grid;
  grid-template-columns:28px 102px minmax(0,1fr);
  gap:20px;
  padding:22px 25px 23px 20px;
  text-decoration:none;
}
.recommend-number {
  color:#8b978f;
  font:800 8px ui-monospace,monospace;
  writing-mode:vertical-rl;
  letter-spacing:.12em;
}
.recommend-mark {
  width:102px;
  height:138px;
  display:grid;
  place-items:center;
  align-self:center;
  color:#f2e9d7;
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),transparent 35%),
    var(--green);
  border:1px solid #2b5b47;
  box-shadow:6px 7px 0 var(--gold);
  font:900 28px "STKaiti","KaiTi",serif;
}
.recommend-card:nth-child(3n+2) .recommend-mark { background-color:#884034; border-color:#9c5548; box-shadow-color:var(--green); }
.recommend-card:nth-child(3n) .recommend-mark { background-color:#65512d; border-color:#806b3f; box-shadow-color:var(--red); }
.recommend-copy { align-self:center; min-width:0; }
.recommend-copy>p:first-child { margin:0 0 9px; color:var(--red); font:750 7px ui-monospace,monospace; letter-spacing:.11em; }
.recommend-copy h3 { margin:0; font:900 23px "STKaiti","KaiTi",serif; }
.recommend-copy>p:not(:first-child) { margin:10px 0 14px; color:var(--muted); font:500 10px/1.75 ui-sans-serif,system-ui,sans-serif; }
.recommend-tags { display:flex; flex-wrap:wrap; gap:5px; }
.recommend-tags span { padding:5px 7px; color:#506058; border:1px solid rgba(20,32,25,.18); font:700 7px ui-sans-serif,system-ui,sans-serif; }
.recommend-arrow { position:absolute; right:22px; bottom:17px; color:var(--green-2); font:800 8px ui-sans-serif,system-ui,sans-serif; }
.friend-pending {
  min-height:170px;
  display:grid;
  grid-template-columns:110px 240px minmax(0,1fr);
  align-items:center;
  gap:25px;
  padding:30px;
  color:#87928b;
  border:1px dashed rgba(20,32,25,.3);
  background:rgba(255,255,255,.16);
}
.friend-pending span { font:800 8px ui-monospace,monospace; letter-spacing:.15em; }
.friend-pending strong { color:#536159; font:900 20px "STKaiti","KaiTi",serif; }
.friend-pending p { margin:0; font:500 10px/1.8 ui-sans-serif,system-ui,sans-serif; }
.recommend-empty { padding:80px 20px; border:1px dashed var(--line); text-align:center; }
.recommend-empty strong { font-size:24px; }
.recommend-empty p { color:var(--muted); font:500 11px ui-sans-serif,system-ui,sans-serif; }
.recommend-note {
  display:grid;
  grid-template-columns:minmax(350px,.7fr) 1.3fr;
  gap:8%;
  padding:70px 6%;
  color:#ede8dc;
  background:linear-gradient(145deg,#143a2c,#0b261c);
  box-shadow:12px 14px 0 var(--gold);
}
.recommend-note>p { align-self:end; margin:0; color:#acbbb3; font:500 12px/2 ui-sans-serif,system-ui,sans-serif; }
.recommend-submit {
  min-height:280px;
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  align-items:center;
  gap:35px;
  padding:55px 5%;
  border-right:1px solid var(--line);
  border-left:1px solid var(--line);
}
.recommend-submit>span { color:var(--red); font:800 8px ui-monospace,monospace; letter-spacing:.16em; }
.recommend-submit h2 { margin:0; font:900 30px "STKaiti","KaiTi",serif; }
.recommend-submit p { max-width:650px; margin:10px 0 0; color:var(--muted); font:500 11px/1.8 ui-sans-serif,system-ui,sans-serif; }
.recommend-submit a { padding:13px 17px; color:#f5eedf; background:var(--red); font:750 10px ui-sans-serif,system-ui,sans-serif; text-decoration:none; }
.recommend-footer {
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#728078;
  border-top:1px solid var(--line);
  font:600 9px ui-sans-serif,system-ui,sans-serif;
}
@media (max-width:980px) {
  .recommend-hero { grid-template-columns:1fr; gap:60px; }
  .hero-ledger { width:min(540px,90%); }
  .recommend-grid { grid-template-columns:1fr; }
  .recommend-note { grid-template-columns:1fr; }
  .recommend-submit { grid-template-columns:1fr; gap:18px; }
}
@media (max-width:680px) {
  .recommend-header,.recommend-footer,main { width:min(100% - 20px,1320px); }
  .recommend-header { min-height:76px; }
  .recommend-header nav { gap:12px; }
  .recommend-header nav a:nth-child(2),.recommend-header nav a:nth-child(4) { display:none; }
  .recommend-hero { min-height:0; padding:60px 20px; }
  .hero-copy h1 { font-size:50px; }
  .hero-ledger { width:calc(100% - 10px); padding:24px; }
  .directory-toolbar { align-items:stretch; flex-direction:column; }
  .recommend-filters { flex-wrap:nowrap; overflow:auto; padding-bottom:5px; }
  .recommend-filters button { flex:none; }
  .recommend-group>header { grid-template-columns:1fr; gap:8px; }
  .recommend-group>header p { justify-self:start; text-align:left; }
  .recommend-card a { grid-template-columns:25px 76px minmax(0,1fr); gap:13px; padding:16px 15px 36px 12px; }
  .recommend-mark { width:76px; height:108px; font-size:22px; }
  .recommend-copy h3 { font-size:20px; }
  .friend-pending { grid-template-columns:1fr; gap:12px; }
  .recommend-note { padding:50px 24px; box-shadow:7px 8px 0 var(--gold); }
  .recommend-submit { padding:50px 22px; }
  .recommend-footer { align-items:flex-start; flex-direction:column; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .recommend-card { transition:none; }
}