/* Editorial homepage */
.editorial {
  --edge: clamp(32px, 5.55vw, 88px);
  --serif: var(--display);
  --sans: "Instrument Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.52;
}

.editorial main { min-width: 0; }
.editorial main p:not(.label) { color: var(--muted); }
.editorial main :is(h1, h2, h3) { font: 400 39px/.97 var(--serif); letter-spacing: -.028em; }
.editorial main h2 { font-size: clamp(48px, 5.25vw, 78px); }
.editorial .hero-copy h1 { text-wrap: wrap; font-size: clamp(71px, 7.8vw, 123px); margin: 13px 0 19px; }
.editorial .intro { font-size: 20px; line-height: 1.42; max-width: 36ch; }

.label { font-size: 11px; font-weight: 700; letter-spacing: .145em; text-transform: uppercase; color: var(--accent); line-height: 1.4; }
.label+h2 { margin-top: 10px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; width: fit-content; font-size: 14px; font-weight: 700; line-height: 1.28; }
.button { background: var(--accent); color: var(--button-ink); padding: 13px 16px; min-height: 46px; border: 1px solid var(--accent); }
.button-outline { background: transparent; color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 22px; margin-top: 22px; }
.header-end { display: flex; align-items: center; }
.logo { display: inline-block; flex: none; }
.section-line { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; }
.head { position: relative; z-index: 1; align-items: center; padding-inline: var(--edge); border-bottom: 1px solid var(--rule); }
.head .logo { width: 93px; }
.ed-hero { display: flex; align-items: center; padding: 38px var(--edge); }
.ed-hero h1 em { white-space: nowrap; }
.ed-work { color: var(--callout-ink); background: var(--callout); }
.editorial .ed-work .label, .editorial .ed-work p:not(.label) { color: var(--callout-muted); }
.ed-services { padding: 39px var(--edge) 44px; }
.scene{isolation:isolate;position:relative}
.scene::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--scene);pointer-events:none}
.contact{color:var(--callout-ink);padding:40px var(--edge);display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--callout);--scene:linear-gradient(90deg,var(--callout) 9%,color-mix(in srgb,var(--callout) 79%,transparent) 53%,color-mix(in srgb,var(--callout) 44%,transparent)),var(--stationery-photo, url('/assets/editorial/contact-atelier.webp')) center 56% / cover}
.editorial .contact h2{margin:7px 0 10px;font-size:clamp(50px,6.35vw,92px)}
.contact p{max-width:50ch}
.contact .label,.editorial .contact p:not(.label){color:var(--callout-muted)}
.contact-actions{flex-shrink:0;display:grid;justify-items:start;gap:9px}
.contact .button{background:var(--callout-btn);color:var(--callout-btn-ink);border-color:var(--callout-btn)}
.service-link{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--accent);font-weight:700;font-size:15px;border-bottom:1px solid var(--rule);padding:8px 0}
.offer-spread{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--rule)}
.offer-spread article{padding:17px clamp(12px,2.8vw,40px) 4px;border-left:1px solid var(--rule);display:flex;flex-direction:column;align-items:start}
.offer-spread article:first-child{border-left:0;padding-left:0}
.editorial .offer-spread h3{font-size:clamp(29px,3.45vw,53px);margin:9px 0 8px}
.offer-spread article>p:not(.label){margin:0 0 6px}
.offer-spread .button-outline{margin-top:auto}

.ed-work{
  --scene:linear-gradient(120deg,color-mix(in srgb,var(--callout) 57%,transparent),color-mix(in srgb,var(--paper) 19%,transparent) 58%,color-mix(in srgb,var(--callout) 63%,transparent)),url(/assets/editorial/web-vellum.webp) center / cover;
  padding:42px var(--edge) 41px;
}
.ed-work .section-line{padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:22px}
.editorial .ed-work .section-line h2{font-size:clamp(58px,6.45vw,94px);margin-top:8px}
.ed-work h2 em{color:var(--callout-btn)}
.folio-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:24px clamp(16px,2.6vw,36px)}
.folio-item{min-width:0;border-bottom:1px solid var(--rule);padding-bottom:12px}
.folio-info{display:grid;grid-template-columns:1fr auto;gap:9px;padding:12px 0 0}
.editorial .folio-info h3{margin:3px 0 5px;font-size:clamp(29px,3.4vw,49px)}
.folio-info p:not(.label){font-size:14px}
.folio-arrow{display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding-inline:.6rem;border:1px solid var(--rule);font-size:.8rem;font-weight:650;color:var(--callout-ink);align-self:center}

