:root {
  --paper:#f5e4c7;
  --ink:#211b12;
  --gold:#a17025;
  --scale:calc(100vw / 935);
  font-family:"Times New Roman",Times,serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  scroll-behavior:smooth;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background-image:url("paper.svg");
  background-size:310px 310px;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  font-weight:400;
}
p {
  line-height:1.2;
}
a,button {
  -webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible {
  outline:3px solid #765018;
  outline-offset:5px;
}
section {
  scroll-margin-top:24px;
}
.skip-link {
  position:fixed;
  top:-100px;
  left:15px;
  background:var(--paper);
  padding:12px;
  z-index:10;
}
.skip-link:focus {
  top:10px;
}
.site-header {
  height:calc(44 * var(--scale));
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 11.8%;
  gap:32px;
}
.wordmark {
  font-size:clamp(28px,3.2vw,48px);
  line-height:1;
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:clamp(18px,2.9vw,44px);
  white-space:nowrap;
  font-size:clamp(14px,1.25vw,19px);
}
nav a,nav>span {
  position:relative;
  padding:12px 0;
}
nav a[aria-current]::after {
  content:"";
  position:absolute;
  bottom:2px;
  left:0;
  right:0;
  height:2px;
  background:var(--gold);
}
nav a:hover {
  color:var(--gold);
}
.menu-toggle {
  display:none;
}
.hero {
  height:calc(330 * var(--scale));
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.hero-art {
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("kuhu-see-viib.jpg");
  background-size:70% auto;
  background-position:left 52%;
  background-repeat:no-repeat;
}
.hero-art::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 42%,#f5e4c720 51%,#f5e4c7e8 65%,#f5e4c7aa 100%);
}
.hero-copy {
  width:38.5%;
  margin-left:61.5%;
  padding:calc(44 * var(--scale)) calc(27 * var(--scale)) 0 0;
}
h1 {
  font-size:calc(38 * var(--scale));
  line-height:1.04;
  letter-spacing:-.025em;
}
.signature {
  display:flex;
  align-items:center;
  gap:18px;
  font:calc(9 * var(--scale))/1.4 Arial,sans-serif;
  letter-spacing:.38em;
  text-transform:uppercase;
  margin:calc(18 * var(--scale)) 0 calc(14 * var(--scale));
  white-space:nowrap;
}
.signature::before,.signature::after {
  content:"";
  width:calc(36 * var(--scale));
  height:1px;
  background:var(--gold);
  flex-shrink:0;
}
.hero-intro {
  font-size:calc(15 * var(--scale));
  line-height:1.28;
}
.scroll-cue {
  position:absolute;
  bottom:calc(26 * var(--scale));
  left:calc(50% - 25px);
  width:50px;
  height:50px;
  border:1px solid #fff7;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#332b2040;
}
.scroll-cue span {
  width:12px;
  height:12px;
  border-right:2px solid white;
  border-bottom:2px solid white;
  transform:translateY(-3px) rotate(45deg);
}
.about {
  display:grid;
  grid-template-columns:51% 49%;
  min-height:calc(430 * var(--scale));
  overflow:hidden;
}
.portrait {
  position:relative;
  min-height:100%;
  overflow:hidden;
}
.portrait img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 44%;
  mix-blend-mode:multiply;
  mask-image:linear-gradient(to right,#000 88%,transparent 100%);
}
.about-copy {
  padding:calc(35 * var(--scale)) calc(35 * var(--scale)) calc(26 * var(--scale)) calc(24 * var(--scale));
  font-size:calc(15.5 * var(--scale));
}
.about h2 {
  font-size:calc(43 * var(--scale));
  line-height:.91;
  letter-spacing:-.02em;
  margin-bottom:calc(14 * var(--scale));
}
.gold-rule {
  display:block;
  width:calc(44 * var(--scale));
  height:1px;
  background:var(--gold);
}
.about .gold-rule {
  margin-bottom:calc(12 * var(--scale));
  width:calc(34 * var(--scale));
}
.about p {
  margin-bottom:calc(16 * var(--scale));
  line-height:1.17;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:calc(10 * var(--scale)) calc(23 * var(--scale));
  font:calc(11 * var(--scale))/1 Arial,sans-serif;
  letter-spacing:.25em;
  text-transform:uppercase;
  border:1px solid var(--gold);
  background:transparent;
  min-height:44px;
}
.button span {
  font:24px/0.5 Georgia,serif;
  letter-spacing:0;
}
.outline {
  color:#8c5c1e;
}
.pending {
  cursor:default;
}
.motto {
  text-align:center;
  padding:calc(23 * var(--scale)) 4% calc(22 * var(--scale));
}
.motto h2 {
  font-size:calc(43 * var(--scale));
  letter-spacing:-.025em;
  line-height:1.1;
}
.motto .gold-rule {
  margin:calc(7 * var(--scale)) auto;
}
.motto p {
  font-size:calc(16 * var(--scale));
}
.questions {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:42% 54%;
  gap:4%;
  align-items:center;
  min-height:calc(190 * var(--scale));
  padding:calc(22 * var(--scale)) 11.8% calc(30 * var(--scale));
  background-image:linear-gradient(to bottom,var(--paper),#f5e4c730 30%,#f5e4c710 90%),url("hingemaa.jpg");
  background-size:100% 100%,100% auto;
  background-position:center,center 60%;
}
.eyebrow {
  font:calc(9 * var(--scale))/1.4 Arial,sans-serif;
  letter-spacing:.4em;
  text-transform:uppercase;
  margin-bottom:calc(8 * var(--scale));
}
.questions h2 {
  font-size:calc(29 * var(--scale));
  line-height:1.02;
  margin-bottom:calc(10 * var(--scale));
  letter-spacing:-.02em;
}
.questions-copy>p:last-child {
  font-size:calc(15 * var(--scale));
  max-width:95%;
}
.question-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(12 * var(--scale));
}
.question-options button {
  border:1px solid #fff3;
  border-radius:calc(19 * var(--scale));
  background:#f9e8cde8;
  padding:calc(9 * var(--scale)) calc(15 * var(--scale));
  min-height:calc(52 * var(--scale));
  font-size:calc(13.5 * var(--scale));
  line-height:1.15;
  box-shadow:0 2px 14px #59432608;
  transition:background .2s,transform .2s;
}
.question-options button:hover {
  background:#fff1d9;
  transform:translateY(-2px);
}
.creations {
  padding:calc(11 * var(--scale)) 3.7% calc(14 * var(--scale));
}
.creations>h2 {
  text-align:center;
  font-size:calc(38 * var(--scale));
  line-height:1.1;
  letter-spacing:-.02em;
}
.creations>.gold-rule {
  margin:calc(4 * var(--scale)) auto calc(8 * var(--scale));
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(14 * var(--scale));
}
.card {
  overflow:hidden;
  border-radius:5px;
  background:#fff5df66;
  border:1px solid #fff2;
}
.card>img,.bird-image {
  display:block;
  width:100%;
  height:calc(135 * var(--scale));
  object-fit:cover;
  object-position:center 48%;
}
.bird-image {
  overflow:hidden;
  position:relative;
}
.bird-image img {
  position:absolute;
  width:155%;
  max-width:none;
  height:auto;
  left:-9%;
  top:-21%;
}
.card-copy {
  padding:calc(6 * var(--scale)) calc(20 * var(--scale)) calc(12 * var(--scale));
  display:flex;
  flex-direction:column;
  min-height:calc(119 * var(--scale));
}
.card h3 {
  font-size:calc(25 * var(--scale));
  line-height:1.08;
}
.card p {
  font-size:calc(14.5 * var(--scale));
  line-height:1.16;
  margin:calc(3 * var(--scale)) 0 calc(12 * var(--scale));
}
.text-link {
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:15px;
  color:#8d5b1b;
  font:calc(10 * var(--scale))/1.2 Arial,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.text-link span {
  font:22px/1 Georgia,serif;
  letter-spacing:0;
}
.text-link[href]:hover {
  text-decoration:underline;
}
.contact {
  position:relative;
  isolation:isolate;
  min-height:calc(197 * var(--scale));
  overflow:hidden;
  padding:calc(19 * var(--scale)) 5.3% calc(23 * var(--scale));
}
.contact-art {
  position:absolute;
  inset:0;
  z-index:-1;
  background:url("vestlus.jpg") right 56% / 100% auto no-repeat;
  mask-image:linear-gradient(90deg,transparent 16%,#000 43%);
}
.contact-art::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to right,var(--paper) 17%,#f5e4c7cc 28%,transparent 46%);
}
.contact-copy {
  width:32%;
}
.contact h2 {
  font-size:calc(31 * var(--scale));
  line-height:1.05;
  margin-bottom:calc(10 * var(--scale));
}
.contact-copy>p:not(.eyebrow) {
  font-size:calc(14.5 * var(--scale));
  margin:0 0 calc(13 * var(--scale)) calc(8 * var(--scale));
}
.filled {
  background:#9d6f24;
  color:#fff4dd;
  margin-left:calc(8 * var(--scale));
}
.contact .eyebrow {
  margin-bottom:calc(7 * var(--scale));
}
footer {
  padding:calc(12 * var(--scale)) 6.5%;
  min-height:calc(48 * var(--scale));
  display:flex;
  align-items:center;
}
footer .wordmark {
  font-size:calc(25 * var(--scale));
}
dialog {
  border:1px solid #bda16d;
  border-radius:5px;
  background:var(--paper) url("paper.svg");
  color:var(--ink);
  padding:48px;
  max-width:620px;
  width:calc(100% - 32px);
  box-shadow:0 15px 80px #241b1840;
}
dialog::backdrop {
  background:#241b1880;
  backdrop-filter:blur(3px);
}
dialog h2 {
  font-size:36px;
  line-height:1.1;
  margin:20px 0;
}
dialog p {
  font-size:20px;
}
dialog .eyebrow {
  font-size:10px;
}
dialog .button {
  font-size:11px;
  margin-top:28px;
  padding:15px 20px;
}
.dialog-close {
  position:absolute;
  right:12px;
  top:8px;
  border:0;
  background:transparent;
  font-size:32px;
  width:40px;
  height:40px;
}
@media(min-width:1600px) {
  body {
    max-width:1600px;
    margin:auto;
  }
  :root {
    --scale:calc(1600px / 935);
  }
}
@media(max-width:1000px) {
  .site-header {
    padding:0 6%;
    gap:20px;
  }
  .site-header nav {
    gap:20px;
    font-size:13px;
  }
  .about-copy {
    font-size:17px;
  }
  .hero-intro {
    font-size:16px;
  }
  .signature {
    font-size:9px;
    gap:10px;
  }
  .questions-copy>p:last-child {
    font-size:16px;
  }
  .question-options button {
    font-size:15px;
  }
  .card p {
    font-size:16px;
  }
  .contact-copy>p:not(.eyebrow) {
    font-size:16px;
  }
  .text-link {
    font-size:10px;
  }
  .button {
    font-size:11px;
  }
  .eyebrow {
    font-size:10px;
  }
}
@media(max-width:760px) {
  :root {
    --scale:1px;
  }
  .site-header {
    height:64px;
    padding:0 6%;
    position:relative;
    z-index:3;
  }
  .wordmark {
    font-size:32px;
  }
  .menu-toggle {
    display:flex;
    gap:12px;
    align-items:center;
    background:transparent;
    border:0;
    padding:10px 0;
    font-size:16px;
  }
  .menu-toggle span {
    font-size:21px;
  }
  .site-header nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:64px;
    background:var(--paper) url("paper.svg");
    padding:15px 6% 24px;
    grid-template-columns:1fr 1fr;
    gap:4px 25px;
    box-shadow:0 15px 20px #38271420;
    font-size:17px;
  }
  .site-header nav.is-open {
    display:grid;
  }
  nav a[aria-current]::after {
    width:55px;
  }
  .hero {
    height:auto;
    min-height:650px;
    display:flex;
    align-items:flex-end;
    padding:340px 7% 70px;
  }
  .hero-art {
    background-size:auto 385px;
    background-position:40% top;
  }
  .hero-art::after {
    background:linear-gradient(to bottom,transparent 220px,#f5e4c755 290px,var(--paper) 385px);
  }
  .hero-copy {
    width:100%;
    margin:0;
    padding:0;
    position:relative;
  }
  h1 {
    font-size:38px;
    line-height:1.03;
    max-width:450px;
  }
  .signature {
    font-size:9px;
    letter-spacing:.28em;
    margin:21px 0 16px;
    gap:12px;
  }
  .signature::before,.signature::after {
    width:30px;
  }
  .hero-intro {
    font-size:18px;
    line-height:1.3;
    max-width:440px;
  }
  .scroll-cue {
    width:34px;
    height:34px;
    left:calc(50% - 17px);
    bottom:18px;
    background:#93744366;
  }
  .scroll-cue span {
    width:9px;
    height:9px;
  }
  .about {
    grid-template-columns:1fr;
  }
  .portrait {
    height:420px;
    min-height:0;
  }
  .portrait img {
    object-fit:cover;
    object-position:center 36%;
    mask-image:linear-gradient(to bottom,#000 85%,transparent);
  }
  .about-copy {
    padding:20px 7% 34px;
    font-size:18px;
  }
  .about h2 {
    font-size:40px;
    line-height:.98;
    margin-bottom:16px;
  }
  .about p {
    line-height:1.32;
    margin-bottom:18px;
  }
  .about .gold-rule {
    margin-bottom:18px;
  }
  .button {
    padding:14px 23px;
    min-height:46px;
  }
  .motto {
    padding:26px 7% 30px;
  }
  .motto h2 {
    font-size:33px;
    line-height:1.13;
    text-wrap:balance;
  }
  .motto .gold-rule {
    margin:15px auto;
  }
  .motto p {
    font-size:17px;
    line-height:1.35;
  }
  .questions {
    grid-template-columns:1fr;
    gap:25px;
    padding:35px 7% 40px;
    background-size:100% 100%,auto 100%;
    background-position:center,center;
  }
  .questions h2 {
    font-size:32px;
    max-width:330px;
  }
  .questions-copy>p:last-child {
    font-size:18px;
    max-width:300px;
  }
  .eyebrow {
    font-size:10px;
    margin-bottom:12px;
  }
  .question-options {
    gap:12px;
  }
  .question-options button {
    font-size:16px;
    line-height:1.2;
    padding:15px 12px;
    min-height:88px;
    border-radius:21px;
  }
  .creations {
    padding:30px 7%;
  }
  .creations>h2 {
    font-size:34px;
    line-height:1.05;
    text-wrap:balance;
  }
  .creations>.gold-rule {
    margin:14px auto 24px;
  }
  .cards {
    grid-template-columns:1fr;
    gap:23px;
  }
  .card>img,.bird-image {
    height:190px;
  }
  .card-copy {
    padding:15px 21px 20px;
    min-height:175px;
  }
  .card h3 {
    font-size:29px;
  }
  .card p {
    font-size:18px;
    line-height:1.3;
    margin:8px 0 19px;
  }
  .text-link {
    font-size:11px;
    min-height:26px;
  }
  .contact {
    padding:28px 7% 230px;
    min-height:480px;
  }
  .contact-art {
    background-size:auto 300px;
    background-position:62% bottom;
    mask-image:linear-gradient(to bottom,transparent 34%,#000 62%);
  }
  .contact-art::after {
    background:linear-gradient(to bottom,var(--paper) 18%,transparent 70%);
  }
  .contact-copy {
    width:100%;
    max-width:370px;
  }
  .contact h2 {
    font-size:35px;
    margin-bottom:14px;
  }
  .contact-copy>p:not(.eyebrow) {
    font-size:18px;
    line-height:1.3;
    margin-left:0;
    margin-bottom:20px;
  }
  .filled {
    margin-left:0;
  }
  footer {
    padding:18px 7%;
    min-height:68px;
  }
  footer .wordmark {
    font-size:29px;
  }
  dialog {
    padding:35px 25px;
  }
  dialog h2 {
    font-size:30px;
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto;
  }
  * {
    transition:none!important;
  }
}
/* Kadreeringud pärast täispika brauserivaate võrdlust kinnitatud näidisega. */
@media(min-width:761px) {
  .portrait img {
    height:100%;
    top:0;
    object-fit:cover;
    object-position:center 24%;
  }
  .about-copy {
    font-size:calc(15 * var(--scale));
    padding-bottom:calc(24 * var(--scale));
  }
  .about {
    min-height:calc(430 * var(--scale));
  }
  .contact-art {
    background-size:118% auto;
    background-position:right 56%;
    mask-image:linear-gradient(90deg,transparent 23%,#000 48%);
  }
  .contact-art::after {
    background:linear-gradient(90deg,var(--paper) 22%,#f5e4c7ee 31%,transparent 49%);
  }
  .contact-copy {
    width:34%;
  }
  .card>img {
    object-fit:cover;
  }
  .card:first-child>img {
    object-position:center 52%;
  }
  .bird-image img {
    width:145%;
    left:-3%;
    top:-4%;
  }
}
.filled:hover {
  background:#875e1c;
}
@media(max-width:760px) {
  .bird-image img {
    width:145%;
    left:-3%;
    top:0;
  }
  .contact-art {
    background-size:auto 440px;
    background-position:right bottom;
  }
}
@media(min-width:761px) and (max-width:1000px) {
  .about-copy {
    font-size:17px;
  }
  .motto p {
    font-size:16px;
  }
  .contact-copy {
    width:39%;
  }
  .questions {
    background-image:linear-gradient(to bottom,var(--paper),#f5e4c775 30%,#f5e4c735 90%),url("hingemaa.jpg");
  }
}

/* Kujundusparandus 01: hingamisruum hero ja portree vahel.
   Hero kõrgus, tekst ja mõlema illustratsiooni kadreering jäävad samaks. */
.hero {
  --hero-transition:105px;
  margin-bottom:var(--hero-transition);
  overflow:visible;
}
@media(min-width:761px) {
  .hero-art {
    bottom:calc(-1 * var(--hero-transition));
    /* Senine 52% asend, arvutatud algse hero kõrguse järgi:
       (330 - 935 × .7 × 933 / 1400) × .52 = -55.2123.
       Nii saab maal allservas jätkuda, ilma et senine pildiosa nihkuks. */
    background-position:left calc(-55.2123 * var(--scale));
    /* Lähtepildi alumine serv: nihe + taustapildi kõrgus.
       Hajumine lõpeb enne seda ka kitsamal arvutiekraanil. */
    --landscape-end:calc(380.9652 * var(--scale) - 2px);
    mask-image:linear-gradient(to bottom,
      #000 calc(var(--landscape-end) - var(--hero-transition)),
      rgba(0,0,0,.85) calc(var(--landscape-end) - 80px),
      rgba(0,0,0,.45) calc(var(--landscape-end) - 50px),
      rgba(0,0,0,.09) calc(var(--landscape-end) - 20px),
      transparent var(--landscape-end));
  }
}
/* Pehmendab ainult portreeploki sisenemisserva, säilitades pildi lõike. */
.portrait {
  mask-image:linear-gradient(to bottom,transparent,#000 24px);
}
@media(max-width:760px) {
  .hero {
    --hero-transition:60px;
  }
  .hero-art {
    /* Mobiilis on maastik juba teksti kohal hajunud; ka selle hele
       aluspind sulab nüüd lõpus lehe sama paberitekstuuri sisse. */
    mask-image:linear-gradient(to bottom,
      #000 calc(100% - var(--hero-transition)),transparent 100%);
  }
}