:root{color-scheme:light;--paper:#f8f5ec;--ink:#252f25;--green:#314b38;--muted:#505e4f;--line:#b6c0ae;--sage:#e4ebdd;--white:#fffdf6;--serif:Charter,"Bitstream Charter","Sitka Text",Georgia,serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.6 system-ui,sans-serif}
button,a,textarea,input{font:inherit}
a{color:var(--green);text-underline-offset:.23em}
button{color:inherit;cursor:pointer}
:focus-visible{outline:3px solid #3b6651;outline-offset:4px}
.shell{width:min(100% - 2rem,66rem);margin:auto;min-height:100svh;display:flex;flex-direction:column}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:.65rem 1rem;flex-wrap:wrap;padding:1rem 0}
header{border-bottom:1px solid var(--line)}
footer{border-top:1px solid var(--line);font-size:.88rem;color:var(--muted);margin-top:auto}
.brand{font:600 1.15rem var(--serif);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.language,.quiet,.secondary{background:transparent;border:1px solid var(--line);padding:.55rem .95rem;border-radius:.3rem;min-height:44px}
.quiet{border-color:transparent;text-decoration:underline;text-underline-offset:.23em;padding-inline:.25rem}
main{width:min(100%,44rem);margin:0 auto;padding:3rem 0}
.hero{padding:clamp(1.4rem,7vw,5.5rem) 0 clamp(1rem,4vw,3rem)}
.eyebrow{font-size:.76rem;text-transform:uppercase;font-weight:700;letter-spacing:.12em;color:var(--muted);margin:0 0 1rem}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.11;margin:0 0 .7em;overflow-wrap:anywhere}
h1{font-size:clamp(2.25rem,7.5vw,4.6rem);letter-spacing:-.035em}
.hero h1{font-size:clamp(2.65rem,9vw,6.15rem);margin-bottom:.34em}
h2{font-size:clamp(1.6rem,5vw,2.25rem)}
h3{font-size:1.4rem}
p{margin:0 0 1rem}
.intro{font-size:clamp(1.12rem,2.8vw,1.4rem);max-width:43ch;margin-bottom:1.7rem;color:var(--muted)}
.meta,.hint{font-size:.9rem;color:var(--muted)}
.meta{margin-top:.75rem}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:48px;background:var(--green);color:var(--white);border:1px solid var(--green);border-radius:.3rem;padding:.65rem 1.1rem;text-decoration:none;font-weight:650}
.primary:hover{background:#223d2b}
.secondary:hover,.language:hover,.quiet:hover{background:var(--sage)}
.actions{display:flex;gap:.55rem .8rem;align-items:center;flex-wrap:wrap;margin:1.25rem 0}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:1.45rem}
.rules span{height:.25rem;border-radius:1rem;background:#d8e0d2}
.rules .active{background:var(--green)}
fieldset{margin:0;padding:0;border:0;min-inline-size:0}
legend{padding:0;margin-bottom:.5rem;font-weight:650}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.choice{display:flex;align-items:center;gap:.55rem;padding:.72rem;background:var(--white);border:1px solid var(--line);border-radius:.4rem;cursor:pointer;min-height:52px;overflow-wrap:anywhere}
.choice:has(:checked){outline:2px solid var(--green);outline-offset:-2px;background:var(--sage)}
input[type=radio]{margin:0;accent-color:var(--green);flex:none;width:1.05rem;height:1.05rem}
.pictures{gap:.85rem}
.picture{display:grid;grid-template-columns:auto 1fr;padding:0;column-gap:.65rem;row-gap:0;overflow:hidden;border-radius:.6rem}
.picture .scene{grid-column:1/-1;display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#d5ddd1}
.picture input{margin-left:.8rem}
.picture span{padding:.65rem .6rem .65rem 0;font-weight:550}
.picture:focus-within{outline:3px solid var(--green);outline-offset:3px}
.picture:hover{border-color:var(--green)}
label.note{display:block;font-weight:650;margin-top:1rem}
textarea{display:block;width:100%;padding:.7rem;border-radius:.3rem;border:1px solid #7d8d79;background:var(--white);color:var(--ink);min-height:6rem;resize:vertical}
.card,.notice{background:var(--sage);border:1px solid var(--line);border-radius:.4rem;padding:clamp(1rem,4vw,1.75rem);margin:1rem 0}
.notice{font-size:.9rem;padding:.65rem .85rem}
dl{margin:0}
dt{font-size:.83rem;font-weight:700;color:var(--muted)}
dd{margin:0 0 .9rem;white-space:pre-wrap;overflow-wrap:anywhere}
details{border-top:1px solid var(--line);padding:.65rem 0}
summary{cursor:pointer;min-height:44px;padding:.45rem 0;font-weight:650}
.options{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.3rem}
.options article+article{margin-top:1.3rem}
.skip{position:absolute;left:1rem;top:-8rem;background:var(--white);padding:.7rem;z-index:1}
.skip:focus{top:.5rem}
@media(max-width:360px){.choices:not(.pictures){grid-template-columns:1fr}}
main > section:not(.hero) h1{font-size:clamp(2rem,6vw,3.45rem);margin-bottom:.45em}
main > section:not(.hero) .intro{margin-bottom:1rem}

.landing-options{margin-top:0;padding-top:2rem}
.landing-options h2{max-width:25ch;margin-bottom:1.2rem}
.landing-options article{padding:clamp(1.05rem,4vw,1.7rem);border:1px solid var(--line);border-radius:.5rem;background:var(--white)}
.landing-options article:first-of-type{background:var(--sage)}
.landing-options article+article{margin-top:.75rem}
.landing-options article .eyebrow{margin-bottom:.6rem}
.landing-options article p:last-child{margin-bottom:0}
.landing-options article a{display:inline-flex;align-items:center;min-height:44px}
.offer-price{font-weight:700;color:var(--green)}

.more-pictures{margin-top:.8rem}

.picture-navigation { display: none; }

@media (max-width: 600px) {
  .choices.pictures {
    position: relative;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: .4rem;
  }

  .pictures .picture {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .pictures .picture:focus-within { outline-offset: -3px; }

  .picture-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    margin-block: .55rem;
  }

  .picture-navigation button { padding-inline: .45rem; font-size: .85rem; }
  .picture-navigation button[aria-disabled="true"] { opacity: .65; }
  .picture-navigation span { white-space: nowrap; }
}