/* asharmade — websites.ashars.co.uk */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #16150f;
  --muted: #6a675d;
  --rule: #e4e1da;
  --accent: #16150f;
  --serif: "Times New Roman", Times, Georgia, serif;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }
html.locked { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.6;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-color: var(--accent); }

/* Sections ---------------------------------------------------------------- */

section {
  min-height: 100svh;
  padding: clamp(4rem, 12vh, 8rem) var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 62rem;
  margin-inline: auto;
}

.panel + .panel { border-top: 1px solid var(--rule); }

h1, h2, h3 { font-weight: 400; letter-spacing: -.01em; }

h2 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  margin-bottom: 2rem;
}

h3 { font-size: 1.15rem; margin-bottom: .5rem; }

.lead { font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); line-height: 1.25; margin-bottom: 1.5rem; }
.panel p { max-width: 42rem; margin-inline: auto; color: var(--muted); }
.panel .lead { color: var(--fg); }

.aside { font-size: .9rem; margin-top: 2rem; }

/* Hero -------------------------------------------------------------------- */

.hero { position: relative; }

.hero h1 {
  font-size: clamp(3rem, 1.5rem + 11vw, 9rem);
  line-height: 1;
  letter-spacing: -.03em;
  animation: rise .9s var(--ease) both;
}

.sub {
  color: var(--muted);
  margin-top: 1.25rem;
  animation: rise .9s .15s var(--ease) both;
}

.actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: rise .9s .3s var(--ease) both;
}

.cue {
  position: absolute;
  bottom: 2.5rem;
  font-size: .75rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
  animation: rise .9s .6s var(--ease) both, drift 2.4s 1.4s var(--ease) infinite;
}

.btn {
  font: inherit;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .75rem 2rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.actions.secondary { margin-top: .75rem; animation-delay: .4s; }

a.btn { display: inline-block; }
.btn.ghost { background: transparent; color: var(--fg); }
.btn:hover { transform: translateY(-2px); opacity: .85; }
.btn:active { transform: translateY(0); }

/* Lists ------------------------------------------------------------------- */

.grid, .work, .terms { list-style: none; padding: 0; display: grid; gap: 2rem; width: 100%; }
.grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid p { font-size: .95rem; }

.work { gap: 0; max-width: 48rem; margin-inline: auto; }
.work a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.75rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  transition: transform .4s var(--ease);
}
.work a:hover { transform: translateY(-3px); }
.name { font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.note { color: var(--muted); font-size: .9rem; }

.terms { max-width: 48rem; margin-inline: auto; }
.terms div { display: grid; gap: .35rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
.terms dt { font-size: 1.15rem; }
.terms dd { margin: 0; color: var(--muted); }

/* Form -------------------------------------------------------------------- */

.form { display: grid; gap: 1.25rem; width: 100%; max-width: 36rem; margin: 2rem auto 0; }
.form label { display: grid; gap: .4rem; }
.form span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.form em { font-style: normal; opacity: .6; }

input, textarea {
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: .6rem 0;
  border-radius: 0;
  text-align: center;
  resize: vertical;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .5; }
input:focus, textarea:focus { outline: 0; border-color: var(--accent); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 34rem) { .row { grid-template-columns: 1fr; } }

.form .btn { justify-self: center; margin-top: .5rem; }
.hp { position: absolute; left: -9999px; }

/* Footer ------------------------------------------------------------------ */

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  max-width: 62rem;
  margin-inline: auto;
  padding: 2rem var(--pad) 3rem;
  border-top: 1px solid var(--rule);
  font-size: .85rem;
  color: var(--muted);
}

/* Motion ------------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.4rem); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}