/*
Theme Name: Megan Socha
Theme URI: https://www.megansocha.com/
Author: Megan Socha
Description: Single-page portfolio theme recreating the Squarespace design of megansocha.com. Page content is ordinary block-editor content, so text and links are edited in Pages > Home.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: megan-socha
*/

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-garamond-500-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/eb-garamond-400-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/eb-garamond-400-italic.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/eb-garamond-600-normal.woff2) format("woff2")}

:root{
  --ms-bg:#F8DFDB;
  --ms-red:#FC221C;
  --ms-ink:#000;
  --ms-display:"Cormorant Garamond","Orpheus Pro",Georgia,serif;
  --ms-body:"EB Garamond","Adobe Garamond Pro",Garamond,Georgia,serif;
  --ms-gutter:clamp(22px,8.5vw,146px);
  --ms-measure:1050px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ms-bg);color:var(--ms-ink);font-family:var(--ms-body);font-size:clamp(17px,1.2vw + 2px,19.4px);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ms-red);color:#fff;padding:14px 24px;font-family:var(--ms-display);z-index:100;text-decoration:none}
.skip-link:focus{left:12px;top:12px}

/* Header */
.ms-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:42px var(--ms-gutter) 30px}
.ms-site-title{margin:0;font-family:var(--ms-display);font-weight:500;font-size:clamp(26px,2vw + 6px,33px);line-height:1.1}
.ms-site-title a{color:var(--ms-red);text-decoration:none}
.ms-nav{display:flex;align-items:center;gap:28px}
.ms-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.ms-nav a{color:var(--ms-ink);text-decoration:none;font-size:19.4px}
.ms-nav .current-menu-item>a,.ms-nav a[aria-current="page"],.ms-nav a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ms-social{display:inline-flex;color:var(--ms-ink)}
.ms-social svg{width:20px;height:20px;fill:currentColor;display:block}

/* Main column */
.ms-main{padding:0 var(--ms-gutter)}
.ms-main>.ms-content>*{max-width:var(--ms-measure)}
.ms-content h1,.ms-content h2,.ms-content h3,.ms-content h4{font-family:var(--ms-display);font-weight:500;color:var(--ms-red);margin:0 0 .5em}
.ms-content h1{font-size:clamp(38px,3.3vw + 14px,66px);line-height:1.23}
.ms-content h2{font-size:clamp(28px,2.2vw + 10px,46px);line-height:1.3}
.ms-content h3{font-size:clamp(26px,1.6vw + 10px,36px);line-height:1.33}
.ms-content h4{font-size:clamp(18px,.6vw + 10px,19.4px);line-height:1.39;letter-spacing:.01em}
.ms-content h1 a,.ms-content h2 a,.ms-content h3 a,.ms-content h4 a{color:inherit;text-decoration:none}
.ms-content h1 a:hover,.ms-content h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.ms-content p{margin:0 0 1.15em}
.ms-content p a{color:var(--ms-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ms-content p a:hover{color:var(--ms-red)}
.ms-content strong{font-weight:600}

/* Sections */
/* First screen: header overlays the hero, and the hero fills exactly one
   viewport, so the H1 is the only content above the fold. */
body{position:relative}
.ms-header{position:absolute;top:0;left:0;right:0;z-index:10}
.admin-bar .ms-header{top:32px}
.ms-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 60px}
.admin-bar .ms-hero{min-height:calc(100vh - 32px);min-height:calc(100svh - 32px)}
.ms-hero h1{margin:0}
.ms-lede-wrap{padding:clamp(60px,10vh,120px) 0 0}
.ms-intro{padding:clamp(30px,6vh,80px) 0 clamp(40px,8vh,110px)}
.ms-intro h3{margin-bottom:.9em}
.ms-work{padding:clamp(20px,4vh,60px) 0}
.ms-entry.wp-block-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(28px,3.2vw,34px);margin:0 0 clamp(56px,8vh,90px);align-items:start}
.ms-entry .wp-block-column{min-width:0}
.ms-entry h3{margin-bottom:.15em}
.ms-entry h4{margin:0 0 1em}
.ms-contact{padding:clamp(70px,14vh,170px) 0 clamp(50px,9vh,110px)}
.ms-contact h1{margin:0}
.ms-links{padding:0 0 clamp(60px,10vh,110px)}
.ms-links h3{margin:0 0 .25em}

/* Generic pages and posts (if any are added later) */
.ms-page-title{margin-top:clamp(40px,8vh,90px)}

.ms-footer{padding:30px var(--ms-gutter) 40px;font-size:15px;color:rgba(0,0,0,.55)}

@media (max-width:781px){
  .ms-header{padding-top:28px;padding-bottom:20px}
  .ms-nav,.ms-nav ul{gap:18px}
  .ms-entry.wp-block-columns{grid-template-columns:minmax(0,1fr)}
  .ms-entry h4{margin-bottom:.8em}
  .ms-hero{padding-top:100px;padding-bottom:40px}
}