:root {
  --paper: #eee9df;
  --ink: #1c211e;
  --muted: #77786e;
  --line: rgba(28, 33, 30, .2);
  --clay: #b95f43;
  --sage: #67705d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }
.topbar, main, footer { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }

.topbar { height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.brand { width: max-content; text-decoration: none; font: 800 22px/1 Arial, sans-serif; letter-spacing: .22em; }
.brand span { display: inline-grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 0; vertical-align: -2px; }
nav { display: flex; gap: 34px; }
nav a { position: relative; color: #4f534e; text-decoration: none; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--ink); transition: .25s; }
nav a:hover::after { right: 0; }
.edition { justify-self: end; color: var(--muted); font: 11px/1 monospace; letter-spacing: .12em; }

.hero { padding: clamp(65px, 10vw, 128px) 0 54px; }
.kicker, .section-number { margin: 0 0 31px; color: var(--clay); font: 11px/1.4 monospace; letter-spacing: .16em; }
h1 { max-width: 1080px; margin: 0; font: 400 clamp(55px, 8.3vw, 116px)/.93 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
h1 em { color: var(--clay); font-weight: 400; }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 42px; }
.hero-bottom p { max-width: 520px; margin: 0 0 7px 33%; color: #5f625c; font: 16px/1.6 Georgia, serif; }
.round-link { flex: 0 0 auto; display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; text-decoration: none; font-size: 22px; transition: .25s; }
.round-link:hover { color: var(--paper); background: var(--ink); transform: rotate(-8deg); }

.visual { position: relative; height: min(57vw, 650px); min-height: 410px; overflow: hidden; background: #d4cbbd; isolation: isolate; }
.visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 63%, rgba(49,51,42,.13)); }
.visual p { position: absolute; z-index: 4; left: 28px; bottom: 25px; margin: 0; color: #f4efe6; font: 15px/1.45 Georgia, serif; }
.visual p span { opacity: .72; font: 10px/1 monospace; letter-spacing: .12em; text-transform: uppercase; }
.sun { position: absolute; z-index: -1; top: 12%; right: 16%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #e8d6af; }
.building { position: absolute; bottom: 0; background: #958f7f; box-shadow: inset -25px 0 rgba(50,52,45,.06); }
.building-left { left: 5%; width: 32%; height: 44%; transform: skewY(-6deg); transform-origin: bottom right; background: #77806e; }
.building-left i { position: absolute; bottom: 19%; width: 16%; height: 42%; background: #30372f; border: 6px solid rgba(238,233,223,.34); }
.building-left i:nth-child(1) { left: 12%; }.building-left i:nth-child(2) { left: 41%; }.building-left i:nth-child(3) { left: 70%; }
.building-main { right: 4%; width: 60%; height: 64%; background: #ad7c61; clip-path: polygon(10% 10%, 80% 0, 100% 13%, 100% 100%, 0 100%, 0 24%); }
.window { position: absolute; top: 24%; left: 20%; width: 48%; height: 46%; border: 12px solid #ddd0bd; background: #293230; box-shadow: inset 0 0 0 1px #17201d; }
.window::before, .window::after { content: ""; position: absolute; background: rgba(221,208,189,.55); }
.window::before { left: 50%; top: 0; width: 4px; height: 100%; }.window::after { top: 49%; left: 0; width: 100%; height: 4px; }
.window span { position: absolute; right: 9%; bottom: 10%; width: 12%; height: 33%; border-radius: 50% 50% 10% 10%; background: #687158; }
.door { position: absolute; right: 7%; bottom: 0; width: 13%; height: 52%; background: #3e453d; border: 9px solid #c1977d; border-bottom: 0; }
.tree { position: absolute; z-index: 3; left: 42%; bottom: 0; width: 7px; height: 38%; background: #4b4b3f; }
.tree i { position: absolute; width: 120px; height: 150px; border-radius: 50%; background: var(--sage); }
.tree i:nth-child(1) { left: -70px; top: -75px; }.tree i:nth-child(2) { left: -14px; top: -95px; transform: scale(.85); }.tree i:nth-child(3) { left: -75px; top: -150px; transform: scale(.68); }

.about { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 130px 0 110px; border-bottom: 1px solid var(--line); }
.about h2 { margin: 0 0 34px; font: 400 clamp(38px, 5vw, 68px)/1 Georgia, serif; letter-spacing: -.04em; }
.about div > p { max-width: 600px; margin: 0; color: #5e615a; font: 17px/1.7 Georgia, serif; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0 0 110px; }
.principles article { min-height: 230px; padding: 38px 32px; border-right: 1px solid var(--line); }
.principles article:first-child { padding-left: 0; }.principles article:last-child { border-right: 0; }
.principles span { color: var(--clay); font: 11px/1 monospace; }
.principles h3 { margin: 48px 0 15px; font: 400 27px/1 Georgia, serif; }
.principles p { max-width: 290px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

footer { margin-bottom: 24px; padding: 53px 55px; color: #e9e4da; background: var(--ink); }
footer > div:first-child { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 70px; }
footer p { margin: 0; color: #9ca198; font: 11px/1 monospace; letter-spacing: .13em; text-transform: uppercase; }
footer a { text-decoration: none; font: 400 clamp(30px, 5vw, 64px)/1 Georgia, serif; }
.footer-meta { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.17); color: #858b83; font: 10px/1 monospace; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 720px) {
  .topbar, main, footer { width: min(100% - 28px, 1280px); }
  .topbar { grid-template-columns: 1fr auto; height: 72px; }
  nav { display: none; }
  .hero-bottom { align-items: center; }
  .hero-bottom p { margin-left: 0; max-width: 76%; font-size: 14px; }
  .visual { min-height: 360px; }
  .building-main { width: 73%; }.building-left { left: -10%; width: 48%; }.tree { left: 30%; }
  .about { grid-template-columns: 1fr; padding: 80px 0 70px; }
  .principles { grid-template-columns: 1fr; }
  .principles article { min-height: auto; padding: 34px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .principles h3 { margin-top: 24px; }
  footer { padding: 38px 25px; }
  footer > div:first-child { display: block; padding-bottom: 52px; }
  footer a { display: block; margin-top: 20px; font-size: 27px; }
}