.ed-head{
  display:grid;grid-template-columns:minmax(max-content,1fr) minmax(390px,570px) minmax(max-content,1fr);
  gap:18px;padding-block:10px;
  background:linear-gradient(108deg,var(--panel),var(--paper) 53%,var(--band));
}
.ed-head .header-end{justify-self:end;gap:10px}
.ed-head .desktop-nav{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:0;padding:3px;
  border:1px solid var(--rule);background:var(--panel);
}
.ed-head .desktop-nav a{
  display:grid;place-items:center;min-height:40px;padding:0 4px;
  font:650 14px/1.1 var(--sans);white-space:nowrap;
}
.ed-head nav a[aria-current="page"]{
  background:var(--selected);color:var(--accent);
  text-decoration:underline;text-underline-offset:.34em;text-decoration-thickness:1.5px;
}
.ed-head .theme,.ed-head .button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;min-height:43px;
}
.ed-head .theme{border:1px solid var(--rule);background:var(--panel);color:var(--ink);padding-inline:10px}
.ed-head .theme [aria-hidden]{font-size:15px;color:var(--accent)}
.ed-head .button{padding:9px 13px}

.folio-spread{
  --browser-frame:#f6f0e7;
  --browser-rim:#ad8f9580;
  --browser-bar-top:#fff9f1;
  --browser-bar-bottom:#f0e3dd;
  --browser-bar-rule:#ad8f9559;
  --browser-bar-ink:#5e4651;
  --browser-field:#fff9f1;
  --browser-field-rule:#ad8f9538;
  --browser-dot:#7d294a;
  --phone-metal:#ad8f95;
  --phone-metal-dark:#26171f;
  --phone-metal-shadow:#2d1b24;
  --phone-button:#896773;
  --phone-bezel:#26171f;
  --phone-glass:#fff9f1;
  --phone-screen:#f6f0e7;
  --phone-camera:#26171f;
  --phone-indicator:#26171f;
}
[data-theme=dark] .folio-spread{
  --browser-frame:#2e252e;
  --browser-rim:#a08592;
  --browser-bar-top:#43373f;
  --browser-bar-bottom:#2e252e;
  --browser-bar-rule:#d9bec83b;
  --browser-bar-ink:#e8d8dd;
  --browser-field:#231a23;
  --browser-field-rule:#d9bec83b;
  --browser-dot:#e48b9d;
  --phone-metal:#6e5766;
  --phone-metal-dark:#211820;
  --phone-metal-shadow:#181218;
  --phone-button:#6e5766;
  --phone-bezel:#100c10;
  --phone-glass:#2e252e;
  --phone-screen:#231a23;
  --phone-camera:#100c10;
  --phone-indicator:#d9bec8;
}
.folio-item{--board-light:var(--band);--board-dark:var(--selected)}
.folio-cedar-and-stripe{--board-light:var(--paper);--board-dark:var(--selected)}
.folio-merit-and-maple{--board-light:var(--band);--board-dark:var(--stage-floor)}
.folio-forma-house{--board-light:var(--paper);--board-dark:var(--band)}
.folio-item .folio-visual{
  display:block;position:relative;min-height:0;aspect-ratio:1.54;padding:0;
  background:linear-gradient(135deg,var(--board-light),var(--board-dark));
  border:1px solid var(--rule);box-shadow:inset 0 0 35px color-mix(in srgb,var(--callout) 11%,transparent);
}
[data-theme=dark] .folio-item .folio-visual{
  background:linear-gradient(135deg,var(--board-dark),var(--board-light));
}
.folio-item .folio-window{
  position:absolute;display:block;left:7%;top:48%;transform:translateY(-50%);
  width:79%;max-height:none;margin:0;overflow:hidden;
  border:1px solid var(--browser-rim);border-radius:clamp(5px,.68vw,10px);
  background:var(--browser-frame);
  box-shadow:0 19px 30px #2d1b2447,0 4px 7px #2d1b2430;
}
.browser-bar{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(5px,1vw,11px);height:clamp(14px,2vw,27px);
  padding:0 clamp(5px,1vw,11px);
  border-bottom:1px solid var(--browser-bar-rule);
  background:linear-gradient(180deg,var(--browser-bar-top),var(--browser-bar-bottom));
  color:var(--browser-bar-ink);
}
.browser-dots{display:flex;gap:clamp(2px,.28vw,4px)}
.browser-dots i{
  display:block;width:clamp(3px,.49vw,7px);aspect-ratio:1;border-radius:50%;
  background:var(--browser-dot);
}
.browser-dots i:nth-child(2){background:#ad8f95}
.browser-dots i:nth-child(3){background:#c0988f}
.browser-address{
  display:block;width:68%;height:49%;justify-self:center;
  background:var(--browser-field);border-radius:50px;border:1px solid var(--browser-field-rule);
}
.browser-more{font-size:12px;font-weight:700;letter-spacing:.12em;line-height:.7}
.browser-page{overflow:hidden}
.folio-window .browser-page img{display:block;width:100%;height:auto;max-height:none}
.folio-forma-house .browser-page{position:relative;aspect-ratio:1126 / 654}
.folio-forma-house .browser-page img{
  position:absolute;width:113.68%;max-width:none;left:-6.84%;top:-18.04%;
}
.device{
  position:absolute;z-index:1;right:6%;bottom:9%;width:20%;max-width:139px;aspect-ratio:1 / 2.07;
  padding:clamp(3px,.5vw,6px);border:1px solid var(--phone-metal);border-radius:20% / 9.6%;
  background:linear-gradient(142deg,var(--phone-metal) 0%,var(--phone-metal-dark) 26%,var(--phone-metal-shadow) 71%,var(--phone-metal) 100%);
  box-shadow:0 11px 22px #2d1b246b,0 2px 5px #2d1b245e;
}
.device::before,.device::after{
  content:"";position:absolute;width:2px;border-radius:3px;background:var(--phone-button);
}
.device::before{left:-2px;top:24%;height:13%}
.device::after{right:-2px;top:29%;height:10%}
.device-glass{
  position:relative;height:100%;overflow:hidden;border-radius:17% / 8%;
  background:var(--phone-glass);box-shadow:0 0 0 1px var(--phone-bezel);
}
.device-status{
  position:relative;height:9%;background:var(--phone-glass);
}
.device-camera{
  position:absolute;left:50%;top:30%;width:30%;height:39%;transform:translateX(-50%);
  border-radius:20px;background:var(--phone-camera);
}
.device-content{position:relative;height:87%;overflow:hidden;background:var(--phone-screen)}
.device-content img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.device-home{width:34%;height:1.2%;margin:2% auto 0;border-radius:15px;background:var(--phone-indicator)}
.folio-forma-house .device-content img{
  position:absolute;max-width:none;width:179.8%;height:134.5%;top:-20.5%;left:-39.6%;object-fit:fill;
}
@media(max-width:800px){
  .ed-head{grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:7px var(--edge) 9px}
  .ed-head .header-end{gap:5px}
  .ed-head .theme,.ed-head .button{min-height:39px;padding-inline:8px}
  .ed-head .theme{gap:4px;font-size:11px}
  .ed-head .theme [aria-hidden]{font-size:12px}
  .ed-head .button{font-size:12px}
  .folio-item .folio-visual{height:auto;aspect-ratio:1.47}
  .folio-item .folio-window{top:46%}
  .device{width:21%;max-width:160px}
}
@media(max-width:345px){
  .ed-head .logo{width:63px}
  .ed-head .button{padding-inline:7px}
}

/* Final Editorial homepage details */
.ed-identity{display:flex;align-items:center;gap:clamp(10px,1.5vw,22px);min-width:0}
.ed-identity>span{
  border-left:1px solid var(--rule);padding-left:clamp(9px,1.35vw,19px);
  color:var(--muted);font-size:11px;font-weight:650;line-height:1.35;
}

.editorial .ed-hero {
  --hero-photo: url(/assets/editorial/web-studio-flat.webp);
  background: var(--paper);
  min-height: clamp(470px, 43vw, 655px);
}

[data-theme=dark] .editorial .ed-hero {
  --hero-photo: url(/assets/editorial/web-studio-slate.webp);
}
.editorial .ed-hero::before{
  inset:0 0 0 24%;
  background:
    linear-gradient(90deg,var(--paper),color-mix(in srgb,var(--paper) 92%,transparent) 14%,transparent 48%),
    var(--hero-photo) right 53% / cover no-repeat;
}
.ed-hero .hero-copy{width:min(100%,740px)}
.editorial .ed-hero h1{line-height:1.04}

.folio-item .browser-page{aspect-ratio:1126 / 654}
.folio-item:not(.folio-forma-house) .browser-page img{height:100%;object-fit:cover;object-position:top}

.ed-work .translucent,.ed-services .translucent{
  min-height:49px;padding:10px 16px;font-size:15px;align-self:end;
  border-color:var(--rule);white-space:nowrap;
  background:color-mix(in srgb,var(--panel) 70%,transparent);color:var(--accent);
}
.ed-work .translucent{
  background:color-mix(in srgb,var(--callout-btn) 16%,transparent);
  color:var(--callout-ink);border-color:color-mix(in srgb,var(--callout-ink) 46%,transparent);
}
.ed-services{
  --scene:linear-gradient(98deg,color-mix(in srgb,var(--paper) 91%,transparent),color-mix(in srgb,var(--paper) 96%,transparent) 53%,color-mix(in srgb,var(--paper) 97%,transparent)),var(--materials-photo, url('/assets/editorial/website-grid.webp')) right 56% / cover;
}
.ed-services .offer-spread article:last-child{
  background:linear-gradient(105deg,transparent,color-mix(in srgb,var(--panel) 46%,transparent));
}
.editorial .ed-services .offer-spread article>p:not(.label){color:var(--ink);opacity:.86}

.ed-about{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:stretch;
  gap:clamp(20px,4.5vw,65px);padding:clamp(26px,4.1vw,59px) var(--edge);
  border-top:1px solid var(--rule);background:linear-gradient(114deg,var(--band),var(--paper) 63%,var(--panel));
}
.ed-about figure{position:relative;overflow:hidden;min-height:305px;margin:0}
.ed-about figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 53%}
.ed-about-copy{align-self:center;padding-block:4px}
.ed-about-copy h2{margin:7px 0 13px}
.ed-about-copy p:not(.label){max-width:48ch;margin-bottom:11px}
.ed-about-copy .service-link{width:fit-content;margin-top:4px;padding:5px 0 8px}

@media(max-width:800px){
  .ed-identity>span{display:none}
  .editorial .ed-hero{
    --hero-photo-height:clamp(175px,52vw,320px);
    min-height:0;padding:21px var(--edge) calc(var(--hero-photo-height) + 2px);
  }
  .editorial .ed-hero::before,
  [data-theme=dark] .editorial .ed-hero::before{
    inset:auto 0 0;height:var(--hero-photo-height);
    background:
      linear-gradient(180deg,color-mix(in srgb,var(--paper) 13%,transparent),transparent 78%),
      var(--hero-photo) right 45% / cover no-repeat;
    mask-image:linear-gradient(180deg,transparent,#000 25%);
  }
  .ed-hero .actions{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    width:min(100%,25rem);gap:8px;align-items:stretch;margin-block-start:16px;
  }
  .ed-hero .actions a{
    width:100%;min-height:46px;padding:8px clamp(7px,2.4vw,13px);
    gap:6px;font-size:clamp(12px,3.35vw,14px);line-height:1.15;
  }
  .folio-spread{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .ed-work .translucent,.ed-services .translucent{min-height:45px;font-size:14px;align-self:start;padding-inline:12px}
  .ed-about{grid-template-columns:minmax(0,1fr);gap:15px;padding:24px var(--edge)}
  .ed-about figure{min-height:0;aspect-ratio:1.85;grid-row:2}
  .ed-about-copy h2{margin-block:5px 9px}
}
@media(max-width: 560px) {
  .editorial .ed-hero { --hero-photo: url(/assets/editorial/web-studio-flat-mobile.webp); }
  [data-theme=dark] .editorial .ed-hero { --hero-photo: url(/assets/editorial/web-studio-slate-mobile.webp); }
}
@media (min-width:801px) and (max-width:980px){
  .ed-head{grid-template-columns:minmax(0,1fr) minmax(350px,1.8fr) auto;gap:12px}
  .ed-head .logo{width:76px}
  .ed-head .desktop-nav a{padding-inline:2px;font-size:13px}
  .ed-identity>span{display:none}
}
@media (min-width: 801px) {
  .editorial .ed-hero::before {
    mask-image: linear-gradient(90deg, transparent 2%, #000 14%);
  }

  [data-theme=dark] .editorial .ed-hero::before {
    /* The slate wall carries the transition. The mask blends only its left edge. */
    background: var(--hero-photo) right 53% / cover no-repeat;
    mask-image: linear-gradient(90deg, transparent 2%, #000 17%);
  }
}

.ed-head nav a:hover, .ed-head .theme:hover { background: var(--selected); }
.ed-head .theme { padding-block: 0; border-radius: 0; }
.editorial .button:hover { box-shadow: inset 0 0 0 1px currentColor; }
.folio-demo { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .18rem 0; border: 0; background: transparent; color: var(--callout-muted); font-size: .84rem; font-weight: 650; text-align: left; text-decoration: underline; text-underline-offset: .22em; }
.editorial :is(.ed-work,.contact) :focus-visible { outline-color: var(--callout-ink); }
.folio-arrow:hover { background: color-mix(in srgb, var(--callout-btn) 16%, transparent); }

@media (max-width: 800px) {
  .editorial { --edge: 16px; font-size: 15px; }
  .head .logo { width: 71px; }
  .editorial main h2 { font-size: clamp(38px, 10vw, 57px); }
  .editorial .ed-hero h1 { font-size: clamp(39px, 12.7vw, 78px); margin: 9px 0 13px; }
  .editorial .intro { font-size: 16px; }
  .label { font-size: 10px; }
  .button { font-size: 13px; gap: 8px; }
  .button { min-height: 43px; padding: 9px 12px; }
  .section-line { display: grid; gap: 7px; margin-bottom: 12px; }
  .contact { flex-direction: column; align-items: start; padding: 23px var(--edge); gap: 11px; }
  .editorial .contact h2 { font-size: clamp(43px, 12vw, 58px); }
  .contact h2 br { display: none; }
  .contact::before { background-position: 66% center; }
  .service-link { font-size: 14px; }
  .ed-hero { display: block; }
  .ed-work { padding: 22px var(--edge) 25px; }
  .ed-services { padding: 22px var(--edge); }
  .ed-work .section-line { padding-bottom: 10px; margin-bottom: 14px; }
  .editorial .ed-work .section-line h2 { font-size: clamp(44px, 12vw, 71px); }
  .folio-spread { gap: 14px; }
  .folio-info { padding-top: 8px; }
  .editorial .folio-info h3 { font-size: 34px; }
  .offer-spread { grid-template-columns: 1fr; }
  .offer-spread article { border-left: 0; border-bottom: 1px solid var(--rule); padding: 11px 0; }
  .offer-spread article:last-child { border-bottom: 0; padding-bottom: 0; }
  .editorial .offer-spread h3 { margin: 5px 0; font-size: 33px; }
}
@media (max-width: 345px) {
  .head .logo { width: 63px; }
}

@media (min-width: 901px) and (max-width: 1150px) {
  .ed-head { grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; }
  .ed-identity > span { display: none; }
}

@media (max-width: 900px) {
  .ed-head { grid-template-columns: minmax(0,1fr) auto; gap: .5rem; padding-block: 7px; z-index: 2; }
  .ed-head .desktop-nav, .ed-head .header-end > .button { display: none; }
  .ed-head .header-end { gap: .32rem; }
  .ed-head .theme { min-block-size: 44px; }
  .ed-head .mobile-nav { display: block; position: static; }
  .ed-head .mobile-nav summary { display: flex; align-items: center; gap: .55rem; min-block-size: 44px; background: var(--panel); list-style: none; }
  .ed-head .mobile-nav summary::-webkit-details-marker { display: none; }
  .ed-head .mobile-nav summary::after {
    content: "";
    inline-size: .4rem;
    block-size: .4rem;
    border-right: 1.5px solid;
    border-bottom: 1.5px solid;
    transform: translateY(-.1rem) rotate(45deg);
  }
  .ed-head .mobile-nav[open] summary::after { transform: translateY(.07rem) rotate(225deg); }
  .ed-head .mobile-nav nav {
    position: absolute;
    inset: 100% 0 auto;
    padding: .4rem var(--edge) .7rem;
    border-bottom: 1px solid var(--rule);
    background: var(--panel);
    box-shadow: 0 16px 30px #26171f30;
  }
  .ed-head .mobile-nav nav a {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-block-size: 44px;
    padding: .4rem .7rem;
    font-size: .88rem;
    font-weight: 650;
  }
  .ed-head .mobile-nav nav a + a { border-top: 1px solid var(--rule); }
  .ed-head .mobile-project-link { margin-block-start: .35rem; background: var(--accent); color: var(--button-ink); }
  .ed-head .mobile-project-link:hover { background: var(--ink); color: var(--paper); }
}