/* Made in Portland — credits pages (s/<slug>.html). Loaded after experience.css,
   whose tokens, header, footer, buttons and card art it reuses. */

.profile{padding:150px 5vw 120px;background:radial-gradient(90% 60% at 85% 0%,#046A3818,transparent 60%),#090d13}
.profile-inner{max-width:1180px;margin:0 auto}
.profile section{padding:0}   /* spacing here comes from the margins below, not the homepage's section padding */
.profile .credits,.profile .your-badge{padding-top:50px}

.example-note{margin:0 0 48px;padding:14px 18px;border:1px dashed #ffffff30;border-radius:8px;color:#b8c8bc;font-size:14px;line-height:1.6}
.example-note b{color:var(--ink);font-weight:600}

/* Hero: the site's card beside its name and story */
.profile-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,80px);align-items:center}
.profile-card{height:clamp(280px,32vw,380px);min-height:0;cursor:default}
.profile-card.has-shot{height:auto;aspect-ratio:16/10}   /* a site's picture shows whole, not cropped to the taller card */
.profile-card:hover{transform:none;box-shadow:none}
.profile-card:hover:before{opacity:0}
.tribute-art{position:relative;display:grid;place-items:end center;height:clamp(280px,32vw,380px);padding:30px;border:1px solid #ffffff25;border-radius:6px;background:radial-gradient(70% 60% at 50% 100%,#da997b2e,transparent 70%),#0d1512}
.tribute-art svg{width:auto;height:88%;filter:drop-shadow(0 0 24px #da997b55)}
.tribute-art span{position:absolute;top:16px;left:18px;font:10px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:#d9b6a4}
.profile-intro .eyebrow{color:#8fb39d}
.profile-intro h1{margin:16px 0 22px;font-size:clamp(44px,6.4vw,96px);font-weight:500;letter-spacing:-.065em;line-height:.98;text-wrap:balance}
.lede{max-width:34em;margin-bottom:0;color:#c3d2cb;font-size:clamp(17px,1.5vw,20px)}
.profile-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:32px}
.btn.is-disabled{pointer-events:none;opacity:.5}
.roses-count{font:12px var(--mono);color:#b8c8bc}
.sources{margin:22px 0 0;color:#7f9a8b;font-size:13px}
.profile .weird-mark{margin:18px 0 0;font-size:15px}
.sources a{border-bottom:1px solid #ffffff40}
.sources a:hover{color:var(--flag-blue);border-color:var(--flag-blue)}

/* Credits: the reason the badge exists */
.credits{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(30px,5vw,70px);margin-top:clamp(80px,10vw,130px);border-top:1px solid var(--line)}
.credits h2,.your-badge h2{font-size:clamp(36px,4vw,60px)}
.credit-list{margin:0;padding:0;list-style:none}
.credit-list li{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid #ffffff14}
.credit-list li:first-child{padding-top:6px}
.credit-list .role{font:11px var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:#8c9f9d}
.credit-list li.solo{grid-template-columns:minmax(0,1fr)}
.credit-list li.solo .who{font-size:clamp(28px,3vw,40px)}
.credits .built-with{margin:18px 0 0;color:#7f9a8b;font:12px var(--mono);letter-spacing:.5px}
.credit-list .who{display:grid;gap:6px;min-width:0;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em}
.credit-list .who>a{width:fit-content;border-bottom:1px solid #ffffff40}
.credit-list .who>a:hover{color:var(--flag-blue);border-color:var(--flag-blue)}
.credit-list .also{color:#7f9a8b;font-size:13px;letter-spacing:0}
.credit-list .also a{color:#c3d2cb;border-bottom:1px solid #ffffff30}
.credit-list .also a:hover{color:var(--flag-blue);border-color:var(--flag-blue)}

/* Walk the forest: a webring between members */
.walk{margin-top:clamp(70px,9vw,110px)}
.walk>.eyebrow{margin-bottom:20px;color:#8fb39d}
.walk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.walk-card{display:grid;gap:8px;min-width:0;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:#0c1411;transition:transform var(--hover) var(--ease),border-color var(--hover) var(--ease),box-shadow var(--hover) var(--ease)}
.walk-card:hover{transform:translateY(-3px);border-color:var(--flag-blue);box-shadow:0 0 30px #418FDE20}
.walk-card .eyebrow{color:#8c9f9d}
.walk-card strong{font-size:22px;font-weight:500;letter-spacing:-.03em;line-height:1.15}
.walk-card .walk-meta{color:#7f9a8b;font:11px var(--mono)}
.walk-card.next{text-align:right}

/* The member's own badge snippet */
.your-badge{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,70px);margin-top:clamp(80px,10vw,130px);border-top:1px solid var(--line)}
.your-badge p{color:#c3d2cb}
.your-badge .code{margin-top:14px}

@media(max-width:800px){
  .profile{padding-top:120px}
  .profile-hero,.credits,.your-badge{grid-template-columns:minmax(0,1fr)}
  .credit-list li{grid-template-columns:minmax(0,1fr);gap:6px}
  .walk-card.next{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .walk-card{transition:none}
  .walk-card:hover{transform:none}
}

/* A maker's profile (/m/<handle>) */
.maker-hero{max-width:860px}
.maker-hero .eyebrow{color:#8fb39d}
.maker-hero h1{margin:16px 0 22px;font-size:clamp(44px,6.4vw,96px);font-weight:500;letter-spacing:-.065em;line-height:.98;text-wrap:balance}
.maker-link{margin:18px 0 0;color:#c3d2cb}
.maker-link a{border-bottom:1px solid #ffffff40}
.maker-link a:hover{color:var(--flag-blue);border-color:var(--flag-blue)}
.profile .maker-sites{margin-top:clamp(60px,8vw,100px);padding-top:40px;border-top:1px solid var(--line)}
.maker-sites>.eyebrow{margin-bottom:24px;color:#8fb39d}
.maker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:30px 26px}
.maker-site{display:grid;gap:8px;min-width:0}
.maker-site .preview{height:220px;min-height:0}
.maker-site:hover .preview{transform:translateY(-4px)}
.maker-site-name{margin-top:8px;font-size:19px;letter-spacing:-.02em}
.maker-site-meta{color:#7f9a8b;font:11px var(--mono)}