body:has(.pet-hero) { --pet-paper:#ede6d7; --pet-ink:#231e1a; --pet-orange:#e56537; background:var(--pet-paper); color:var(--pet-ink); } body:has(.pet-hero) .site-header { background:var(--pet-paper); color:var(--pet-ink); }
.pet-hero { position:relative; min-height:78vh; padding:clamp(7rem,14vw,13rem) var(--pad) clamp(4rem,8vw,7rem); overflow:hidden; background:var(--pet-orange); color:#fff9ed; } .pet-hero::after { content:""; position:absolute; width:55vw; height:55vw; right:-14vw; top:-20vw; border:1px solid rgba(255,249,237,.45); border-radius:50%; box-shadow:0 0 0 5vw rgba(255,249,237,.08),0 0 0 11vw rgba(255,249,237,.06); } .pet-hero-inner { position:relative; z-index:1; max-width:68rem; } .pet-hero h1 { margin:0 0 2rem; font-size:clamp(5rem,14vw,14rem); line-height:.76; letter-spacing:-.09em; } .pet-hero h1 em,.pet-intro h2 em,.honesty-cards h2 em,.pet-logic h2 em,.marker-section h2 em,.pet-close h2 em { font-family:var(--serif); font-weight:400; } .pet-hero h1 em { color:var(--pet-ink); } .pet-dek { max-width:35rem; font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.18; } .pet-hero .round-link { margin-top:4rem; border-color:rgba(255,249,237,.7); color:#fff9ed; } .pet-stamp { position:absolute; right:15%; bottom:12%; z-index:1; width:8rem; aspect-ratio:1; display:grid; place-content:center; border:2px solid var(--pet-ink); border-radius:50%; color:var(--pet-ink); font:500 1.2rem/1 var(--mono); text-align:center; transform:rotate(13deg); }
.pet-intro,.pet-logic { display:grid; grid-template-columns:minmax(14rem,.8fr) 1.2fr; gap:8vw; } .pet-intro { background:#f8f4ea; } .pet-intro h2,.pet-logic h2 { margin:0; font-size:clamp(3.6rem,7vw,7rem); line-height:.84; letter-spacing:-.075em; } .pet-prose { max-width:42rem; font-size:clamp(1.08rem,1.7vw,1.35rem); } .honesty-cards,.marker-section { background:#d8e6e0; } .section-heading { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:end; margin-bottom:4rem; } .section-heading h2 { margin:0; font-size:clamp(3.5rem,7vw,7rem); line-height:.84; letter-spacing:-.075em; } .section-heading>p:last-child { max-width:28rem; margin:0; font-size:1.1rem; } .phrase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .phrase-card { min-height:25rem; padding:1.5rem; border:1px solid var(--pet-ink); border-radius:var(--radius); background:#f8f4ea; } .phrase-card-acid { background:var(--acid); } .phrase-card-rust { background:#d77a59; color:#fff9ed; } .phrase-label,.section-index { font:500 .72rem var(--mono); letter-spacing:.06em; text-transform:uppercase; } .phrase-card h3 { margin:4rem 0 1.5rem; font-size:clamp(1.8rem,3vw,3.2rem); line-height:.92; letter-spacing:-.06em; } .phrase-note { padding-top:1rem; border-top:1px solid currentColor; font-size:.92rem; }
.pet-logic { background:#f8f4ea; align-items:center; } .logic-quote { padding:clamp(2rem,5vw,5rem); background:var(--pet-ink); color:var(--acid); transform:rotate(-2deg); } .logic-quote p { margin:0; font-size:clamp(2.2rem,5vw,5.5rem); line-height:.88; letter-spacing:-.08em; } .quote-mark { display:block; font:5rem/0.5 var(--serif); } .marker-list { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--pet-ink); } .marker-list div { padding:1.5rem 1rem 1.5rem 0; border-bottom:1px solid var(--pet-ink); } .marker-list div:nth-child(odd) { border-right:1px solid var(--pet-ink); padding-right:2rem; } .marker-list div:nth-child(even) { padding-left:2rem; } .marker-list strong { font-size:1.5rem; } .marker-list p { max-width:30rem; } .pet-close { display:grid; grid-template-columns:minmax(14rem,.7fr) 1.3fr; gap:8vw; background:var(--pet-ink); color:#fff9ed; } .pet-close h2 { margin:0; font-size:clamp(4rem,8vw,8rem); line-height:.82; letter-spacing:-.08em; } .pet-close h2 em { color:var(--acid); } .pet-close p:not(.section-index) { max-width:40rem; font-size:1.2rem; } .pet-close .button-link { margin-top:1rem; } .sources { background:#f8f4ea; } .sources p:last-child { max-width:58rem; } .sources a { text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:.2em; }
@media (max-width:760px) { .pet-intro,.pet-logic,.pet-close,.section-heading { grid-template-columns:1fr; gap:2rem; } .phrase-grid { grid-template-columns:1fr; } .phrase-card { min-height:auto; } .phrase-card h3 { margin-top:2rem; } .marker-list { grid-template-columns:1fr; } .marker-list div:nth-child(odd) { border-right:0; padding-right:0; } .marker-list div:nth-child(even) { padding-left:0; } .pet-stamp { right:8%; bottom:8%; width:6rem; font-size:.9rem; } .pet-hero h1 { font-size:clamp(4rem,19vw,8rem); } }
.contribute { display:grid; grid-template-columns:minmax(14rem,.8fr) 1.2fr; gap:8vw; background:#e9d9bd; } .contribute h2 { margin:0 0 1.5rem; font-size:clamp(3.6rem,7vw,7rem); line-height:.84; letter-spacing:-.075em; } .contribute h2 em { font-family:var(--serif); font-weight:400; color:var(--pet-orange); } .contribute > div > p:not(.section-index) { max-width:27rem; font-size:1.08rem; } .phrase-form { display:grid; gap:.55rem; max-width:40rem; } .phrase-form label { font:500 .75rem var(--mono); letter-spacing:.05em; text-transform:uppercase; } .phrase-form .optional { opacity:.65; text-transform:none; letter-spacing:0; } .phrase-form input:not([type="checkbox"]),.phrase-form textarea { width:100%; border:1px solid var(--pet-ink); border-radius:.3rem; padding:.85rem 1rem; background:#fffaf0; color:var(--pet-ink); font:1rem/1.4 var(--sans); } .phrase-form textarea { resize:vertical; } .phrase-form input:focus,.phrase-form textarea:focus { outline:3px solid var(--pet-orange); outline-offset:2px; } .consent { display:flex; gap:.7rem; align-items:flex-start; margin:.8rem 0; font:.8rem/1.4 var(--sans) !important; letter-spacing:0 !important; text-transform:none !important; } .consent input { flex:0 0 auto; margin-top:.2rem; accent-color:var(--pet-orange); } .phrase-form .button-link { justify-self:start; border:1px solid var(--pet-ink); cursor:pointer; } .form-note { margin:0; font-size:.82rem; opacity:.72; }
@media (max-width:760px) { .contribute { grid-template-columns:1fr; gap:2rem; } }
.trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.community { background:#f8f4ea; } .community-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } .community-empty { padding:1.2rem; border:1px dashed var(--pet-ink); } .community-card { padding:1.5rem; border:1px solid var(--pet-ink); border-radius:var(--radius); background:#e9d9bd; } .community-card h3 { margin:0 0 1rem; font-size:clamp(1.7rem,3vw,3rem); line-height:.95; letter-spacing:-.06em; } .community-card .research-note { padding-top:1rem; border-top:1px solid var(--pet-ink); font-size:.92rem; } .community-card small { display:block; margin-top:1.2rem; font:500 .68rem var(--mono); text-transform:uppercase; } .thanks { min-height:75vh; background:var(--pet-orange); color:#fff9ed; } .thanks h1 { margin:0 0 2rem; font-size:clamp(4rem,10vw,10rem); line-height:.8; letter-spacing:-.08em; } .thanks h1 em { font-family:var(--serif); font-weight:400; color:var(--pet-ink); } .thanks > p:not(.section-index) { max-width:34rem; font-size:1.25rem; }
@media (max-width:760px) { .community-list { grid-template-columns:1fr; } }