/*
Theme Name: Joe Pirrotta
Theme URI: https://joepirrotta.com
Author: Joe Pirrotta
Description: Minimal two-page theme built around the Gunks ridgeline mark. Forest and lime, Archivo Black, no dependencies.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: joe-pirrotta
*/

    :root{--forest:#0C2C01; --lime:#A8CB65; --lime-80:#89AB51; --lime-60:#6A8B3D;}
    *{box-sizing:border-box}
    html{-webkit-text-size-adjust:100%}
    body{margin:0; min-height:100vh; background:var(--forest); color:var(--lime);
      font-family:'Archivo',system-ui,-apple-system,sans-serif;
      display:flex; flex-direction:column; padding:0 clamp(20px,5vw,74px);
      -webkit-font-smoothing:antialiased}
    a{color:inherit; text-decoration:none}
    .black{font-family:'Archivo Black','Archivo',system-ui,sans-serif; font-weight:400}
    .tag{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px;
      letter-spacing:.13em; text-transform:uppercase}
    .skip{position:absolute; left:-9999px}
    .skip:focus{left:clamp(20px,5vw,74px); top:12px; background:var(--lime);
      color:var(--forest); padding:10px 16px; font-weight:700; z-index:10}
    header{display:flex; justify-content:space-between; align-items:baseline;
      gap:16px; padding:24px 0 0; flex-wrap:wrap}
    .ridge{width:100%; max-width:780px; display:block}
    .ridge svg{width:100%; height:auto; display:block}

    /* ---- accordion doors ---- */
    .door{border-top:2px solid var(--lime)}
    .doors .door:last-child{border-bottom:2px solid var(--lime)}
    .door-btn{width:100%; background:none; border:0; margin:0; color:inherit;
      font:inherit; text-align:left; cursor:pointer;
      padding:20px 4px 18px; display:flex; align-items:center; gap:16px;
      transition:padding-left 160ms ease}
    .door-btn:hover{padding-left:14px}
    .door-btn:focus-visible{outline:3px solid var(--lime); outline-offset:-3px}
    .door-num{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px;
      letter-spacing:.1em; color:var(--lime-80)}
    .door-name{font-family:'Archivo Black',system-ui,sans-serif;
      font-size:clamp(24px,3.2vw,38px); line-height:1; letter-spacing:-.028em;
      text-transform:uppercase}
    .door-sign{margin-left:auto; flex:none; position:relative; width:20px; height:20px;
      color:var(--lime-80); transition:color 160ms ease, transform 320ms cubic-bezier(.4,0,.2,1)}
    .door-btn:hover .door-sign{color:var(--lime)}
    .door-sign::before,.door-sign::after{content:""; position:absolute; background:currentColor;
      left:50%; top:50%; border-radius:1px}
    .door-sign::before{width:18px; height:2.5px; transform:translate(-50%,-50%)}
    .door-sign::after{width:2.5px; height:18px; transform:translate(-50%,-50%);
      transition:opacity 200ms ease, transform 320ms cubic-bezier(.4,0,.2,1)}
    .door-btn[aria-expanded="true"] .door-sign{transform:rotate(180deg)}
    .door-btn[aria-expanded="true"] .door-sign::after{opacity:0; transform:translate(-50%,-50%) rotate(90deg)}

    .panel{display:grid; grid-template-rows:0fr;
      transition:grid-template-rows 340ms cubic-bezier(.4,0,.2,1)}
    .door-btn[aria-expanded="true"] + .panel{grid-template-rows:1fr}
    .panel > .panel-in{overflow:hidden}

    footer{padding-bottom:clamp(24px,3.2vw,38px)}
    .outbound{display:flex; flex-wrap:wrap; gap:10px 26px}
    .outbound a{font-size:13.5px; font-weight:600;
      border-bottom:1.5px solid var(--lime-60); padding-bottom:2px;
      transition:border-color 140ms ease}
    .outbound a:hover,.outbound a:focus-visible{border-color:var(--lime)}
    @media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---- work page: styles whatever Gutenberg outputs ---- */
    .wrap{max-width:940px}
    h1.page{font-family:'Archivo Black',system-ui,sans-serif; font-weight:400;
      font-size:clamp(2.6rem,7.5vw,5.6rem); line-height:.9; letter-spacing:-.04em;
      text-transform:uppercase; margin:0}

    .entry{margin-top:30px}
    .entry > *{max-width:64ch}
    .entry p{font-size:16px; line-height:1.72; margin:0 0 18px}
    .entry p.lede{font-size:clamp(1.05rem,1.55vw,1.3rem); line-height:1.55;
      font-weight:500; max-width:56ch; margin:0 0 8px}
    .entry h2{font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:500;
      font-size:12px; letter-spacing:.16em; text-transform:uppercase;
      color:var(--lime-80); margin:clamp(46px,5.5vw,68px) 0 20px;
      padding-top:20px; border-top:2px solid var(--lime); max-width:none}
    .entry h3{font-family:'Archivo',sans-serif; font-weight:700; font-size:17px;
      letter-spacing:-.01em; margin:26px 0 7px}
    .entry ul,.entry ol{margin:0 0 18px; padding-left:0; list-style:none}
    .entry li{font-size:16px; line-height:1.68; padding:11px 0 11px 26px;
      border-bottom:1px solid var(--lime-60); position:relative}
    .entry li:first-child{border-top:1px solid var(--lime-60)}
    .entry li::before{content:""; position:absolute; left:4px; top:1.03em;
      width:9px; height:2px; background:var(--lime-80)}
    .entry li strong{font-weight:700; display:inline}
    .entry a{border-bottom:1.5px solid var(--lime-60); padding-bottom:1px;
      font-weight:600; transition:border-color 140ms ease}
    .entry a:hover,.entry a:focus-visible{border-color:var(--lime)}
    .entry blockquote{margin:0 0 18px; padding-left:20px;
      border-left:2px solid var(--lime-60); font-style:italic}
    .entry img{max-width:100%; height:auto}

    .ridge-sm{width:150px; color:var(--lime-80)}
    .ridge-sm svg{width:100%; height:auto; display:block}


    /* ---- panel body: styles whatever Gutenberg emits ---- */
    .panel-body{padding:0 0 26px 34px; max-width:64ch}
    .panel-body > *:first-child{margin-top:0}
    .panel-body p{margin:0 0 16px; font-size:15.5px; line-height:1.68}
    .panel-body h3{font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:500;
      font-size:11px; letter-spacing:.14em; text-transform:uppercase;
      color:var(--lime-80); margin:26px 0 8px}
    /* a paragraph of links renders as a row of buttons-ish links */
    .panel-body p.links{display:flex; flex-wrap:wrap; gap:10px 24px; margin:0 0 4px}
    .panel-body p.links a{font-size:13.5px}
    /* lists render as stacked, ruled rows */
    .panel-body ul,.panel-body ol{margin:0 0 6px; padding:0; list-style:none}
    .panel-body li{margin:0}
    .panel-body li a{display:block; font-size:14.5px; line-height:1.4; padding:10px 0;
      border-bottom:1px solid var(--lime-60); transition:padding-left 140ms ease}
    .panel-body li:first-child a{border-top:1px solid var(--lime-60)}
    .panel-body li a:hover,.panel-body li a:focus-visible{padding-left:8px}
    .panel-body a{font-weight:600; border-bottom:1.5px solid var(--lime-60);
      padding-bottom:2px; transition:border-color 140ms ease}
    .panel-body li a{border-bottom:1px solid var(--lime-60); padding-bottom:10px}
    .panel-body a:hover,.panel-body a:focus-visible{border-color:var(--lime)}
    /* external-link glyph, added automatically */
    .panel-body a[target="_blank"]::after{content:""; display:inline-block;
      width:.62em; height:.62em; margin-left:.42em; vertical-align:baseline;
      background:currentColor;
      -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") no-repeat center/contain;
      mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") no-repeat center/contain;}
    @media (max-width:640px){ .panel-body{padding-left:0} }

    /* optional homepage intro, edited on the front page in Pages */
    .intro{max-width:52ch; margin:16px 0 0}
    .intro p{font-size:clamp(.95rem,1.25vw,1.05rem); font-weight:500;
      line-height:1.55; margin:0 0 12px; color:var(--lime)}
    .intro a{font-weight:600; border-bottom:1.5px solid var(--lime-60); padding-bottom:1px}
    .intro a:hover{border-color:var(--lime)}