:root {
  --paper:  #efe0c2;
  --crumb:  #fdf7ea;
  --crust:  #7d4620;
  --deep:   #5c3116;
  --bake:   #c98a45;
  --ink:    #3a2717;
  --seed:   #7d8f45;

  --page:     58rem;
  --gap:      0.85rem;
  --pad:      1.4rem;
  --edge:     2px;
  --radius:   0;

  --banner-h: 17rem;

  --column-h: 44rem;
  --scallop:  14px;

  --body:   0.875rem;
  --small:  0.75rem;
  --serif:  Times, "Times New Roman", serif;
  --sans:   Verdana, Geneva, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: calc(var(--gap) * 2) var(--gap);
  background: var(--paper);

  background-image: repeating-linear-gradient(
    -45deg, rgba(125,70,32,0.055) 0 2px, transparent 2px 10px);
  color: var(--ink);
  font: var(--body)/1.6 var(--serif);
}

.loaf {
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.box {
  position: relative;
  background: var(--crumb);
  border: var(--edge) solid var(--crust);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--crumb), inset 0 0 0 2px rgba(201,138,69,0.45);
  padding: var(--pad);
}

.box > :first-child { margin-top: 0; }
.box > :last-child  { margin-bottom: 0; }

.crust {
  position: relative;
  height: var(--banner-h);
  border: var(--edge) solid var(--crust);
  border-radius: var(--radius);
  background-color: var(--deep);

  background-image:
    radial-gradient(ellipse at 50% 78%, rgba(253,247,234,0.20) 0 34%, transparent 62%),
    repeating-linear-gradient(58deg,
      transparent 0 22px, rgba(201,138,69,0.30) 22px 24px),
    repeating-linear-gradient(-58deg,
      transparent 0 22px, rgba(201,138,69,0.18) 22px 24px),
    repeating-linear-gradient(90deg,
      var(--deep) 0 16px, #6b3a1a 16px 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.crust::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--scallop);
  background:
    radial-gradient(circle at var(--scallop) 0,
      var(--crumb) 0 var(--scallop), transparent var(--scallop))
    0 0 / calc(var(--scallop) * 2) var(--scallop) repeat-x;
}

.crust h1 {
  margin: 0;
  font: 4.2rem/1 var(--serif);
  font-weight: normal;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--crumb);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.28);
}

.crust p {
  margin: 0.7rem 0 0;
  font: var(--small)/1 var(--sans);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--bake);
}

.crust p::after {
  content: "";
  display: block;
  width: 6rem;
  height: 6px;
  margin: 0.9rem auto 0;
  background: radial-gradient(circle, var(--bake) 0 2px, transparent 2.5px)
              0 0 / 12px 6px repeat-x;
}

.welcome {
  min-height: 13rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: calc(var(--pad) * 1.6) calc(var(--pad) * 2.4);
  font-size: 1.05rem;
  line-height: 1.85;
}

.welcome h2 {
  margin: 0 0 0.9rem;
  font: 2rem/1.1 var(--serif);
  font-weight: normal;
  font-style: italic;
  color: var(--crust);
}

.welcome h2::after {
  content: "";
  display: block;
  width: 7rem;
  height: 5px;
  margin: 0.7rem auto 0;
  background: radial-gradient(circle, var(--bake) 0 1.5px, transparent 2px)
              0 0 / 9px 5px repeat-x;
}

.welcome p { margin: 0; }

.split {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.split > .box {
  min-height: var(--column-h);
  min-width: 0;
}

.box h3 {
  margin: 0 0 0.9rem;
  font: 1.35rem/1.2 var(--serif);
  font-weight: normal;
  font-style: italic;
  color: var(--crust);
}

.box h3::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 0.45rem;
  background:
    linear-gradient(var(--bake) 0 0) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--bake) 0 0) 0 100% / 100% 1px no-repeat;
}

.nav-group + .nav-group { margin-top: 1.1rem; }

.nav-group > span {
  display: block;
  margin-bottom: 0.3rem;
  font: var(--small)/1 var(--sans);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  color: var(--bake);
}

.nav-list { margin: 0; padding: 0; list-style: none; }

.nav-list a {
  display: block;
  padding: 0.22rem 0 0.22rem 1.2rem;
  color: var(--crust);
  text-decoration: none;
}

.nav-list a::before {
  content: "\276F";
  position: absolute;
  margin-left: -1.2rem;
  color: var(--bake);
  transition: transform 0.12s;
}

.nav-list a:hover { color: var(--seed); }
.nav-list a:hover::before {
  color: var(--seed);
  transform: translateX(3px);
}

a { color: var(--crust); }
a:hover { color: var(--seed); }

.shrine-exit {
  max-width: var(--page);
  margin: 0 auto;
  padding-top: var(--gap);
  text-align: center;
  font: var(--small)/1 var(--sans);
  letter-spacing: 0.1em;
}

.shrine-exit a { color: var(--crust); text-decoration: none; }
.shrine-exit a:hover { color: var(--seed); }

@media (max-width: 42rem) {
  :root { --banner-h: 11rem; --pad: 1rem; }
  .crust h1 { font-size: 2.6rem; }
  .split { grid-template-columns: minmax(0, 1fr); }

  .split > .box { min-height: 18rem; }
  .welcome { min-height: 0; padding: calc(var(--pad) * 1.3) var(--pad); }
  .welcome h2 { font-size: 1.6rem; }
}