/* Rice Purity Test — classic layout matched to the supplied ricepuritytest.com reference. */
:root{
  --cream:#fff0c7;
  --cream-deep:#ead9a4;
  --paper:#fff7df;
  --ink:#000;
  --ink-soft:#2d291f;
  --link:#0055a6;
  --rule:#111;
  --stamp:#99180e;
  --green:#d6efc8;
  --green-line:#4d7454;
  --read:760px;
  --serif:"Times New Roman", Times, serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--cream);
  background-image:url("/assets/img/owl-texture.png");
  background-size:128px 144px;
  background-position:0 0;
  background-repeat:repeat;
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.2;
}
.sheet{width:100%;max-width:none;margin:0;background:transparent;padding:0 0 10px}
.wrap{max-width:var(--read);margin:0 auto;padding:0 10px}

/* Header: use the supplied official-site reference artwork for exact proportions. */
.masthead{padding:20px 0 55px;text-align:center}
.masthead .wrap{max-width:none;padding:0 12px}
.brand{display:block;width:min(55vw,1045px);min-width:520px;margin:0 auto;text-decoration:none;color:inherit}
.brand img{display:block;width:100%;height:auto;margin:0 auto}
.wordmark{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.tagline,.stamp,.flourish,.mainnav,.hr-double{display:none!important}

/* Top copy */
.preamble{max-width:720px;margin:22px auto 0;text-align:center;font-style:italic;font-size:20px;line-height:1.18}
.preamble p{margin:0 0 8px;font-size:20px}
.caution,.howto{width:max-content;max-width:calc(100vw - 24px);margin-left:auto;margin-right:auto}
.caution{text-align:center;font-weight:700;font-style:normal;margin:18px auto 10px;font-size:20px}
.howto{text-align:center;font-size:20px;line-height:1.2;color:var(--ink);margin:24px auto 10px}
@media(min-width:900px){.caution,.howto{white-space:nowrap}}
.toolbar{display:none!important}

/* General typography */
p{margin:0 0 .8em}
main p,main li{font-size:18px}
a{color:var(--link)}
a:hover{color:#99180e}
h2{font-family:var(--serif);font-size:26px;line-height:1.12;margin:1.5em 0 .42em}
h3{font-family:var(--serif);font-size:21px;line-height:1.15;margin:1.35em 0 .35em}
.lede{font-size:19px}.eyebrow{font-size:15px;text-transform:uppercase;letter-spacing:.05em}.crumbs{font-size:15px;padding-top:25px}
ul.plain{padding-left:1.15em}
.note{background:rgba(255,247,223,.75);border:1px solid var(--cream-deep);border-left:3px solid var(--green-line);padding:12px 14px;margin:1.4em 0;font-size:17px}

/* Quiz list: deliberately breaks out of the centered copy column, matching the reference. */
.qlist{
  list-style:none;
  width:calc(100vw - 36px);
  max-width:none;
  margin:0;
  margin-left:calc(50% - 50vw + 18px);
  padding:0;
  position:static;
  transform:none;
  text-align:left;
}
.qlist li{margin:0;padding:0;text-align:left}
.qlist label{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  min-height:27px;
  padding:1px 0;
  cursor:pointer;
  font-family:var(--serif);
  font-size:20px;
  line-height:1.25;
  text-align:left;
}
.qnum{font-variant-numeric:tabular-nums;color:#000;min-width:29px;text-align:right;flex:0 0 29px;font-size:20px}
.qlist input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:0 0 20px;margin:0;
  border:1px solid #7a7a7a;border-radius:2px;background:#fff;cursor:pointer;position:relative
}
.qlist input:checked{background:#d9d9d9;border-color:#c3c3c3}
.qlist input:checked::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.qtext{flex:1;color:#000;text-align:left}

/* Keep the quiz invisible until JavaScript has finished building it.
   This prevents the questions from briefly appearing in the centered content column
   before the full-width, left-aligned quiz layout is painted. */
.qlist:not(.is-ready){visibility:hidden}
.qlist:not(.is-ready) + .actions{visibility:hidden}

/* Buttons under the checklist are left aligned like the reference. */
.actions{
  width:calc(100vw - 36px);
  margin:18px 0 10px;
  margin-left:calc(50% - 50vw + 18px);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start
}
.btn{
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1;
  padding:7px 17px;
  border:1px solid #52715a;
  border-radius:18px;
  background:#d6efc8;
  color:#111;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}
.btn:hover{background:#c7e7b8}.btn-ghost{background:#d6efc8;border-color:#52715a;color:#111}.btn-ghost:hover{background:#c7e7b8}

/* Result page */
.score-label{font-family:var(--serif);font-size:24px;text-align:center;margin:8px 0 0;font-weight:700}
.score-num{font-family:var(--serif);font-size:52px;line-height:1;margin:8px 0;color:red}
.score-band{font-family:var(--serif);font-size:21px;color:#99180e;margin-bottom:8px}
.score-note{max-width:52ch;margin:0 auto;font-size:18px}
#scorePanel .score-num,#scorePanel .score-band,#scorePanel .score-note{text-align:center}
#scorePanel .actions{width:auto;margin:24px 0 10px;justify-content:center}
#scorePanel .actions .btn{min-width:132px;text-align:center;background:#ff9f89;border-color:#606060;font-size:17px;padding:10px 18px}
#scorePanel .actions .btn:hover{background:#ff9278}

/* FAQ / cards */
details{border-bottom:1px solid var(--cream-deep);padding:2px 0}
details summary{cursor:pointer;font-size:18px;padding:10px 0;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+ ";font-weight:700}.details[open] summary::before{content:"- "}
details .answer{padding:0 0 12px 1.1em}
.related{margin:40px 0 0;border-top:1px solid var(--rule);padding-top:18px}.related h2{font-size:21px;margin:0 0 10px}
.related ul,.cards{list-style:none;margin:0;padding:0}.related li{margin:0 0 8px}
.related a{text-decoration:none}.related a span{display:block;color:var(--ink-soft);font-size:16px}

/* Footer on the reference is minimal. */
.site-footer{margin-top:42px;padding:14px 0 24px;border:0;font-size:14px;text-align:center}
.site-footer .wrap{max-width:760px}
.site-footer nav ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.site-footer nav a{color:#5a5140;font-size:13px}
.site-footer p{font-size:13px;text-align:center;color:#5a5140;margin:0 auto .4em;max-width:650px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#000;color:#fff;padding:8px 12px;z-index:99}

@media(max-width:700px){
  body{font-size:16px}
  .brand{width:94vw;min-width:0}
  .masthead{padding:12px 0 25px}
  .wrap{padding:0 12px}
  .preamble{font-size:20px;margin-top:15px}.caution{font-size:20px}.howto{font-size:20px;margin-top:18px}
  .qlist{width:calc(100vw - 16px);margin-left:calc(50% - 50vw + 8px)}
  .qlist label{font-size:18px;line-height:1.22;min-height:25px;gap:6px}
  .qnum{font-size:18px;min-width:27px;flex-basis:27px}
  .qlist input{width:19px;height:19px;flex-basis:19px}
  .actions{width:calc(100vw - 16px);margin-left:calc(50% - 50vw + 8px)}
  h2{font-size:23px}h3{font-size:20px}
}
@media print{.actions,.related,.site-footer,.toolbar{display:none!important}}