/* Fourselves — page layout for fourselves.com, on top of the kit (design/journal/kit.css).
   Carried from design/prototype-journal.html's own style block; the classes are the prototype's. */
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:#F5F3EE;padding:.6em 1em;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;z-index:100;text-decoration:none;border-radius:4px}
.skip:focus{top:8px}
.hero{position:relative;padding:clamp(28px,4vw,56px) 0 clamp(70px,9vw,130px);overflow:hidden}
.hero .inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(16px,4vw,56px);align-items:center}
@media (max-width:820px){.hero .inner{grid-template-columns:1fr}}
.hero h1{font-size:clamp(34px,5.2vw,64px)}
.hero .sub{max-width:50ch;font-size:15.5px;margin:1.2em 0 1.4em}
.hero .fine{font-size:13px;color:var(--ink-soft);margin-top:1em}
.hero-scene{position:relative;height:520px}
@media (max-width:480px){.hero-scene{height:420px}}
.rip-bottom{position:absolute;left:0;right:0;bottom:-2px;height:46px;background:var(--paper);clip-path:polygon(0 100%,0 62%,2% 48%,4% 66%,6% 40%,9% 58%,11% 34%,13% 62%,16% 46%,18% 70%,21% 44%,23% 60%,26% 36%,29% 64%,31% 50%,34% 72%,37% 42%,40% 58%,42% 38%,45% 66%,48% 44%,51% 62%,53% 36%,56% 60%,59% 48%,62% 70%,65% 40%,67% 58%,70% 34%,73% 62%,76% 46%,79% 68%,82% 42%,84% 60%,87% 38%,90% 64%,93% 48%,95% 70%,98% 44%,100% 60%,100% 100%)}
.rip-bottom::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.75);clip-path:inherit;transform:translateY(-4px)}
.head-mirror{position:absolute;width:27%;left:36%;top:-4%;transform:rotate(-12deg);z-index:3}
.head-mirror .glass{position:absolute;left:15%;top:5%;width:70%;height:44%;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.head-mirror img{position:relative;z-index:1;width:100%}
.offer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
@media (max-width:760px){.offer{grid-template-columns:1fr}}
.offer .sheet{padding:26px 26px 28px;display:grid;gap:10px;align-content:start}
.offer .sheet h3{font-family:var(--sans);font-weight:700;font-size:19px;letter-spacing:.01em}
.offer .sheet p{font-size:14.5px;margin:0}
.offer .sheet .art{height:110px;display:grid;place-items:center;margin-bottom:6px}
.offer .sheet .art img{max-height:110px;width:auto}
.selfcard .art{height:300px;aspect-ratio:auto;display:grid;place-items:end center;position:relative}
.selfcard .art img{max-height:300px;width:auto;max-width:90%}
.selfcard .name{display:grid;justify-items:center;gap:4px}
.selfcard .def{font-family:var(--mono);font-size:14px;max-width:28ch;color:var(--ink-2)}
.selfcard .q{font-family:var(--mono);font-size:13px;max-width:28ch;color:var(--ink-soft);font-style:italic}
.face-sticker{position:absolute;width:26%;left:37%;top:7%;z-index:3;transform:rotate(-12deg)}
.mirror-head{position:absolute;left:50%;top:-3%;width:27%;transform:translateX(-48%) rotate(-12deg);z-index:2}
.mirror-head img{width:100%;position:relative;z-index:1}
.mirror-head .glass{position:absolute;left:15%;top:5%;width:70%;height:44%;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.mask-wrap{position:absolute;width:30%;left:36%;top:6.5%;z-index:3}
.mask-wrap .tape{width:38px;height:12px;top:-5px;left:6px;transform:rotate(-30deg)}
.mask-wrap .tape.r{left:auto;right:-8px;top:-3px;transform:rotate(30deg)}
.diary{padding:clamp(24px,4vw,44px) clamp(20px,4vw,44px) clamp(24px,4vw,44px) clamp(60px,8vw,90px);box-shadow:var(--shadow-sheet);position:relative}
.sticky{position:sticky;top:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,280px)}
.grid2 div{aspect-ratio:1/1;display:grid;place-items:center;font-family:var(--hand-2);font-size:20px;position:relative}
.grid2 div::before{content:"";position:absolute;inset:0;border:2px solid var(--ink);border-radius:8% 6% 7% 5%/6% 8% 5% 7%;filter:url(#rough)}
.grid2 .t{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);position:absolute;bottom:6px;left:0;right:0;text-align:center}
.steps{display:grid;gap:1.1rem;margin-top:1.2rem;counter-reset:step}
.steps div{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.steps b{font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"opsz" 48;font-size:26px;line-height:1;color:var(--ink);padding-top:.05em;min-width:1.1em}
.steps span strong{font-family:var(--sans);font-weight:700;display:block;margin-bottom:.15em}
.curious{margin-top:1.6rem;padding:.9em 1.1em;border-left:2px solid rgba(0,0,0,.35);font-size:13.5px;color:var(--ink-2)}
.curious b{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:.4em;color:var(--ink-soft)}
.pairpeek{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;padding:30px 20px 10px}
.pairpeek .fig{position:relative;display:grid;justify-items:center;gap:8px}
.pairpeek .fig img{max-height:230px;width:auto}
.pairpeek .line{position:absolute;left:35%;right:35%;top:44%;height:60px;pointer-events:none}
.shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:start}
@media (max-width:760px){.shop{grid-template-columns:1fr;max-width:340px;margin:0 auto}}
.spiral{position:relative;width:100%;aspect-ratio:4/5;background:linear-gradient(180deg,#F3EFE4,#E9E3D3);box-shadow:var(--shadow-sheet);padding:26px 22px 22px 34px;display:grid;align-content:space-between;transform:rotate(-2deg)}
.spiral::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:10px;background:radial-gradient(circle at 5px 8px,#8a8a8a 0 3px,transparent 3.5px) 0 0/10px 22px repeat-y}
.spiral.small{padding:18px 14px 16px 26px;transform:rotate(-1.5deg)}
.deckbox{position:relative;width:100%;aspect-ratio:4/5;box-shadow:var(--shadow-sheet);padding:24px;display:grid;align-content:space-between;transform:rotate(2deg)}
.pairbook{position:relative;width:100%;aspect-ratio:4/5;background:#FCFBF8;box-shadow:var(--shadow-sheet);padding:24px;display:grid;align-content:space-between;transform:rotate(-1deg)}
.start{position:relative;margin:70px auto 0;max-width:820px}
/* the sixteen on the workbooks page */
.shop16{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 26px;align-items:start}
@media (max-width:900px){.shop16{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.shop16{grid-template-columns:1fr 1fr;gap:28px 18px}}
.shop16 .item{display:grid;gap:12px;justify-items:center}
.shop16 .item > a{display:block;width:100%;text-decoration:none;color:inherit}
.shop16 .under{display:flex;gap:.5em;flex-wrap:wrap;justify-content:center}
.coming{background:#FFD5EA;transform:rotate(-1.5deg)}
/* quiz */
.quiz{max-width:760px;margin:0 auto}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:1.4em}
@media (max-width:560px){.choices{grid-template-columns:1fr}}
/* every card holds three lines of option text, so the cards sit in the same place from one item to the next */
.choice{position:relative;text-align:left;background:#FFFDF7;border:0;padding:20px 20px 22px;font:inherit;font-family:var(--mono);font-size:15px;line-height:1.5;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-cut);min-height:146px;display:grid;align-content:start;gap:8px;transform:rotate(-.6deg)}
.choice + .choice{transform:rotate(.8deg)}
.choice .k{font-family:var(--hand-2);font-size:18px}
.choice::after{content:"";position:absolute;inset:-8px -6px;border:2.6px solid var(--ink);border-radius:48% 52% 46% 54%/56% 44% 56% 44%;opacity:0;transition:opacity .12s;pointer-events:none;filter:url(#rough)}
.choice:focus-visible::after{opacity:.55}
@media (hover:hover){.choice:hover::after{opacity:.55}}  /* a mouse previews the ring; a finger never leaves a stale one on the next item */
.choice:focus-visible{outline-offset:10px}  /* the kit's pink outline sits outside the pen ring */
.choice.picked::after{opacity:1}
.progress{display:flex;justify-content:space-between;align-items:baseline;gap:1em;flex-wrap:wrap;margin-bottom:.6em}
/* result and type pages */
.res-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
@media (max-width:700px){.res-head{grid-template-columns:1fr}}
.res-head .fig{position:relative;width:min(240px,60vw)}
.res-head .fig img{width:100%}
.habits{display:flex;flex-wrap:wrap;gap:14px;margin:1.8em 0}
.habits .label{transform:none}
.habits .label:nth-child(odd){transform:rotate(-1.4deg)} .habits .label:nth-child(even){transform:rotate(1.2deg)}
.habits .label b{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--ink-soft);font-weight:400}
.locked{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:1.6em 0 2.2em;align-items:start}
@media (max-width:700px){.locked{grid-template-columns:1fr;max-width:300px;margin-inline:auto}}
.env{position:relative;display:grid;gap:10px;justify-items:center;text-align:center}
.env .seal-wax{right:14%;top:34%}
.env small{font-family:var(--mono);font-size:12px;color:var(--ink-soft);max-width:26ch}
.gate{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px;align-items:start}
@media (max-width:760px){.gate{grid-template-columns:1fr}}
.gate form{display:grid;gap:14px}
.field{display:grid;gap:4px}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.field input{font:inherit;font-family:var(--mono);font-size:15px;padding:.5em .2em;border:0;border-bottom:1.5px solid var(--ink);background:transparent;color:var(--ink);min-width:0;width:100%}
.slip{display:grid;grid-template-columns:auto 1fr;gap:.7em;align-items:start;font-size:13px;background:#FFF8DC;padding:.8em 1em;box-shadow:var(--shadow-cut);transform:rotate(-1deg);position:relative}
.slip input{margin-top:.3em}
.sent{display:none}
.sent.on{display:block}
.letter{position:relative;max-width:640px;margin:2em auto 0}
.letter .from{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-bottom:1rem;line-height:1.7;overflow-wrap:anywhere}
.letter .reveal{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin:1.2em 0}
.letter .reveal .mir{width:90px;position:relative}
.letter .reveal .mir img{width:100%;position:relative;z-index:1}
.letter .reveal .mir .glass{position:absolute;left:19%;top:8%;width:62%;height:52%;border-radius:50%}
.share-card{width:min(100%,280px);background:#FCFBF9;padding:12px 12px 48px;box-shadow:var(--shadow-cut);position:relative;transform:rotate(-2deg);margin-top:1.4em}
.share-card .photo{background:#EFEBE3;aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden}
.share-card .photo img{max-height:82%;width:auto}
.share-card .stamps{position:absolute;right:-12px;top:-10px;display:grid;gap:6px;transform:rotate(8deg)}
.share-card .stamps img{width:50px;box-shadow:0 2px 3px rgba(0,0,0,.3)}
.share-card .cap{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--hand-2);font-size:15px}
.type-head .habits{margin-bottom:0}
.selves4 .selfcode{margin:2px 0}
.selves4 .name{gap:2px}
.selves4 .def{max-width:34ch;font-size:14px;color:var(--ink-2);text-align:center}
.card-img{position:relative;max-width:420px;margin:0 auto;box-shadow:var(--shadow-cut);transform:rotate(1.5deg)}
.card-img img{width:100%;height:auto}
.card-img .pin{top:-14px}
.wind{font-family:var(--hand-2);text-transform:none;font-size:18px;letter-spacing:0;background:#FFF8DC}
.neigh td.pos{white-space:normal;min-width:10ch}
@media (max-width:560px){.neigh tr{display:block;padding:.5em 0}.neigh tr:first-child{display:none}.neigh td{display:block;border:0;padding:.15em 0}.neigh td.pos{font-size:17px}.neigh tr+tr{border-top:1px solid rgba(0,0,0,.18)}}
.stackline .code{font-size:.85em}
.legal-page .sheet{position:relative}
.legal-page h2.caps{margin-top:1.6em;font-size:16px}
.legal-page h2.caps:first-of-type{margin-top:0}
.legal-page .sheet p{margin:.5em 0 1em}
/* compare */
.pick{display:grid;grid-template-columns:1fr auto 1fr;gap:.2rem 1rem;align-items:end;max-width:600px;margin:1.6rem 0 2rem}
.pick .pron-row{grid-column:3}
@media (max-width:560px){.pick{grid-template-columns:1fr;gap:.8rem}.pick .amp{display:none}.pick .pron-row{grid-column:1}}
.pick-type{display:flex;align-items:center;gap:.6em;margin:0 0 .8em;position:relative}
.pick-type select{font:inherit;font-family:var(--mono);font-size:13px;letter-spacing:.08em;padding:.3em .5em;border:1.5px solid var(--ink);border-radius:5px;background:var(--paper-2);color:var(--ink)}
.pick .amp{font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"opsz" 48;font-size:1.9rem;line-height:1;color:var(--ink-soft);align-self:end;height:40px;display:grid;place-items:center;padding:0}
.pick select{font:inherit;font-family:var(--mono);font-size:1.05rem;letter-spacing:.1em;padding:.5em .6em;border:1.5px solid var(--ink);border-radius:5px;background:var(--paper-2);color:var(--ink);width:100%}
.pick select.pron{font-size:.8rem;letter-spacing:.04em;padding:.35em .5em;margin-top:6px;border-width:1px;color:var(--ink-soft)}
.pair-figs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;margin:1em 0 1.6em;padding-top:26px}
.pair-figs .fig{position:relative;display:grid;justify-items:center;gap:8px;text-align:center}
.pair-figs .fig img{max-height:260px;width:auto}
.pair-figs .fig .who{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.verdict{margin:1.2em 0 1.6em}
.cmp{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:14px}
.cmp th,.cmp td{text-align:left;padding:.55em .5em;vertical-align:top;border-bottom:1px solid rgba(0,0,0,.18)}
.cmp th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.cmp td.pos{font-family:var(--hand-2);font-size:15px;white-space:nowrap;color:var(--ink-2)}
.cmp td.hit{background:linear-gradient(transparent 12%,rgba(255,95,166,.35) 12%,rgba(255,95,166,.35) 88%,transparent 88%)}
@media (max-width:560px){.cmp td.pos{white-space:normal}}
.selves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:1em 0 1.6em}
@media (max-width:700px){.selves{grid-template-columns:1fr 1fr}}
.sv{display:grid;gap:4px}
.sv .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.sv .r{display:flex;justify-content:space-between;font-family:var(--mono);font-size:16px}
.cta2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:1.4em}
@media (max-width:700px){.cta2{grid-template-columns:1fr}}
.copyrow{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.copyrow code{font-family:var(--mono);font-size:13px;background:#fff;padding:.35em .6em;box-shadow:var(--shadow-cut)}
.footer .sub button.btn{padding:.7em 1.2em}

/* the quiz screens */
/* the stem box holds its longest case (two lines, three on a phone) and the stem sits at its foot, so the cards never move */
.qstem{font-size:clamp(17px,2.4vw,22px);line-height:1.4;display:grid;align-content:end;min-height:2.8em}
@media (max-width:560px){.qstem{min-height:4.2em}}
.qfoot{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;align-items:center;flex-wrap:wrap}
#qback{margin-left:auto}  /* always at the right, under the legend on a phone, beside it on a laptop */
.quiz .btn{min-height:44px}  /* a thumb's target */
.qslip{text-align:center;padding:clamp(28px,5vw,44px) clamp(20px,4vw,40px);max-width:560px;margin:0 auto}
.qslip .btn{margin-top:.2em}
.qslip .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
#qscreen{position:relative;z-index:1}
#quiz-app > .overhang{z-index:0}
@media (max-width:600px){#quiz-app > .overhang{display:none}}
.set-grid{grid-template-columns:1fr 1fr;row-gap:30px;margin-top:3em}  /* room above every card for the "most me" note, the first row's clear of the label */
.set-grid .choice{min-height:96px}
@media (max-width:560px){.set-grid{grid-template-columns:1fr}.set-grid .choice{min-height:110px}}
.choice .tag{position:absolute;right:10px;top:-28px;font-size:16px;color:var(--ink-2)}
.choice.crossed{opacity:.75}
.choice.crossed > span:last-child{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--ink)}
.choice.crossed::after{opacity:0}
.bestfit{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:1.2em}
@media (max-width:700px){.bestfit{grid-template-columns:1fr}}
.bestfit .sheet{display:grid;gap:1em;align-content:start;padding:26px 24px 28px}
.bestfit .sheet p{font-size:14.5px;margin:0}
@media (prefers-reduced-motion:reduce){.choice::after{transition:none}.quiz .btn{transition:none}}