/* MGnetic's existing world, with the kit's editorial scale and a working preview before the story.
   Cappen: type leads. Obys: explicit alignment. Null: space between decisions. No borrowed art. */
.hero { min-height: 760px; }
.hero__copy { right: var(--gr); bottom: 76px; max-width: none; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .66fr); column-gap: 8vw; align-items: end; }
.hero__meta { grid-column: 1 / -1; font-size: 13px; letter-spacing: .015em; color: var(--fg60); margin-bottom: 30px; }
.hero__copy .h1 { grid-column: 1; grid-row: 2 / span 2; font-size: clamp(64px, 8.4vw, 132px); line-height: .91; letter-spacing: -.04em; }
.hero__accent { color: var(--amber); }
.hero__sub { grid-column: 2; grid-row: 2; max-width: 30ch; font-size: 18px; margin: 0; padding-top: 20px; border-top: 1px solid var(--line2); }
.hero__cta { grid-column: 2; grid-row: 3; margin-top: 28px; gap: 20px; padding-bottom: 8px; }
.hero__mark { height: min(30vh, 290px); right: var(--gr); top: max(15vh, 116px); }
.hint { bottom: auto; top: max(49vh, 380px); right: var(--gr); font-size: 12px; }
.layouts { --fg: #20201b; --fg80: #393930; --fg60: #57574d; --fg40: #66665b; --line: rgba(32,32,27,.15); --line2: rgba(32,32,27,.26); background: #e9e8e1; color: var(--fg); padding-top: 96px; padding-bottom: 96px; min-height: 100svh; display: grid; align-content: center; }
.layouts__grid { width: 100%; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6vw; }
.layouts .h2 { font-size: clamp(42px, 5.2vw, 78px); line-height: .98; max-width: 12ch; }
.layouts .lst { margin-top: 30px; }
.layouts .lst button { padding: 12px 0; min-height: 48px; }
.layouts .lst b { font-size: 20px; }
.layouts .lst button[aria-pressed="true"] i { background: #9d4d00; box-shadow: 0 0 0 4px rgba(157,77,0,.12); }
.layouts .lst button:hover, .layouts .tlink:hover { color: #11110f; }
.layouts .win { --fg: #ecebe6; --fg60: #b9b8b0; --line: rgba(236,235,230,.12); --line2: rgba(236,235,230,.22); color: var(--fg); background: #20201b; border-radius: 10px; box-shadow: 0 24px 48px -28px rgba(17,17,15,.45); rotate: none; translate: none; }
.layouts .win__body { padding: 16px; }
.layouts .win__note { color: var(--fg60); }
.layouts .pz { width: 44px; height: 44px; margin-top: -6px; margin-bottom: -6px; }
.layouts :focus-visible { outline-color: #8a4300; }
.layouts .label { color: var(--fg60); }
/* the picker's headline is real words, set at the height of the bar it replaces; its picture is real where one exists */
.pv--real .b-h { background: none; border-radius: 0; color: var(--c, var(--pink)); font: 500 calc(var(--hn, 7.5) * .625cqw * 1.16)/.9 var(--font, inherit); font-style: normal; letter-spacing: -.04em; white-space: nowrap; overflow: visible;
  transition: translate .72s var(--snap), font-size .72s var(--snap), color .4s, opacity .35s, transform .3s ease-out; }
.pv--real[data-l="centred"] .b-h { text-align: center; }
.pv--real .b-pic { background-size: cover; background-position: top center; }
.pv--real.has-pic .b-pic::before, .pv--real.has-pic .b-pic::after { display: none; }
.pv--real.has-pic[data-l="centred"] .b-pic { -webkit-mask: none; mask: none; --r: 8px 8px 0 0; }
.teaser { padding-top: 100px; padding-bottom: 100px; }
.teaser .head { align-items: end; margin-bottom: 64px; }
.teaser .h2 { max-width: 15ch; }
.teaser .svc a { padding: 28px 0; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; }
.teaser .svc h3 { font-size: clamp(24px, 3vw, 42px); translate: none; }
.brief { border-top: 1px solid var(--line); padding-top: 100px; }
.brief .qb { border-radius: 12px; grid-template-rows: auto auto 1fr auto; }
.qb__foot { margin-top: 24px; }
.brief .est { border-radius: 12px; box-shadow: none; }
.brief .tile, .brief .qf input, .brief .qf textarea { border-radius: 8px; }
.qb__modes { display: flex; gap: 4px; flex-wrap: wrap; padding-bottom: 22px; }
.qb__modes button { font: inherit; font-size: 14px; padding: 11px 15px; border: 1px solid var(--line2); border-radius: 6px; background: transparent; color: var(--fg60); cursor: pointer; }
.qb__modes button[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.qb__draft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--fg60); font-size: 12px; }
.qb__draft button { background: none; border: none; color: inherit; text-decoration: underline; text-underline-offset: 4px; font: inherit; padding: 12px 0; cursor: pointer; }
.qb__draft button[hidden] { display: none; }
.qb__recovery { display: flex; flex-wrap: wrap; gap: 10px; }
.qb__modes[hidden] { display: none; }
.recent { padding-top: 20px; padding-bottom: 100px; }
.recent .head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; padding-top: 48px; margin-bottom: 40px; border-top: 1px solid var(--line); }
.recent__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); }
.recent__grid a { display: grid; gap: 6px; text-decoration: none; }
.recent__grid img { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--line2); margin-bottom: 12px; transition: translate .5s var(--out); }
.recent__grid a:hover img { translate: 0 -4px; }
.recent__grid b { font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; letter-spacing: -.02em; }
.recent__grid span { color: var(--fg60); }
@media (max-width: 699px) { .recent { padding-top: 0; padding-bottom: 72px; } .recent .head { padding-top: 36px; margin-bottom: 28px; } .recent__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 1099px) and (min-width: 900px) {
  .hero__copy { column-gap: 4vw; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .hero__copy .h1 { font-size: 8vw; }
  .hero__sub { font-size: 16px; }
  .hero__mark { height: 25vh; }
  .hint { top: 44vh; }
}
@media (max-width: 899px) {
  .hero { min-height: 800px; }
  .hero__copy { display: block; bottom: 36px; }
  .hero__meta { font-size: 12px; margin-bottom: 22px; }
  .hero__copy .h1 { font-size: clamp(54px, 10.7vw, 86px); }
  .hero__sub { max-width: 42ch; margin-top: 26px; border: 0; padding: 0; font-size: 16px; }
  .hero__cta { margin-top: 24px; padding: 0; }
  .hero__mark { top: 110px; height: min(20vh, 170px); right: var(--gr); translate: 0 calc(var(--hp, 0) * -10vh); }
  .hero[data-sda] .hero__mark { translate: 0 0; animation-name: refinement-mark-mobile; }
  @keyframes refinement-mark-mobile { from { translate: 0 0; } to { translate: 0 -10vh; scale: .88; opacity: .3; } }
  .hint { top: 128px; left: var(--gx); right: auto; max-width: 16ch; text-align: left; font-size: 11px; }
  .layouts { padding-top: 72px; padding-bottom: 72px; }
  .layouts__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .layouts .lst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .layouts .lst button { grid-template-columns: 18px minmax(0, 1fr); gap: 8px; border-top: 0; min-height: 48px; }
  .layouts .lst .n2 { display: none; }
  .layouts .win__note { display: block; }
  .teaser, .brief { padding-top: 72px; padding-bottom: 72px; }
  .teaser .head { margin-bottom: 32px; }
  .teaser .svc a { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; }
  .teaser .svc p { grid-column: 1; grid-row: 2; display: block; max-width: 36ch; }
  .teaser .svc .ar { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 399px) {
  .hero { min-height: 820px; }
  .hero__copy .h1 { font-size: 15vw; }
  .hero__cta { gap: 16px; }
  .hero__mark { height: 140px; }
  .hint { font-size: 10px; max-width: 14ch; }
  .qb__modes button { padding: 11px 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__copy, .hero__mark { opacity: 1; scale: 1; translate: none; }
}