/* pag.css — this page's layout on top of css/ours.css: the back cover, the two packages as two pages, the record, the sign-up.
   No free colours: every colour is a token in ours.css. Cyan on the onyx three ways only: the mark (once), the marker (you), the one ask.
   On the paper: ink, graphite, the two tints and the red pencil. Buttons on paper are printed in ink. */

/* the hero */
.hero h1{font-size:clamp(44px,6.2vw,74px)}
.hero .hook{margin:10px 0 14px;max-width:40ch}
.hero .fit{color:var(--dim);font-size:clamp(16px,1.4vw,18px)}
.hero .proof{margin-top:6px}
@media(min-width:1024px){.hero .book{max-width:470px;width:100%;justify-self:end}}
@media(max-width:1023px){.hero h1{font-size:clamp(40px,11vw,56px)}.hero .proof{margin-top:12px}}
/* the one ask, in the hero: the sign-up where the booking button stood (Peter, 20 Oct). The submit is the page's one cyan ask. */
.hero .hear{max-width:none;margin:22px 0 0}
.hero .hearlab{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.hero .hear .signup-form{margin-top:0}
.hero .hear .btn-secondary{background:var(--cyan);color:var(--onyx);border-color:var(--cyan);font-weight:600;white-space:nowrap}
.hero .hear .btn-secondary:disabled{opacity:.6}
@media(min-width:1024px){
  .hero .hear .signup-form{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:stretch}
  .hero .hear .signup-form[hidden]{display:none}
  .hero .hear .signup-role label{flex:0 0 auto}
  .hero .hear .signup-role span{padding:0 16px}
  .hero .hear .input{width:auto;min-width:0}
}
.hero .packlink{margin:14px 0 0}
.hero .packlink a{text-decoration:none;border-bottom:1px solid rgba(233,223,201,.3);color:var(--dim)}
/* while the package pages are held back, the section is one line, set as the book's own statement: the serif, upright, no italic fetched */
#packages{padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(20px,3vw,40px)} /* .wrap zeroes a section's vertical padding; the kicker and heading used to carry it */
#packages>.lede{font:500 clamp(22px,2.6vw,30px)/1.25 var(--serif);letter-spacing:-.01em;max-width:30ch;color:var(--paper)}
#packages>.lede a{text-decoration-thickness:1px}
/* held back: the package pages, their kicker and heading, and the hero's link to them, until the names, copy and prices are set */
.offers[hidden],.packlink[hidden],#packages .kicker[hidden],#packages h2[hidden]{display:none}
/* a pencil tag on the onyx: what is not signed yet */
.draft{font:400 16px/1 var(--hand);color:var(--faint);white-space:nowrap;margin-left:6px}
.lede a{text-decoration:underline;text-underline-offset:.15em}
/* the hero picture: his photograph printed in graphite on the page (Peter, 20 Oct: "A"); the frame is the plate's ink border */
.plate{margin:0}
.plate img{display:block;width:100%;height:auto;border:1.1px solid var(--ink);box-sizing:border-box}
.plate figcaption{margin-top:10px}
/* what the pencil writes under a scene, and who said it */
.pgnote{font:400 19px/1.15 var(--hand);color:var(--graphite);margin:8px 0 0}
.pgby{font:600 8.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin:4px 0 0}
/* the two packages: two pages of the book, the same shape */
.offers{margin-top:26px}
.offer .who{font:400 15px/1.45 var(--sans);color:var(--ink);margin:10px 0 0}
.inlab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 8.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-top:14px;border-bottom:1px solid var(--ink);padding-bottom:5px}
.inlab .mk{font:400 15px/1 var(--hand);letter-spacing:0;text-transform:none;color:var(--lead)}
.in{list-style:none;margin:0;padding:0}
.in li{display:grid;grid-template-columns:14px 1fr;gap:8px;padding:8px 0;border-bottom:1px dashed var(--rule);font:400 14.5px/1.4 var(--sans);color:var(--ink)}
.in li::before{content:"·";color:var(--graphite)}
.price{margin-top:14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price .amount{font:600 30px/1 var(--sans);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.price .per{font:600 8.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.ask.ink{background:var(--ink);color:var(--page)}
.offer .ask{margin-top:14px;width:100%;justify-content:center}
.pgh .tag{font:400 15px/1 var(--hand);text-transform:none;letter-spacing:0;color:var(--lead);margin-left:6px;white-space:nowrap}
/* a definition behind a tap: What is Ettle? */
.def{border-top:1px solid rgba(233,223,201,.14);border-bottom:1px solid rgba(233,223,201,.14)}
.def summary{display:flex;align-items:center;gap:14px;min-height:72px;cursor:pointer;list-style:none;font:500 clamp(24px,3vw,32px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--paper)}
.def summary::-webkit-details-marker{display:none}
.def summary .mark{width:30px;height:30px;color:var(--cyan);flex:none}
.def summary .plus{margin-left:auto;font:400 30px/1 var(--sans);color:var(--faint);flex:none}
.def summary .plus::before{content:"+"}
.def[open] summary .plus::before{content:"\2212"}
.defbody{padding:6px 0 34px}
.defbody .why{margin-bottom:8px}
.defbody .by{display:block;margin:0 0 18px}
.defbody .dim a{text-decoration:underline;text-underline-offset:.15em}
.coverart{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.coverart .pencil{margin-top:46px}
/* the record, on paper */
.rechead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:4px}
.photo{width:84px;aspect-ratio:4/5;flex:none;border:1.3px dashed var(--graphite);border-radius:2px;display:grid;place-items:center;text-align:center;font:600 8px/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);padding:6px;margin:0;transform:rotate(1.5deg)}
.record{list-style:none;margin:6px 0 0;padding:0}
.record li{display:grid;grid-template-columns:74px 1fr;gap:1px 12px;padding:9px 0;border-bottom:1px dashed var(--rule);align-items:start}
.record li:last-child{border-bottom:0}
.record .n{grid-row:1/span 2;font:600 24px/1 var(--sans);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;padding-top:2px}
.record .f{font:400 14px/1.35 var(--sans);color:var(--ink)}
.record .p{font:400 11.5px/1.4 var(--sans);color:var(--graphite)}
.record .p a{color:inherit}
.recdate{font:400 17px/1.2 var(--hand);color:var(--graphite);margin:10px 0 0;border-top:1px solid var(--ink);padding-top:8px}
.aboutline{font:400 24px/1.2 var(--hand);color:var(--dim);margin:18px 0 6px}
/* the sign-up (as built on f833234; only the styling is new). From 20 Oct it sits in the hero (.hero .hear, above). */
.signup{max-width:30rem}
.signup .t-label{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.signup .t-title{font:500 clamp(31px,4.2vw,48px)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 .4em;color:var(--paper)}
.signup .t-body{font-size:clamp(17px,1.6vw,20px);line-height:1.45;color:var(--paper);margin:0}
.signup-form{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.signup-form[hidden]{display:none}
.signup-role{display:flex;gap:10px;min-width:0;margin:0;padding:0;border:0}
.signup-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.signup-role label{position:relative;flex:1;min-width:0}
.signup-role input{position:absolute;opacity:0;width:1px;height:1px}
.signup-role span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 12px;border:1px solid var(--edge);border-radius:10px;color:var(--paper);font:500 15px/1 var(--sans);cursor:pointer}
.signup-role input:checked + span{border-color:var(--paper);background:var(--paper);color:var(--onyx)}
.signup-role input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}
.input{min-height:50px;width:100%;border:1px solid var(--edge);border-radius:10px;background:transparent;color:var(--paper);font:400 16px/1 var(--sans);padding:0 14px}
.input::placeholder{color:var(--faint)}
.input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;font:500 15px/1 var(--sans);padding:14px 18px;border-radius:10px;border:1px solid var(--edge);color:var(--paper);background:transparent;cursor:pointer}
.btn-secondary:disabled{opacity:.6;cursor:default}
.signup-note{font-size:13.5px;line-height:1.5;color:var(--dim);margin:10px 0 0}
.signup-note[hidden]{display:none}
.signup-thanks{font:500 18px/1.4 var(--sans);color:var(--paper);margin:18px 0 0}
.signup-thanks[hidden]{display:none}
/* footer: Peter's name as the wordmark */
footer.site .brand .word{font-size:22px}