/* Grew Up With It, static drafts for step 12, V2. Colors are the approved tokens. Paper page for reading, dark band
   for header and footer. All live type is the system stack; Bungee lives only inside the images. No animation. */
:root{--paper:#F6F0E4;--ink:#1B1230;--muted:#54486E;--link:#5A2BB8;--price:#B52A1A;--rule:#D9CFBC;
--band:#1B1230;--shade:#3A2A66;--cream:#FFF4DF;--sun:#FFD23F;--mint:#19C9B3;
--body:Helvetica,Arial,sans-serif;--head:"Arial Black",Helvetica,Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 var(--body)}
::selection{background:var(--sun);color:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
h1,h2,h3{font-family:var(--head);font-weight:900;line-height:1.25;margin:0}
p{margin:0 0 18px}

/* header */
.band{background:var(--band)}
.logo{display:block;max-width:874px;margin:0 auto}
.logo img,.logo svg{display:block;width:100%;height:auto}
.menu{background:var(--shade)}
.menu div{display:flex;flex-wrap:wrap;gap:0 26px;max-width:640px;margin:0 auto;padding:0 20px}
.menu a{display:flex;align-items:center;min-height:44px;color:var(--cream);font:700 17px/1 var(--body);text-decoration:none}
.menu a:hover,.menu a[aria-current]{color:var(--sun);text-decoration:underline;text-underline-offset:4px}

/* signup */
.signup{background:var(--band);color:var(--cream);padding:26px 20px 40px}
.signup>div{max-width:600px;margin:0 auto}
.signup h1{font-size:clamp(25px,6.4vw,34px);color:var(--cream);margin:0 0 12px}
.signup .sub{margin:0 0 22px}
.signup label{display:block;font-weight:700;margin:0 0 8px}
.signup input{display:block;width:100%;min-height:56px;padding:14px;border:3px solid var(--mint);border-radius:0;background:var(--cream);color:var(--ink);font:18px/1.3 var(--body);-webkit-appearance:none;appearance:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:15px 22px;margin:14px 0 0;border:0;border-radius:8px;background:var(--sun);color:var(--ink);font:900 19px/1.1 var(--head);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--cream)}
.btn.dark{background:var(--band);color:var(--cream)}
.btn.dark:hover{background:var(--shade)}
.leave{margin:12px 0 0;font-size:16px}
.note{margin:12px 0 0;color:var(--sun);font-weight:700}

/* reading column */
.col{max-width:640px;margin:0 auto;padding:0 20px 56px}
.strip{margin:40px -20px 22px;font-size:21px}
.strip img{width:100%}
.meta{font-size:16px;line-height:1.45;color:var(--muted);margin:30px 0 8px;font-weight:700}
.title{font-size:clamp(27px,6.6vw,36px);margin:30px 0 14px}
.meta+.title{margin-top:0}
.sub2{font-size:21px;margin:30px 0 8px}
.tag,.read{font-size:16px;line-height:1.45;color:var(--muted);margin:0}
.weekly{font-family:var(--head);font-weight:900;font-size:23px;line-height:1.25;margin:14px 0 6px}
.lead{font-size:21px;margin:30px 0 12px}
.strip+.lead{margin-top:0}
figure{margin:0 0 6px}
.credit{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--muted)}
.cap{margin:6px 0 16px;font-size:16px;line-height:1.45}
.fn{font-size:14px;line-height:0;font-weight:400;font-family:var(--body)}
.watch{font-weight:700;display:inline-block;padding:10px 0}
.nowrap{white-space:nowrap}
.signoff{font-family:var(--head);font-weight:900;font-size:23px;line-height:1.25;margin:24px 0 0}
.price{font-family:var(--head);font-weight:900;font-size:60px;line-height:1.1;color:var(--price);margin:0}
.price sup{font-size:30px;line-height:0}
.price .dot{font-size:1px;line-height:1px}
.things{font-family:var(--head);font-weight:900;font-size:21px;line-height:1.25;margin:2px 0 14px}
.sources{padding:0;margin:0;list-style:none;font-size:16px;line-height:1.45}
.sources li{display:grid;grid-template-columns:44px 1fr;margin:0 0 12px}
.sources b{font-weight:400;color:var(--muted)}
.cta{background:var(--band);color:var(--cream);padding:26px 20px 30px;margin:44px -20px 0}
.cta p{margin:0;font:900 21px/1.25 var(--head);color:var(--cream)}
.cta .leave{margin:12px 0 0;font:16px/1.55 var(--body)}

/* first issue list on home */
.levels{list-style:none;margin:0;padding:0}
.levels .strip{margin:22px -20px 10px}
.levels p{margin:0}

/* issues list */
.row{padding:0 0 18px}
.row .no{font:900 21px/1.25 var(--head);margin:0 0 2px}
.row .t{font:900 23px/1.25 var(--head)}
.row .d{font-size:16px;color:var(--muted);margin:6px 0 12px}

