/* ØRIGEN — origenbooks.com */

:root {
  --bg: #25272E;
  --w100: #fff;
  --w90: rgba(255, 255, 255, .9);
  --w80: rgba(255, 255, 255, .8);
  --w75: rgba(255, 255, 255, .75);
  --w72: rgba(255, 255, 255, .72);
  --w70: rgba(255, 255, 255, .7);
  --line: rgba(255, 255, 255, .5);

  /* Adobe Fonts family first; Barlow Semi Condensed is the fallback. */
  --font: "neue-plak", "Barlow Semi Condensed", sans-serif;

  --pad-y: clamp(24px, 3.3vw, 64px);
  --pad-x: clamp(24px, 8.25vw, 300px);
  --col: clamp(0px, 15.75vw, 560px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-draw: cubic-bezier(.65, 0, .35, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.menu-lock { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--w80);
  font: 500 19px/1.5 var(--font);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, p, ul, dl, dd, figure { margin: 0; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--w100);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--w100);
  color: var(--bg);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Underline that draws in ---------- */

.u,
.sl > span,
.prose a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease);
}
a:hover > .u, a:focus-visible > .u, a.u:hover, a.u:focus-visible,
.sl:hover > span, .sl:focus-visible > span,
.prose a:hover, .prose a:focus-visible {
  background-size: 100% 1px;
}
/* Links inside running text keep a resting underline so they are not identified by colour alone. */
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(255, 255, 255, .4);
  color: var(--w90);
}
.prose a:hover, .prose a:focus-visible { text-decoration-color: transparent; }

/* ---------- Page frame ---------- */

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--pad-y) var(--pad-x);
}
.page > main { flex: 1 0 auto; }

.col { margin-left: var(--col); }

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 68px);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--w100);
}
.page > .site-head .wordmark { view-transition-name: wordmark; }

/* Wordmark hover: only the Ø takes the Enriquillo red */
.wordmark .o { transition: color .45s var(--ease); }
@media (hover: hover) {
  .wordmark:hover .o { color: #D9485C; }
}
.wordmark:focus-visible .o { color: #D9485C; }
@media (prefers-reduced-motion: reduce) { .wordmark .o { transition: none; } }

/* ☰ */
.menu-btn,
.menu-close {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--w100);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 28px;
}
.bars > span { display: block; height: 2px; background: var(--w100); }

/* ---------- Front layout (Home and menu panel) ---------- */

.front { margin-top: clamp(96px, 13vw, 300px); }

.big a {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(40px, 3.7vw, 74px);
  line-height: 1.13;
  color: var(--w90);
}

.small { margin-top: clamp(40px, 4.4vw, 88px); }

.sl {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: clamp(16px, 1.2vw, 24px);
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--w72);
}

@keyframes enter {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}

.home .front li { animation: enter .7s var(--ease) both; }
.home .big li:nth-child(1) { animation-delay: .15s; }
.home .big li:nth-child(2) { animation-delay: .25s; }
.home .big li:nth-child(3) { animation-delay: .35s; }
.home .small li:nth-child(1) { animation-delay: .50s; }
.home .small li:nth-child(2) { animation-delay: .58s; }
.home .small li:nth-child(3) { animation-delay: .66s; }

/* ---------- Menu panel ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .5s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { transform: none; }

.menu .big a { color: var(--w70); }
.menu .big a[aria-current="page"] { color: var(--w100); }

.menu.is-open .front li { animation: enter .6s var(--ease) both; }
.menu.is-open .big li:nth-child(1) { animation-delay: .22s; }
.menu.is-open .big li:nth-child(2) { animation-delay: .30s; }
.menu.is-open .big li:nth-child(3) { animation-delay: .38s; }
.menu.is-open .small li:nth-child(1) { animation-delay: .50s; }
.menu.is-open .small li:nth-child(2) { animation-delay: .56s; }
.menu.is-open .small li:nth-child(3) { animation-delay: .62s; }

/* The ✦ close control: an ornament that turns into place as the menu opens.
   At rest it sits rotated 45°, so its four points read as a quiet ×. */
.menu-close svg {
  width: 34px;
  height: 34px;
  overflow: visible;
}
.star {
  fill: var(--w100);
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
  transition: transform .5s var(--ease);
}
@keyframes star-in {
  from { opacity: 0; transform: rotate(-135deg) scale(.2); }
  to   { opacity: 1; transform: rotate(45deg) scale(1); }
}
.menu.is-open .star { animation: star-in .7s var(--ease) .3s backwards; }
@media (hover: hover) {
  .menu-close:hover .star { transform: rotate(135deg); }
}

/* ---------- Inner pages ---------- */

.inner main { padding-top: clamp(72px, 9vw, 200px); }

.title {
  font-weight: 600;
  font-size: clamp(44px, 4.4vw, 88px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--w90);
}

.site-foot {
  margin-top: clamp(72px, 7vw, 128px);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--w72);
}

.links { margin-top: clamp(32px, 3vw, 56px); }
.links li + li { margin-top: 0; }

/* Books */
.book {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.credit {
  margin-top: 18px;
  font-weight: 700;
  font-size: clamp(16px, 1.2vw, 24px);
  letter-spacing: .06em;
  line-height: 1.5;
  color: var(--w72);
}
.cover {
  width: clamp(220px, 20vw, 380px);
  margin-top: clamp(40px, 4vw, 72px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .5);
}
.book-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 48px;
  margin-top: clamp(36px, 3.4vw, 60px);
}
.site-foot.center { text-align: center; }

/* Press */
.prose { max-width: 720px; }
.prose p {
  font-size: clamp(19px, 1.4vw, 24px);
  line-height: 1.5;
  color: var(--w80);
}
.prose .title + p { margin-top: clamp(32px, 3vw, 56px); }
.prose p + p { margin-top: 1em; }

/* Inquiries */
.intro {
  max-width: 620px;
  margin-top: clamp(24px, 2.4vw, 40px);
  font-size: clamp(19px, 1.4vw, 24px);
  color: var(--w80);
}

.inq {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 56px clamp(40px, 5vw, 96px);
  margin-top: clamp(48px, 4.4vw, 80px);
}
.inq form { flex: 1 1 460px; min-width: 0; max-width: 820px; }
.contact { flex: 0 1 260px; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
}
.full { grid-column: 1 / -1; }

.label, label.label, legend, .contact dt {
  display: block;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w80);
}
.req { font-weight: 700; }

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--w100);
  font: 500 19px/1.4 var(--font);
  color-scheme: dark;
  transition: border-color .2s;
}
textarea {
  height: auto;
  min-height: 48px;
  padding: 10px 0;
  resize: vertical;
  line-height: 1.5;
}
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center / 14px 9px no-repeat;
}
select option { background: var(--bg); color: var(--w100); }
::placeholder { color: var(--line); opacity: 1; }

input:hover, select:hover, textarea:hover { border-bottom-color: var(--w80); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-bottom-color: var(--w100); }

input:-webkit-autofill {
  -webkit-text-fill-color: var(--w100);
  box-shadow: 0 0 0 100px var(--bg) inset;
  caret-color: var(--w100);
}

[aria-invalid="true"] { border-bottom: 2px solid var(--w100) !important; }
.err {
  display: block;
  margin-top: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--w90);
}
.err:empty { display: none; }
.err::before { content: "— "; }

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
fieldset.extra {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
fieldset.extra[hidden] { display: none; }
fieldset.extra > legend {
  float: left;
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  font-size: 15px;
  color: var(--w90);
}
fieldset.extra > legend + * { clear: both; }

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin-top: 6px;
}
.choice {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 19px;
  color: var(--w90);
  cursor: pointer;
}
.choice input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--w80);
  background: transparent;
  cursor: pointer;
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input:checked { background: var(--w100) content-box; padding: 3px; border-color: var(--w100); }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 40px;
}
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: 0;
  background: var(--w100);
  color: var(--bg);
  font: 700 15px/1 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s;
}
.btn:hover { background: rgba(255, 255, 255, .86); }
.btn[disabled] { cursor: progress; }
.req-note { font-size: 16px; color: var(--w75); }
.form-note {
  margin-top: 24px;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--w75);
}
.nojs-note { margin: 0 0 20px; font-size: 16px; color: var(--w75); }

.contact dl > div + div { margin-top: 28px; }
.contact dd { margin-top: 4px; color: var(--w90); }
.contact dd a { display: inline-flex; align-items: center; min-height: 44px; }

.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Phones ---------- */

@media (max-width: 599px) {
  .bars { width: 24px; gap: 6px; }
  .menu-btn, .menu-close { margin-right: -12px; }
  .menu-close svg { width: 30px; height: 30px; }

  .credit .sep { display: none; }
  .credit .tr { display: block; }

  .book-links { flex-direction: column; align-items: center; gap: 4px; }

  .grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .form-foot .btn { width: 100%; }
}

/* ---------- Page transitions ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .35s; }
::view-transition-group(wordmark) { animation-duration: .35s; }

/* ---------- Reduced motion: everything static ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .menu { transform: none; }
}