/* price page */
.reveal{margin:24px 0 0}
.reveal summary{display:inline-flex;align-items:center;min-height:56px;padding:15px 22px;border-radius:8px;background:var(--band);color:var(--cream);font:900 19px/1.1 var(--head);cursor:pointer;list-style:none}
.reveal summary::-webkit-details-marker{display:none}
.reveal summary:hover{background:var(--shade)}
.reveal[open] summary{margin-bottom:22px}
.prices{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:18px}
.prices caption{text-align:left;font:900 21px/1.25 var(--head);padding:0 0 8px}
.prices th{text-align:left;font-size:15px;color:var(--muted);padding:6px 0;border-bottom:2px solid var(--ink)}
.prices td{padding:10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prices th:last-child,.prices td:last-child{text-align:right;white-space:nowrap;font-weight:700}

/* footer */
.foot{background:var(--band);color:var(--cream);padding:26px 20px 32px;font-size:15px;line-height:1.45}
.foot>div{max-width:600px;margin:0 auto}
.foot p{margin:0 0 10px}
.foot a{color:var(--sun)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 22px;margin:6px 0 0}
.foot nav a{display:inline-flex;align-items:center;min-height:44px}

/* 404 */
.taped{display:block;margin:0 -20px 24px}
.taped svg{display:block;width:100%;height:auto}

@media (min-width:700px){
.strip,.levels .strip,.taped{margin-left:0;margin-right:0}
.logo{--left:max(0px,calc(50% - 330px));margin-left:var(--left);max-width:min(874px,calc(100% - var(--left)))}
.cta{margin-left:0;margin-right:0}
.title:first-child{margin-top:38px}
}


/* Step 12: what the live site adds to the approved sheet. Same tokens, no new colors. */
.sample{color:var(--price)}
.w{max-width:600px;margin:0 auto;padding:22px 20px 34px}
.labw{background:var(--band)}
.lab{display:block;width:100%;max-width:760px;margin:0 auto;height:auto}
.pick{display:grid;gap:12px;margin:0 0 20px}
.pick .btn{display:flex;justify-content:flex-start;margin:0}
.small{font-size:16px}

/* the price page */
.jump{display:flex;flex-wrap:wrap;gap:0 22px;margin:26px 0 0}
.jump a{display:inline-flex;align-items:center;min-height:44px;font:900 19px/1 var(--head)}
.year{font-size:21px;margin:26px 0 4px;scroll-margin-top:12px}
.strip+.year{margin-top:0}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:grid;grid-template-columns:72px 1fr;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--rule);scroll-margin-top:12px}
.plist .thumb{grid-row:1/3;display:block;align-self:start}
.plist .thumb img{width:72px;height:72px;object-fit:contain;background:#fff;border:1px solid var(--rule)}
.plist .n{display:block;font-weight:700;line-height:1.3}
.plist .src{display:block;font-size:15px;line-height:1.35;margin-top:3px;color:var(--muted)}
.plist .cost{grid-column:2;font-size:16px}
.plist .cost b{font:900 19px/1.2 var(--head);color:var(--price)}
.plist .cost span{color:var(--muted)}
.plist li.noimg{grid-template-columns:1fr}
.plist li.noimg .cost{grid-column:1}
@media (min-width:600px){
.plist li{grid-template-columns:96px 1fr 120px;gap:0 14px}
.plist .thumb{grid-row:auto}
.plist .thumb img{width:96px;height:96px}
.plist .cost{grid-column:3;text-align:right}
.plist .cost b,.plist .cost span{display:block}
.plist li.noimg{grid-template-columns:96px 1fr 120px}
.plist li.noimg .what{grid-column:2}
.plist li.noimg .cost{grid-column:3}
}

/* the reader form: no pictures here, and it works with no JavaScript */
.form{margin:22px 0 0}
.form label{display:block;font-weight:700;margin:20px 0 6px}
.form input[type=text],.form input[type=email],.form textarea{display:block;width:100%;min-height:56px;padding:14px;border:2px solid var(--ink);border-radius:0;background:#FFF9EC;color:var(--ink);font:18px/1.4 var(--body);-webkit-appearance:none;appearance:none}
.form textarea{min-height:170px;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.form .hint{margin:0 0 6px;font-size:16px;line-height:1.4;color:var(--muted)}
.form .btn+.hint{margin:14px 0 0}
.form .tick{display:grid;grid-template-columns:28px 1fr;gap:0 10px;align-items:start;font-weight:400;min-height:44px;margin:18px 0 0;cursor:pointer}
.form .tick small{font-size:16px;color:var(--muted)}
.form .tick input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the forward item (portfolio rule, 11-09): the one ask beside it, its corrections, and its own page */
.forward{font-weight:700;font-size:18px;line-height:1.5}
.correction{font-size:16px;line-height:1.45;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.correction .when{color:var(--muted)}
.whole{margin:22px 0 0;font-weight:700}
.whole a{display:inline-flex;align-items:center;min-height:44px}
.meta+.strip{margin-top:0}

/* short pages: the footer stays at the bottom of the screen */
body{min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1;width:100%}

/* mint on paper is under 3:1, so focus rings on paper are ink */
main.col a:focus-visible,main .w a:focus-visible,.reveal summary:focus-visible,.form :focus-visible{outline-color:var(--ink)}
.cta a:focus-visible,.foot a:focus-visible{outline-color:var(--mint)}